Gutenberg Icon Box Block Tutorial

Introduction

Looking to add an icon box to your website using Gutenberg editor? Gutenberg Icon Box Block from Premium Blocks is here to help. This simple tool lets you easily include icons. It’s designed to be straightforward and user-friendly, so you don’t need any coding skills. We’ll walk you through each step, making sure it’s clear and easy for everyone to use.

Requirements

Before you start with Gutenberg Icon Box Block in WordPress, make sure the required plugin is installed and turned on.

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Icon Box Block?

Gutenberg Icon Box Block offers four unique variations, providing different layout options to suit various design needs. Variations in Gutenberg refer to preset configurations that allow you to quickly switch between different styles and structures for a block, ensuring flexibility and ease of use. With special options for responsive adjustments and detailed controls for tweaking the appearance, you can ensure the icon boxes look great on all devices. Additionally, it supports nested blocks, allowing you to add more elements such as:

You can easily add extra fields to the icon box if you need to add more inner blocks. Just click on the “+” icon and pick the type of field you want to include.

Gutenberg Icon Box blocks' four different variations.
Gutenberg Icon Box Block – Variations

General Settings

  • Content Alignment: Select the alignment of Gutenberg Icon Box Block’s content within the block.
Gutenberg Icon Box block layout settings.
Gutenberg Icon Box Block – General Settings

Container Style

  • Container Background Type: Options for ‘Normal’ and ‘Hover’ suggest you can set different background styles for the default state and hover state.
  • Container Box Shadow: Toggle and customize the shadow effect around the Icon Box
  • Container Border: Icons indicate the border style (solid, dotted, dashed, etc.).
  • Container Border Width: Input fields for top, right, bottom, and left allow for individual border width adjustments.
  • Container Border Color: A color picker to set the border color.
  • Container Border Radius: Input fields for each corner to set the border-radius, affecting how rounded the corners will be.
Gutenberg Icon Box block container style settings.

Conclusion

Gutenberg Icon Box Block Tutorial delivers a creative process for boosting your website’s presentation of services with a visual charm. Utilizing exclusive intricate with nested block structures, and modifiable layout and style parameters, the tutorial empowers you to construct Icon Boxes that capture interest and briefly communicate the value of your offerings.


Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Join Our Newsletter

Subscribe to our newsletter and be the first to know our latest updates!

Copyright © 2025 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks