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!


Video guide to buttons in Gutenberg


Step #1. Install the PublishPress Blocks plugin

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

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

Step #2. Create a post

Now let's create a new post to test the PublishPress Blocks plugin:

  • 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 PublishPress Blocks 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 PublishPress Blocks > 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

If you liked this feature, you find enjoy other PublishPress Blocks features including the accordion blockimage slider blocktestimonials display and count up block. If you want layouts, there's a Columns Manager to build your pages. You can also add lightboxes to galleries and videos.

I hope you liked this tutorial and enjoy using PublishPress Blocks. Thanks for reading!

Tags: Accordion Block, Button Block, Count Up Block, Gutenberg Blocks, Gutenberg Editor, Image Slider


Leave a Reply

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

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE