Post Grid Block Tutorial - Free Blocks for Gutenberg Editor

Introduction

This tutorial will take you on a transformative journey to elevate your WordPress site by mastering Gutenberg Post Grid Block, a highlight from the Premium Blocks for Gutenberg collection. Learn to create stunning responsive grid layouts that enhance both the style and functionality of your post grid, perfect for displaying blog posts, portfolio items, or any type of custom post. With the Gutenberg Post Grid Block, you gain access to a world of customization and flexibility unlike any other.

We’ll explore the depths of post grid styling, teaching you how to adjust columns, implement responsive layouts, and infuse unique styles that make your content pop. Launch with us to fully unleash the power of your website’s content display, utilizing the sophisticated features offered by Premium Blocks for Gutenberg.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Post Grid Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Post Grid Block to your Gutenberg editor. From there, you can easily customize your post layouts easily.

Gutenberg Post Grid Block General Settings

Number of Columns: Select how many columns per row.
Posts Per Page: Select how many posts to show per page.
Equal Height: Enable this option to make all posts the same height.
Post Type: Select the source of the posts, you can select a custom post type.
Categories Filter Rule: Show or exclude posts that match specific categories.
Author Filter Rule: Show or exclude posts that match specific author.
Author Filter: Show the posts that match specific authors or exclude them.
Filter By Post Rule: Select posts to show or exclude them.
Order By: You can choose to order the blog posts.
Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information, please check this article.
Offset: Exclude a number of initial posts from being displayed.
Exclude Current Post: Remove the current post from the query.
If Posts Not Found Display Message: The message to be displayed when posts are not found.

Gutenberg Post Grid Featured Image Settings

Show Featured Image: Show or hide the featured image for the posts.
Image Size: Set the featured image sizes.
Hover Effect: Set a hover effect for the featured image.
Height: Select the height of the featured images.
Thumbnail Fit: Select between cover, fill and contain.
Shape Divider: Graphic shapes that separate between post blog featured image and post blog content.

Gutenberg Post Grid Featured Image options — Gutenberg Post Grid – Featured Image

Gutenberg Post Grid Display Options

Title HTML Tag: Select the HTML tag used for the post title. Choose from H1 to H6.
Show Author Image: Show/hide author image in cards Variation.
Author Image Position: Set image position vertically.
Rows Spacing: Adjust the spacing between the rows in pixels, % or em.
Rows Spacing: Adjust the spacing between the rows in pixels, % or em.
Columns Spacing: Adjust the spacing between the columns in pixels.
Alignment: Optionally align the text of the blog posts to the left, right, or center.

Gutenberg Post Options

Show Author: Toggle to display the name of the author.
Show Date: Toggle to display the date of the post.
Show Category: Toggle to display the category or categories the post belongs to.
Show Comments: Toggle to display the number of comments the post has received.
Open Links in New Tab: Toggle to determine whether links open in a new tab or the current tab.
Separator: A dropdown menu to select the style of the separator used between these post elements; the default is set to “Dot”.

Gutenberg Post Grid Post Options — Gutenberg Post Grid – Post Options

Gutenberg Post Grid Post Content

Show Post Content: Enable to show the post’s content.
Excerpt Length: Excerpt is used for the article summary with a link to the whole entry. The default excerpt length is 22.
Thumbnail Fit: Select between cover, fill, and contain.
Excerpt Type
Dots: 3 Dots (ellipsis) will be displayed after the text.
Link: If you select Link, a link to the full post will be added after the text, and you can also change the link text. Also, select the width of the button.

Gutenberg Post Grid Pagination Settings

Enable Pagination: Turn pagination on or off.
Pagination Presets: Select the pagination style.
Page Limit: Set the number of items displayed per page
Enable Pagination Next/Prev Strings: Enable or disable the text labels for pagination navigation.
Previous Page String: Customize the label for navigating to the previous page.
Next Page String: Customize the label for navigating to the next page.
Alignment: Align the pagination controls to the left, center, or right on the page.

Gutenberg Post Grid, screenshot features the "Pagination" settings of a content management system or web builder, which allow you to manage how content is divided across multiple pages. — Gutenberg Post Grid – Pagination Settings

Styles Settings for Gutenberg Post Grid Block

Title Style for Gutenberg Post Grid Block

Typography: Customize the text appearance within your post grid title.
Color: Select the color of the post title.
Hover Color: Select the color of the post title when the user hovers over it.
Bottom Spacing: Set the space below the title in Pixel (px), Em (em), or Percentage (%).

Gutenberg Post Grid, screenshot presents options for customizing the "Title Style" of a webpage or a post, likely within a website building platform. — Gutenberg Post Grid – Text Style

Image Style

Overlay Color: Select a color for an overlay that appears on the image.
CSS Filters: Apply different CSS filter effects to the image like blur, brightness, contrast, etc.

Meta Style

Typography: Dropdown menus or fields to choose the font family and size for the metadata text.
Metadata Color: Choose a color for the metadata text (e.g., date, author name, etc.).
Links Hover Color: Set the color for links when the mouse hovers over them.
Separator Color: Choose a color for the separator used in the meta section, often seen between metadata elements like categories, tags, or dates.

Gutenberg Post Grid, screenshot shows customization settings for "Image Style" and "Meta" of a content element in a web design tool. — Gutenberg Post Grid – Image & Meta Style

Pagination Style

Typography: Choose the font settings for pagination text.
Color States (Normal, Hover, Active): Customize the text color for different states of pagination links: unclicked (normal), mouseover (hover), and currently selected (active).
Background Color: Select a background color for the pagination links.
Border: Set the style of the border surrounding the pagination links (solid, dotted, dashed, etc.).
Border Radius: Adjust the roundness of the corners for the pagination links.
Padding: Set the space inside each pagination link, with options to customize for top, right, bottom, and left sides.
Margin: Adjust the outer space around the pagination links, with a specific setting visible for the bottom margin at 15 pixels.

Gutenberg Post Grid, screenshots outline the settings for "Pagination" design customization in a web development tool. — Gutenberg Post Grid – Pagination Style

Content Box Style

Typography: Dropdown menus or fields to choose the font family and size for the content within the box, both set to “Default” here.
Color: An option to select the text color for the content inside the box.
Text Margin: Controls to set the margin around the text inside the content box, with options to adjust for top, right, bottom, and left, and units in pixels (PX), em (EM), or percent (%).
Background Color: An option to choose a color for the background of the content box.
Box Shadow: A toggle or control to add a shadow effect to the content box, giving it depth and prominence on the page.

Gutenberg Post Grid, screenshot presents customization options for a "Content Box" within a web design interface, likely for a widget or a section on a website. — Gutenberg Post Grid – Content Box Style

Conclusion

Our comprehensive tutorial on Premium Lottie Animations block for Gutenberg has unveiled the dynamic potential of incorporating advanced web animations into your WordPress site. By navigating through the process of activating, customizing, and styling Lottie animations, we’ve demonstrated how these lightweight, scalable animations can dramatically enhance the user experience and visual engagement of your site. With detailed guidance on layout and style settings, including options for loops, speed adjustments, and responsive design, this tutorial empowers you to create captivating, interactive web pages that stand out in the digital landscape.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Post Grid Block Tutorial

Table Of Content