Showcase several features in an impressive layout with this Feature Grid block.
How To Add The Feature Grid Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Feature Grid block or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get 3 columns with image, title, description, and button field.
How To Configure The Feature Grid Block #
General #
Layout – Select layout for feature grid block from 2 different options available in this setting. The options available are basic and plain.
Columns – Decide the number of columns to display.
Alignment – Adjust the alignment of the text to left, right, or center.
Image – Toggle button to display/hide image.
Title – Toggle button to display/hide title.
Description – Toggle button to display/hide description.
Button – Toggle button to display/hide button.
Heading Tag – Select the HTML tag for heading as H1, H2, H3, H4, H5, H6, P.
Image Settings #
Shape – Select shape for the image from the multiple options available.
Size – Select size for the image from the multiple options available.
Width – Set the width of the image from here.
Button Settings #
Design – Select design for the button from the multiple options available.
Open link in new tab – Choose whether to open link in new tab.
Spacing Settings
- Horizontal Padding: Set padding to increase the width of the button.
- Vertical Padding: Set padding to increase the height of the button.
Border Settings
- 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 Radius – You can give a border radius to the box from here.
Color Settings – Color options are available for text, background, border, and hover elements respectively.
How To Style The Feature Grid Block #
Background #
Background Type – This option allows you to select the background type as color, gradient, or image. Depending on the background type selected you will get more customization options for the background.
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 several options available for customization such as color, blur, spread, position, etc.
Spacing #
The spacing tab offers options to customize the spacing for the block. You can set different values for desktop, tablet and mobile views.
Margin
- Image Bottom – Adjust the bottom margin of the image.
- Title Bottom – Adjust the bottom margin of the title.
- Description Bottom – Adjust the bottom margin of the description.
- Button Bottom – Adjust the bottom margin of the button.
Column Padding
- Top – Adjust the top padding of the feature grid block inner spacing.
- Bottom – Adjust the bottom padding of the feature grid block inner spacing.
- Left – Adjust the left padding of the feature grid block inner spacing.
- Right – Adjust the right padding of the feature grid block inner spacing.
Typography #
Under the Typography section, you can set typography options such as Font Family, Responsive Font Size, Font Weight, Line Height for Title, Description and Button.
Color Settings #
Under the Color Settings tab, color options are available for Title and Description.
Advanced Settings #
Padding
- Top – Adjust the top padding of the feature grid block.
- Bottom – Adjust the bottom padding of the feature grid block.
- Left – Adjust the left padding of the feature grid block.
- Right – Adjust the right padding of the feature grid block.
