Button Widget
The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.
Content
- Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger
- Text: Enter the button’s text
- Link: Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link
- Alignment: Align the button to the left, center, right, or justified in relation to its column.
- Size: Select the preset button sizes, from Extra Small to Extra Large
- Icon: Select a FontAwesome icon to display on the button
- Icon Position: Set the icon to appear before or after the button text
- Icon Spacing: Adjust the amount of space between the icon and the button text
- Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events
Style
- Typography: Change the default typography options for the button’s text
- Text Color: Select the color of the button’s text
- Background Color: Select the button’s background color for both Normal and Hover states
- Hover Animation: Click on the Hover tab to set a Hover Animation
- Border Type: Select the type of border to use around the button
- Width: Control the thickness of the border around the button
- Color: Choose the border’s color
- Border Radius: Set the border radius to control corner roundness
- Box Shadow: Set options to apply a box shadow on the button
- Padding: Change the padding settings of the button
How to Track "Button onClick" Event (for Facebook Pixel, Google Analytics or Google Tag Manager)
Follow these steps to track button onClick events:
- Edit Button > Advanced > set CSS ID = My_Button
- Add to the page HTML widget (after the button will be fine)
- Paste the following code into the HTML Code field:
<script> document.addEventListener("DOMContentLoaded", function(event) { jQuery('#My_Button a').click(function(){ // tracking code here // for example Facebook Pixel: fbq('track','AddToCart'); }); }); </script>
- Update page, preview, test
How to Make a Download PDF Button
- Add a Text Editor widget
- Upload your PDF through the Text Editor Widget
- Publish the page
- Go to the live page and copy the URL link pointing to the PDF
- Now, in another page, add a Button widget and set the link to the URL