{"id":5706,"date":"2021-04-11T17:49:28","date_gmt":"2021-04-11T09:49:28","guid":{"rendered":"https:\/\/bakrie-brothers.com\/?post_type=docs&#038;p=5706"},"modified":"2021-04-11T17:49:28","modified_gmt":"2021-04-11T09:49:28","slug":"how-to-make-custom-grid-element","status":"publish","type":"docs","link":"https:\/\/bakrie-brothers.com\/id\/help\/how-to-make-custom-grid-element\/","title":{"rendered":"How to make custom grid element?"},"content":{"rendered":"<p>Starting from version 4.4&nbsp;WPBakery Page Builder 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 \u201cGrid Builder\u201d. 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.<\/p>\n\n\n\n<p>Grid element has 2 (two) zones:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Normal\/Hover zone which is the main zone for building grid element (<strong>Note:<\/strong>&nbsp;when adding new grid only \u201cNormal\u201d zone will be available, to activate \u201cHover zone\u201d choose animation preset from dropdown list located in right top corner of the builder).<\/li><li>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 \u201cNormal\u201d 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).<\/li><\/ul>\n\n\n\n<p>\u201cNormal\u201d and \u201cHover\u201d zone settings(can be accessed by choosing \u201cEdit\u2019 option of zone) allows adding \u201cFeatured image\u201d to a particular zone and choosing proportions(Height mode). Choosing \u201cOriginal\u201d value in \u201cHeight mode\u201d means that \u201cFeatured Image\u201d won\u2019t be cropped (<strong>Note:<\/strong>\u00a0this is used in Masonry style grid if you wish to have images in grid with different height).<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\"   title=\"WPBakery Page Builder Grid Element Builder\"   width=\"640\"   height=\"360\"   src=\"https:\/\/www.youtube.com\/embed\/ER2njPVmsnk?feature=oembed\"   frameborder=\"0\"   allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"   referrerpolicy=\"strict-origin-when-cross-origin\"  allowfullscreen><\/iframe>\n<\/div><\/figure>","protected":false},"excerpt":{"rendered":"<p>Starting from version 4.4&nbsp;WPBakery Page Builder 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 \u201cGrid Builder\u201d. 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:&nbsp;when adding new grid only \u201cNormal\u201d zone will be available, to activate \u201cHover zone\u201d 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 \u201cNormal\u201d 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). \u201cNormal\u201d and \u201cHover\u201d zone settings(can be accessed by choosing \u201cEdit\u2019 option of zone) allows adding \u201cFeatured image\u201d to a particular zone and choosing proportions(Height mode). Choosing \u201cOriginal\u201d value in \u201cHeight mode\u201d means that \u201cFeatured Image\u201d won\u2019t be cropped (Note:\u00a0this is used in Masonry style grid if you wish to have images in grid with different height).<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[84],"doc_tag":[],"class_list":["post-5706","docs","type-docs","status-publish","hentry","doc_category-page-builder"],"_links":{"self":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs\/5706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/comments?post=5706"}],"version-history":[{"count":0,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs\/5706\/revisions"}],"wp:attachment":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/media?parent=5706"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/doc_category?post=5706"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/doc_tag?post=5706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}