With the Info Block, you can display images, text, and icons innovatively. This is perfect for letting your visitors understand the features of your products and services.
How To Add The Info Block Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Info Block or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get the below design-
%20(1).png?alt=media&token=3a83e329-09a5-4672-b44e-5ae02df60e9c)
How To Configure The Info Block #
To configure the content of your Info block, switch to the ‘Content’ tab.
Image/Icon #
Select Source: Choose an icon or an image to display in the block.
Select Position: You can display the icon/image above or below the title, at the left or right of the title, or at the left or right of the title and text.
With Source selected as icon following options will be available Icon Size, Icon Color, Icon Hover color.
You will also find options to customize the icon background here. Background Type, Color, Hover Color, Radius and Padding.
%20(1).png?alt=media&token=d7fa911a-3352-4a5d-a4df-aeefb2f1c3fe)
Background Options #
You can select a background image for the block from here.
Background Color: Select a color for the background of the block from here.
Opacity: You can set opacity from here for the block.
%20(1).png?alt=media&token=e2b178ce-48f9-4dfc-9304-0893737efda6)
Call to Action #
Type: Select to display the call to action as a text or a button or choose to hide it.
If you select the type as text, you will get the following controls to manage it-
- Text and Link for the text
- Option to open the link in a new tab
- Color options are available for Text.
If you select the type as Button, you will get the following controls to manage it-
- Text and Link for the button.
- Option to open the link in a new tab
- Color options are available for Text.
- Button Padding
- Horizontal Padding: Set padding to increase the width of the button.
- Vertical Padding: Set padding to increase the height of the button.
- Button BorderBorder Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.Border Width – Set a width for the border from here.Rounded Corners – You can give a border radius to the box from here.
- Color options are available for text, background, border, and hover elements respectively.
You can also add a link for the whole block by selecting type as Complete Box.
%20(1).png?alt=media&token=79bd5c20-a69a-4451-885c-602c4e72ac37)
How To Style The Info Block #
Switch to the ‘Style’ tab to customize every element of the Info block.
Spacing #
Specify space around the content by using Content Padding. Spacing tab offer options to customize the bottom spacing for Prefix, Title, Separator, and Description. There are also options to customize the Icon/Image responsive margin for Top, Bottom, Left, and Right.
%20(1).png?alt=media&token=b86b6f5c-eda3-4fd9-9d0b-39460f76df24)
Border #
Border Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
Border Width – Set a width for the border from here.
Border Color – You can give color to the border from here.
Border Radius – You can give a border radius to the box from here.
Box Shadow – You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
Box Shadow Hover– You can give box-shadow on hover to the block with a number of options available for customization such as color, blur, spread, position, etc.
%20(1).png?alt=media&token=0522fe8a-ddcf-44ef-8138-4538c1108729)
Separator #
Select Position: You can display the separator after icon/image, prefix, title, or description.
Separator Style – You can select the style of the separator as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
Separator Thickness – Set thickness for the separator from here.
Separator Width – Set a width for the separator from here.
Separator Color – You can give color to the separator from here.
%20(1).png?alt=media&token=f2827ec3-7596-40a0-99dc-b635c1b61d9c)
Typography #
Under this tab, options for font family, font size, font weight and line height are available for Call To Action, Title, and Description.
%20(1).png?alt=media&token=1ec44e63-69e0-46d3-9630-de920533878b)
Content #
Under this tab, you can hide or display the title, description, and prefix for the block and choose a font size, font weight, and color for them individually.
You can set the responsive font size of the Title for Mobile and Tablet view.
