Display your content creatively informative box with an animated info box block
1. How to add Info Box Block #
To add the “Info Box Block” click on the Gutenberg Editor block inserter plus icon(+) and then find Info Box from the search option. Just click on the Block and it will be activated.
After selecting the block you need to fill up your desired text and configure the style.
2. General Settings #
The general settings tab has a layout preset, an icon/ image, a title, a description, and a button settings option. These panel settings are as bellows
- Presets: Select from a pre-defined preset which style you like.
- Icon/ Image: Select the media type like image/ image or none. If you select an image or icon Type then select the image or icon. Then set the size, position and alignment.
- Title: You can enable/ disable the title. Then set the title text and title Tag from H1 – H6. You can also enable the link for the title.
- Description: You can enable/ disable the description from here and also can set the alignment.
- Button: You can enable the button from this setting can set button type, button text, link URL, and link behavior.
3. Styles Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, 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
- Title: From these settings you can set title typography, color and margin.
- Description: You can set description typography, color, margin and content-box padding.
- Button: You can style the button set typography, text color, hover color, icon color, and icon hover color, Also can set the button background color, border size & color, box-shadow also transition time.
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 info Box block and your want and get your outcome.
