Post Grid is a tool allowing to present your posts, products and other content automatically. New posts will be added automatically to the Post Grid as soon as they are created in WordPress,  posts with draft status or those have been deleted will disapear automatically either. So no need to create Post Grid manually.

Post Grid is offen used to present Blog, Featured Products, Sales, Recent news. You can set the source — pages or posts, what kind of post to display: custom posts, default, products or write custom quiry; you can se total  amount of posts on page, and in raw. Using Grid Builder constructor you can develop any template for post item in grid.

Visual Composer provides two elements for post grid: Post Grid and Post Masonry Grid. The first element adds posts of your WordPress site in grid view, the second one adds adds posts of your WordPress site in masonry grid view.

Post grid has three default tabs and additional filter tab, provided filter options has been activated. The default tabs are: General allowing to configure view of a grid, Data Setting allowing filter and set the way of content presenting, Filter tab (if the filter has been activated) allowing to set apperance of category (or other) filter; Item Design allowing to set post item template design and Design Options.

Below you can preview all Item Desing defalt templates provided in the drop-down. Also you can create your own design using Grid BuilderUnder the links to preview you will find description for options provided and all the other tabs.

SETTING TABS

DATA SOURCE

Post;

Page;

Attachment;

Custom_css;

Customize_changeset;

Vc4_templates;

Wpcf7_contact_form;

Portfolio;

List of IDs;

CUSTOM QUERY

Provided «Custom Query» has been selected in «Data Source», this field will appear.

SHOW FILTER

In order to append filter in the grid, check the filter checkbox and filter tab will appear;

GRID ELEMENTS PER ROW

Select number of single grid elements per row.

GAP

Select gap between grid elements.

INITIAL LOADING ANIMATION

Select initial loading animation for grid element. Having chosen animation the grey block will show the animation effect;

EXTRA CLASS NAME

Style particular content element differently — add a class name and refer to it in custom CSS.

ORDER BY

By default posts will be ordered by date. If you need other way of ordering set the order type. If «Meta value» or «Meta value Number» is chosen then meta key is required:

Date;

Order by Post ID;

Author;

Title;

Last Modified Date;

Post/Page Parent ID;

Number of Comments;

Menu order/Page order;

Meta Value, Meta Value Number;

Random order;

 

 

 

SORT ORDER

Set the order by date: Descending or Ascending;

OFFSET

Number of grid elements to displace or pass over.

EXCLUDE

Exclude posts, pages, etc. by title.

FILTER BY

Select filter source:

  • Categories
  • Tags

When you have any custom posts the categories and tags option will appear in the list. Also if you have WooCommerce installed you will see product categories, product tags

EXCLUDE FROM FILTER LIST

You can list categories, tags you do not wont to be shown in the filters list, fill the field separating with coma.

STYLE

Set the filter display style:

  • Rounded;
  • Less Rounded;
  • Border;
  • Rounded border;
  • Less Rounded Border;
  • Filled;
  • Drop-down;

DEFAULT TITLE

Enter default title for filter option display (empty: «All»).

ALIGNMENT

Set the filter alignment: Center, Left, Right;

COLOR

Set the filter color from drop-down predefined list. There is no option to set the custom color;

FILTER SIZE

Set the filter size: mini, small, normal, large;

Item Desing Tab is a dropdown list with for groups of predifined template designs: Basic Grid, Masonry Grid, Media Grid, Media Masonry Grid. In addition you will find option to edit exisiting template or create new one.

Click bottoms above to preview these predifiend designs. View Grid Bilder to know how to create your own template design.

Design Option is equal for all the elements, please find options and description here