How to Use the Kadence Info Box Block

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.

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.

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

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

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.

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.

Sharing is caring!