Gutenberg Icon Box Block Tutorial

Premium Icon Box Block for Gutenberg gives you the ability to introduce the services you provide in a smart way by adding an icon, title, and description. Also, of course, you can include a call to action.

Check Gutenberg Icon Box Block demo page from here.

Gutenberg Icon Box Block
Gutenberg Icon Box Block


Icon Box Gutenberg Block Support Nested Blocks

Icon Box block is Primary Block that allows other blocks within its field, it allows you nest blocks within it. you can insert Icon, Image, Heading, Text and button blocks in Icon Box Block.

  1. Icon Block: Switch on to enable icon for icon box block.
  2. Heading Block: Enable to show title for icon box block.
  3. Text Block: Display icon box block description by enabling it.
  4. Button Block: This option will show a button at bottom of icon box block.

Gutenberg Icon Box Block Display Options

  • Container: Set Colors, Backgrounds and spacing options to Icon Box container using responsive options..
  • Alignment: Align icon box block items to left, center or right.

Gutenberg Icon Box Block Icon Settings

  1. Icon Position: Set icon position: block or inline.
    1. Block: Display icon and rest of icon box items in one column.
    2. Inline: Display icon beside icon box items.
  2. Icon Type: Select icon or image to be shown in icon box block:
    1. Select Icon: Select icon from Fontawesome or WordPress dash libraries.
    2. Upload Image: Upload or select images from media library.

Gutenberg Icon Box Block Title Settings

  • Title Tag: Select icon box block title tag from H1 to H6.

Gutenberg Icon Box Block Button Settings

  1. Link: Assign link for icon box button.
  2. Open link in new tab: Enable to open link in a new tab.

Related Docs: