Editing buttons

Buttons prompt your visitors to take the desired action, for example, contact you or request more information. Most of the blocks in our Block library contain one or two buttons. There are two types of buttons: primary and secondary. 

You can discover lots of blocks with buttons in the Block Library.  You can also add a standalone Call to Action block between any blocks on your page to enable users to take action.

To edit the button, follow these steps:

  1. Add a block with a button. Click on the Add Block + button and choose the block that fits your website plan.
  2. Click on the button to customize it.

Editing button text

Here's how you can edit the button text:

1. Click inside the button and highlight the text you want to replace.

Screen_Shot_2021-05-17_at_12.51.58.png

2. Depending on the length of the text, the button will resize.

Note: if you add too much text inside the button, it will expand automatically or form a new row underneath another button. No need to worry, the effect will remain aesthetically pleasing as the design changes are automated. You may want to add a longer button to link to a downloadable file:

Screen_Shot_2021-05-17_at_12.57.01.png

Editing the button link

You can also change the destination where the visitor will appear after they click the button. Here's how you can do it:
1. Hover over a button to activate a menu. Click on the Link settings icon:

Screen_Shot_2021-05-17_at_13.11.49.png

 

2. The Link settings pane opens. First, choose what the button click action should be:

  • Open a page
  • Make a phone call
  • Send an email
  • Download a file
  • Scroll to a block
  • Open a web address

Pick one of these options in the dropdown menu:

Screen_Shot_2021-05-17_at_13.43.55.png

 

2. Check the options Open in a new tab and Add a nofollow tag (preselected by default)

3. Add a new button Title (text inside the button).

4. Once you are done editing your button, click Submit to apply the changes.   

5. To make the changes live, Publish the site. 

Changing the button color

You can change the color of your primary and secondary buttons with the preset color palette selector. Using this tool, you can modify your website color combinations in seconds. Each color palette consists of six complementing colors selected by professional designers for your particular template.

Here's how you can change the color of buttons using preset color palettes:

1. Navigate to the main menu and choose the Design... option:

Screen_Shot_2021-05-17_at_14.05.57.png

Alternatively, click Design in the upper horizontal menu of the Sitebuilder:

Screen_Shot_2021-05-17_at_14.07.00.png

2. In the Colors tab, scroll down the color palettes that were professionally curated for your template.

Screen_Shot_2021-05-17_at_14.08.31.png

3. Click on the palette that appeals to you and matches your own website images and brand colors.

To check how your buttons would look like, scroll to the block with buttons, and try different color combinations. 

You can also customize your color palettes.

5. Once you are happy with button colors, click Save and then Publish to make changes live.

Changing the button alignment

In blocks with two (primary and secondary) buttons, you can change the alignment of buttons. To customize, click on any of the buttons:

Screenshot_2021-06-02_at_15.36.02.png

Here you can choose the alignment of the buttons in the block:

  • Left
  • Right
  • Centered

Once you are happy with the alignment, click Publish to make the changes live.

To change the block content alignment, follow the steps in this tutorial.

Removing buttons from a page

Click the block settings icon to access the Block settings pane. Here's how you can remove one or both buttons:

Screenshot_2021-06-15_at_23.35.21.png

1. Decide which button (Primary or Secondary) you want to remove.  A checkmark will indicate that an element is currently displayed in the block.

2. To remove one of the buttons, uncheck the box next to it it. 
3. Click Save to apply the changes. On mobile, click the floppy disk icon in the top right corner.

Adding buttons on mobile

You can easily add a block with buttons using your mobile device.  

1. Tap on the area where you want to add a block with buttons, such as a call to action block, and choose the block you like from the Block Library.  

2. Tap on the button to trigger the link editing pane. 

3. In the Link settings menu, choose the actions you want the button to do: link to a block, to another page, a downloadable file, or to an external URL. Read this article for more information on link editing.

4. Tap the Submit and Publish button to make changes live. The Publish button looks like a rocket and is located in the top right corner of the mobile Sitebuilder.

Customizing button colors on mobile

You can change the color of your buttons by selecting a new color palette. You can do this in the following way:

1. Go to the Menu tab and tap the option Design from the drop-down menu. 

2. Choose one of the professionally created color palettes. 

3. Tap on the palette you like and click Save.

4. The color of your buttons and other visual elements will be updated throughout your website. 

Other helpful articles

Changing the Call to Action button

Customizing block settings

Embedding Online Store products with Buy Now button

Call to Action block

Was this article helpful?
0 out of 0 found this helpful