Gutenberg Icon Box Block Tutorial

Introduction

Looking to add icons 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 has 4 different skins, with special options for how these boxes adjust to fit any screen size and detailed controls for tweaking how they look and feel, you can make sure they look good on all devices & also support inner blocks. You have the option to add more fields, including various types such as:

  • Icon
  • Image
  • Text
  • Button
  • Container
  • Section

If you need to add more block, you can easily add extra fields to the icon box. Just click on the “+” icon and pick the type of field you want to include.

Gutenberg Icon Box Form General Settings
  • Content Alignment: Select the alignment of the Icon Box content within the block.
  • Container Style Settings
  • 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
  • Border: Icons indicate the style of the border (solid, dotted, dashed, etc.).
  • 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.
Gutenberg Icon Box Block - General Settings
Gutenberg Icon Box Block – General Settings

Premium Blocks Advanced Settings

The Advanced tab by Premium Blocks for the Gutenberg editor provides users with a suite of enhanced options to fine-tune the appearance and behavior of blocks within the editor. This tab offers advanced settings that go beyond basic layout and style customization, including custom CSS classes, attributes, and JavaScript actions. These settings enable more detailed control over the block’s functionality and can be crucial for developers or designers seeking to create a more tailored or interactive experience on their WordPress site. The options within this tab do not require a higher level of technical proficiency to be used effectively.


Conclusion

Gutenberg Icon Box Block Tutorial delivers an in-depth methodology for augmenting your website’s presentation of services, merging utility with visual allure. Utilizing exclusive block permutations, intricate nested block structures, and modifiable layout and style parameters, the tutorial empowers you to construct Icon Boxes that capture interest and succinctly communicate the merit of your offerings.
The responsive options within Premium Blocks facilitate seamless adaptation to various screen sizes, ensuring consistent performance and aesthetics across devices. The advanced settings enable precise control over elements such as margins, padding, animations, and visibility, granting developers and designers the tools for creating a bespoke user interface.

For creative guidance and to visualize the potential of these features, the tutorial suggests visiting the demo page. There, you can garner inspiration and initiate the creation of compelling Icon Boxes that amplify your website’s user engagement.

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.

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