Skip to main content Skip to navigation

Add buttons to a SiteBuilder page

When adding a list of links, you can use the Buttons component to make them appear more prominently on your page.

Note: This option is only available in the Components Editor. Adding button-style links to old visual editor pages requires custom CSS styling.

  1. Browse to the page you want to add buttons to.

  2. Go to Edit > Edit centre content:

    The SiteBuilder 'Edit' menu, with the 'Edit centre content' option highlighted

  3. Position your cursor where you want to place the buttons.

  4. In the left menu, select Icons/buttons > Buttons.

    The 'Icons/buttons' menu with the 'Buttons' option highlighted

    Alternatively, select an existing Buttons component, then choose Settings in the component toolbar:

    The component toolbar on a Buttons component

  5. The Add buttons (or Update buttons) pop-up appears:

    The pop-up to add or edit buttons

  6. Use the Buttons orientation drop-down to select whether buttons appear in a Vertical list, or a Horizontal row.

  7. Use the Button size drop-down to choose how large you want the buttons to appear.

  8. To have the buttons appear on the Left, Centre, or Right of the container, select the appropriate option from the Buttons alignment drop-down.

    Note: If the buttons have been set to Stretch to full width of container, the Buttons alignment option has no effect.

  9. If the relevant checkboxes are selected, the buttons will be stretched to fill the width or height of their container.

    Note: The option to have buttons Stretch to full height of container is only available when the Buttons orientation is set to Vertical.

  10. For each button, you have the following options:

    • Set the Text you want to display on the button, and the URL you want the button to Link to.

      Tip: Buttons can link to other pages, or anchors within the same page page.

    • Optionally, use the Text alignment drop-down to choose where on the button text will appear. This may have a more noticeable effect on larger buttons, or buttons that have been stretched to fill the full width or height of their container.

    • If you want to apply any custom styles to a button, enter the class name in the Custom class(es) box. For more information about how to add custom styles to your page, see our HTML and CSS guidance.

    • You can Select an icon to appear alongside the text on each button. Use the Select icon button to open the Icons pop-up. Here, you can select a common file type icon from the list, or use the Need something else? box to search for a different icon:

      The 'Icons' pop-up to select which icon will appear on a button

      Select the icon you want to use from the options that appear, then Add icon.

    • Use the Icon position drop-down to set whether the icon appears at the Start or End of the button text.

    • Under Open link in, select the appropriate radio button to have the button's link open in the Same window or in a New window.

    • Use the Button style buttons to choose the appearance of each button.

  11. To add a new button, select Add button. To change the order of your existing buttons, select the Move button up and Move button down arrows. To remove a button one, select Delete button.

    Tip: You can add a new button at either end of the existing list.

  12. Select Add buttons (or Update buttons).

  13. When you've finished editing your page, select Publish.

Related articles