The Buttons block allows you to add buttons linking to other pages on your site or any external page/link. One of the frequent use of this block would be creating a CTA (Call to Action) button for your visitors.

Adding a Buttons Block

To add a Buttons block, click on the Block Inserter icon or “/buttons” slash inserter. After adding a button, you can call it what you would like to say.

Adding a Buttons block

For more, visit our detailed instructions from here.

Block Interface

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

The parent Buttons block provides the following options with it’s toolbar:

Buttons Block’s Toolbar

Individual Button blocks offers the following options with it’s toolbar:

Individual Button block toolbar

Linking a Button

To add a link to your button, click on the Link option that shows in the toolbar. Then paste your link or search the existing pages and posts of your site. You can also press (CTR/CMD+K) shortcut to open Link option.

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

Aligning Buttons

You can display the buttons either horizontally (in a row) or vertically (stacked in a column) using the Transform to variation setting on the Buttons block.

To implement any changes, select the parent Buttons selector by clicking on the Buttons symbol. Then you will get the Transform to variation settings on the right side editor-sidebar under the Block section.

You can also choose from the Justify options in the toolbar to align the buttons to the left, right, or center.

Buttons aligning and transformation

Block Settings Panel

Each 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.

Block settings panel


In the Styles options, you can set a Filled color button or Outline style button. You can also change the appearance direct from the popup selector instead of the right side Styles settings.

Block Buttons Styles settings

Color Settings

You can chose the Buttons background or text color from the pallet of the Color Settings

Buttons block Color Settings

Border settings

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

Buttons Border settings

Width settings

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

Buttons block Width 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.

Buttons block Advanced settings

Leave a Reply

Your email address will not be published.