Buttons Block

The Buttons block allows you to create button-style links that call attention to the most important action you want your visitors to take.

Add a buttons block

• Click the “Add block” button to open the block inserter pop-up window.
• In the Search bar, start typing in "buttons", or
• Choose the "Buttons" block from the options shown.

• Alternatively, you can type a forward slash on a new line followed by the word “buttons" and hit "Enter" to add one quickly.

Add more button blocks

• To add more buttons to the same row, click the "Add block" button within the Buttons block.

Block toolbar

Every block comes with unique toolbar icons and blocks-specific user controls that allow you to manipulate the block right in the editor. The Buttons block has a toolbar for the individual button and a toolbar for the entire block.

For the entire block

The main toolbar for the entire block has the following icons:

• Transform to
• Drag icon
• Move arrows
• Change items justification
• Change alignment
• Options

Transform to

Transforming to a Column block will let you display content in multiple columns, with blocks added to each columns. Transforming to a Group block will combine blocks into a group.

• Click on the "Transform to" button to convert the Buttons block into a "Group" or "Columns" block.

Drag icon

• Click and hold the rectangle with six dots, then drag to move the block to its new location (the blue separator line indicates where the block will be placed).
• Release the left mouse button when you find the new location to place the block.

Move arrows

• Click the up arrow to move the block up on the page; click the down arrow to move the block down on the page.

Change items justification

• Click the "Change items justification" icon to justify the buttons to the left, center, or right.
• Alternatively, select "Space between items" so the buttons in the block will be equally spaced out. 

Change alignment

Use the Change alignment tool to align the Buttons block. Choose one of the following options:

• None – leaves the block the current size.
• Wide width – increase the width of the block beyond the content size.
• Full width – extend the block to cover the full width of the screen.

Options

The Options button on a block toolbar gives you more features to customize the block. 

For individual button

The individual Button block toolbar is where you can customize the text, link, and style for this button.

If you select a specific button, a new toolbar will appear with these additional options from the block toolbar:

• Change block style
• Link
• Bold
• Italic
• More Rich Text controls
• Options

Change block style

Use this option to change the style of a particular button; you can select from Fill or Outline.

Link

Use the Link option to add a link to the button. It’s also possible to set the link to open in a new tab.

Bold

You can select the text in the Buttons block and use the Bold option or "Ctrl+B" / "Cmd+B" on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

You can select the text in the Buttons block and use the Italic option or "Ctrl+I" / "Cmd+I" on your keyboard to italicize it, which usually appears slanted to the right.

More rich text options

The drop-down menu to the right of the Bold and Italic options contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Options

The Options button on a block toolbar gives you more features to customize a specific button.

Block Settings

The block settings panel contains customization options specific to the block.

• To open the Block Settings menu, select the block and click the "Settings" icon next to the "Save" button in the upper right corner of the screen.

For the entire block

When the entire Buttons block is selected, you have the Layout, Dimensions, and Advanced settings for customization.

Layout

Within the Layout section, you can change two aspects of the buttons:

• Justification - align the buttons to the left, right, center, or have them equally spaced.
• Orientation - align the buttons horizontally or vertically within the space.

You can also allow the buttons to wrap to multiple lines if desired by moving the slider to the right to turn the feature on.

Dimensions

In the Dimensions section, you can adjust the Margin and set Block spacing.

• Margin - either enter a number into the Mixed box for the same margin to be applied to the top and bottom of the Buttons block, or click the link button to get the option to enter unique values for the top and for the bottom margin.
• Block spacing - customize the spacing between buttons.

For the individual button

When a specific button from the Buttons block is selected, you have the Styles, Width, Color, Typography, and Dimensions customization settings.

Styles

Use this Styles option to change the individual button style to either Fill or Outline. You can hover over a particular style to see how it looks.

Color

The Buttons block provides Color settings options to change the text color and background color, in either a solid or gradient scheme. This change will be applied to the entire button.

Border

Use this Border setting to change the radius or the sharpness of the corners on the button; you can either drag the slider to increase the radius for all four sides equally, or you can click on the link button to be able to customize the radius for each corner.

Width

In this section, you can control the the width of the button within the space. Each button can have its own Width setting inside the Buttons block based on a % value.

Typography

The Buttons block provides Typography settings to change the font size; you can either select from the options provided, or click the two horizontal lines icon to be able to enter a specific pixel size.

Dimensions

The Dimensions settings allows you to change padding around the button; you can either opt to have the same padding on all size of the button, or you can click on the link button to be able to enter specific padding values for the top and for the bottom.