Feature Grid
Showcase several features in an impressive layout with this Feature Grid block.
Last updated
Showcase several features in an impressive layout with this Feature Grid block.
Last updated
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.
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.
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.
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.
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 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.
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.
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.
Under the Color Settings tab, color options are available for Title and Description.
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.
