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
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.
Query
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.
Categories: Select specific categories to include.
Authors – Filter Rule: Show or exclude posts that match specific author.
Authors: Show the posts that match specific authors or exclude them.
Posts – Filter Rule: Select posts to show or exclude them.
Posts: Select specific posts to exclude.
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.
No Posts 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.
Columns Spacing: Adjust the spacing between the columns in pixels.
Rows Spacing: Adjust the spacing between the rows in pixels, % or em.
Alignment: Optionally align the text of the blog posts to the left, right, or center.
Gutenberg Post Grid – Display Options
Post Options
Show Title: Toggle to display the title.
Show Author: Toggle to display the name of the author.
Show Date: Toggle to display the date of the post.
Show Comments: Toggle to display the number of comments the post has received.
Meta Taxonomies: Select the meta taxonomies.
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.
Get Content From: Choose where to get the content from.
Excerpt Length: Excerpt is used for the article summary with a link to the whole entry. The default excerpt length is 22.
Show Button Link: Toggle to show or hide the button link.
Read More Text: Input field to add text that appears when the button link is enabled.
Full Width: Toggle to make the button link full-width.
Gutenberg Post Grid – Post Content
Pagination Settings
Enable Pagination: Turn pagination on or off.
Pagination Presets: Select the pagination style.
Page Limit: Set how many posts should be displayed on each page. This number should be equal to or greater than the number of columns to ensure everything works properly.
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
Filter Tabs
Show Filter Tabs: Toggle to show or hide the filter tabs.
Filter Taxonomy: Select the taxonomies.
Show First Filter: Toggle to show or hide the first filter.
First Filter label: Input field to add first filter label.
URL Filter Flag: This is used to activate specific filter tab using links on other pages.
Alignment: Align the filter tab controls to the left, center, or right on the page.
Gap Between Tabs: Set the gap between the tabs.
Spacing Bottom: Set the bottom spacing for the tabs.
Styles Settings for Gutenberg Post Grid Block
Title Style
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 in normal and hover states.
CSS Filters: Apply CSS filter effects to the image, like blur, brightness, contrast, etc in normal and hover states.
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
Filter Tabs Style
Typography: Dropdown menus or fields to choose the font family and size for the filter tabs, both set to “Default” here.
Color: An option to select the text color for the filter tabs.
Text Shadow: A toggle or control to add a shadow effect to the tabs text, giving it depth and prominence on the page.
Background Color: An option to choose a color for the background of the filter tabs.
Box Shadow: A toggle or control to add a shadow effect to the tabs, giving it depth and prominence on the page.
Padding: Set the space inside each tab, with options to customize for top, right, bottom, and left sides.
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.
Padding: Set the space inside each content box, with options to customize for top, right, bottom, and left sides.
Margin: Adjust the outer space around the content box, with a specific setting visible for the bottom margin at 15 pixels.
Gutenberg Post Grid – Content Box Style
Button Style
Typography: Customize the font, size, and style of the button.
Button Spacing: Adjust the spacing for the button.
Color: Set the color for the button in the normal and hover states.
Background Color: Choose a background color for the button in the normal and hover states.
Border: Customize the border style, width, and color in the normal and hover states.
Border Radius: Adjust the border radius to round the corners.
Padding: Set the padding around the button.
Box Style
Background Color: Choose a background color for the box.
Border: Customize the border style, width, and color.
Border Radius: Adjust the border radius to round the corners.
Box Shadow: Add a shadow effect to the box.
Padding and Margin: Set the spacing for the box.
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? Premium Blocks 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.
