Icon Box Block Tutorial

Intro

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, description, and of course, you can include a call to action.

Gutenberg Icon Box Block has lots of customization options. You will have the opportunity to use it all for free! And now, before we jump deeply into each option, let’s have a look at the demo page from here.

Key Features

  • Display Options Switchers
  • Icon ( Type, Hover Effect, and Style )
  • Title Customization Options
  • Description Customization Options
  • Button’s Hover Effect and Customization Options
  • Icon Box’s Main Container Settings

1. Display Options Switchers

When you land to the backend of Gutenberg’s Icon Box Block, you will notice that you are totally free to choose whether if you want to enable or disable any of the following elements:

  1. Icon
  2. Title
  3. Description
  4. Button

2. Icon (Type, Hover Effect, and Style)

Icon comes as the first element in the Premium Icon Box Block. You will be able to customize it with the way you want as you will have the option to choose from Font Awesome icons list, WordPress Dashicons, or you can upload your own custom icons as images.

If you decided to use an icon from Font Awesome or WordPress Dashicons, you will have the option to select icon color.

Then, you can add a hover effect to your icon by choosing one from 6 hover effects included in Icon Box Block for Gutenberg.

  • Pulse
  • Rotate
  • 3D Rotate
  • Buzz
  • Drop Shadow
  • Wobble

And of course, you can select “None” if you don’t want to use any!

3. Title Customization Options

Premium Icon Box Block comes with a wide range of customization options for the main title as you will be able to control the following options:

  • Font
    • HTML Tag from H1 to H6
    • Font Size
    • Font Weight
    • Style
      • Normal
      • Italic
      • Uppercase
    • Letter Spacing
    • Line Height
  • Text Color
  • Text Shadow
    • Blur Value
    • Horizontal Position
    • Vertical Position
  • Spacing
    • Margin Top (PX)
    • Margin Bottom (PX)

4. Description Customization Options

  • Font
    • Font Size
    • Font Weight
    • Line Height
  • Text Color
  • Text Shadow
    • Blur Value
    • Horizontal Position
    • Vertical Position
  • Spacing
    • Margin Top (PX)
    • Margin Bottom (PX)

5. Button’s Hover Effect Customization Options

Call to actions can be counted as one of the most important elements in any website, for that reason, we have added a variety of customization options to make the button – which included Gutenberg Icon Box Block – stand out.

When you land to button settings, you will find the following options:

A. Hover Effect
  • Slide
    • Direction
      • Top to Bottom
      • Bottom to Top
      • Left to Right
      • Right to Left

Or, you can select “None” if you don’t want to use a hover effect for the button.

In addition, you will have the option to choose whether if you want to make the link be opened in a new tab or not.

B. Customization Options
  • Font
    • Font Size
    • Font Weight
    • Style
      • Normal
      • Italic
      • Uppercase
    • Letter Spacing
  • Colors
    • Text Color
    • Text Hover Color
    • Background Color
    • Background Hover Color
    • Border Hover Color
  • Border
    • Border Type
      • Solid
      • Double
      • Dotted
      • Dashed
      • Groove
    • Border Radius
  • Box Shadow
    • Shadow Color
    • Horizontal Position
    • Vertical Position
    • Blur Value
    • Position
      • Inset
      • Outline
  • Spacings
    • Padding (PX)
    • Margin Top (PX)
    • Margin Bottom (PX)

6. Icon Box’s Main Container Settings

Container customization options give you the ability to design the main look of your Icon Box Block for Gutenberg. Let’s see what’s included in those options:

  • Content Alignment
    • Left
    • Center
    • Right
  • Background
    • Color
    • Custom Image
      • Position
        • Top Left
        • Top Center
        • Top Right
        • Center Left
        • Center Center
        • Center Right
        • Bottom Left
        • Bottom Center
        • Bottom Right
      • Repeat
        • No Repeat
        • Repeat
        • Repeat Horizontally
        • Repeat Vertically
      • Size
        • Auto
        • Cover
        • Contain
      • Fixed Background (On/Off)
  • Border
    • Border Type
      • Solid
      • Double
      • Dotted
      • Dashed
      • Groove
  • Box Shadow
    • Shadow Color
    • Horizontal Position
    • Vertical Position
    • Blur Value
    • Position
      • Inset
      • Outline
  • Hover Box Shadow
    • Shadow Color
    • Horizontal Position
    • Vertical Position
    • Blur Value
    • Position
      • Inset
      • Outline
  • Spacings
    • Margin Top (PX)
    • Margin Right (PX)
    • Margin Bottom (PX)
    • Margin Left (PX)
    • Padding Top (PX)
    • Padding Right (PX)
    • Padding Bottom (PX)
    • Padding Left (PX)
Close Menu