How to Create A Perfect Post Grid
You are using WordPress page builder to create beautiful pages and posts for your website, but when it comes to post archive you are struggling. There is no content area defined where you could apply all the power of page builder and theme options have less customization than you expected.
Those restrictions set by WordPress should not hold you back from building a website of your dreams. And to solve this problem you can refer to content elements like Post Grid and Masonry Post Grid. 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.
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 WPBakery Page Builder you should know about – the Grid Builder.
Discover hidden treasure of WPBakery Page Builder page builder - Grid Builder for WordPress. Click To TweetWhat is Grid Builder?
Grid Builder is an inbuilt visual editor for creating custom grid item templates which can be used within grid elements of WPBakery Page Builder. Available under WPBakery Page Builder 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 WPBakery Page Builder 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.
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
WPBakery Page Builder 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
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.
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 WPBakery Page Builder 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
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. WPBakery Page Builder 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 WPBakery Page Builder 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
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 WPBakery Page Builder 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.
Not to mention Woo Commerce there is another plugin that is widely popular and is fully compatible with WPBakery Page Builder Grid Builder. We are talking about Advanced Custom Fields (ACF). Using ACF in Grid Builder will allow you quickly add data from your ACF fields into grid item templates to display custom dynamic content.
And if you are a coder, you can always use WPBakery Page Builder API to come up with your own content elements and additional options for Grid Builder.
Grid Builder Summary
Now that you had a brief overview on how to work with Grid Builder and know all the secrets it is time to use your fantasy. With Grid Builder you are able to come up with grids for your news posts, portfolio items, photography showcase, product lists and so much more. Make most of your WPBakery Page Builder experience and don’t leave hidden spots when it comes to building website of your dreams.