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 using 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 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 posting archive pages. The good news is then 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, the portfolio page could contain not an only grid of custom post type related to case studies, but also relevant information about services and testimonials.
Firstly, the usage of Post Grid elements also allows significantly increase customization on how your post grid will look like. 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 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 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 the same separator. These type of elements are usually used to create overall design and branding of your Post Grid.
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 a different excerpt.
Grid Builder Zones
Visual Composer Grid Builder comes with 3 different zones where you can place content elements:
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 displays 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 open upon mouse hover. It is possible to control the 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.
Transition zone control offers 14 different transition effects which in combination with zone styling options allows building an 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.
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. 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 full enough.
In order to keep parallels with Visual Composer Backend editor, you should treat zones like 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 the Settings menu allowing you to quickly adjust background options. Paddings, in addition with margins for your grid item template.
Post Grid vs Masonry Post Grid
Firstly, the grid builder allows you to create both types of grid item templates – regular and masonry. The main difference between regular type and masonry is: Masonry uses the original image and content properties. Displayed on your page via grid content elements.
If you are working on your grid item template. You must decide 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 settings which allows you to add links and include featured images. However, the most important part is the ‘Height mode’ parameter which will define proportions of your Normal and Hover zones. Visual Composer offers the most popular types of proportions 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 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. Which you can divide into 2 groups depending on their source of information:
- Post grids
- Media grids
Post grids ar grids which use 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 is perfect to display your media in a grid format. Photographs take advantage of transition effects.
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. Because you will want your visitors to enlarge images. Which of course, ask 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 benefit from Grid Builder as well. Once you have both plugins Visual Composer and WooCommerce installed you will instantly notice Woo Commerce related content element appear within your Grid Builder element menu.
Using the power of Grid Builder will allow you to 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. We’re here to help you.