How to Use the Visual Composer Grid Builder – Part 3
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
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.
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.