--- 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-15 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 Pro se activa en Nexter > Blocks y usa el modo Info Banner para colocar la imagen detrás del texto con contenido a la izquierda o a la derecha. - Animated Service Boxes pide título, subtítulo, descripción y una imagen o icono para cada elemento, y permite elegir el Style del banner antes de publicar. - Animated Service Boxes usa imágenes como fondos CSS, no como etiquetas , por lo 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 seguir siendo legible. 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: The Animated Service Boxes block has to be enabled under Nexter > Blocks in your WordPress dashboard, and it is part of Nexter Blocks Pro. Each item in the banner uses a title, subtitle, description, and an image or icon plus a link. That setup matters because the banner is built from items, not a single static image, so the content structure needs to be ready before you start. **Q: How do I make an info banner with text over an image in WordPress?** A: Nexter Blocks Pro uses the Animated Service Boxes block for this layout. Set Main Style to Info Banner, fill in the item content, then choose the banner style and place the content on the left or right. The image sits behind the text as a CSS background, which is what gives it that overlay look instead of a standard image-and-text stack. **Q: Why is my info banner text hard to read over the image?** A: Contrast is usually the problem here. The page says text colour and background are set in the Style tab, and the Content Background panel can add a background colour behind the text. If the photo is still too busy, darken it before uploading so the banner keeps its message readable instead of letting the image overpower it. **Q: Why does my info banner image look cropped?** A: Info Banner uses background images that crop to fill instead of scaling like an tag. That means wide images can lose important edges if the subject sits too close to a side. The safer choice is a wider image with the main subject centered, because cropping keeps the banner full-width without breaking the layout. **Q: Can I use an info banner for decorative images only?** A: That is the better use case for this layout. The images are CSS backgrounds, not tags, so they carry no alt text and are not indexed as images. Nexter Blocks Pro therefore works best when the photo is decorative and the text carries the actual message, especially for banners where readability matters more than image SEO. **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 info-banner-left is the default class and info-banner-right appears when switched, so changing left or right moves where the content sits relative to the image. That matters when you want balance across different photos or need to keep important parts of an image unobstructed.