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

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

Start typing /buttons to add a buttons block

Detailed instructions on adding blocks can be found here.


Block Interface

Every block comes with a toolbar of block-specific controls that allow you to manipulate the block.

Buttons block toolbar

The Buttons block offers the following options in its toolbar:

  • Move left and right
  • Styles (more on that below)
  • Alignment (more on that below)
  • Link
  • Bold, Italics, and more text 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.

Adding a link to a button

↑ 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 entire Buttons block first and then align left, center, or right from the toolbar.

Selecting an individual button will only align the button within its small container.

How to center buttons on a page

↑ Table of Contents ↑

Block Settings Panel

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar click the ‘cog’ icon next to the Publish button.

The Buttons block has options on the right side of the editor

↑ Table of Contents ↑

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

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

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


↑ Table of Contents ↑

Advanced

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.

Pages: 1 2 View All

Not quite what you're looking for?

Get Help