Elements: Buttons

Owned by Stephanie Momot (Unlicensed)
Last updated: Apr 06, 2021 by Michael Burpoe
2 min read

Buttons are one of four types of elements. Use buttons to create calls-to-action or help users navigate your website more efficiently.

Inserting Your Text and Link

Select into the button element to bring up your button sidebar menu. Change the link URL using the sidebar menu. You can change the button text either in the sidebar or on the Stage.

Tip: Always make sure to test the links on your site periodically to ensure there are no broken links on your site, as this negatively affects user experience and SEO ranking.

Style

Change the button size, style, and container alignment within the Style section.

Size - select a button size. These presets will automatically adjust based on the device used to view them. Adjust button presets by going to Design → Buttons in the main sidebar menu.

Style - choose between your button settings to determine the design and colors of your button. Update default colors by going to Design → Colors in the main sidebar menu.

Container Alignment - determines whether the button will be centered or left/right aligned within the button container. To alter the button container’s size, please refer to Spacing → Padding below.

Spacing

Control the button spacing by adjusting the padding or margin. Use these two options to create space between your button and the surrounding elements.

Padding refers to the space between the button and the total container size. If you have a dark background behind your button, this will increase the size of that dark background. You can also use the padding to adjust how far left and right your button moves when you align it left or right.

Margin refers to the space outside the container size. If you have a dark background behind your button, this will not increase the size of the background, but it will increase the white space between the button’s container and the next element on the page.

You can edit both the padding and margins individually for mobile, tablet, and desktop views. Adjust the top, bottom, left, and right side by incrementing numerically. The default interval is 10 pixels.

Advanced

Use the advanced settings to control the link and container classes for your button.