Blocks » Buttons Block

Use the Buttons block to prompt visitors to take action with a button-style link. Your button can link to other pages on your site or an external page. It’s great for calling attention to the most important thing you want your visitors to do.

Table of Contents

1. Adding a Buttons Block
2. Block Toolbar
   1. Linking a Button
   2. Aligning Buttons
3. Block Settings Panel
   1. Styles
   2. Typography
   3. Border Radius
   4. Color Settings
   5. Padding Settings
   6. Width Settings
   7. Horizontal and Vertical Buttons
4. Advanced
5. Creating a Call-To-Action Button in the Classic Editor

Adding a Buttons Block

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 (Click to enlarge)

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

Add a Buttons block with slash inserter

For more, visit our detailed instructions on adding blocks.

---

↑ Table of Contents ↑

Block Toolbar

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

There are two levels to this block:

• The overall Buttons block contains your button(s). This is known as the parent block.
• The individual Button blocks within the parent Buttons block.

The parent Buttons block offer the following options in its 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)

The parent Buttons block toolbar

Individual Button blocks offers the following options in its 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

Individual Button blocks toolbar

---

Linking a Button

To add a link to your button, click on the Link icon that shows in the toolbar. The icon looks like an actual link you would find in a metal chain. 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 to set the link to open in a new tab.

Linking a button (Click to enlarge)

---

Aligning Buttons

You can align the buttons to the left, right, or center. First, make sure you select the parent Buttons block like so:

Then, select the alignment option from the toolbar:

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

You can also choose Space between items to add equal space between multiple buttons in the block automatically.

---

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

Styles

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

---

Typography

The Typography settings contain options to control the size of the text displayed on your button.

---

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.

---

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.

---

Padding Settings

Padding is empty space within the border of a block, which can bring clarity to your content and adjust the balance of the page’s layout. You can find the option to set up the padding of a specific button under the Dimensions section of your block’s sidebar settings. You can set up an uniformal value for all four borders or you can set up different values for the upper-down and sideways paddings.

Type a value in the padding settings to add the same padding around the four borders of your button.

If you click the unlink icon, you can add different padding values for the upper-down and lateral borders of your button.

---

Width Settings

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

Changing buttons width (Click to enlarge)

---

Horizontal and Vertical Buttons

When you first add multiple buttons to the parent Buttons block, they will be displayed horizontally. You can display the buttons vertically (i.e., stacked in a column) using the Transform to variation setting on the Buttons block.

Transform buttons

Aligning Buttons (Click to enlarge)

---

↑ Table of Contents ↑

Advanced

Link rel controls the button link’s rel attribute, for adding nofollow amongst other things.

The HTML anchor field can be used to create a page jump to your button.

Use Additional CSS class(es) to write custom CSS and style the block as you see fit. Learn more.

Versatile plans and pricing

• Free

  

  Best for students

• Personal

  

  Best for hobbyists

• Premium

  

  Best for freelancers

• Business

  

  Best for small businesses

Choose a plan

Pages: 1 2 View All