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

  • Background Type: Options for ‘Normal’ and ‘Hover’ suggest you can set different background styles for the default state and hover state.
  • Box Shadow: Toggle and customize the shadow effect around the Icon Box for the default state and hover state.
  • Border: Choose the style of border (solid, dotted, dashed, etc.) for the default state and hover state.
  • Border Width: Input fields for top, right, bottom, and left allow for individual border width adjustments.
  • Border Color: A color picker to set the border color.
  • Border Radius: Input fields for each corner to set the border-radius, affecting how rounded the corners will be.
  • Margin: Set the space outside the icon box container’s border, with separate controls for top, right, bottom, and left margin.
  • Padding: Adjust the space inside the icon box container’s border, with separate controls for top, right, bottom, and left padding.
Gutenberg Icon Box block container style settings.

Conclusion

In conclusion, the Gutenberg Icon Box Block Tutorial provides a creative and effective approach to enhancing the presentation of your website’s services. By leveraging advanced nested block structures along with flexible layout and styling options, this tutorial empowers you to build visually engaging Icon Boxes that capture attention and clearly communicate the value of your offerings.


Need Further Help?

Have a question or need assistance? Premium Blocks 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.