---
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-03-31
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

- Utilizes the Animated Service Boxes block from Nexter Blocks to create info banners in WordPress.
- Enables the Display Button toggle to add customizable buttons to info banners, including text and URL options.
- Allows selection of image types for info banners, including Font Awesome icons and custom images, with layout management for different devices.

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.