WordPress Posts Grid Usage Guide

Guide & tutorial: Learn how to use the posts grid & custom post-types grid element, widget, and block usage in your WordPress website layout

Updated on April 11, 2024
WordPress Posts Grid Usage Guide

Guide & tutorial to learn how to use the posts grid & custom post-types grid element usage, widget, and block in your WordPress website layout.

How To Use Post Grid in WordPress Block Editor (Without Plugins)

  1. Create a new page or edit an existing one in the WordPress Block Editor.
  2. Add a “Group” block to the page by clicking on the “+” icon and searching for “Group” in the block library.
  3. Inside the Group block, add a “Query Loop” block. This block allows you to display a loop of posts based on specific criteria.
  4. Configure the Query Loop block settings according to your requirements. You can specify the number of posts to display, the order in which they should appear, and any other filtering options.
  5. Within the Query Loop block, you can add additional blocks to customize the layout and appearance of each post. For example, you can use the “Post Title” block to display the title, the “Post Excerpt” block to show a brief description, or the “Post Featured Image” block to include the post’s featured image.
  6. Adjust the styling and formatting of the post grid by applying CSS classes or customizing the block settings. You can change the column layout, spacing, typography, and colors to match your design preferences.
  7. Preview the page to see how the post grid looks. If necessary, make further adjustments to the block settings or styling using the posts grid guide & tutorial.
  8. Once you are satisfied with the post grid, save the changes and publish/update the page using the Posts Grid widget block. Keep following this guide & tutorial to learn how to use the posts grid & custom post-types grid element, widget, and block in your WordPress website layout.

How To Call Posts in a Grid Layout Using Elementor WordPress Plugin For Free?

To create a grid layout for posts using the free version of the Elementor WordPress plugin along with the Essential Addons plugin, you can follow these steps:

  1. Install and activate both the Elementor and Essential Addons plugins on your WordPress site if you haven’t already.
  2. Create a new page or edit an existing one where you want to display the post grid.
  3. Edit the page with Elementor by clicking the “Edit with Elementor” button.
  4. In the Elementor editor, search for and drag the “EA Post Grid” widget from the Essential Addons section to the desired section of your page.
  5. In the widget settings panel on the left, you can configure various options to customize the post grid:
    • Source: Specify the source and criteria for selecting the posts. You can choose categories, tags, specific posts, or other options as per your needs.
    • Layout: Determine the layout of the grid, such as the number of columns, row gap, column gap, and pagination.
    • Query: Set the number of posts to display, the order in which they should appear, and any other filtering options.
    • Content: Select the elements to display for each post, such as the featured image, post title, excerpt, or author.
    • Style: Customize the appearance of the post grid, including colors, typography, spacing, and borders.
  6. Preview the page to see how the post grid looks. If necessary, make further adjustments to the widget settings or styling using the posts grid guide & tutorial.
  7. Once you are satisfied with the configuration, save the changes and publish/update the page.

How To Display WordPress Posts In a Customizable Grid Layout For Free?

  1. Log in to your WordPress admin dashboard.
  2. Go to “Plugins” and click on “Add New.”
  3. Search for “Posts Grid” in the search bar.
  4. Look for the “Posts Grid” plugin by Posts Grid.
  5. Click on “Install Now” and then activate the plugin.
  6. Once activated, go to “Posts Grid” in your WordPress admin menu.
  7. Click on “Add New Grid” to create a new grid layout.
  8. Give your grid a name and configure the settings as per your requirements:
    • Layout: Select the number of columns, column spacing, and other layout options.
    • Query: Choose the post source (categories, tags, custom post types, etc.) and set the order and filtering options.
    • Style: Customize the grid’s appearance, including colors, fonts, borders, and other design settings.
    • Pagination: Enable pagination to display a limited number of posts per page.
    • Excerpt: Set the length and display options for post excerpts.
  9. Save the grid settings.
  10. Copy the generated shortcode for your grid.
  11. Create a new page or edit an existing page where you want to display the post grid.
  12. Paste the shortcode into the page editor where the grid appears.
  13. Preview the page to see how the post grid looks. If necessary, return to the Posts Grid settings and make further adjustments.
  14. Once you are satisfied with the post grid, save the changes and publish/update the page using the Posts Grid widget block.

