Buttons are a great way to encourage visitors to engage with a site. In the Studio Editor, you can add buttons that show text, an icon or both. You have full control of the design and layout so you can create the exact look you need.
Adding a button
When adding a new button, you can choose a design from two categories:
- Basic Buttons: These buttons only display text and have a more "minimal" look.
- Styled Buttons: These buttons can display both text and icons, and offer advanced customization options (e.g., image backgrounds, color gradients and more).
Learn more about basic vs. styled buttons
Between basic and styled buttons, there are several differences you should note:
Supported Features
As opposed to basic buttons, styled buttons don't support the following actions:
- Copying the button's design to another element
- Getting content suggestions for the button text
Responsive Behavior
In smaller screen sizes, the two buttons show different responsive behavior.
Basic buttons auto-wrap the text:
While styled buttons display an ellipsis:
To add a button:
- Click Add Elements
on the left side of the editor. - Click Button.
- Scroll through the designs and drag a Basic Button or Styled Button onto the page.
Customizing basic buttons
After adding a basic button, change its text and choose where it links to. Once that's set up, you can start customizing the design – select a different fill color, add a shadow and adjust other settings like spacing and text formatting.
To customize a basic button:
- Select the button in your editor.
- Choose what you want to customize:
- Click Change Text.
- Enter your new text under Text.
Tip: Basic buttons don't have the option to show an icon, but you can enter symbols (e.g., X, +, >) to create a similar effect.
Buttons can lead to other parts of the site (e.g., pages, anchors, lightboxes), external web pages and even actions like sending your client an email or making a phone call to their number.
- Click the Link icon
. - Select a link type on the left.
- Add the relevant link information.
- Click Done.
You can tailor the design of a basic button for 2 different states: Regular or Hover. Change settings like the background color, border, or the shape of the button's corners.
- Click the Open Inspector icon
at the top right of the editor. 
- Scroll down to Design.
- Select the state you want to design: Regular or Hover.
- Design the button using the available options:
- Fill Color & Opacity: Change the button's background color and adjust its opacity.
- Border: Choose a color for the border, and set its opacity and width (in px*).
- Corners: Set the radius of the button's corners (in px*) to make them more round or square. You can set the same radius for all corners, or click the Unlock icon
to customize them separately. - Shadow: Add and customize a shadow to give the button a 3D effect.
- Text: Adjust the look and formatting of the button text.
- Spacing: Set the spacing between the text and the button's borders.
Adjust the button's layout
Change the button's alignment, positioning and spacing so the text and / or icon look exactly how you want.
- Click the Layout icon
. - Adjust the settings as needed:
- Direction: Select whether the button reads Left to right, or Right to left.
- Alignment: Align the text to the left, center or right of the button. You can set an indent on the text with the Left or Right options.
Customizing styled buttons
Styled buttons offer tons of customization options so you can design them down to the last detail. Change the text and icon to match the desired action, choose how the two should be arranged, set a gradient or an image as the background, and much more.
To customize a styled button:
- Select the relevant button.
- Choose what you want to customize:
Change the text and / or icon
- Click Settings.
- Select an option under Choose what displays, and change the settings:
- Text and icon: Use the Text field to change what it says, and click the Replace icon
to choose a different icon. - Text only: Edit the button text under Text.
- Icon only: Click the Replace icon to choose a different icon for the button. You can also add an accessible name to describe the button's function to visitors using assistive technologies.
Note: If you select Nothing under Choose what displays, the button is blank. You can still add an accessible name and link it to what you want.
Buttons can lead to other parts of the site (e.g. pages and anchors), external web pages, and actionable information such as your client's email address.
- Click the Link icon .
- Select a link type on the left.
- Add the relevant link information.
- Click Done.
You can tailor the design of a styled button for 2 different states: Regular or Hover. Change settings like the background, border, or the shape of the button's corners.
- Click the Open Inspector icon at the top right of the editor.
- Scroll down to Design.
- Select the relevant state: Regular or Hover.
- Customize the button using the available options:
- Background Fills: Choose a color, gradient or image for the button's background.
- Text: Adjust the font, formatting and spacing of the button text. You can also click Apply text shadow to add shadow to the text.
- Borders: Choose a color / gradient for the borders and set the thickness in px. You can apply the same design to all sides, or click the Unlock icon
to customize them separately. - Corners: Make the corners more round or square by changing the radius in px. You can set the same radius for all corners or click the Unlock icon
to customize them separately. - Shadows: Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc.
- Layout: Choose what to show on the button (text, icon or both) and how these should be arranged and aligned.
- Icon: Adjust the color, size and angle of the icon that appears on the button.
Adjust the button's layout
Change the button's alignment, positioning and spacing so the text and / or icon look exactly how you want.
- Click the Layout icon .
- Adjust any of the following settings:
- Choose what displays: Decide what is displayed on the button: Text and icon, Text only, Icon only, or Nothing.
- Icon position: When choosing to show both text and an icon, you can decide how to position them: side by side, or one below the other.
- Spacing between text and icon: When choosing to show both text and an icon, you can drag the slider to set the spacing between them (in px).
- Alignment: Align the text and icon to the left, center or right side of the button. You can also align them to both margins of the button, by clicking Justify
.
