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.
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.
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.
AuthorFilter: 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 – General Settings
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
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 Grid – Display Options
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
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 Typeas Dots: 3 Dots (ellipsis) will be displayed after the text.
Excerpt Typeas 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 – Post Content
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 – 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 – 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 – 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 – 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 – Content Box Style
Conclusion
Mastering Gutenberg Post Grid Block with Premium Blocks for Gutenberg transforms your WordPress site into a visually appealing and highly functional platform. By utilizing the various settings and customization options, you can create dynamic grid layouts that showcase your content effectively. Whether you are displaying blog posts, portfolio items, or custom post types, the flexibility and ease of use provided by the Post Grid Block ensure a seamless design experience. Implement these features to enhance your site’s aesthetics and user engagement, making the most of the powerful tools at your disposal.
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.
