Button Widget

The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.

Content

  1. Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger
  2. Text: Enter the button’s text
  3. 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
  4. Alignment: Align the button to the left, center, right, or justified in relation to its column.
  5. Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
  6. Icon: Select a FontAwesome icon to display on the button
  7. Icon Position: Set the icon to appear before or after the button text
  8. Icon Spacing: Adjust the amount of space between the icon and the button text
  9. Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events

Style

  1. Typography: Change the default typography options for the button’s text
  2. Text Shadow: Add a shadow and blur to the button's text
  3. Text Color: Select the color of the button’s text
  4. Background Color: Select the button’s background color for both Normal and Hover states
  5. Hover Animation: Click on the Hover tab to set a Hover Animation
  6. Border Type: Select the type of border to use around the button
  7. Width: Control the thickness of the border around the button
  8. Color: Choose the border’s color
  9. Border Radius: Set the border radius to control corner roundness
  10. Box Shadow: Set options to apply a box shadow on the button
  11. 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:

  1. Edit Button > Advanced > set CSS ID = My_Button
  2. Add to the page HTML widget (after the button will be fine)
  3. 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>
  4. Update page, preview, test

Advanced

Set the Advanced options that are applicable to this widget

How to Make a Download PDF Button

  1. Add a Text Editor widget
  2. Upload your PDF through the Text Editor Widget
  3. Publish the page
  4. Go to the live page and copy the URL link pointing to the PDF
  5. Now, in another page, add a Button widget and set the link to the URL 

Button Preset Sizes: Padding Defaults

Top, Left, Bottom, Right

  • Extra Small: 10px, 20px, 10px, 20px
  • Small: 12px, 24px, 12px, 24px
  • Medium: 15px, 30px, 15px, 30px
  • Large: 20px, 40px, 20px, 40px
  • Extra Large: 25px, 50px, 25px, 50px

Related Articles