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:
Configure your link settings for the Info Box:
Once you’ve selected your block and set your links, add any desired text to the Info Box:
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:
Adjust the hover settings for your container:
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 the font of your title. Change the markup, color, hover state:
Set the mobile and tablet fonts for your title:
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:
If you want, you can add a “Learn More” button that acts as your link:
Finally, add a shadow effect to your info box:
