Editing buttons

Buttons prompt your visitors to take the desired action, for example, contact you or request more information. Most of the blocks in the Block library contain one or two buttons.

Let’s learn to modify buttons.

Changing button color

There are two types of buttons: primary and secondary. The primary button has a colorful background, while the secondary button has a light background. 

You can change the button color by changing your site color palette to another pre-designed one from our vast color palette gallery. 

If you prefer to keep your current color palette and only change the button color in it, you can create a custom palette for your site. You might need to upgrade to the Yola Gold plan to access this feature.

Editing text on the button

Here’s how you can edit the button text:

1. Click the button and highlight the text you want to replace.
   
   
   
2. Type in the new text. Depending on the length of the text, the button will resize.

Assigning a click action to a button

After you can set a button title, you can assign its click action. Click action is what your button does. For example, it leads your site visitor to another page or triggers a phone call. Here’s the full list of click actions you can assign: 

• Open a page: This action opens your website’s page.
• Scroll to a block: This action scrolls to another block on the page.
• Open a web address: This action opens an external URL.
• Social media profile: This action opens your social media page.
• WhatsApp message: This action opens a WhatsApp conversation.
• Make a phone call: This option allows visitors to make a phone call without leaving your website.
• Send an email: This action allows your visitors to instantly send you messages.
• Download a file: This action allows visitors to download a file from your website.

To assign a click action to a button, follow these steps:

1. Hover over the button to activate the Edit link icon.
   Or you can click the button to call out the extended control pane, which also contains the Link icon.
   
   
   
2. Click the Link icon to open the Link settings. Choose the button’s desired Click action from the dropdown menu.
   
   
   
3. Depending on your chosen option, specify the page you want your visitors to go to, the site address, add a downloadable file, etc.
4. Change your button Title (text inside the button) if needed.
5. Click Submit to apply the changes.   

Below we review how various click actions work.

Adding a link to a website page

To add a link to an existing page of your site, follow these instructions:

1. In the Link settings, choose the Open a page option from the click action dropdown menu.
2. In the following dropdown menu, choose the page you want to be opened by this action.
   
   
3. Change the button title if needed.
4. Click Submit to save.

Scrolling to a block

Use the Scroll to a block click action to allow your visitors to jump to another place on your page by clicking the button.

1. In the Link settings, choose Scroll to a block click action from the dropdown menu. 
2. In the following dropdown menu, choose the block you want to jump to when clicking the button.
   
   
   
3. Change the button title if needed.
4. Click Submit to save.

Opening a web address

To link to an external website to your button, follow these steps:

1. In the Link settings, choose Open a web address in the click action dropdown menu.
2. Copy the URL of the page you want to link and paste it into the Click action field.
   
   
3. Check the Open in a new tab and Add a Nofollow tag if needed.
4. Specify the Title. It depends on where you link to, for example,  you can use the external site name.
5. Click Submit.

Adding a social media profile

Here’s how to add a social media link to the button: 

1. In the Link settings, choose Social media profile in the click action dropdown menu.
2. Copy the URL of the social page that you want to link and paste it into the Click action field.
   
   
3. Set the button title in the Title field.
4. Click Submit to save.

Sending a WhatsApp message

You can encourage your visitors to contact you via WhatsApp by setting up the WhatsApp message click action to the button. 

To do this, follow these steps: 

1.  In the Link settings, choose WhatsApp message in the click action dropdown menu.
2. Create your own WhatsApp click-to-chat link, copy it, and paste it into the Click action field.
   
   
3. Set the button title in the Title field. For example, Message Us.
4. Click Submit to save.

Making 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. In the Link settings, choose Make a phone call in the click action dropdown menu.
2. Enter your phone number in an international format.
   
   
3. Specify the title, for example, Call Us.
4. Click Submit.

Sending an email

This option enables the mailto link, a link on a web page that points to an email address. When your website visitor clicks on this mailto link, the default email client on the visitor’s computer opens, and they can send a message to the email address you specify without having to type it in.

 Here is how to enable it:

1. In the Link settings, Choose Send an email in the Click action menu.
2. Type in your email address in the respective field.
3. Name the button in the Title field, for example, Email Us.
4. Click Submit.

Linking to downloadable files

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

1. In the Link settings, choose Download a file in the Click action menu.
2. Click Choose a file, select a file on your computer, and click Open. The file will be added.
   
   
3. Specify the Title. For example, Download our form here.
4. Click Submit.

Changing the button alignment

You can change the alignment of buttons on your website. Here’s what you need to do: 

1. Click the button to call out its control pane.
2. Click the respective icons to choose the alignment of the buttons in the block: left, right, or centered.

Remember to click Publish to make the changes live. To change the block content alignment, follow the steps in this tutorial.

Removing buttons from a page

There are several ways to remove buttons from a block. Learn how to do this from our dedicated article.

We hope this guide helped you. If you’ve any questions left, please contact our Support Team. 

Ready to use your new knowledge? – Edit your site!