Table of Contents
The Header Info Gutenberg Block is a great way to display a list of items with icons.
1. How to add Header Info Block? #
To add the Header Info Block in your Gutenberg editor first click on (+) icon then in the search box type “Header Info” and you will see the “Header Info” block.
After inserting the “Header Info” block you will get the default look like below. Now you need to change the settings.
2. General Settings #
The General settings tab has an item add and content settings option. The General settings panel properties are as follows.
- Icon/ Image: Set Media Type if icon then select the icon, if image then selects the custom image.
- Items: You can add items and also can set individual icons for each item.
- Content: Set Horizontal or vertical style layout, alignment, icon alignment and icon position.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- List item: Set the typography, the gap between items normal and hover color, background, padding, and Border.
- Icon/ Image: You can set the Gap between the icon and label, normal and hover color, background, size, and dimension.
- Border: Set border normal and hover border style and border-radius.
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 the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
