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.
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.
The parameters in the General and Styling tabs are specific for this element
|General tab’s parameters|
|2. ACTION||You can read more about the ACTION parameter here.|
|3.TRACKING||This is a place to set up:|
|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.|
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 Product Add To Cart button element in the Shopify element category of PageFly. Read more here.