WordPress Posts Grid And Custom Posts Grid

In this tutorial on visualmodo knowledge base we will show how to use WordPress Posts Grid and custom posts grid as visual composer page builder plugin.  You can use this page builder element for call any posts you want, blog posts, portfolio, team and any other posts, the grid system will organize and show it on your page in the way you want. Please watch the videos below:

Those content elements can be placed on any WordPress page and display your posts or custom posts. Pages with these elements can then be used as an alternative to post archive pages. The good news are than in comparison to standard post archive pages you can add any other content elements and ensure that post grid is just a part of something more. For example portfolio page could contain not only grid of custom post type related to case studies, but also relevant information about services and testimonials.

Visual Composer Grid Builder Review

Usage of Post Grid elements also allows significantly increase customization on how your post grid will look like by adding pagination, filters and even building custom queries if you feel like 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 which can be adjusted just a little bit – instead there are plenty of different templates carefully crafted by web design experts.

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

What is Grid Builder?

Grid Builder is an inbuilt visual editor for creating custom grid item templates which can be used within 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 on how to use it.

With Grid Builder you are able to create unique grid item templates by applying special 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 are the same elements which you are using within Visual Composer like Text Block, Single Image and Separators. Those elements have static content which will stay the same on all grid instances. For example you can apply separator to all your grid items which will use this template and they all will contain same separator. These type of elements are usually used to create overall design and branding of your Post Grid.

Visual Composer Grid Builder Content Elements for WordPress

Grid Builder content element list with static and dynamic elements

The second group is Post data content elements which can be considered as dynamic content, because they are using data provided by your pages, posts and custom posts. There are elements like Post Title, Excerpt which will use data provided by posts to display titles and excerpts of specific posts. Even the content display style will be the same for all posts within the grid using this template they will differ in the terms of content as each of the posts has different excerpt.

Grid Builder Zones

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

  • Normal
  • Hover
  • Additional

Normal and Hover zones are basic blocks of grid item and you will mainly operate with these two zones to place your content elements. As the titles suggest Normal zone is displayed under regular circumstances and is the only mandatory zone within Grid Builder. There is no option to build your post grid without Normal zone. Hover is an alternative to Normal state and will be triggered upon mouse hover. It is possible to control transition effect between Normal and Hover zones with Transition control menu – available as a dropdown on the top right corner of Grid Builder. It is also possible to completely disable Hover zone by choosing ‘Single block (no animation’ under Transition control menu.

Grid Builder Zones: Normal, Hover and Empty Additional

Grid Builder Zones: Normal, Hover and Empty Additional

Transition zone control offers 14 different transition effects which in combination with zone styling options allows building unlimited number of unique grid item templates. The Preview of Grid Builder will allow you quickly check on how these transitions look like in a real life allowing you to quickly play around with different transition effects.

Grid Builder Transition Controls for Normal and Hover zones

Settings, Transition Controls and Preview mode of Grid Builder

Additional zone is an optional zone which can be placed on the left, right, top or bottom side of Normal zone and is used to display information and content elements which are not affected by transitions. In order to keep things simple it is important to take into account that you can use one Additional zone at the time which is fully enough.

In order to keep parallels with Visual Composer Backend editor you should treat zones like an independent rows or sections as they are offering same style Design Options to operate with their backgrounds, borders and other properties. Even more – the whole grid item template has it’s own Design Options properties available under Settings menu allowing you quickly adjust background options, paddings and margins for your grid item template.

Post Grid vs Masonry Post Grid

Grid Builder allows you create both types of grid item templates – regular and masonry. The main difference between regular type and masonry is that masonry uses original image and content properties when displayed on your page via grid content elements.

Post grid on the left and Masonry post grid on the right

Post grid on the left and Masonry post grid on the right

If you are working on your grid item template you must decide which style of grid you are going to use as it will impact the settings of your Normal and Hover zone. In Normal zone parameter window you will notice multiple settings which allows you to add links and include featured images, but the most important part is ‘Height mode’ parameter which will define proportions of your Normal and Hover zones. Visual Composer offers most popular types of proportions including Custom to define zone properties, but the option you must pay attention to is ‘Original’. ‘Original’ means that grid item template will use Original proportions of your featured images when displayed and of course it is crucial once we talk about masonry style layouts.

Post Grid vs Media Grid

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

  • Post grids
  • Media grids

Post grids ar grids which uses pages, posts and custom post types as their source of information meaning you can display your portfolio post type as a grid using post grid elements. On the other side there are media grid elements which are using WordPress Media Library as their source, just like Image Gallery or Single Image content elements. Those type of content elements are perfect to display your media in a grid format with transition effects and are widely used by photographs.

Post grid on the left and Media grid on the right

Post grid on the left and Media grid on the right

The difference between post and media grids, not to mention parameters, are grid item templates you will choose. Post grids will focus on redirecting visitors from your grid to posts or custom posts you will display and you will need to set link parameters in your grid item template to introduce such option. In the media grid the case is different as you will want your visitors to enlarge images which will of course ask for different settings within your grid item template.

Grid Builder, Woo Commerce and More

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

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

WordPress Grid Builder by Visual Composer Plugin – Visualmodo

Award-Winning 24/7 customer service

Everyone on our Customer Care team is an experienced Visualmodo user and works in our office. Nothing is ever outsourced.

Visualmodo WordPress Themes Support

Once again, thanks for purchasing one of our themes!

If you need any help, or have any suggestions, please feel free to contact us for Help Desk. If you loved the theme, we would really appreciate it if you could rate it.
Cheers!