Button element

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 elements of any page. It 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, scroll to any section of current page, make a phone call, send an email, fire up Google Analytics or Facebook pixel events, download a file, and much more.

pagefly button element 1

The Button element comes with 4 button variations, each with different styling. 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

The Button element comes with plenty of parameters allowing you to fine-tune content appearance to reach the best possible click-through rate for your Call To Action.

Select the element in layout to see its parameters.

pagefly button element 2

The parameters in the General and Styling tabs are specific for this element

General tab’s parameters
1. CONTENT
  • Button Text: The text to be displayed on the button. Button’s width will expand based on the length of this text.
  • Show Icon: Enable / Disable icon
2. ACTION You can read more about the ACTION parameter here.
3.TRACKING This is a place to set up:

  • Google Analytics event to your GA account. You can find out how to set it up here.
  • Facebook Pixel when a customer clicks on the element. You can read more here.
4.ATTRIBUTES This is a parameter that all elements have. You can read more here.
5. VISIBILITY This is a parameter that all elements have. You can read more here.
6. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
You can choose to style for the button in Style Presets with 6 variants.

Aside from the below parameters, you can choose Button State for it, which contains 3 options: Normal, Hover, Selected.

1. OVERALL You can read about the OVERALL parameter here.
2. SPACING You can read about the SPACING parameter here.
3. TYPOGRAPHY You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND You can read about the BACKGROUND parameter here.
5. BORDER You can read about the BORDER parameter here.
6. DISPLAY You can read about the DISPLAY parameter here.
7. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

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 Product Add To Cart button element in the Shopify element category of PageFly. Read more here.

Was this helpful?

Start your free 14-day trial
of PageFly

.myshopify.com
Don’t have Shopify store yet? Create store
×