How do you edit buttons in Loopia Sitebuilder – colour, text, click action and alignment?

Buttons prompt visitors to take the action you want, such as contacting you or requesting more information. Most blocks in the Block library contain one or two buttons, and you can change each button’s colour, text, click action and alignment.

Changing button colour

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

You can change your buttons’ colour by switching to a different predefined colour palette. If you’d rather keep your current palette and only change the button colour, you can create a custom palette for your site – this may require Sitebuilder Large.

Editing the button text

  1. Click the button and select the text you want to replace.
  2. Type the new text. The button resizes to fit the length of the text.

Assigning a click action to a button

A click action is what the button does – for example, taking the visitor to another page or starting a call. The available click actions are:

  • Open a page: opens a page on your site.
  • 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 call you without leaving your site.
  • Send an email: lets visitors quickly email you.
  • Download a file: lets visitors download a file from your site.

To assign a click action:

  1. Hover over the button to show the Edit link icon, or click the button to open the extended control panel, which also has the Link icon.
  2. Click the Link icon to open Link settings and choose the Click action from the dropdown.
  3. Depending on the option, choose the page, enter the web address, add a downloadable file and so on.
  4. Change the Title (the text on the button) if needed.
  5. Click Submit to apply the changes.

How each click action works

Linking to a page on your site

Choose Open a page, then choose the page to open from the next dropdown. Change the title if needed and click Submit.

Scrolling to a block

Choose Scroll to a block to let visitors jump to another part of the page, then choose which block to show when the button is clicked. Change the title if needed and click Submit.

Opening a web address

  1. Choose Open a web address.
  2. Paste the URL of the page you want to link to into the Click action field.
  3. Tick Open in new tab and Add a nofollow tag if needed.
  4. Enter a Title – the name of the external site works well – and click Submit.

Adding a social media profile

Choose Social media profile, paste the URL of your social media page into the Click action field, enter the button title and click Submit.

Sending a WhatsApp message

Choose WhatsApp message, create your own WhatsApp click-to-chat link and paste it into the Click action field. Enter a title such as “Send a message” and click Submit.

Making a phone call

Choose Make a phone call, enter your phone number in international format, add a title such as “Call us” and click Submit.

Sending an email

This option creates a mailto link. When a visitor clicks it, their default email client opens so they can message the address you set without typing it. Choose Send an email, enter your email address, name the button (for example Email us) and click Submit.

Linking to downloadable files

Choose Download a file, click Choose a file, select a file on your computer and click Open. Enter a title such as Download our form here and click Submit.

Changing button alignment

  1. Click the button to activate its control panel.
  2. Click the matching icon to align the buttons in the block left, right or centre.

Remember to click Publish to make the changes visible.

To remove buttons from a block, see the separate article on removing a button from a block.

Was this article helpful?

Related Articles