--- 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-09-27 lang: en author: "Aditya Sharma" description: "A promotional banner has to do two things at once: look like part of the page, and still pull the eye to one action. The CTA Banner block pairs an..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Call-to-Action-Banner-in-WordPress_-1024x519.jpg word_count: 709 --- # How to Add a Call to Action Banner in WordPress? ## Key Takeaways - CTA Banner block combina una imagen con subtítulo, título, descripción y un botón opcional, y ofrece ocho disposiciones listas para usar. - Nexter Blocks Pro requiere activar CTA Banner en Nexter > Blocks dentro del panel de WordPress antes de usar el bloque. - Estilos 1 a 7 mantienen el mismo marcado y el mismo orden de contenido; solo cambia la posición del bloque de texto sobre la imagen. - Style 8 cambia a un diseño de tarjeta de producto, coloca la imagen como fondo, mueve el botón a una franja propia debajo y muestra el título antes del subtítulo. A promotional banner has to do two things at once: look like part of the page, and still pull the eye to one action. The CTA Banner block pairs an image with a subtitle, title, description and an optional button, and gives you eight ready-made arrangements of those pieces. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-cta-banner/) ## Before You Start - **Edition:** **Pro** — the CTA Banner block needs Nexter Blocks Pro.- **Block to enable:** CTA Banner, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Video Tutorial https://www.youtube.com/watch?v=pyAedbnLBRY ## Steps - Add the **CTA Banner** block to the page, then click **Design from Scratch** (or import a preset from [the template library](https://nexterwp.com/docs/import-templates-in-nexter/)). ![Enabling the CTA Banner block in Nexter > Blocks](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-CTA-Banner-Activation.webp) - Under **Layout > Style & Content**, pick one of the eight options in **Select Style**. ![The Select Style picker with eight banner styles](https://nexterwp.com/wp-content/uploads/2024/12/cta-banner-design-type.webp) - Choose your **Banner Image** and set a real alt text on it in the media library. - Fill in **Title**, **Sub Title** and **Description**. - On styles 1 to 7, set **Hover Style** to control how the image reacts to a pointer. ![Nexter Blocks editor, Cta Banner block, LAYOUT tab, Style Content panel open](https://nexterwp.com/wp-content/uploads/2026/09/rs-cta-banner-layout-style-content.webp) - To add a button, open the **Button** panel and switch on **Show Button** — then give it a URL. ![Nexter Blocks editor, Cta Banner block, LAYOUT tab, Button panel open](https://nexterwp.com/wp-content/uploads/2026/09/rs-cta-banner-layout-button.webp) > ***Show Button also turns the title into a link.** Measured on a published page: with the button off the title is plain text; switch it on and the title is wrapped in a link pointing at the button's own URL. If you leave that URL empty the title still becomes a link, to a literal # that goes nowhere — so set the button's URL, or leave the button off.* ## How It Behaves **Styles 1 to 7 are the same banner in seven positions.** Measured across all seven on published pages: the markup and the content order are identical every time, and the only thing that changes is where the text block sits on the image. | Style | Where the text sits | | ----- | ------------------- | | Style 1 | Top left | | Style 2 | Centre left | | Style 3 | Bottom left | | Style 4 | Top right, right-aligned | | Style 5 | Centre right, right-aligned | | Style 6 | Bottom right, right-aligned | | Style 7 | Centred | | Style 8 | A different layout altogether — see below | ![A published CTA banner with a background image, title, subtitle and description](https://nexterwp.com/wp-content/uploads/2026/09/ctab-fe-demo.webp) **Style 8 is not another position, it is a different card.** Measured: it drops the overlay arrangement for a product-box layout, paints the image as a background on the card as well, moves the button to its own strip underneath — and renders the **title above the subtitle**, the reverse of styles 1 to 7. Check your wording still reads correctly after switching to or from it. **Hover Style** offers Blur Effect, Simple, Vertical and Parallax, and starts on Vertical. It applies to the banner image on styles 1 to 7 only. ## Limitations - **Style 8 has no Hover Style.** The control is not offered when Style 8 is selected, and no hover effect is applied to the image — measured on a published page.- **On styles 1 to 7 the button and the title share one link.** You cannot point the title at one page and the button at another; switching the button on links the title to the button's URL. Style 8 keeps them separate — there the button is a link and the title is not.- The eight styles are fixed arrangements — text position is chosen from that list, not set freely.- If the banner image has no alt text, the block falls back to the literal words "Banner Image", so set alt text in the media library for anything that carries meaning. ## Troubleshooting ### My banner title became a clickable link and I didn't ask for one That is **Show Button** — on styles 1 to 7 it wraps the title in the button's link as well. Turn the button off if you only want plain text, or give the button a real URL. ### The title links to # and goes nowhere The button is on but its URL is empty. Open the **Button** panel and set a URL — the title uses the same one. ### I can't find the Hover Style setting You are on **Style 8**, which does not offer it. Switch to any of styles 1 to 7 and the control reappears under Layout > Style & Content. ### My subtitle and title swapped places You switched to or from **Style 8**, which renders the title first. Reword the two fields so they read correctly in that order, or move back to one of styles 1 to 7. ## Related Docs - [Flipbox](https://nexterwp.com/docs/add-a-flip-box-in-wordpress/)- [Animated Service Boxes](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/)- [Hover Card](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)