PageFly - Button element

2507 views 1

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.

Where Button element located

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.

General tab configuration of Button element

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.

Settings

TextThe text to be displayed on the button. Button’s width will expand based on the length of this text.
ShapeMake your button either Rectangle or Rounded
StyleDefault: No border and have background color

Plain: No border and no background color

Outline: Border and no background color

Show IconEnable / Disable icon
Icon PositionThis variable is only available if Show Icon is enabled
ICON SETTINGS (only available if Show Icon is enabled)
IconPick 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.
ColorPick color for the icon
SizeAdjust the size of the icon. The best size of an icon is any number divisible by 7 (e.g. 14px, 21px, 28px, etc.)
Icon ShapePick the shape of the icon’s border (None, Square, Circle or Diamond)
DimensionsAdjust the dimensions of the icon’s border

Action

Go To URLInsert 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)

Tracking

Google AnalyticsFire the custom Google Analytics event name
Pixel EventSend 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)

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.

Was this helpful?