A post grid is a layout that arranges posts in a grid format. This is a popular way to display blog posts, as it allows for a lot of posts to be displayed in a small amount of space.
1. How to Add Post Grid Block #
To add the “Post Grid Block” click on the Gutenberg Editor block inserter plus icon(+) and then find Post Grid Box from the search option. Just click on the Block and it will be activated.
After selecting the block you need to fill up your desired text and configure the style.
2. General Settings #
The general settings tab has a layout preset, an icon/ image, a title, a description, and a button settings option. These panel settings are as bellows.
Query Settings:
- Post type: Select Post type.
- Include Only: you can add a specific posts by comma
- Exclude: You can exclude the post by comma
- Limit: Set a post limit on how many posts you want to display.
- Offset: You can skip no of posts by setting an offset.
- By Category: You can select posts by category.
- By Tags: You can select posts by Tags.
- Taxonomy Relation: You can set the relation between category and tags.
- Author: You can set posts by the author.
- Keyword: You can set posts by keywords
- Order By: Set the order by Date, Id, Author, Modified Date.
- Pagination: You can enable pagination and set a number of items per page.
- Layout Settings: You can enable Equal Height and the number of columns per row and column gap.
- Image: You can show or hide the image and then set the image size
- Title: Enable or disable title set title Heading Tag, Title limit type character or words then set the limit
- Excerpt: Enable or disable excerpt, set excerpt type and excerpt limit also excerpt indicators.
- Read More: You can enable or disable the Read More button, Set button text, Can enable the button icon, and set the icon, and icon size with a gap.
- Category: Can enable category name and can set category position.
- Meta: Enable meta and set meta position, select meta, set meta separator, enable meta icon and meta icon to text gap.
3. Styles Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, background, and other style settings.
Column Style
- Padding: Set the padding for the column.
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles and also can set border radius.
- BoxShadow: You can set box shadow for normal and hover styles.
Image Style
- Border Radius: You can set the border radius for the feature image.
- Margin: Set image margin
- Overlay: Set image overlay color
- Hover Effect: You can set the image hover effect.
Content Box Style
- Padding: You can set the padding for the full content box.
- Title Style: You can set Title Typography, color, hover color, and margin.
- Excerpt: You can set Excerpt Typography, color, hover color, and margin.
- Category Style: You can set Category Typography, alignment, column gap, row gap, color, hover color, wrapper margin, and padding, also background color and border.
- Meta Style: You can set Meta Typography, alignment, column gap, row gap, meta color, meta icon color, author color, and tag color.
- Button Style: You can set button Typography, Text color, Hover Text color, icon color, Hover icon color, and padding.
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles and also can set border radius.
- BoxShadow: You can set box shadow for normal and hover styles.
- Pagination: You can set Pagination Typography, Pagination Gap, Width, Height, Wrapper margin, Text and button background color with hover color also border style.
2. Advance Settings #
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles and also can set border radius.
- Shadow: You can set box shadow for normal and hover style.
