1. Home
  2. Docs
  3. WPBakery Page Builder “How To’s”
  4. How to make custom grid element?

How to make custom grid element?

Starting from version 4.4 WPBakery Page Builder (formerly Visual Composer) has introduced Grid Builder which allows creating templates for using in Post Grid, Post Masonry Grid, Media Grid and Masonry Media Grid elements. Grid Builder is available in WordPress admin menu “Grid Builder”. When creating new grid element it is possible to start building grid from scratch or choose one of default grid elements as a starting point.

Grid element has 2 (two) zones:

  • Normal/Hover zone which is the main zone for building grid element (Note: when adding new grid only “Normal” zone will be available, to activate “Hover zone” choose animation preset from dropdown list located in right top corner of the builder).
  • Additional zone which can be added on the left, right, top or bottom parts of grid element. To add additional zone click on one of the empty blocks located around “Normal” zone. It is allowed to drag and drop additional zone from one location to another (Note: only one additional zone can be added at the time).

“Normal” and “Hover” zone settings(can be accessed by choosing “Edit’ option of zone) allows adding “Featured image” to a particular zone and choosing proportions(Height mode). Choosing “Original” value in “Height mode” means that “Featured Image” won’t be cropped (Note: this is used in Masonry style grid if you wish to have images in grid with different height).