Skip to content
Dotweb
Log in

Categories

Editing buttons

Change button text, color, alignment, and assign click actions like calls and links.

On this page

Buttons prompt your visitors to take a 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 how 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 color of your buttons 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 your 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.

    A button selected with its text highlighted for editing

  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 setting a button title, you can assign its click action. The 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: opens your website’s page.
  • Scroll to a block: scrolls to another block on the page.
  • Open a web address: opens an external URL.
  • Social media profile: opens your social media page.
  • WhatsApp message: opens a WhatsApp conversation.
  • Make a phone call: lets visitors make a phone call without leaving your website.
  • Send an email: lets your visitors instantly send you messages.
  • Download a file: lets visitors 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.

    The Edit link icon appearing when hovering over a button

    Alternatively, click the button to call out the extended control pane, which also contains the Link icon.

    The extended button control pane showing the Link icon

  2. Click the Link icon to open the Link settings. Choose the button’s desired Click action from the dropdown menu.

    The Link settings panel with the Click action dropdown open

  3. Depending on your chosen option, specify the page you want your visitors to go to, the site address, a downloadable file, and so on.

  4. Change your button Title (the 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 open with this action.

    Choosing which page opens from the Open a page dropdown menu

  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 the 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 the button is clicked.

    Selecting a target block for the Scroll to a block action

  3. Change the button title if needed.

  4. Click Submit to save.

Opening a web address

To link your button to an external website, 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.

    Pasting an external URL into the Click action field

  3. Check 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 you want to link and paste it into the Click action field.

    Pasting a social media URL 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 on 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 (opens in a new tab) link, copy it, and paste it into the Click action field.

    Pasting a WhatsApp click-to-chat link 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 it:

  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.

    Entering a phone number in international format for the call action

  3. Specify the title, for example, Call Us.

  4. Click Submit.

Sending an email

This option enables a mailto link, a link on a web page that points to an email address. When your website visitor clicks it, the default email client on their 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. Choose Send an email in the Click action menu.

  2. Type in your email address in the respective field.

    Entering an email address for the Send an email action

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

    Choosing a file to attach to the download button

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

    The button alignment icons in the control pane

Remember to click Publish to make the changes live.

Removing buttons from a page

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

Domain search

Prices exclude VAT, which is added at checkout.

Cookie settings

Choose what Dotweb may store in your browser. You can change your choice at any time under Cookie settings at the bottom of every page. Read more in our privacy policy.

Necessary

Always on

These keep the site working and remember the choices you make on it, such as language and currency. They don’t track you, so they’re always on.

NamePurposeDurationProvider
currencyCookieRemembers the currency prices are shown in.Session, or 1 year once you choose oneDotweb
localeCookieRemembers the language you chose.1 yearDotweb
consentCookieStores this choice.6 monthsDotweb
upm-brand-config:*Local storageCaches the domain search’s settings.Until clearedOur billing partner
upm_guest_sessionCookieSet by our checkout to keep your basket and checkout session.Up to 1 dayOur billing partner

Analytics

Analytics shows us which pages and features are used, so we can improve the site. We also record what you search for in the knowledge base and the domain search, to improve the site and our help articles. Sessions may also be recorded to see where pages are hard to use, with everything you type into forms and the text of your searches masked in the recording. Our analytics partner stores the data in the EU and anonymizes IP addresses. Nothing is set or sent unless you switch this on.

NamePurposeDurationProvider
ph_*Cookie, local storage and session storageAn anonymous ID and session, so we can see which pages and features are used.Up to 1 yearOur analytics partner (EU)