How to Add a Call-to-Action Button to the Gutenberg Editor

Cta Buttons

A CTA Button (call-to-action) is essential for the health of your business.

A call-to-action is intended to drive the user to a specific action, to complete a conversion. This conversion can be many things, such as signing up to a newsletter, buying an product or redirecting the user to the paid area of the site. 

A good call-to-action meets certain requirements, including these:

  • The text should demand a specific action from the user.
  • The button should be highly visible. Some colors perform better than others. I've seen that green and orange perform often better than other colors.
  • The text inside the button should be no longer than 5 words.

In this tutorial, we are going to create a CTA button in the Gutenberg editor. Keep reading to learn how!


Step #1. Install the Advanced Gutenberg Plugin

First, we're going to install a plugin that has the block we need for this tutorial.

  • Click Plugins > Add New.
  • Type Advanced Gutenberg in the search box.
  • Click Install Now.
  • Click Activate.
200720 Adv Columns 001
200720 Adv Columns 001

Step #2. Create a Post

Now let's create a new post to test Advanced Gutenberg:

  • Click Posts > Add New.
  • Write a proper title.
  • Click the “+” icon to insert a block after the title or hit the “/” key.
  • Search and select the Group block.
200719 Adv Button 001
200719 Adv Button 001
  • Change the Background and text colors of the group on the right.
200719 Adv Button 002
200719 Adv Button 002
  • Click the “+” symbol inside the group and add a Heading 2 with “attractive” text, inciting the user to take an action.
200719 Adv Button 003
200719 Adv Button 003

Step #3. The Advanced Gutenberg Button

In this step, we'll create a block using the Advanced Button option:

200719 Adv Button 004
200719 Adv Button 004
  • Change the button text.
  • Select the text and make it bold.
  • Center the button.
200719 Adv Button 005
200719 Adv Button 005

Let’s take a look at the configuration options provided by the plugin for this particular button.

  • Click the styles tab on the right column.
  • Change the default button style to Squared outline.

Notice that you can override the default style for this particular button here.

  • Add a proper link.
  • Change the text color to a brighter one. 
  • Select a solid border with a width of 2px.
  • Select the same bright color for this border.
200719 Adv Button 006
200719 Adv Button 006
  • Add 2 more pixels padding everywhere (12px, 32px).
  • Leave the hover styles untouched.
200719 Adv Button 007
200719 Adv Button 007
  • Click Publish two times.
200719 Adv Button 008
200719 Adv Button 008

Now you have an elegant and nicely designed button for your site and it just took a couple clicks. Let’s take a look at the default options.


Step #4. The Advanced Button Default Options

These settings can apply to all the buttons on your site:

  • Click Advanced Gutenberg > Default Blocks Config.
  • Click the cogwheel beside Advanced Button.
  • Enter your own values, just play around with the options until you think your button looks nice.
  • Click Save to record the changes.
  • Close the overlay window.
200719 Adv Button 009
200719 Adv Button 009
200719 Adv Button 010
200719 Adv Button 010
200719 Adv Button 011
200719 Adv Button 011
  • Create a post and add an Advanced Button.
  • Change the button text.
  • Click Publish two times.
  • Click View Post.

Take a look at your customized button. This is useful if you want your buttons to look the same all across the web site.

200719 Adv Button 012
200719 Adv Button 012
200719 Adv Button 013
200719 Adv Button 013

I hope you liked this tutorial. Thanks for reading!


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress