{"version":"1.0","provider_name":"Citra Group","provider_url":"https:\/\/thecitragroup.com\/id","author_name":"admintcg","author_url":"https:\/\/thecitragroup.com\/id\/author\/admintcg\/","title":"Grid Builder","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"O3huB6TIhz\"><a href=\"https:\/\/thecitragroup.com\/id\/help\/grid-builder\/\">Grid Builder<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/thecitragroup.com\/id\/help\/grid-builder\/embed\/#?secret=O3huB6TIhz\" width=\"600\" height=\"338\" title=\"&#8220;Grid Builder&#8221; &#8212; Citra Group\" data-secret=\"O3huB6TIhz\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/* ]]> *\/\n<\/script>","description":"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&nbsp;WPBakery 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;]","thumbnail_url":"https:\/\/mk0kbwpbakerycoppufc.kinstacdn.com\/wp-content\/uploads\/2018\/01\/image2015-1-19-16_12_45.png"}