The Kadence Info Box Block is a feature found in Kadence Blocks, a plugin for WordPress that adds additional blocks to the Gutenberg editor. This clickable box can be used to display icons or images, along with titles and descriptions. You can add animations and hover effects to make the boxes dynamic.

Graphic of a box with an I for info inside it, to illustrate a Kadence Info Box

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

This is an example of an info box.

Add the Kadence Info Box block to a post

To get started with the info box block, you have to install the Kadence Blocks plugin on your WordPress site. You can do this by going to your WordPress dashboard, then to ‘Plugins' > ‘Add New'. Search for ‘Kadence Blocks‘ and install and activate the plugin. Then go to the page or post where you want to add the box.

Click on the ‘+ Add Block' button in the Gutenberg editor. Search for ‘Info Box' in the block search or find it under the Kadence Blocks section. Click to add it to your page or post.

Customize the Kadence Info Box

Once the block is added, you will see options to customize it. You can click on the star icon and get a drop down to choose a different icon as well as change the icon's size.

Or, you can go to the style menu on the right hand side of your screen for even more options for the icon area, including using an image, a number or no icon.

1

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

In this example, I used a number for my icon, I gave it a background color of green, a border of blue and a border radius of 200. That made the icon a circle.

I used an image hover animation called “flip to another image”.

Title and Content

1

My Title has a Hover Effect

My text has a hover effect, too!

You can add a hover effect to your title and your text.

brown french bulldog wearing yellow shirtbrown short coated dog in orange hoodie

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

I used the InfoBox Quick Layout Presets to change to layout of my info box. It still has the image hover animation.

Color, Border and Shadow Settings

On the right side of the editor, you'll find additional settings for the block. This may include options for background color, border, and box shadow. These settings help you make your Info Box blend in or stand out from the rest of your content.

Linking Your Info Box

Under the General Settings tab, you can link the entire box or just the learn more text to another article or to an outside url.

Add learn more text and make it clickable.

Use the Learn More settings under the Style tab in the right hand menu

Responsive Settings:

Kadence Blocks often include responsive settings, allowing you to adjust how the Info Box looks on different devices (like mobiles and tablets). Check these settings to ensure your Info Box looks good across all devices.

Uses for the Kadence Info Box Block

The info box block can be used to highlight team members, featured services or to draw attention to featured products. In this example, taken from the Kadence website, the team members are featured in info boxes where the image hover animation has been set to “grayscale to color”.

The Kadence Info Box block is great for adding subtle animations to your site without adding a lot of code that can slow down your site.

Check out some of the custom info boxes that I created in my WP Designs Custom Design Library. These designs are created with bloggers in mind!

Choose a Category

Pain Brushes Inside Clear Plastic CupsClose-up Photo of Assorted Colored Chalks

Category 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Pain Brushes Inside Clear Plastic CupsClose-up Photo of Assorted Colored Chalks

Category 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Pain Brushes Inside Clear Plastic CupsClose-up Photo of Assorted Colored Chalks

Category 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo, accumsan sed rutrum vel, dapibus et leo.

Want to learn more?
This post has an accompanying video on my YouTube Channel!

Hey there!

I'm Diane Houghton and I've been working with WordPress for 20 years. I can code a website using HTML, CSS and PHP, but I'd rather drag and drop designs from my own custom Kadence Library.

I have built websites for dozens of small businesses, and now my focus is teaching WordPress to beginner bloggers.

Diane Houghton, owner at WP Basics Guide

Similar Posts