Articles on: Site editing
This article is also available in:

Changing the design of a button

To stick to the overall design of your site, we recommend to change the type and the layout of the buttons in the settings.

Follow the instructions below to change the design of a button.

You can also watch our short video tutorial:

Step 1. Changing the design of a button in the global settings

For that, click on the Site Style icon in the toolbar in the editor:

Navigate to the Buttons tab and select one of the ready-made options in the gallery:

If you want to customize the layout of the button yourself, hover over the current button style and click Edit:

In the new window, select the Primary or Secondary button type and click on the one you need to edit:

Tip: Here you can also change the font and formatting used for the text in the buttons:

After choosing the button type in the new window, you can change the color of the fill, text and borders of the button:

Important: Don't forget to customize the button design for a dark background separately:

After finalizing the design, click Done.

Step 2. Changing the style of the particular button

To change the design of a specific button on the site, click on it and click on the "gear" to access its settings:

Open the Style tab in a new window and select the needed type (Primary, Secondary, or Link), style and size of the button:

Tip: Choose the "Primary" button for a major call-to-action like "Sign up", etc. Use "Secondary" type of a button for a minor call-to-action, e.g., "View portfolio". Use "Link" buttons to show additional info — for instance, "Learn more".

In addition, you can add an icon to the button and also set its alignment:

Don't forget to publish your site for the changes to appear live.

Note: Decide what happens when a button is clicked by adding a link to it according to the instructions in the Adding links to elements article.

Updated on: 04/29/2024

Was this article helpful?

Share your feedback


Thank you!