How to Build a CTA Section With Gutenberg & Elementor?

ABOUT THE AUTHOR

The girl who writes better than she talks. Web trends hunter, passionate traveler, Reese's lover.

Top 6 WordPress Brizy Themes (Free & Paid)
Prew post
  • Jun 18, 2021
  • 5 min read
  • 1,332

How to Build a CTA Section With Gutenberg & Elementor?

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

Call to Action WordPress 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.

add heading

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.

add paragraph

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.

add button to Call to Action WordPress Block

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.

Call to Action WordPress Block in Gutenberg

Banner Block by Getwid

Originally, Getwid is a free collection of 40+ 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 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 eye-catching call-to-actions. 

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 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:

  • Image size;
  • Text alignment (horizontal & vertical);
  • Block height & width

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

  • Overlay opacity; 
  • Text color;
  • Overlay color.

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:

  • Background type (image or video);
  • Image size;
  • Title of the banner;
  • Description;
  • Link to any page (internal or external).

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

  • Height & padding;
  • Animation effects (for images & text);
  • Text typography (separately for title & text);
  • Width (title & text);
  • Alignment;
  • Overlay capacity;
  • Color (title & text & overlay).

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:

  • simple minimalistic CTA buttons;
  • CTA with trigger phrases;
  • CTA buttons.

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.

10
Appreciate
How To Build a WordPress Mega Menu with Elementor + Gutenix?
Next post
Top 6 WordPress Brizy Themes (Free & Paid)
Prew post
How To Build a WordPress Mega Menu with Elementor + Gutenix?
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2021 Gutenix. All Rights Reserved.