{"id":5670,"date":"2021-04-11T17:02:12","date_gmt":"2021-04-11T09:02:12","guid":{"rendered":"https:\/\/bakrie-brothers.com\/?post_type=docs&#038;p=5670"},"modified":"2021-04-11T17:02:12","modified_gmt":"2021-04-11T09:02:12","slug":"grid-builder","status":"publish","type":"docs","link":"https:\/\/bakrie-brothers.com\/id\/help\/grid-builder\/","title":{"rendered":"Grid Builder"},"content":{"rendered":"<p>Starting from version 4.4&nbsp;WPBakery Page Builder comes together with Grid Builder which allows to create and modify grid element templates for Post Grid, Masonry Post Grid, Media Grid and Masonry Media Grid. Grid Builder can be accessed via WordPress admin \u201cGrid Elements\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"GridBuilder-Interface\">Interface<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-TopMenuBar\">Top Menu Bar<\/h3>\n\n\n\n<p>WPBakery Page Builder&nbsp;Grid Builder has a native&nbsp;WPBakery Page Builder interface with top main menu bar which consists of following controls:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Grid template block<\/strong>&nbsp;\u2013 allows to choose one of predefined grid element templates as a starting point for creating new grid element.&nbsp;<strong>Note:<\/strong>&nbsp;choosing template will overwrite created layout.<\/li><li><strong>Grid Element Settings<\/strong>&nbsp;\u2013 Design Options \u2013 standard&nbsp;WPBakery Page Builder Design Options module which affects all grid element.<\/li><li><strong>Animation Presets&nbsp;<em>(dropdown)<\/em><\/strong>&nbsp;\u2013 by default set to \u201cSingle block\u201d which means there is no \u201cHover\u201d state for your grid element. Selecting animation preset adds \u201cHover\u201d tab, next to \u201cNormal\u201d tab in Grid Builder layout.<\/li><li><strong>Preview and Save options<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\"   src=\"https:\/\/mk0kbwpbakerycoppufc.kinstacdn.com\/wp-content\/uploads\/2018\/01\/image2015-1-19-16_12_45.png\"   alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-BuilderLayoutandZones\">Builder Layout and Zones<\/h3>\n\n\n\n<p>Grid Builder has a&nbsp;WPBakery Page Builder Backend style layout with defined blocks:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u201cNormal\u201d zone<\/strong>&nbsp;\u2013 main part to operate with. This zone consists of 3 (three) rows which can be divided into several columns.<\/li><li><strong>\u201cHover\u201d zone<\/strong>&nbsp;\u2013 similar to \u201cNormal\u201d zone, but defines layout on \u201cHover\u201d state.&nbsp;<strong>Note:<\/strong>&nbsp;this zone is visible only if \u201cAnimation preset\u201d is selected different from \u201cSingle block\u201d. Depending on animation chosen \u201cHover\u201d zone may appear on top of \u201cNormal\u201d, replace \u201cNormal\u201d or partly replace \u201cNormal\u201d zone.<\/li><li><strong>\u201cAdditional\u201d zone<\/strong>&nbsp;\u2013 places for additional zone are located around \u201cNormal\u201d and \u201cHover\u201d zones.&nbsp;<strong>Note:<\/strong>&nbsp;\u201cAdditional\u201d zone can not be animated with \u201cAnimation Presets\u201d and only one \u201cAdditional\u201d zone can be added at the time.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\"   src=\"https:\/\/mk0kbwpbakerycoppufc.kinstacdn.com\/wp-content\/uploads\/2018\/01\/image2015-1-19-16_21_44.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"GridBuilder-Settings\">Settings<\/h2>\n\n\n\n<p>WPBakery Page Builder&nbsp;Grid Builder has styling options and settings for following elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Grid Element Settings;<\/li><li>\u201cNormal\u201d and \u201cHover\u201d zone settings;<\/li><li>Column settings;<\/li><li>Content elements.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-GridElementSettings\">Grid Element Settings<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\"  >Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-&quot;Normal&quot;and&quot;Hover&quot;ZoneSettings\">\u201cNormal\u201d and \u201cHover\u201d Zone Settings<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Height mode<\/td><td>Sizing proportions for height and width.<br><strong>Note:<\/strong>&nbsp;Select \u201cOriginal\u201d to scale image without cropping (Example: for masonry style grid).<\/td><\/tr><tr><td>Add link<\/td><td>Select link option (Values: Post link, Large image, Large image (prettyPhoto), Custom)<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Use featured image on background?<\/td><td>Featured image overwrites background image and color from \u201cDesign options\u201d.<\/td><\/tr><tr><td>Image size<\/td><td>Enter image size (Example: \u201cthumbnail\u201d, \u201cmedium\u201d, \u201clarge\u201d, \u201cfull\u201d or other sizes defined by theme). Alternatively enter size in pixels (Example: 200\u00d7100 (Width x Height)).<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-ColumnSettings\">Column Settings<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Width<\/td><td>Select column width.<\/td><\/tr><tr><td>Use featured image on background?<\/td><td>Featured image overwrites background image and color from \u201cDesign options\u201d.<\/td><\/tr><tr><td>Image size<\/td><td>Enter image size (Example: \u201cthumbnail\u201d, \u201cmedium\u201d, \u201clarge\u201d, \u201cfull\u201d or other sizes defined by theme). Alternatively enter size in pixels (Example: 200\u00d7100 (Width x Height)).<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"GridBuilder-ContentElements\">Content Elements<\/h2>\n\n\n\n<p>Grid Builder offers content elements which can be used to build and style your grid element template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-TextBlock\">Text Block<\/h3>\n\n\n\n<p>\u201cText block\u201c allows you to insert paragraph type text and format it using WYSIWYG editor. Moreover text block allows adding media(images and videos).<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Text<\/td><td>WYSIWYG editor for inserting content.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers.<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-Separator\">Separator<\/h3>\n\n\n\n<p>\u201cSeparator\u201c add separator line to your page.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Color<\/td><td>Separator color.<\/td><\/tr><tr><td>Separator alignment<\/td><td>Select separator alignment.<\/td><\/tr><tr><td>Style<\/td><td>Separator style.<\/td><\/tr><tr><td>Border width<\/td><td>Border width in pixels.<\/td><\/tr><tr><td>Element width<\/td><td>Separator element width in percents.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-SeparatorwithText\">Separator with Text<\/h3>\n\n\n\n<p>\u201cSeparator with Text\u201c add separator line to your page together with text which can be positioned in the centre, left or right sides of line.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Judul<\/td><td>Separator title.<\/td><\/tr><tr><td>Title position<\/td><td>Select title location.<\/td><\/tr><tr><td>Color<\/td><td>Separator color.<\/td><\/tr><tr><td>Separator alignment<\/td><td>Select separator alignment.<\/td><\/tr><tr><td>Style<\/td><td>Separator style.<\/td><\/tr><tr><td>Border width<\/td><td>Border width in pixels.<\/td><\/tr><tr><td>Element width<\/td><td>Separator element width in percents.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-Icon\">Icon<\/h3>\n\n\n\n<p>With\u00a0WPBakery Page Builder you can easily add icons from following libraries: Font Awesome, Open icons, Typicons, Entype, Linecons<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Icon library<\/td><td>Select icon library.<\/td><\/tr><tr><td>Icon<\/td><td>Select icon from library.<\/td><\/tr><tr><td>Color<\/td><td>Icon color.<\/td><\/tr><tr><td>Background shape<\/td><td>Background shape for icon.<\/td><\/tr><tr><td>Background color<\/td><td>Select color for background shape.<br><strong>Note:<\/strong>&nbsp;Select custom color to enable color picker<\/td><\/tr><tr><td>Size<\/td><td>Icon size.<\/td><\/tr><tr><td>Icon alignment<\/td><td>Select icon alignment.<\/td><\/tr><tr><td>URL (Link)<\/td><td>Add link to icon.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-SingleImage\">Single Image<\/h3>\n\n\n\n<p>Add simple image to your layout and style it. Add CSS animation or apply Design Options.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Widget title<\/td><td>Enter text which will be used as widget title. Leave blank if no title is needed.<\/td><\/tr><tr><td>Image source<\/td><td>Image source from Media Library (default) or External link<\/td><\/tr><tr><td>Image<\/td><td>Select image from media library<\/td><\/tr><tr><td>External link<\/td><td>Enter external link to image.<br><strong>Note:<\/strong>&nbsp;available if \u201cExternal link\u201d is chosen from \u201cImage source\u201d<\/td><\/tr><tr><td>CSS Animation<\/td><td>Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers.<\/td><\/tr><tr><td>Image size<\/td><td>Enter image size. Example: \u201cthumbnail\u201d, \u201cmedium\u201d, \u201clarge\u201d, \u201cfull\u201d or other sizes defined by current theme. Alternatively enter image size in pixels: 200\u00d7100 (Width x Height). Leave empty to use \u201cthumbnail\u201d size.<\/td><\/tr><tr><td>Image alignment<\/td><td>Select image alignment.<\/td><\/tr><tr><td>Image style<\/td><td>Select display style.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-Button\">Button<\/h3>\n\n\n\n<p>Add button with multiple color and styling options.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Text<\/td><td>Text which will appear on the button<\/td><\/tr><tr><td>Style<\/td><td>Select button display style<\/td><\/tr><tr><td>Shape<\/td><td>Select button shape<\/td><\/tr><tr><td>Color<\/td><td>Select color of the button<br><strong>Note:<\/strong>&nbsp;Available if \u201cStyle\u201d is not \u201cCustom\u201d<\/td><\/tr><tr><td>Background color<\/td><td>Select color for background of the button with color picker<br><strong>Note:<\/strong>&nbsp;Available if&nbsp;\u201cStyle\u201d&nbsp;is set to \u201cCustom\u201d<\/td><\/tr><tr><td>Text color<\/td><td>Select color for text on the button with color picker<br><strong>Note:<\/strong>&nbsp;Available if&nbsp;\u201cStyle\u201d&nbsp;is set to \u201cCustom\u201d<\/td><\/tr><tr><td>Size<\/td><td>Select button display size<\/td><\/tr><tr><td>Alignment<\/td><td>Select button alignment<\/td><\/tr><tr><td>Set full width button?<\/td><td>Set button to full width within column<br><strong>Note:<\/strong>&nbsp;Available if \u201cAlignment\u201d is not \u201cInline\u201d<\/td><\/tr><tr><td>Add icon?<\/td><td>Add icon to button from icon library. Control alignment of icon<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-CustomHeading\">Custom Heading<\/h3>\n\n\n\n<p>Create custom heading with Google Fonts, choose one of predefined fonts and apply styling.<strong>Important:<\/strong>\u00a0If you are using non-latin characters be sure to activate them under Settings\/WPBakery Page Builder\/General Settings.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Text<\/td><td>If you are using non-latin characters be sure to activate them under Settings\/WPBakery Page Builder\/General Settings.<\/td><\/tr><tr><td>Element tag<\/td><td>Select element tag.<\/td><\/tr><tr><td>Text align<\/td><td>Select text alignment.<\/td><\/tr><tr><td>Font size<\/td><td>Enter font size.<\/td><\/tr><tr><td>Line height<\/td><td>Enter line height.<\/td><\/tr><tr><td>Text color<\/td><td>Select color for your element.<\/td><\/tr><tr><td>Use theme default font family<\/td><td>Use font family from the theme.<\/td><\/tr><tr><td>Font Family<\/td><td>Select font family.<\/td><\/tr><tr><td>Font style<\/td><td>Select font styling.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-EmptySpace\">Empty Space<\/h3>\n\n\n\n<p>Insert empty space between elements with custom height.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Height<\/td><td>Enter empty space height.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-PostTitle\">Post Title<\/h3>\n\n\n\n<p>Post title element adds title of post, page or custom post types. In case of media grid it will add media title.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Element tag<\/td><td>Select element tag.<\/td><\/tr><tr><td>Text align<\/td><td>Select text alignment.<\/td><\/tr><tr><td>Use custom fonts?<\/td><td>Enable Google fonts.&nbsp;<strong>Note:<\/strong>&nbsp;enables \u201cCustom fonts\u201d tab<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-PostExcerpt\">Post Excerpt<\/h3>\n\n\n\n<p>Post excerpt element adds excerpt of post, page or custom post types. In case of media grid it will add media description.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\"  >Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Element tag<\/td><td>Select element tag.<\/td><\/tr><tr><td>Text align<\/td><td>Select text alignment.<\/td><\/tr><tr><td>Use custom fonts?<\/td><td>Enable Google fonts.&nbsp;<strong>Note:<\/strong>&nbsp;enables \u201cCustom fonts\u201d tab<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-PostDate\">Post Date<\/h3>\n\n\n\n<p>This element adds post data to your grid element template.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\"  >Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Element tag<\/td><td>Select element tag.<\/td><\/tr><tr><td>Text align<\/td><td>Select text alignment.<\/td><\/tr><tr><td>Use custom fonts?<\/td><td>Enable Google fonts.&nbsp;<strong>Note:<\/strong>&nbsp;enables \u201cCustom fonts\u201d tab<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-PostAuthor\">Post Author<\/h3>\n\n\n\n<p>This element adds post author to your grid element template.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Element tag<\/td><td>Select element tag.<\/td><\/tr><tr><td>Text align<\/td><td>Select text alignment.<\/td><\/tr><tr><td>Use custom fonts?<\/td><td>Enable Google fonts.&nbsp;<strong>Note:<\/strong>&nbsp;enables \u201cCustom fonts\u201d tab<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-PostCategories\">Post Categories<\/h3>\n\n\n\n<p>This element adds post category or categories to your grid element template.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active<\/td><\/tr><tr><td>Style<\/td><td>Select category display style: Comma, Rounded, etc.<\/td><\/tr><tr><td>Color<\/td><td>Select category style display color.<br><strong>Note:<\/strong>&nbsp;Active if style is different from None or Comma.<\/td><\/tr><tr><td>Category size<\/td><td>Select size of category display.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-PostImage\">Post Image<\/h3>\n\n\n\n<p>This element allows adding \u201cFeatured image\u2019 or point to placeholder for media image from post, custom post types or media library.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\"  >Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Add link<\/td><td>Select link option.<br><strong>Note:<\/strong>&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active.<\/td><\/tr><tr><td>Image size<\/td><td>Enter image size (Example: \u201cthumbnail\u201d, \u201cmedium\u201d, \u201clarge\u201d, \u201cfull\u201d or other sizes defined by theme). Alternatively enter size in pixels (Example: 200\u00d7100 (Width x Height)).<\/td><\/tr><tr><td>Text align<\/td><td>Select alignment.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"   id=\"GridBuilder-CustomFields\">Custom Fields<\/h3>\n\n\n\n<p>Helps to retrieve custom field data from meta values of the post or custom post types.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\" >Description<\/th><\/tr><\/thead><tbody><tr><td>Field key name<\/td><td>Custom field name to retrieve meta data value.<\/td><\/tr><tr><td>Label<\/td><td>Enter label to display before key value.<\/td><\/tr><tr><td>Align<\/td><td>Select alignment.<\/td><\/tr><tr><td>Extra class name<\/td><td>If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"GridBuilder-VideoTutorial\">Video Tutorial<\/h2>\n\n\n\n<p>See how easy it is to create grid element template from scratch by using\u00a0WPBakery Page Builder Grid Builder.<\/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 comes together with Grid Builder which allows to create and modify grid element templates for Post Grid, Masonry Post Grid, Media Grid and Masonry Media Grid. Grid Builder can be accessed via WordPress admin \u201cGrid Elements\u201d. Interface Top Menu Bar WPBakery Page Builder&nbsp;Grid Builder has a native&nbsp;WPBakery Page Builder interface with top main menu bar which consists of following controls: Grid template block&nbsp;\u2013 allows to choose one of predefined grid element templates as a starting point for creating new grid element.&nbsp;Note:&nbsp;choosing template will overwrite created layout. Grid Element Settings&nbsp;\u2013 Design Options \u2013 standard&nbsp;WPBakery Page Builder Design Options module which affects all grid element. Animation Presets&nbsp;(dropdown)&nbsp;\u2013 by default set to \u201cSingle block\u201d which means there is no \u201cHover\u201d state for your grid element. Selecting animation preset adds \u201cHover\u201d tab, next to \u201cNormal\u201d tab in Grid Builder layout. Preview and Save options. Builder Layout and Zones Grid Builder has a&nbsp;WPBakery Page Builder Backend style layout with defined blocks: \u201cNormal\u201d zone&nbsp;\u2013 main part to operate with. This zone consists of 3 (three) rows which can be divided into several columns. \u201cHover\u201d zone&nbsp;\u2013 similar to \u201cNormal\u201d zone, but defines layout on \u201cHover\u201d state.&nbsp;Note:&nbsp;this zone is visible only if \u201cAnimation preset\u201d is selected different from \u201cSingle block\u201d. Depending on animation chosen \u201cHover\u201d zone may appear on top of \u201cNormal\u201d, replace \u201cNormal\u201d or partly replace \u201cNormal\u201d zone. \u201cAdditional\u201d zone&nbsp;\u2013 places for additional zone are located around \u201cNormal\u201d and \u201cHover\u201d zones.&nbsp;Note:&nbsp;\u201cAdditional\u201d zone can not be animated with \u201cAnimation Presets\u201d and only one \u201cAdditional\u201d zone can be added at the time. Settings WPBakery Page Builder&nbsp;Grid Builder has styling options and settings for following elements: Grid Element Settings; \u201cNormal\u201d and \u201cHover\u201d zone settings; Column settings; Content elements. Grid Element Settings Param name Description Design Options Control borders, background and other styling options \u201cNormal\u201d and \u201cHover\u201d Zone Settings Param name Description Height mode Sizing proportions for height and width.Note:&nbsp;Select \u201cOriginal\u201d to scale image without cropping (Example: for masonry style grid). Add link Select link option (Values: Post link, Large image, Large image (prettyPhoto), Custom)Note:&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active Use featured image on background? Featured image overwrites background image and color from \u201cDesign options\u201d. Image size Enter image size (Example: \u201cthumbnail\u201d, \u201cmedium\u201d, \u201clarge\u201d, \u201cfull\u201d or other sizes defined by theme). Alternatively enter size in pixels (Example: 200\u00d7100 (Width x Height)). Extra class name If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. Design Options Control borders, background and other styling options. Column Settings Param name Description Width Select column width. Use featured image on background? Featured image overwrites background image and color from \u201cDesign options\u201d. Image size Enter image size (Example: \u201cthumbnail\u201d, \u201cmedium\u201d, \u201clarge\u201d, \u201cfull\u201d or other sizes defined by theme). Alternatively enter size in pixels (Example: 200\u00d7100 (Width x Height)). Extra class name If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. Design Options Control borders, background and other styling options. Content Elements Grid Builder offers content elements which can be used to build and style your grid element template. Text Block \u201cText block\u201c allows you to insert paragraph type text and format it using WYSIWYG editor. Moreover text block allows adding media(images and videos). Param name Description Text WYSIWYG editor for inserting content. CSS Animation Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers. Extra class name Add class name in order to refer to this element in CSS. Design Options Control borders, background and other styling options. Separator \u201cSeparator\u201c add separator line to your page. Param name Description Color Separator color. Separator alignment Select separator alignment. Style Separator style. Border width Border width in pixels. Element width Separator element width in percents. Extra class name If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. Design Options Control borders, background and other styling options Separator with Text \u201cSeparator with Text\u201c add separator line to your page together with text which can be positioned in the centre, left or right sides of line. Param name Description Title Separator title. Title position Select title location. Color Separator color. Separator alignment Select separator alignment. Style Separator style. Border width Border width in pixels. Element width Separator element width in percents. Extra class name If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. Design Options Control borders, background and other styling options Icon With\u00a0WPBakery Page Builder you can easily add icons from following libraries: Font Awesome, Open icons, Typicons, Entype, Linecons Param name Description Add link Select link option.Note:&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active Icon library Select icon library. Icon Select icon from library. Color Icon color. Background shape Background shape for icon. Background color Select color for background shape.Note:&nbsp;Select custom color to enable color picker Size Icon size. Icon alignment Select icon alignment. URL (Link) Add link to icon. CSS Animation Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers. Extra class name If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. Design Options Control borders, background and other styling options Single Image Add simple image to your layout and style it. Add CSS animation or apply Design Options. Param name Description Add link Select link option.Note:&nbsp;Additional option \u201cWoo Commerce Add to Cart\u201d if Woo Commerce plugin is active Widget title Enter text which will be used as [&hellip;]<\/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-5670","docs","type-docs","status-publish","hentry","doc_category-page-builder"],"_links":{"self":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs\/5670","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=5670"}],"version-history":[{"count":0,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs\/5670\/revisions"}],"wp:attachment":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/media?parent=5670"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/doc_category?post=5670"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/doc_tag?post=5670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}