How to Create Call to Action in WordPress Gutenberg?

Many users were away from open source WordPress due to the dull classic editor interface. However, WordPress introduced Gutenberg block editor with version 5.0 which changed the entire WordPress landscape. Earlier, you need a heavy JavaScript based page builder plugins to create elements and layouts that are essential for any website. With Gutenberg, you can create beautiful blocks without any additional plugins. In this article, we will explain how to create call to action in WordPress using default Gutenberg blocks.

What is Call to Action?

Call to action or shortly CTA is a section or block on your webpage that tempt users to take an action. For example, below are some of the actions you may expect the readers to do while or after reading the article.

• Show some attractive offer to take the readers to your product page.
• Insert a subscription box for collecting emails from readers.
• Promote a product with affiliate links to sell someone’s product.
• Ask the users to participate in polls or surveys.
• Request readers to join your social network like Facebook Page.

Methods to Show CTA

There are many methods you can use to show the CTA box.

• Use top notification bar.
• Push notification for allowing instant content push in user’s browser.
• Pop-up box suitable for email collection.
• Place a CTA box in sidebar or footer section.
• Inline CTA box that blends with your content.

Out of all the above methods, we strongly recommend using inline CTA box. This helps you to blend the CTA box inside your content that can help you to get more click through rate.

How to Create Call to Action in WordPress?

WordPress has plugins for everything. You can choose one of the shortcode plugins to create CTA and other elements on your site. In addition, many commercial themes also offer in-built call to action shortcodes. However, it does not make sense to use additional plugin when you can create good looking CTA sections with core Gutenberg block editor.

Call to Action Elements

Unlike Classic editor, Gutenberg offers paragraph, media & text, columns, groups, buttons and many other blocks. You can make use of these blocks and create the custom CTA box for your need. Let us take an example of a call to action box you can use for showing your affiliate link with a coupon or deal:

• Contains three columns
• First column – an image
• Second column – text description
• Third column – one or two buttons

The final CTA block will something like below, you can customize the color and font size as per your need.

Create Call to Action in WordPress Gutenberg

Follow the below instructions, to create the CTA box.

Creating Columns

Insert a Column block and choose three equal size column (33 / 33/ 33) option.

• In first column, insert an image block and upload the image of the affiliate product/company. Below the image you can insert few words using paragraph block if needed.
• Inside the second column, insert a paragraph and add the description for your offer.
• On last column, insert one or two buttons and add links to affiliate links with some background colors.

It should look like below:

• Remember, instead of three columns block, you can use 70 / 30 column (that is 2/3 + 1/3 width) and use “Media + Text” in first column and buttons in second column.
• In addition, you can use transparent image as in the above example to blend with the bright background color.
• Use flat UI colors if you are not sure what colors to choose for buttons and later for background.
• Change the vertical alignment of the column elements as “Vertically Aligned Middle” to align the content of the columns in the center.

Assign Background Color

Now, on the block settings section on the sidebar click on the color settings for the group. Check and assign proper colors for the background for the column.

Similarly, click on each block inside the column and assign background and text color. At the end you can make the call to action block something like below by assigning colors. The transparent image will be visible when you assign a background color for columns block.

Creating Full Width or Wide Width

The columns block supports two type of width alignment. You can either choose the wide width or full width to align the call to action block on your site’s layout.

• Use wide width option when you have sidebar on the page.
• Try full width only if the page is having full width layout without any sidebar.
• If you

Remember, some themes do not support full width and wide width blocks. In this case, make sure not to assign any width property. This will help the columns block to take the container’s width and not overlapping with sidebar or main content’s padding/margin space. In addition, you can group the columns block and then assign wide or full width for the group. This may work properly on many themes to create wide width call to action box.

Reusing CTA Block

The beautiful part is that you can reuse the CTA box anywhere on your site. Select “Add to Reusable blocks” option from the block setting and create a reusable block. Type the name for your reusable block and save.

Now that you can insert the reusable block anywhere on your site by searching with the name you have provided. Below is the Gutenberg block code for the above call to action block. You can simply copy and paste of your site to create the block. Remember, to replace the image with your own, modify the text content and button links.

<!-- wp:columns {"verticalAlignment":"center","backgroundColor":"vivid-purple","textColor":"white"} -->
<div class="wp-block-columns are-vertically-aligned-center has-white-color has-vivid-purple-background-color has-text-color has-background"><!-- wp:column {"verticalAlignment":"center","width":25} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:image {"align":"center","id":51115,"sizeSlug":"large","className":"is-style-default"} -->
<div class="wp-block-image is-style-default"><figure class="aligncenter size-large"><img src="https://img.webnots.com/2020/10/Coupon-Image.png" alt="Coupon Image" class="wp-image-51115"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size"><strong>14 Days Pro Trail</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":50} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:paragraph -->
<p>Here is the text for your call to action box. You can change the color, number of columns and customize as per your need.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":25} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":3,"backgroundColor":"white","textColor":"black","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background" style="border-radius:3px"><strong>Get Deal</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"borderRadius":3,"style":{"color":{"background":"#faf400"}},"textColor":"white","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-background" style="border-radius:3px;background-color:#faf400" target="_blank" rel="noreferrer noopener"><strong>Read Review</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

CTA Box Variations with Gutenberg

The possibilities are infinite by mixing and matching various blocks, grouping them and assigning your favorite colors. Below are two more examples of call to action box.