1.0Citra Grouphttps://thecitragroup.com/idadmintcghttps://thecitragroup.com/id/author/admintcg/rich600338<blockquote class="wp-embedded-content" data-secret="sE6TVN9D3W"><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=sE6TVN9D3W" width="600" height="338" title="“Grid Builder” — Citra Group" data-secret="sE6TVN9D3W" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript"> /* <![CDATA[ */ /*! This file is auto-generated */ !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); /* ]]> */ </script>Starting from version 4.4 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 “Grid Elements”. Interface Top Menu Bar WPBakery Page Builder Grid Builder has a native WPBakery Page Builder interface with top main menu bar which consists of following controls: Grid template block – allows to choose one of predefined grid element templates as a starting point for creating new grid element. Note: choosing template will overwrite created layout. Grid Element Settings – Design Options – standard WPBakery Page Builder Design Options module which affects all grid element. Animation Presets (dropdown) – by default set to “Single block” which means there is no “Hover” state for your grid element. Selecting animation preset adds “Hover” tab, next to “Normal” tab in Grid Builder layout. Preview and Save options. Builder Layout and Zones Grid Builder has a WPBakery Page Builder Backend style layout with defined blocks: “Normal” zone – main part to operate with. This zone consists of 3 (three) rows which can be divided into several columns. “Hover” zone – similar to “Normal” zone, but defines layout on “Hover” state. Note: this zone is visible only if “Animation preset” is selected different from “Single block”. Depending on animation chosen “Hover” zone may appear on top of “Normal”, replace “Normal” or partly replace “Normal” zone. “Additional” zone – places for additional zone are located around “Normal” and “Hover” zones. Note: “Additional” zone can not be animated with “Animation Presets” and only one “Additional” zone can be added at the time. Settings WPBakery Page Builder Grid Builder has styling options and settings for following elements: Grid Element Settings; “Normal” and “Hover” zone settings; Column settings; Content elements. Grid Element Settings Param name Description Design Options Control borders, background and other styling options “Normal” and “Hover” Zone Settings Param name Description Height mode Sizing proportions for height and width.Note: Select “Original” 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: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active Use featured image on background? Featured image overwrites background image and color from “Design options”. Image size Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (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 “Design options”. Image size Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (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 “Text block“ 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 “Separator“ 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 “Separator with Text“ 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 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: Additional option “Woo Commerce Add to Cart” 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: 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: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active Widget title Enter text which will be used as […]https://mk0kbwpbakerycoppufc.kinstacdn.com/wp-content/uploads/2018/01/image2015-1-19-16_12_45.png