WordPress Posts Grid And Custom Posts Grid With WPBakery Page Builder Plugin

WordPress Posts Grid

In this tutorial on Visualmodo knowledge base, we will show how to use WordPress Posts Grid and custom posts Grid using the visual composer page builder plugin.

As a result, you can use this page builder element to call any posts you want, blog posts, portfolio, team, and any other posts. The grid system will organize and show it on your page how you want. Please watch the videos below: Guide & tutorial to learn how to use the posts grid & custom post-types grid element, widget, and block usage in your WordPress website layout.

How To Use WPBakery page builder WordPress plugin Posts Grid element?

  1. Install and activate the WPBakery Page Builder plugin on your WordPress site, if you haven’t already.
  2. Create a new page or edit an existing page where you want to add the Posts Grid element.
  3. Click the “Backend Editor” or “Frontend Editor” button to launch the WPBakery Page Builder.
  4. In the editor, locate the “Posts Grid” element from the list of available elements. It might be under the “Content” or “WordPress Widgets” section, depending on your WPBakery Page Builder version.
  5. Drag and drop the “Posts Grid” element onto your page where you want it to appear.
  6. Once added, you can configure the settings of the Posts Grid element. There will be various options and parameters that you can customize to control the appearance and behavior of the grid.
    • Source: Choose the source of the posts to be displayed. You can select categories, tags, specific posts, or other options based on your preference.
    • Layout: Determine the layout of the grid, such as the number of columns, spacing, and pagination options.
    • Query: Set the number of posts to display, the order in which they should appear, and any other filtering options.
    • Style: Customize the styling of the grid, including colors, fonts, and hover effects.
    • Excerpt: Specify whether to show post excerpts and adjust the excerpt length if needed.
    • Read More: Configure the settings for the “Read More” link or button that appears with each post.
    • Other options: Depending on the plugin version and additional add-ons you have installed, you may have different options to customize the grid further.
  7. Preview the page to see how the Posts Grid element looks. If necessary, make further adjustments to the settings until you achieve the desired result.
  8. Once you are satisfied with the configuration, save the changes and publish/update the page, reading these usage tips for WordPress posts grid.

Video Tutorial

Those content elements can be placed on any WordPress page and display your or custom posts. Pages with these elements can be an alternative to posting archive pages. The good news is that compared to standard post archive pages, you can add any other content elements and ensure that the post grid is just a part of something more.

For example, the portfolio page could contain a grid of custom post types related to case studies and relevant information about services and testimonials.

Firstly, using Post Grid elements also allows significantly increased customization of how your post grid will look.

Add pagination, filters, and even build custom queries if you need one. If dealing with post archive pages, you will spend hours and hours coding additional functionality while it’s already available under Post Grid element settings.

In addition, Post Grid offers different templates for your post grid items, so there is no one standard template that can be adjusted just a little bit. Instead, there are plenty of other templates carefully crafted by web design experts.

This sounds good, but there are cases when templates are insufficient, or maybe they are almost good for you. In such a case, there is a hidden treasure within Visual Composer you should know about – the Grid Builder.

What is WordPress Posts Grid Builder?

Grid Builder is an inbuilt visual editor for creating custom grid item templates that can be used within the grid elements of Visual Composer. Available under Visual Composer Settings in your WordPress Dashboard, it is executed in the familiar Backend editor style, so you don’t have to struggle to use it.

With Grid Builder, you can create unique grid item templates by applying particular content elements with high customization options. All Grid Builder elements are divided into 2 groups:

  • Regular content elements
  • Post-data content elements

Regular content elements, like Text Blocks, Single Images, and Separators, are the same elements you use within Visual Composer.

Those elements have static content, which will stay the same on all grid instances. For example, you can apply a separator to all your grid items, which will use this template, and they all will contain the same partition. These types of elements are usually used to create the overall design and branding of your Post Grid.

The second group is Post data content elements which can be considered dynamic content because they are using data provided by your pages, posts, and custom posts.

