Blocks

Blocks »Buttons Block

The Buttons block allows you to add buttons linking to other pages on your site or to an external page. It’s great for calling attention to the most important thing you want your visitors to do.

In order to add a Buttons block, click on the Block Inserter icon. Once you add your first button, you can type what you’d like the button to say.

Adding a Buttons block

Adding a buttons block
Adding a buttons block (Click to enlarge)

You can also type /buttons and hit enter in a new Paragraph block to add one quickly.

Adding a Buttons block with slash inserter
Add a Buttons block with slash inserter

For more, visit our detailed instructions on adding blocks.


↑ Table of Contents ↑

Block Interface

Every block has a toolbar of block-specific controls that lets you manipulate the block.

The parent Buttons block offers the following options in its toolbar:

Parent Buttons block toolbar
Parent Buttons block toolbar
  • Parent block selector
  • Drag block handle to change the block position
  • Move up and down
  • Change alignment between full and wide width
  • Change content justification (more on this below)

Individual Button blocks offers the following options in its toolbar:

Button block toolbar
Button block toolbar
  • Parent Buttons block selector
  • Drag block handle
  • Move left and right
  • Link
  • Styles (more on this below)
  • Bold, Italics, and more text formatting options

↑ Table of Contents ↑

Linking a Button

To add a link to your button, click on the Link option that shows in the toolbar. You will be able to paste your link or search the existing pages and posts of your site.

By default, links will open in the same tab unless you choose the option to set the link to open in a new tab.

Linking a button
Linking a button (Click to enlarge)

⚠️

Note that the link is added in the toolbar link option and not in the Block Settings. Link Rel controls the button link’s rel attribute, for adding nofollow amongst other things.


↑ Table of Contents ↑

Aligning Buttons

You can align the buttons to the left, center, or right of the page.

To change a button’s alignment, select the parent Buttons block first and then choose the Justify options.

You can select the parent Buttons block by clicking on the individual button, move the mouse on to the Change block type or style icon (the first icon on the toolbar of the individual button) and then Select parent (Buttons) icon that pops up.

Aligning buttons block
Aligning Buttons (Click to enlarge)

↑ Table of Contents ↑

Block Settings Panel

Every block has additional options in the editor sidebar, as well as the options found in the block toolbar. If you do not see the sidebar click the ‘gear’ icon next to the Publish button.

Buttons block settings toolbar
Buttons block settings toolbar

↑ Table of Contents ↑

Styles

Buttons block styles

In the Styles options, you can set the button to be filled with a color (Fill) or have a solid border (Outline).


↑ Table of Contents ↑

Color Settings

Buttons block color settings

You can choose the text and background colors for your buttons.

Select colors that will make the button stand out and make sure to find a nice contrast for readability purposes. Accessibility parameters are built into the new editor to warn you when the text may become illegible for persons with reading impairments.


↑ Table of Contents ↑

Border Radius

Buttons block border radius setting

The border radius option allows you to give your buttons a more rounded appearance. Setting this to 0 means the button has sharp edges.


Width settings

Buttons block width percentage

The width settings allow you to define the width of each button in percentage terms.

Changing buttons width
Changing buttons width (Click to enlarge)

↑ Table of Contents ↑

Advanced

Buttons block HTML anchor and Additional CSS classes settings

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

Pages: 1 2 View All

Not quite what you're looking for?

Get Help