In this article, you will learn more about PageFly’s button element and how to use it.
About Button element
The Button element is one of the fundamental element of any page, acts as a Call To Action for whatever goal you are trying to achieve on your page. You can use the Button element to redirect your visitor to any given URL, fire Google Analytics or Facebook pixel events, download a file, etc.
Button element comes with 10 button variations with different styling. But we will continue to add more variations to help you save time.
Drag a variation to layout and see how it can be configured.
Button element configuration
Button element comes with plenty of parameters allowing you to fine-tune content appearance reaching the best possible click-through rate for your Call To Action.
Select the element in layout to see its parameters.
The parameters in General tab are specific for this element.
The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.
|Text||The text to be displayed on the button. Button’s width will expand based on the length of this text.|
|Shape||Make your button either Rectangle or Rounded|
|Style||Default: No border and have background color
Plain: No border and no background color
Outline: Border and no background color
|Show Icon||Enable / Disable icon|
|Icon Position||This parameter is only available if Show Icon is enabled|
|ICON SETTINGS (only available if Show Icon is enabled)|
|Icon||Pick the icon you want to be displayed on the button from a set of icons. We are using FontAwesome icons, if you want to take an overlook you can access this link.|
|Color||Pick color for the icon|
|Size||Adjust the size of the icon. The best size of an icon is any number divisible by 7 (e.g. 14px, 21px, 28px, etc.)|
|Icon Shape||Pick the shape of the icon’s border (None, Square, Circle or Diamond)|
|Dimensions||Adjust the dimensions of the icon’s border|
|Go To URL||Insert an URL to the button. You can additionally assign 03 attributes including: “Top” (open the link in the full body of the window), “Self” (open the link in the same tab) or “New” (open the link in a new tab)|
|Google Analytics||Fire the custom Google Analytics event name|
|Pixel Event||Send predefined Facebook Pixel event (search, view content, add to cart, add to wishlist, initiate checkout, add payment inform, purchase, lead, complete registration, custom event)|
Tip: What if you want to link a button to your Shopify Product?
Sometimes you would want the button to function as an “add to cart” or “buy now” button. If this is the case then please use the Add To Cart button element of PageFly.