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. The primary button has a colorful background that matches the primary color in your site's color palette. The secondary button has a clear background. You can change the color of your buttons by changing your site color palette at any time.

Below we will review how to modify buttons.

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.

Assigning a click action to a button

As described above, you can set a button title, but next comes its click action. Click action is what your button actually does - for example, leads your site visitor to another page or triggers a phone call. Here's how to assign a click action to a button:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open. Here you can choose the button's Click action:
  • Open a page: this link will open a page on your website.
  • Make a phone call: this option allows visitors to make a phone call without leaving your website.
  • Send an email: this will allow your visitors to instantly send you messages.
  • Download a file: this link will allow a visitor to download a file.
  • Scroll to a block: this link will scroll to another block on the page.
  • Open a web address: this link would open an external URL.

    Screen_Shot_2021-05-17_at_13.43.55.png

    3. Depending on the option you chose, specify the page you want your visitors to go to, the site address, add a downloadable file etc.
    4. Add a new button Title (text inside the button) if needed.
    5. Once you are done editing your button, click Submit to apply the changes.   

Below we will review how various click actions work.

If you would like to add a link to an exiting page of your site, follow the steps below:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open.
  3. Choose Open a page in the Click action menu.
  4. Specify the Title: for example, you want to add a link to the Services page. Type in Services as the button title.
  5. Click Submit.

Make a phone call

Choose this option to allow users to make a phone call without leaving your website. Here is how to enable this option:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open.
  3. Choose Make a phone call in the Click action menu.
  4. Enter your phone number in an international format:
    userlmn_490460df9db4874a0d43c569939b29cb.png
  5. Specify the Title: for example, Call Us.
  6. Click Submit.

Send an email

When you enable this option, your visitors will be able to communicate with you without having to write down your email and leaving your website. Here is how to enable it:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open.
  3. Choose Send an email in the Click action menu.
  4. Enter your email address:
    userlmn_18345c48e2bf01a8792fa269a7b1fea1.png
  5. Specify the Title: for example, Send us an email.
  6. Click Submit.

To attach a downloadable file to your button, follow these steps:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open.
  3. Choose Download a file in the Click action menu.
    Screen_Shot_2020-02-16_at_20.18.20.png
  4. Click Choose a file and select a file on your computer. Click Open. The file will be added.
  5. Specify the Title: for example, Download our form here.
  6. Click Submit.

Scroll to a block

You can make a link to scroll to a block on your page, here is how:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open.
  3. Choose Scroll to a block option and pick a block from the drop-down list:
    Screen_Shot_2019-08-09_at_13.14.26.png
  4. Specify the Title: for example, Read About Us.
  5. Click Submit.

If you would like to link to an external website, follow these steps:

  1. Click on a button to activate the control panel. Click on the Link settings icon:

    Screen_Shot_2021-05-17_at_13.11.49.png

  2. The Link settings menu will open.
  3. Choose Open a web address in the Click action menu.
  4. On the external website, copy the URL of the page that you want to link.
  5. Paste the link in the Click action field.
  6. Specify the Title. It depends on where you link to, but you can use the external site name if not sure.
  7. Click Submit.

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

If you want to remove one or both buttons from a block, you can do so by going to the Block settings> Layout.

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

Screenshot_2021-06-15_at_23.35.21.png

To remove one of the buttons, uncheck the box next to it it. Click Save to apply the changes. 

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