In this article, you will learn about the Button element in PageFly and how to use it.
About Button element
The Button element is one of the fundamental element of any page, mostly 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, or download a file, etc.
Button element offers 10 design variations with diverse stylings. We will continue to add more variations in the future.
Let’s start by dragging and dropping a variation to the layout and see how it can be configured.
Button element settings
Button element comes with several variables, which lets you edit the display and achieve the best performance of the Call-To-Action.
To start, select the Button element in Editor layout to see its settings.
While the variables in General tab are specific for this element, the variables in Styling and Advanced tabs are common for all elements.
Read about variables in Styling and Advanced tab 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 variable 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, feel free to take a look here.|
|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 pre-defined Facebook Pixel event (search, view content, add to cart, add to wishlist, initiate checkout, add payment inform, purchase, lead, complete registration, custom event)|
Tip: How to link a button to your Shopify Product?
Last but not least, sometimes you would want the button to function as an “add to cart” or “buy now” button. If that’s the case, use the Add To Cart button element instead.