There are elements like Post Title and Excerpt which will use data provided by posts to display titles and excerpts of specific positions. Using this template, the content display style will be the same for all posts within the grid. They will differ in terms of content as each of the seats has a different excerpt.

Grid Builder Zones

Visual Composer Grid Builder comes with 3 different zones where you can place content elements:

  • Normal
  • Hover
  • Additional

Standard and Hover’s zones are basic blocks of grid items, and you will mainly operate with these two zones to place your content elements. As the titles suggest, the Normal zone displays under ordinary circumstances and is the only mandatory zone within Grid Builder.

There is no option to build your post grid without a Normal zone. Hover is an alternative to the Normal state and will open upon mouse hover.

It is possible to control the transition effect between Normal and Hover zones with the Transition control menu – available as a dropdown on the top right corner of Grid Builder. It is also possible to disable the Hover zone altogether by choosing ‘Single block (no animation’ under the Transition control menu.

Transition zone control offers 14 different transition effects combined with zone styling options, allowing for building an unlimited number of unique grid item templates. The Preview of Grid Builder will let you quickly check on how these transitions look in a real-life, allowing you to fast play around with different transition effects.

WordPress Posts Grid Builder Zones

Additional-zone is an optional field that can be placed on the left. Right. Moreover, the top or bottom side of the Normal zone. As a result, it displays information and content without transitions. To keep things simple. It is essential to consider that you can use one Additional zone at a time, which is full enough.

To keep parallels with the Visual Composer Backend editor, you should treat zones like independent rows or sections as they offer the same style of Design Options to operate with their backgrounds, borders, and other properties. Even more.

The whole grid item template has its Design Options and properties available. Under the Settings menu, allow you to adjust background options quickly. Paddings, in addition to margins for your grid item template. Guide & tutorial to learn how to use the posts grid & custom post-types grid element, widget, and block usage in your WordPress website layout.

Post Grid vs. Masonry Post Grid

Firstly, the grid builder allows you to create both grid item templates – regular and masonry. The main difference between standard type and masonry is: Masonry uses the original image and content properties. They are displayed on your page via grid content elements.

If you are working on your grid item template. It would help if you decided which style of the grid you are going to use. Because it will impact the settings of your Normal and Hover zone. In the Normal zone parameter window, you will notice multiple locations, which allows you to add links and include featured images.

However, the most crucial part is the ‘Height mode’ parameter which will define the proportions of your Normal and Hover zones.

Visual Composer offers the most popular types of ratios, including Custom to define zone properties. However, the option you must pay attention to is ‘Original.’ ‘Original’ means that the grid item template will use the Original proportions of your featured images when displayed. As a result, it’s crucial once we talk about masonry-style layouts.

WordPress Posts Grid vs. Media Grid

Among Composer content elements on Backend and Frontend editors, you will notice 4 different types of grid elements. You can divide into 2 groups depending on their source of information:

  • Post grids
  • Media grids

Post grids use pages, posts, and custom post types as their source of information. You can display your portfolio post type as a grid using post-grid elements.

On the other side, there are media grid elements that use WordPress Media Library as their source, just like Image Gallery or Single Image content elements.

Those content elements are perfect for displaying your media in a grid format. Photographs take advantage of transition effects reading the WordPress posts grid usage tips.

The difference between post and media grids, not to mention parameters, are grid item templates you will choose on your WordPress posts grid usage tips.

Post grids will redirect visitors from your grid to posts or custom posts. You will display and need to set link parameters in your grid item template to introduce such an option.

In the media grid, the case is different. Because you will want your visitors to enlarge images. Which, of course, asks for different settings within your grid item template.

Grid Builder, WooCommerce, and More

If you are dealing with e-commerce on your WordPress website, you can also benefit from Grid Builder. Once you have installed Visual Composer and WooCommerce plugins, you will instantly notice Woo Commerce-related content elements within your Grid Builder element menu.

Using the power of Grid Builder will allow you to create more engaging product pages with custom features to make your potential customers want to click on products.

WordPress Grid Builder by Visual Composer Plugin – Visualmodo. Guide & tutorial to learn how to use the posts grid & custom post-types grid element, widget, and block usage in your WordPress website layout.

Can’t find what you’re looking for?

Contact Support