1. Home
  2. Knowledge Base
  3. Block Tutorials
  4. Info Box Block

The Info Box block is a flexible way to display text and media content on your pages and posts within the block editor. You can configure it in many different ways, from creating a simple menu with icons and text, to an entire staff grid.

The first step in using the block is to select and place it where you’d like on the page:

Select Info Box Block

Configure your link settings for the Info Box:

Configure Info Box Link Settings

Once you’ve selected your block and set your links, add any desired text to the Info Box:

Edit Info Box Text

Edit your container settings. Container Settings define the design of your Info Box. This is where you can set the spacing, as well as background and hover effects for your block:

Configure Container

Adjust the hover settings for your container:

Container Hover Settings

The “Media” area allows you to set either an icon or image for your media box, as well as hover and animation settings for the media:

Customize Media

Customize the font of your title. Change the markup, color, hover state:

Set the mobile and tablet fonts for your title:

Tablet and Mobile Title Font Settings

Note that the title padding and margin settings can be linked or controlled individually:

Set the alignment for your Info Box text:

Configure your font and spacing for your Info Box text:

Adjust Text Settings

If you want, you can add a “Learn More” button that acts as your link:

Configure a Learn More Button

Finally, add a shadow effect to your info box:

Infobox Shadow

Was this article helpful?

Related Articles