Add an Icon box in your website Gutenberg editor with icon and title.
1. How to add Icon Box Block? #
To add the Icon Box Block in your Gutenberg editor first click on (+) icon then in the search box type “Icon Box” and you will see the “Icon Box” block.
After inserting the “Icon Box” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.
- Presets: From our pre-defined presets you can select which style you like
- Icon/ Image: Select Media Type then media icon or image then the size of the icon and media alignments like Start, Center, and End.
- Title: You can Enable or Disable the Title, Add your own text, Title tag, and Title Alignment.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- Icon/image: You can set icon/ image spacing, Icon color, hover color, border color, padding, border style, and border radius. Also can set the icon default or hover background color, color type classic or gradient
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- BoxShadow: You can set box shadow for normal and hover styles.
- Hover Effect: Can set icon hover effect and background hover effect.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
5. Final Outcome #
Following these basic steps and more customizing, you can style your Icon Box block and your want and get your outcome.
