Buttons block
What do web editors use a buttons block for?
Some layouts require having a call-to-action underneath or beside other elements. For this, you can use the button block. Adding multiple buttons will automatically space and arrange the buttons in to the section for you.
Which layout can button blocks be used in?
Button blocks can be used in any of the one to four column layouts. They can be placed on colour background and have colour accessibility built in. If you move blocks or change the background colour after a block has been place, remember to update the block to reset the accessibility colours.
Who can use button blocks?
Builders and Super Builder can create and edit CTA blocks.
Buttons block tutorial
Step-by-step instructions
- Choose “Buttons” in the add custom blocks menu.
- Title: This is an administrative title that will be used to identify the block and not displayed on the website.
- Header: The is an optional field to display a header above the button(s).
- Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
- You will have a choice of heading colours depending on the choice of background colour selected.
- Orientation: Th default will set the buttons to line up horizontal across the section but you can choose "Columns" if you want the buttons to line up vertically.
- Button: This is where you add the buttons. Style options will change depending on the background colour chosen.
- For internal links: start typing the name of the page or media item (pdf) in the URL field and select the page you want to link to.
- For external link: copy paste the external link.
- Type in the link description into the link text field.
- For external links or pdf files: click on attributes and select new window for the target.
- Click on "Add block" or "Update" to save the block.
Two column layout - Text block in the 70% and buttons in the 30%
Nullam sollicitudin congue urna, eu convallis metus facilisis a. Praesent non sagittis ante. Vivamus eget ligula eleifend, pretium arcu vitae, mollis nunc. Etiam risus lorem, iaculis eget mollis in, viverra volutpat ipsum. Curabitur non purus enim. Curabitur vestibulum enim quis augue interdum gravida ac nec arcu. Proin nec enim quis leo tempor bibendum. Aliquam suscipit blandit lacinia. Donec fringilla at nulla ac vestibulum. Integer feugiat ex sed leo luctus tincidunt. Praesent sollicitudin mollis eros, at vulputate orci vehicula sed.