PageFly - Button element

99 views Anh 0

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.

Where Button element located

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.

General tab configuration of Button element

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)

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.