Skip to content

Adding a Button

You get a clear call-to-action button that sends visitors where you want them to go. Use it to lead people to a sign-up form, a product page or a contact page.

Large green button labelled Register for Open Day on a landing page

Add a button

Open your page while logged in: the builder controls appear when you hover the content area. Your first page shows the basics.

  1. Hover the column and click + in its control bar, or click Add Elements on an empty page. Open the Content tab and click Button. It lands at the top of the column and its settings dialog opens.
  2. Replace the default text in Title with your button label.
  3. Enter the destination in Link, such as /contact or https://example.com.
  4. Choose a colour under Type. Here we pick Success.
  5. Choose the Size. Here we pick Large.
  6. Click Save in the dialog. Then click Save in the toolbar at the top of the content area to store the page.

What you see

A button with the label you typed appears at the top of the column. In the video, it is large and green and reads Register for Open Day. Links do not open while you edit. To test yours, save the page, choose Preview in the toolbar's view menu and click the button. Visitors see it once you save the page and it is published.

Set up your button

Hover the element and open More > Settings in its control bar. Options:

  • Title: the text on the button.
  • Link: where the button goes: a path on your site, such as /contact, or a full URL.
  • Link target: opens the link in the Same window or a New window. It shows once Link has a value.
  • Type: the colour style: Primary, Secondary, Success, Info, Warning, Danger, Link, Light or Dark.
  • Block button: stretches the button across the full width of the column.
  • Outline style: shows a coloured border and text with no fill. The Link type has no outline and always looks like a text link.
  • Size: Normal, Large or Small.

If you don't see it

  • Button is not in the Content tab. Your user profile hides it. Ask an administrator to enable it in User Profiles.
  • It is gone after you reload. The page was not saved. Add it again and click Save in the toolbar at the top of the content area.
  • A click leads to "page not found". The Link path is wrong. Paths on your site start with /, such as /contact. Hover the element and open More > Settings to fix it.
  • The button looks different from the video. Its look comes from Type, Outline style, Block button and Size. Hover the element and open More > Settings to check them.
  • The link opens in the same tab. Link target is Same window. Fill in Link first, then pick New window.

What's next?

Style tab to change spacing and background for your button.

Something wrong or missing on this page? Report it or edit the page.