![[object Object]](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/05/15033914/Master_Block_logo_icon.png)
Master Blocks
Feature Grid
Feature Grid block is a powerful and flexible tool for creating visually appealing grids of features on your WordPress website.
With its user-friendly interface and customization options, the Feature Grid block makes it easy to highlight multiple features in a clear and organized way. The block is fully responsive and can adapt to different screen sizes, providing a consistent user experience across devices.
Unlock a world of creative possibilities without spending a penny
. Experience the future of content creation with Master Blocks for Gutenberg Editor plugin!
Activate the Feature Grid block
Before you can enable the Feature Grid block, it's essential to have the Master Blocks plugin installed and activated on your WordPress website. This plugin offers a convenient modular control panel that makes it easy to turn on or off any block as per your preference.
To activate the Feature Grid block, navigate to Master Blocks > Blocks
. Then, toggle to enable the Feature Grid. After that, click on Save Settings.
![Feature Grid Block in Master Blocks plugin](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30052455/Feature-Grid-Block-in-Master-Blocks-plugin-1024x495.webp)
Setting up
To add the Feature Grid block, navigate to the top toolbar click the "+" button, search for the Feature Grid, and select it. Alternatively, navigate to the content area, click the "+" button, type in "Feature Grid" and select it. The Feature Grid block will be instantly added to your content field.
![Add feature grid in Gutenberg Editor](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30052758/Add-feature-grid-in-Gutenberg-Editor.webp)
Now add the feature icon, type the title and description, and add button text and URL. To add a new feature box, click on the Add Feature Box. You can add as many feature boxes as you want.
![Add feature grid content in editor](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30052908/Add-feature-grid-content-in-editor.webp)
The Feature Grid block offers great customization options. You can customize the Feature Grid block according to your requirements.
You can add new feature box, by just clicking on the + button of the feature grid block.
![Feature Grid add new option](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30094046/Feature-Grid-add-new-option.gif)
Primary
You can start customizing the Feature Grid block from the Primary tab.
From the Feature Grid section, you can change the number of columns. In addition, you can change the gap between the columns. Moreover, you can change the gap between the rows.
![Feature Grid Primary options](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30053125/Feature-Grid-Primary-options-1024x515.webp)
Style
Change the feature box design from the Feature Box section. You can choose feature box designs from two preset designs. Moreover, you can change feature box content alignment from the Content Align option.
![Feature Grid style and preset](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30053308/Feature-Grid-style-and-preset.webp)
Change the feature box icon from the Icon section. In addition, you can change icon color, background color, icon size, icon padding, and icon radius. Also, you can change the gap between the icon and the feature title.
![Feature Grid Icon style](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30053424/Feature-Grid-Icon-style.webp)
Change the feature title’s color, typography, text shadow, and HTML tag from the Title section. Also, you can change the gap between the feature title and the description.
![Feature Grid title style](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30053519/Feature-Grid-title-style.webp)
From the Description section, change the description’s color, typography, and text shadow. Also, you can change the gap between the description and the button using the Gap option.
![Feature Grid description style](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30053556/Feature-Grid-description-style.webp)
Change the button’s typography and text shadow from the Button section. In addition, you can change the button and its hover color, background type, and background color. Moreover, you can change the border type, border color, border width, border radius, box shadow, and padding. Furthermore, you can change the button icon and the gap between the button text and the icon. Also, you can change the button’s margin top.
![Feature grid border customization](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30053644/Feature-grid-border-customization.webp)
Advanced
From the Advanced section you can change the Feature Grid block’s margin and padding. Also, you can add CSS class to the Feature Grid block.
![Advanced option for Master Blocks](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/30034652/Advanced-option-for-Master-Blocks.webp)
Change the Feature Grid block and its hover transformation from the Transform section. You can change the Feature Grid block and its hover rotation, offset, scale, and skew. Also, you can flip the Feature Grid block horizontally and vertically.
![Button Transform effect](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053504/Button-Transform-effect.webp)
From the Background section, you can change the Feature Grid block and its hover background. You can change the background color and background type. Moreover, you can add an image to the background.
![Gutenberg Block Background cusotmization](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053507/Gutenberg-Block-Background-cusotmization.webp)
Add border to the Testimonial Slider block and its hover from the Border section. You can change the border type, border width, border color, border radius, and box shadow.
![Gutenberg Block Border Customization](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053509/Gutenberg-Block-Border-Customization.webp)
From the Animation section, you can add animaiton to the Testimonial Slider block. You can change the animation type. Moroever, you can change the animation duration and delay time.
![Gutenberg Block Animation customization](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053506/Gutenberg-Block-Animation-customization.webp)
Add mask to the Testimonial Slider from the Mask section. You can change mask shape, size, position, and repetation.
![Gutenberg Block Mask customization](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053512/Gutenberg-Block-Mask-customization.webp)
Change the Testimonial Slider block’s position from the Positioning section. You can change the Testimonial Slider block’s width and position.
![Gutenberg Block custom positioning](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053511/Gutenberg-Block-custom-positioning.webp)
You can hide the Testimonial Slider block on the desktop, tablet, and mobile from the Responsive section.
![Gutenberg Block responsive options](https://d1k2c27psfzbiv.cloudfront.net/wp-content/uploads/2023/06/28053514/Gutenberg-Block-responsive-options.webp)
Add additional CSS classes to the Feature Grid block from the Advanced section. That's all about this Feature Grid block.
Didn’t find what you were looking for? Get in touch!
Updated on September 30, 2023
Was this helpful to you?