--- title: "How to Add an Info Banner in WordPress?" url: https://nexterwp.com/docs/add-an-info-banner-in-wordpress/ date: 2024-12-12 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A banner has to carry its message over a photograph without either one winning. Info Banner puts the image behind the text and lets you set which side the content..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Info-Banner-in-WordPress_-1024x519.jpg word_count: 377 --- # How to Add an Info Banner in WordPress? ## Key Takeaways - Animated Service Boxes en Nexter Blocks Pro colocan la imagen detrás del texto y permiten elegir si el contenido va a la izquierda o a la derecha. - El bloque se activa en Nexter > Blocks y cada elemento requiere título, subtítulo, descripción, un icono o imagen y un enlace. - Las imágenes funcionan como fondos CSS, no como etiquetas , así que no tienen texto alternativo ni se indexan como imágenes; además, el contenido puede necesitar un fondo en la pestaña Style para mantener el contraste. A banner has to carry its message over a photograph without either one winning. Info Banner puts the image behind the text and lets you set which side the content sits on. *For every Animated Service Boxes setting in one place, see the [Animated Service Boxes block guide](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/) ## Before You Start - **Edition:** **Pro** — the Animated Service Boxes block is part of Nexter Blocks Pro.- **Block to enable:** Animated Service Boxes, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your items decided:** each one takes a title, a subtitle, a description, an icon or image and a link.- **Wide images** — they sit behind the text and are cropped to the banner. ## Steps - Add the **Animated Service Boxes** block and click **Design from Scratch**. - Set **Main Style** to **Info Banner**. ![The Main Style setting with all eight layouts](https://nexterwp.com/wp-content/uploads/2026/09/asb-main-style.webp) - Fill in your items — title, subtitle, description, and an image or icon for each. - Pick the **Style** for the banner. ![The Style setting](https://nexterwp.com/wp-content/uploads/2026/09/asb-banner.webp) - Choose which side the content sits on — left or right. - Publish and check the text is readable over every image. ## How It Behaves - **The image is a CSS background**, measured on all four banners, which is what lets the text sit over it cleanly.- **Orientation writes a class** — `info-banner-left` by default and `info-banner-right` when switched.- The banner fills the width it is given, so it works as a full-width section.- Text colour and background are set in the Style tab, which is where you fix contrast over a busy photograph. ## Limitations - **Pro only.**- **The images are CSS backgrounds, not `` tags.** They carry no alt text and are not indexed as images, so keep them decorative rather than informative.- Text over a photograph is a contrast risk. Use the content background in the Style tab to keep it readable.- Background images crop rather than scale, so the important part of the photograph should be central. ## Troubleshooting ### The text is hard to read Give the content a background colour in the **Content Background** panel on the Style tab, or darken the image before uploading. ### The image is cropped badly Backgrounds crop to fill. Use a wider image with the subject in the middle. ### The content is on the wrong side Switch the banner orientation between left and right. ## Related Docs - [Article box](https://nexterwp.com/docs/add-an-article-box-in-wordpress/)- [Background image on hover](https://nexterwp.com/docs/how-to-change-background-image-on-hover-in-wordpress/)- [Animated Service Boxes: all layouts](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding an info banner in WordPress?** A: Nexter Blocks Pro is the key requirement here, because the Animated Service Boxes block is part of Nexter Blocks Pro. The block also has to be enabled under Nexter > Blocks in your WordPress dashboard before it will show up. Each item in the banner needs a title, subtitle, description, and either an icon or image plus a link, so plan your content first instead of filling it in later. **Q: How do I make an info banner with text over an image in WordPress?** A: The Info Banner layout uses the image behind the text, which is what creates the banner effect. In Nexter Blocks, add the Animated Service Boxes block, start from scratch, set Main Style to Info Banner, fill in your items, then pick the banner style and choose whether the content sits on the left or right. That setup matters because the image is treated as a background, not a separate element. **Q: Why is my info banner text hard to read over the image?** A: Text readability usually comes down to contrast. The page says to add a content background colour in the Content Background panel on the Style tab, or darken the image before uploading it. That works because the image sits behind the text as a CSS background, so busy photos can easily overpower the copy unless you give the text area its own visual separation. **Q: Why is my info banner image getting cropped?** A: Background images crop to fill instead of scaling like an tag. That means wide images work best when the important part of the photo stays near the center. If the subject is too close to an edge, it can disappear when Nexter Blocks crops it into the banner shape. **Q: Can I use an info banner for decorative images that need alt text?** A: Info Banner uses CSS backgrounds rather than tags, so those images carry no alt text and are not indexed as images. That makes them better for decorative visuals than for content that depends on image SEO or accessibility text. If the image carries important meaning, this layout is not a good fit. **Q: What should I do if my info banner content appears on the wrong side?** A: The orientation setting controls that directly. The page says switching between left and right changes where the content sits, and it writes a class like info-banner-left by default or info-banner-right when switched. That makes this a layout choice rather than a content problem, so fixing it is usually just about flipping orientation instead of rebuilding the banner.