Introduction #

While the Navigation bar at the top of a webpage provides access to the majority of pages, it is not the quickest for the new visitor to your site. For any visitor, the use of a Button will provide quick and intuitive access to a specific piece of information. Buttons can either appear individually, e.g. go to a specific page, e.g. welcome or group overview or by using a group of buttons, e.g. selecting a past Newsletter.

Adding a button #

On selecting Button from the block editor one button appears, together with the Button (child) Toolbar.

A single-button toolbar gives the following options from left to right:

• Select the parent Buttons block
• Button styles, either fill or outline, as shown below
• Drag block handle
• Move up (left) and down (right), only available if multiple buttons are present
• Change a button’s justification (left, centre, right, or equal space between)
• Change vertical alignment (top, middle, bottom, or stretch to fill). This is useful if one button has multiple lines of text.
• Change text alignment (left, centre, right)
• Add a link
• Bold, Italics, and more text formatting options
• More options, including deletion.

Linking #

The text and associated link can be added as follows:

• Add the required text
• Select the button, the toolbar will appear above it.
  • Select the Link icon in the toolbar.
  • Search for an existing page on your site or type/paste a URL.
  • Select Enter to confirm the link

It should be noted that a button only provides linking capabilities, it cannot currently be used to directly open a contact, which was a feature in Site Builder. If you wish to add this feature without adding CSS, you can link to the Contact us (not Contcat US) page which is included in the standard SiteWorks distribution.

Adding additional Buttons #

Adding additional buttons requires the selection of the parent block at the far left of the Toolbar, and then selecting +:

The Buttons Toolbar allows you to position the buttons as required, and modify the appearance of all buttons (text colour, font colour etc.).

Once the first row of buttons is entered, WordPress will move to the next row. If you have multiple buttons care should be taken with the layout, as the button width depends on the text length, unless you select Allow to wrap to multiple lines and define the button as a percentage of the page width using the option in the Button’s setting sidebar. In the example below, the width of all the buttons is set to 25%, and word wrap is selected.