Info Box Block

The Info Box Block is a great way to show important information in the Gutenberg editor. You can have large, colorful icon displayed next to a large title and some text. This block allows you to use Google's Material Design icons.

How to add an Info Box block

Click the Info Box button in the Advanced Gutenberg category:

This next image shows how the Info Box will appear inside your WordPress editor:

Container settings for the Info Box block

These settings allow you to customize the background and border colors for your box, plus the border width and padding:

• Background Color
• Border Color
• Border Width (px)
• Border Radius (px)
• Padding (px, em, vh or %)

Icon settings for the Info Box block

These settings allow you to customize the large icon inside your block. There are dozens of icons to choose from. The block uses Google's Material Design icons.

These are the available settings for the icons:

• Icon Color
• Icon Size (px)
• Background Color
• Border Color
• Border Width (px)
• Border Radius (px)
• Padding (px, em, vh or %)
• Margin (px, em, vh or %)

Title settings for the Info Box block

These settings allow you to customize the large title inside your block.

• Title Color
• Font Size (px or em)
• Line Height (px or em)
• HTML Tag (H1, H2, H3, H4, H5, H6)
• Padding (px, em, vh or %)
• Margin (px, em, vh or %)

Text settings for the Info Box block

These settings allow you to customize the text inside your block.

• Text Color
• Font Size (px or em)
• Line Height (px or em)
• Padding (px, em, vh or %)
• Margin (px, em, vh or %)

Default settings for the Info Box block

You can set default options for every Info Box block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your Info Boxes.

• Go to Adv. Gutenberg in your WordPress admin menu.
• Click Configuration, then Default Blocks Config.
• Click Info Box.