Add buttons to a Components Editor page
When adding links, you may want to use buttons to make them appear more prominently on your page. This article explains the process of adding buttons and customising their appearance.
Note that this option is only available in the Components Editor. Adding buttons to old visual editor pages can be achieved using custom CSS styling.
-
Position your cursor where you want to add buttons.
-
In the left menu, select Add special features > Buttons.
-
The Add buttons pop-up appears:
-
Use the Buttons orientation drop-down to select whether buttons appear in a Vertical list, or a Horizontal row.
-
Use the Button size drop-down to choose how large you want the buttons to appear.
-
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.
-
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.
-
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? search box to choose a different icon:
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.
-
-
To change the order of your buttons, select the Up and Down arrows. To add a new button, select Add button, and to remove one, select Delete.
Tip: You can add a new button at either end of the existing list.
-
Select Add buttons.
-
When you've finished editing your page, select Publish.