CTA Banner

CTA Banner

CTA Banner is inspired by on road big hording advertisements. By placing button on banner advertise placed on web page, lead can be captured with old fashioned marketing style.

Banners are mostly used on initial portion of web page. The first thing user will interact on web page load will be banner with CTA. So it is very useful for sales and marketing teams to advertise stuff.

Pro tip
Placing free signup buttons have significant effect on user engagement, according to google.

Configuration for CTA Banner

CTA Banner requires creative ideas to create an eye catching visual for users as everybody uses it. Don’t worry about the design stuff, we have managed it from our side. Just focus on the content and marketing strategies for user engagement.

How to use the CTA Banner Block of The Plus Addons For Gutenberg

The CTA Banner block comes in eight different styles. You can create a superior-looking layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add CTA Banner into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing CTA banner after “/” sign, eg.“/cta banner”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Style & Content

Select Style

Wide range of pre-designed style option are provided by us. Our universal research for banner design will help you to manage.

Banner Image

Choose an image to display as a banner background here.

Image Size

All image option which are suitable for banner images are provided here.

Title

You can set title text for the banner.

Subtitle

You can set subtitle text for the banner.

Description

You can set description for the banner.

Button

Show Button

Option to enable CTA or normally button.

Style

Attractive UI options for CTA button.

Button Text

An input for CTA button text.

Button Link

URL input for CTA button.

Icon Type

Icon type is a selection whether you want a none or font awesome.

Select Icon

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the Font Awesome icon library. If you have purchased license for pro plan and activation has been done then you’ll able to use pro icons too.

Icon Position

Place icon before or after the content.

Icon Spacing

Set spacing from the left edge for content.

Icon Size

Set size of icon from here.

Extra Options

Hover Style

Animation to be carried out for banner image on hover. We have provided different hover style like Blur, simple, vertical & parallax.

2. Style

The Style tab is used for customizing the appearance of all the CTA Banner Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Subtitle

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Description

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the description.

Top Space

An input to apply spacing from top for the description.

Bottom Space

An input to apply spacing from bottom for the description.

Button

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the button.

Button Above Space

An input to apply spacing from top for the button.

Button Bottom Space

An input to apply spacing from bottom for the button.

Padding

Put-in some inner space to an element.

Box Border

Draw a border around the button and give width and color to it.

Border Radius

Set the radius curve of the box’s corner.

Background

Apply suitable background like color/ gradient / image to the button.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Background

Background Overlay

Apply suitable background like color/ gradient to the banner.

Border Radius

Set the radius curve of the banner’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Button Background

Button Wrapper Background Color

A color picker to assign suitable color to the button.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
2.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 100%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.