Blocks

Blocks »Button Block

Block Interface
Editing text and link
Alignment
Block Settings Panel
Styles
Color Settings
Advanced
Classic Editor
Custom Buttons

The Button Block allows you to add buttons linking to other pages on your site or to an external page.

Block Button Overview
Button block overview

In order to add a Button Block, click on the Block Inserter icon.

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

Button Block Add Typing

Detailed instructions on adding blocks can be found here.


Block Interface

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

Block Button Tool Bar
You can click on the block to reveal the toolbar.

↑ Table of Contents ↑

Once you add the block, you can click on the button to type a call to action text, and you can paste a URL of the page you’d like to redirect the users to. You can also format the text as bold, italics and strikethrough.


↑ Table of Contents ↑

Alignment

When you select your button block, a toolbar will appear. Three of the options are for the block’s alignment: right, center, and left. Choosing right or left will allow you to place another block alongside the button block. Choosing center will return the block to its default, taking up the full width of the post or 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.

Button Block Panel

↑ Table of Contents ↑

Styles

On the Styles tab, you can set the button border layout to rounded, outlined and squared

Block Button Styles Tab

↑ Table of Contents ↑

Color Settings

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

Block Button Color Settings Tab

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 ↑

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