Feature Grid

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

How To Add The Feature Grid Block

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