Overview

This article will show you how to add the Button Widget to a page. A button can be responsive to hovering and includes images and text.

Instructions

1. Navigate to your desired page
   
2. Ensure that Live Edit Is On
   
   
3. Click View all widgets in the Content tab
   
4. Drag and drop the Button widget to your page
   
5. Fill in Content Options on the left-hand side
   
   
   • Default Text: Add default text
     • Hide Text: Select to force text not to appear on the button
     • Note: Text describing the button must be included for accessibility compliance.
   • Secondary Text: Add subtext
   • Link: Add a link
     • Open in a new window: Open the link in a new window
   • Outer Background Images: Will override those selected in the button's theme
     • Normal: Select an image asset for default display
     • Hover: Select an image asset for when a user hovers over the button
   • Inner Background Images: Will override those selected in the button's theme
     • Normal: Select an image asset for default display
     • Hover: Select an image asset for when a user hovers over the button
6. Select the Design tab
   
7. Fill in Design Options
   
   
   • Theme / Default: Select a theme and style
   • Section: Select a section to view
   • Normal / Hover: Configure options (color, gradient, image, border) for each image
   • Spacing Sizing: View and configure margin, padding, width x height
     • Force Square: Force this button to always display as a square
   • Advanced Styles: Add CSS code for different link styles (visited, hover, active)
8. View your button
9. Save your page