Buttons are a great way to maintain a consistent feel across your site and provide clear calls to action. This article covers the standalone button element, buttons are also integrated into banners/sliders, box layouts, and form elements.
Adding a Button#
- 1Navigate to the page where you want the button
- 2Click the '+Add Element' icon in the page header bar
- 3Drag and drop the Button icon to your preferred location
- 4Hover over the button element and click the edit icon
- 5Set the button text, link, and styling, then click 'Apply'
Button Properties#
Size
Three sizes are available, small, medium, and large. Choose the size that best suits the button's placement and importance on the page.
Text and Links
Configure the visible button text, then link to an internal page, an external URL, or a downloadable file from the file manager.
Spacing and Alignment
Spacing follows a grid system for consistency across your site. The alignment setting controls where the button sits within its section, left, centre, or right.
Hover Animations
Choose from multiple hover animation styles to add interactivity. These subtle effects draw attention to the button when visitors move their cursor over it.
Event Tracking
Enable Google Analytics event tracking to measure button clicks. This is useful for tracking conversions on key calls to action.
Styling Your Button#
Buttons inherit your site's colour scheme by default. You can override this with custom colours through the Style Editor or the button's individual settings panel.
Deleting a Button#
Hover over the button and click the bin icon. For buttons embedded within other elements (banners, boxes, forms), remove the button text from that element's settings instead, deleting the parent element removes the button with it.
Use action-oriented text like 'Get a Quote', 'Book Now', or 'Learn More' rather than generic labels like 'Click Here'. Clear button text improves click-through rates and accessibility.