Feature Grid

Showcase several features in an impressive layout with this Feature Grid block.

How To Add The Feature Grid Block #

1. 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. 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.