Gutenix

How to Build a CTA Section With Gutenberg & Elementor?

Julia Minnie

Both experienced web developers, designers, or marketing specialists are aware of a “call to action”. CTAs (a short form for a call to action) can be any website content used for promoting & selling purposes. 

Each page of your website that sells something should have a Call to action WordPress block. From this article, you will learn how to create it correctly and where to place it so that it works effectively.

There are many ways of creating a CTA block, however, we are going to show you how to build one based on:

Customizing Call to Action WordPress Block

Cover Gutenberg Block

Make an engaging and attractive heading, which will be accompanied by a stylish image. However, try not to overload a Call to action WordPress block with too much information to prevent visitors from getting bored.

You are also able to add a paragraph with some text. Developing the entire website is difficult. Starting from the proper color scheme, continuing with picking a font that engages viewers. Still, there is a rule, which will solve any problems, if you feel the lack of ideas.

Keep it simple, stupid 🙂

Kelly Johnson, lead engineer at the Lockheed Skunk Works

Remember all the times you’ve ever stayed at the page and subscribed for something, and take a CTA that worked for you as an example.

Finally, let’s create a call to action WordPress button. According to the researches, green and yellow buttons are attracting more viewers. However, it can depend on your website’s design. Style your CTA button by choosing contrasting colors for button text and background.

The ability to add an inline image in your call to action button will be quite in handy if you want to apply some snazzy shapes.

Banner Block by Getwid

Originally, Getwid is a free collection of 40+ WordPress Gutenberg blocks for multipurpose use. If you are used to building websites in the default WP editor, you should definitely have this plugin in your arsenal.

The full list of Getwid WordPress blocks:

Learn more about each Getwid Gutenberg block down the link.

So how exactly does Getwid help you build a CTA section? The plugin offers us a Banner Gutenberg block suitable for creating a call-to-action section. It will work whether you want to run a makeup artist promo or display theater news, for example.

Let’s see how the Banner block actually works.

After you download and activate the Getwid plugin in your WordPress admin panel, you will see the additional Getwid Gutenberg Blocks set in the blocks library. Click the “+” sign and find the Banner block by its name.

This Getwid block allows you to insert both an image or a video, plus include any text content (title & subtitle). The banner itself will lead users to a certain page by the link.

In the General Settings, you can set up:

In the styling settings, you may adjust the following settings:

Besides content and styling, you may take advantage of the Getwid advanced settings. In particular, the Banner block lets you customize the block & text animation, include a link.

And that’s how you do CTAs with Gutenberg! Now, let’s figure out how call-to-actions are done in Elementor – the most popular WordPress page builder out there.

Banner Elementor Widget by Stratum

For the Elementor builder, we prepared another collection of Elementor widgets with a banner element inside. It goes for Stratum – a freemium addon with 24+ Elementor widgets meant for multipurpose use.

In fact, all Stratum Elementor Widgets are available for free at wordpress.org. The premium version adds a few extra functionalities on top.

The full list of Stratum widgets:

Now, let’s get straight to creating a CTA section with a help of the Stratum Banner widget.

After downloading the plugin, start editing your page in the Elementor builder. Find the Banner widget in the list of Stratum elements.

In the Content settings of this widget, you are able to set:

Next comes the Styling section. It has quite a bit of settings to offer:

On top of individual content & styling settings, each Stratum widget comes with a standard set of Advanced settings. To those ones, we may relate the motion effects, background, border, positioning, attributes, and more.

Conclusion:

Here is the last thing worth mentioning. Generally, there are three ways to make a call to action button, excellently work on your website:

Choose one of these approaches, or combine them, but always try to stay balanced.

All done! Now you know a little more about how to build an engaging Call to action WordPress block and customize it.