Studio Editor: Adding and Customizing Buttons

7 min read
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.
Examples of many button designs you can create in the Studio Editor
In this article, learn how to:

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).

To add a button:

  1. Click Add Elements  on the left side of the Editor.
  2. Click Button.
  3. Scroll through the designs and drag a Basic Button or Styled Button onto the page.
Need some inspiration?
Check out these button tutorials:

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:

  1. Select the relevant button.
  2. Choose what you want to customize:
A screenshot of a basic button with the Inspector panel design 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:

  1. Select the relevant button.
  2. Choose what you want to customize:
A screenshot of a styled button with the Inspector panel design options

Did this help?

|