How to Use the Visual Composer Grid Builder – Part 3

Posted OnJul 6, 2015     CategoryPlugins     Comments1 comment

In this section of the Visual Composer Advanced Grid Builder we will look at displaying the Post Grid element on the News page.

This guide assumes that you have created the 6 posts outlined in the How to Use the Visual Composer Grid Builder – Part 2 guide. If you have not done so, please do this prior to moving forward.

Step 1) Login to the WordPress Dashboard.

Step 2) From the Dashboard, hover over your site name to display the Visit Site hyperlink.

Step 3) Click the Visit Site hyperlink to be forwarded to the Home Page of your site.


Step 4) Click the News menu item to be forwarded to the News page.


Step 5) Click the Edit with Visual Composer hyperlink to activate the Visual Composer Frontend Editor.


You can also complete the steps using the Visual Composer Backend Editor.
For this example, the Visual Composer Frontend Editor will be used.

Adding the Post Grid Element

Step 6) Click the + button in the top left or click the Add Element button to display the Add Element popup panel.


Step 7) From the Add Element popup panel, click to select the Post Grid to display the Post Grid Settings popup panel.


The Post Grid Layout on the News page will update to reflect selections made.

Post Grid Settings

General Settings

In the General Settings tab you can:

  • Select your Data Source from the dropdown list. For example, Posts.
  • Narrow data source by entering in options.
  • Enter the Total Items to display. For example, 10.
  • Select a Display Style from the dropdown list. For example, Show All.
  • Check to enable Show Filter option.
  • Select number of Grid elements per row from the dropdown list. For example, 3.
  • Select the Gap size between posts. For example, 35px.


Data Settings

In the Data Settings tab you can:

  • Select an Order By option from the dropdown list. For example, Date.
  • Select a Sorting option from the dropdown list. For example, Descending.
  • Enter a value for the Offset. For example, 10px.
  • Enter Exclude items in this textbox. For example, pages.


Item Design Settings

In the Item Design Settings tab you can:

  • Select a Grid element template from the dropdown list. For example, Basic grid: Vertical Flip.
  • Create a new Template.
  • Modify an existing Template.


Step 8) Click the Save Settings button to save any changes.

Step 9) Click the Close button to close the Post Grid Settings popup panel and be returned to the News page.

Step 10) Click the Update button to save the page changes.



Prior to moving forward, we recommend that you view your site to see the changes applied above and make any modifications as needed.

The next step of the guide will focus on How to Add Shortcodes in Visual Composer.


1 comment


  1. Adam Grabowski


    I’m using the Post Masonry Grid element on my home page to show the latest blog entries. I am able to show an image, the title and the “teaser” text for each respective blog entry. I would like to include the date of the blog post between the entry title and the teaser text, but have not been successful.

    On a side note, when I’ve attempted to use the Post Grid element, it does not appear on my webpage. An area of blank space is structured into the page but
    nothing appears. (I’m using a Macbook Pro.) This happens in Chrome and Safari.

    On another side note, I’ve attempted to use the Latestblog element as well. The “Show date”, “Show comment”, “Show description” and “Show readmore” features are not displaying on the page with their respective blog entries. The setting for these features is set to “true” but they do not appear. Only the image and the title of the respective blog entry appears.

    Any help you can offer is appreciated.


    Adam Grabowski

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend