---
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-04-14
author: "Aditya Sharma"
description: "Do you want to add info banners to your WordPress website? Info banners are a great way to display important information, announcements, or promotional offers. Adding these banners is an..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Info-Banner-in-WordPress_-1024x519.jpg
word_count: 511
---

# How to Add an Info Banner in WordPress?

## Key Takeaways

- Nexter Blocks Animated Service Boxes block creates info banners in WordPress and requires Nexter Blocks to be installed and activated.
- Info Banner style includes predefined styles, hover orientation set to top, bottom, left, or right, and optional Display Button and Icon/Image toggles.
- Service Boxes settings add title, subtitle, description, featured image, button text and URL, plus +Add Item, Image Size, Layout alignment and height, and Columns Manage for desktop, tablet, and mobile.

Do you want to add info banners to your WordPress website? Info banners are a great way to display important information, announcements, or promotional offers. Adding these banners is an effective way to grab your audience's attention and enhance the overall user experience.

With the Animated Service Boxes block from Nexter Blocks, you can create beautiful info banners in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Animated Service Boxes block,* *[click here](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/)

To do this, add the Animated Service Boxes block to the page and follow the steps - 

1. Select **Info Banner** from the **Main Style** section.

From the **Style** section, you can select a predefined style.

2. Then, from the **Hover Orientation** section, you can select the slide direction on hover. You can set the direction to top, bottom, left or right.

By enabling the **Display** **Button** toggle, you can add a button to the info banners.

When enabled, you can select a button style from the **Button Style** section.

By enabling the **Icon/Image** toggle, you can add an icon or image to the info banners.

3. Then in the **Service Boxes** section, you have to add the content for the info banners. By default, you’ll find three items, open one item.

4. You can add a title in the **Title** field. 

Then, from the **Select Icon** section, you can select the image type for the info banner. Here you’ll find three options - 

- **None** - This will not add any image to the info banner.

- **Font Awesome** – With this option, you can add a Font Awesome icon to the info banner.

- **Image** - With this option, you can add an image to the info banner.

Based on your selection, you’ll get different options to add the image type.

> *Note: Make sure the Image/Icon toggle is enabled to see the icon and image options.*

You can add a subtitle in the **Sub Title** field as required.

5. In the **Description **field, you can add a description that will show on the back slide.

6. Then in the **Featured Image** section, you have to add an image for the info banner.

You can edit the button text and URL from the **Button Text** and **Button Link **fields respectively. 

> *Note: Make sure the Display Button toggle is enabled to see the Button Text and Button Link fields.*

Following this process, you can edit the other items.

You can click on the **+Add Item** button to add more info banners.

You can select the image size from the **Image Size **dropdown.

Then from the **Layout** tab, you can manage the text alignment of the info banner content and you can also manage the info banner height as well.

Then from the **Columns Manage** tab, you can manage the number of items in a row for desktop, tablet and mobile separately. You can also manage the gap between the items as well.