---
title: "How to Add a Call to Action Banner in WordPress?"
url: https://nexterwp.com/docs/add-a-call-to-action-banner-in-wordpress/
date: 2024-12-06
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a call to action banner in WordPress? These banners not only improve the visual appeal of your site but also provide an engaging, interactive experience..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Call-to-Action-Banner-in-WordPress_-1024x519.jpg
word_count: 610
---

# How to Add a Call to Action Banner in WordPress?

## Key Takeaways

- Nexter Blocks offers a CTA Banner block that allows users to create call to action banners with multiple interactive styles.
- The CTA Banner block requires the PRO version of Nexter Blocks to be installed and activated.
- Users can select from four background hover effects: Blur Effect, Simple, Vertical, and Parallax.
- The CTA Banner block includes options to customize title, subtitle, description, and button styles.

Do you want to add a call to action banner in WordPress? These banners not only improve the visual appeal of your site but also provide an engaging, interactive experience for users, drawing attention to important content.

With the CTA Banner block from Nexter Blocks, you can create call to action banners with different interactive styles.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-cta-banner/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the CTA Banner block is activated, to verify this visit Nexter → Blocks → and Search for CTA Banner and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=pyAedbnLBRY

## How to activate the CTA Banner Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and** turn**** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-CTA-Banner-Activation.png)

## Key Features

- **Multiple Styles **- You can select from multiple pre-designed styles.

- **Multiple Background Hover Styles **- You can choose from multiple background hover styles.

- **Button** - You can easily add a button on the banner.

## How to Use the CTA Banner Block?

Add the CTA Banner block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/cta-banner-design-type-1024x188.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Style & Content

From the **Select Style** section, you can select a pre-defined style.

In the **Banner Image** section, you can add a background image to the banner.

Then, from the **Image Size** dropdown, you can set the image size.

In the **Title** field, you can add a title to the advertisement banner.

Then, in the **SubTitle** field, you can add a subtitle to the banner.

You can add a description to the banner from the **Description** section. 

From the **Hover Styles** dropdown, you can add different background hover effects to the banner. Here you’ll find four options -

- **Blur Effect** - This will add a blur effect to the background image on hover.

- **Simple** - This will not add any effect.

- **Vertical** - This will add a zoom or grow effect to the background image on hover.

- **Parallax** - This will add a 3d parallax effect to the background image on hover.

> *Note: The Hover Styles is not available for the Style 8.*

### Button

By enabling the **Button** toggle, you can add a button on the banner. When enabled, you’ll see different options to customize the button.

![](https://nexterwp.com/wp-content/uploads/2024/12/cta-banner-button-new.png)

From the **Style** section, you can select from different pre-defined styles for the button.

Then, from the **Button Text** field, you can edit the button text.

You can add a URL to the button and title from the **Button Link** field.

> *Note: For button Style 2 you’ll find an option to an icon to the button.*

## How to Style the CTA Banner Block?

You can style the CTA Banner block from the Style tab.

**Title **- From here, you can manage the title typography and color for normal and hover states.

![](https://nexterwp.com/wp-content/uploads/2024/12/cta-banner-style-new.png)

**Sub Title **- From here, you can manage the subtitle typography and color for normal and hover states.

**Description** - From here, you can manage the description typography and color for normal and hover states.

**Button **- You’ll see this option only when the Button toggle is enabled from the Layout tab. From here, you can manage the button style.

**Background **- From here, you can add background color, border radius and box shadow for normal and hover states on the background.

Advanced options remain common for all our blocks, you can explore all the options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the CTA Banner block isn't showing up?**
A: If the CTA Banner block isn't appearing, ensure that the Nexter Blocks plugin is installed and activated. This block is part of the PRO version of Nexter Blocks, so confirm that you have the correct version. Navigate to Nexter u2192 Blocks and search for the CTA Banner to activate it.

**Q: Can I use the CTA Banner block for promotional campaigns?**
A: The CTA Banner block is ideal for promotional campaigns as it allows you to create visually appealing banners that engage users. You can select from multiple pre-designed styles and customize the content, making it a versatile tool for drawing attention to important offers.

**Q: What are the best practices for styling the CTA Banner block?**
A: When styling the CTA Banner block, focus on typography and color to ensure readability and visual appeal. Use the Style tab to manage title, subtitle, and description typography. Additionally, consider using hover effects to enhance interactivity, but remember that some styles may not support hover effects.

**Q: How can I add a button to the CTA Banner?**
A: To add a button to the CTA Banner, enable the Button toggle in the block settings. This will reveal options to customize the button's style, text, and link. You can also add an icon for certain button styles, enhancing its visual impact.

**Q: What happens if I try to use the CTA Banner block without Gutenberg?**
A: The CTA Banner block requires the default WordPress Block editor (Gutenberg) to function. If you attempt to use it without Gutenberg, the block will not be available, as NexterWP is built exclusively for this editor.