{"id":5656,"date":"2021-04-11T16:40:53","date_gmt":"2021-04-11T08:40:53","guid":{"rendered":"https:\/\/bakrie-brothers.com\/?post_type=docs&#038;p=5656"},"modified":"2021-04-11T16:40:53","modified_gmt":"2021-04-11T08:40:53","slug":"content-elements","status":"publish","type":"docs","link":"https:\/\/bakrie-brothers.com\/id\/help\/content-elements\/","title":{"rendered":"Content Elements"},"content":{"rendered":"<p>This is a list of 40+\u00a0available content elements\u00a0that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks, you are building your layout. Most of the content elements have options to set them click pencil icon. To save changes click save button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Row<\/strong><\/h2>\n\n\n\n<p>\u201cRow\u201c is the main content element of WPBakery Page Builder\u00a0 . Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1\/2 + 1\/2, 1\/3 + 1\/3 + 1\/3, and so on). Your page can have an unlimited number of rows. \u00a0 To change row\u2019s position, click and drag row\u2019s drag handler (top left row\u2019s corner) and drag row around (vertical axis).<\/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>Row stretch<\/td><td>Select stretching options for row and content (Note: stretched may not work properly if parent container has \u201coverflow: hidden\u201d CSS property).<\/td><\/tr><tr><td>Column gap<\/td><td>Set gap between columns, all columns within row will be affected by this value.<\/td><\/tr><tr><td>Full height row<\/td><td>Set row to be full height.<br><strong>Note:<\/strong>&nbsp;if content will exceed screen size then row will be bigger than screen height as well.<\/td><\/tr><tr><td>Columns position<\/td><td>Set columns position for full height row \u2013 Top, Middle, Bottom.<br><strong>Note:<\/strong>&nbsp;active only if \u201cFull height row\u201d is selected.<\/td><\/tr><tr><td>Equal height<\/td><td>Set all columns to be equal height.<br><strong>Note:<\/strong>&nbsp;all columns will have same height as longest column.<\/td><\/tr><tr><td>Content position<\/td><td>Set content position within columns \u2013 Default, Top, Middle, Bottom.<br><strong>Note:<\/strong>&nbsp;Default value will be used top or other if defined within theme.<\/td><\/tr><tr><td>Use video background<\/td><td>Set YouTube background for row.<\/td><\/tr><tr><td>YouTube link<\/td><td>Enter link to YouTube video to set it as row background.<br><strong>Note:<\/strong>&nbsp;YouTube video will overwrite background images and can be used with parallax effect.<\/td><\/tr><tr><td>Parallax<\/td><td>Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/td><\/tr><tr><td>Image<\/td><td>Select image from media library for parallax.<br><strong>Note:<\/strong>&nbsp;active only if \u201cParallax\u201d effect is chosen.<\/td><\/tr><tr><td>Parallax speed<\/td><td>Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.<br><strong>Note:<\/strong>&nbsp;active only if Image or Video parallax effect is enabled.<\/td><\/tr><tr><td>Row ID<\/td><td>Enter row ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<p><strong>Important:<\/strong>\u00a0Row allows you build complex layouts by inserting inner row within root level row\/column. Take into account that it is not allowed to insert inner row within inner row.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Column<\/strong><\/h2>\n\n\n\n<p>\u201cColumns\u201c are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).<\/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>Use video background<\/td><td>Set YouTube background for row.<\/td><\/tr><tr><td>YouTube link<\/td><td>Enter link to YouTube video to set it as row background.<br><strong>Note:<\/strong>&nbsp;YouTube video will overwrite background images and can be used with parallax effect.<\/td><\/tr><tr><td>Parallax<\/td><td>Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/td><\/tr><tr><td>Image<\/td><td>Select image from media library for parallax.<br><strong>Note:<\/strong>&nbsp;active only if \u201cParallax\u201d effect is chosen.<\/td><\/tr><tr><td>Parallax speed<\/td><td>Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.<br><strong>Note:<\/strong>&nbsp;active only if Image or Video parallax effect is enabled.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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><tr><td>Width &amp; Responsiveness<\/td><td>Control width, offset and visibility of element on different devices.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Section<\/strong><\/h2>\n\n\n\n<p>\u201cSection\u201c is root type container element that allows you to \u2018group\u2019 several rows. You can insert section into root canvas only (section element can not be inserted into any other element, including row). Section element can contain only row elements.<\/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>Section stretch<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><tr><td>Full height section?<\/td><td>Set section to be full height.<br><strong>Note:<\/strong>&nbsp;if content will exceed screen size then row will be bigger than screen height as well.<\/td><\/tr><tr><td>Content position<\/td><td>Set content position within columns \u2013 Default, Top, Middle, Bottom.<br><strong>Note:<\/strong>&nbsp;Default value will be used top or other if defined within theme.<\/td><\/tr><tr><td>Use video background?<\/td><td>Set YouTube background for section.<\/td><\/tr><tr><td>YouTube link<\/td><td>Enter link to YouTube video to set it as section background.<br><strong>Note:<\/strong>&nbsp;YouTube video will overwrite background images and can be used with parallax effect.<\/td><\/tr><tr><td>Parallax<\/td><td>Add parallax type background for section (Note: If no image is specified, parallax will use background image from Design Options).<\/td><\/tr><tr><td>Image<\/td><td>Select image from media library for parallax.<br><strong>Note:<\/strong>&nbsp;active only if \u201cParallax\u201d effect is chosen.<\/td><\/tr><tr><td>Parallax speed<\/td><td>Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.<br><strong>Note:<\/strong>&nbsp;active only if Image or Video parallax effect is enabled.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Section ID<\/td><td>Enter section ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/td><\/tr><tr><td>Disable section<\/td><td>Allows you to disable section (It will not be visible to the public).<\/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<h2 class=\"wp-block-heading\"><strong>Text Block<\/strong><\/h2>\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>Add\/Edit content using WYSIWYG editor TinyMCE.<\/td><\/tr><tr><td>CSS animations<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"><strong>Separator<\/strong><\/h2>\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>Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.<\/td><\/tr><tr><td>Separator alignment<\/td><td>Select separator alignment.<\/td><\/tr><tr><td>Style<\/td><td>Choose line styling \u2013 solid, dotted, dashed, shadow etc.<\/td><\/tr><tr><td>Border<\/td><td>Border width in pixels.<\/td><\/tr><tr><td>Element width<\/td><td>Define line width within column in percents.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-SeparatorwithText\"><strong>Separator with Text<\/strong><\/h2>\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>Text which will appear on the line.<\/td><\/tr><tr><td>Add icon<\/td><td>Add icon to separator from Icon Library.<\/td><\/tr><tr><td>Title position<\/td><td>Allows positioning of your text in the centre, left or right side of the line.<\/td><\/tr><tr><td>Separator alignment<\/td><td>Select separator alignment.<\/td><\/tr><tr><td>Color<\/td><td>Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.<\/td><\/tr><tr><td>Style<\/td><td>Choose line styling \u2013 solid, dotted, dashed, shadow etc.<\/td><\/tr><tr><td>Border<\/td><td>Border width in pixels.<\/td><\/tr><tr><td>Element width<\/td><td>Define line width within column in percents.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-ZigZagSeparator\"><strong>ZigZag Separator<\/strong><\/h2>\n\n\n\n<p>\u201cZigZag separator\u201c add separator line in form of zig zag. It uses SVG graphics to form the line and 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>Separator alignment<\/td><td>Select separator alignment.<\/td><\/tr><tr><td>Color<\/td><td>Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.<\/td><\/tr><tr><td>Element width<\/td><td>Define line width within column in percents.<\/td><\/tr><tr><td>Border width<\/td><td>Border width size with \u201cMedium\u201d as default.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-MessageBox\"><strong>Message Box<\/strong><\/h2>\n\n\n\n<p>\u201cMessage Box\u201c add noticeable message to your website in order to show success, error, warning etc.<\/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>Message Box Presets<\/td><td>Select predefined message box designs or choose \u201cCustom\u201d for custom styling.<\/td><\/tr><tr><td>Style<\/td><td>Select message box style.<\/td><\/tr><tr><td>Shape<\/td><td>Select message box shape.<\/td><\/tr><tr><td>Color<\/td><td>Select message box color.<\/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>Message text<\/td><td>Add\/Edit content using WYSIWYG editor TinyMCE<\/td><\/tr><tr><td>CSS animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-FAQ(Toggle)\"><strong>FAQ (Toggle)<\/strong><\/h2>\n\n\n\n<p>\u201cFAQ\u201c add collapsible toggle 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>Toggle title<\/td><td>Title of toggle which will be displayed near open\/collapse button.<\/td><\/tr><tr><td>Toggle content<\/td><td>Content of toggle editable using WYSIWYG editor TinyMCE.<\/td><\/tr><tr><td>Style<\/td><td>Toggle style.<\/td><\/tr><tr><td>Color<\/td><td>Toggle icon color.<\/td><\/tr><tr><td>Size<\/td><td>Toggle size.<\/td><\/tr><tr><td>Default state<\/td><td>Ability to set default state of toggle open or closed(collapsed).<\/td><\/tr><tr><td>Element ID<\/td><td>Enter toggle ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-SingleImage\"><strong>Single Image<\/strong><\/h2>\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>Widget title<\/td><td>Title of element which will be displayed above widget.<\/td><\/tr><tr><td>Image source<\/td><td>Media Library for inserting images from Media Library;<br>External link for inserting link to image;<br>Featured image for using Featured image (if specified).<\/td><\/tr><tr><td>Image<\/td><td>Select image from media library. You can also upload images using media library.<\/td><\/tr><tr><td>External link<\/td><td>Enter direct link to external image.<br><strong>Note:<\/strong>&nbsp;available if \u201cExternal link\u201d is chosen in \u201cImage source\u201d.<\/td><\/tr><tr><td>CSS animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Image size<\/td><td>Set size of your image. Set large, small etc. or set your own width x height in pixels.<br><strong>Note:<\/strong>&nbsp;External images accept only pixel values.<\/td><\/tr><tr><td>Add caption<\/td><td>Add caption defined in Media Library.<\/td><\/tr><tr><td>Caption<\/td><td>Insert caption \u2013 available only for External images.<\/td><\/tr><tr><td>Image alignment<\/td><td>Set alignment of element within a column.<\/td><\/tr><tr><td>Image style<\/td><td>Set image style \u2013 choose from square, rounded, border etc.<\/td><\/tr><tr><td>OnClick action<\/td><td>Select onclick action:NoneLink to large imageOpen prettyPhotoOpen custom linkZoom<\/td><\/tr><tr><td>Image link<\/td><td>Enter link for onclick event.<br><strong>Note:<\/strong>&nbsp;available if \u201cOpen custom link\u201d is chosen in \u201cOnClick action\u201d.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"ContentElements-ImageGallery\"><strong>Image Gallery<\/strong><\/h2>\n\n\n\n<p>Add responsive Image gallery. Choose your gallery type from Flex Slider, Nivo Slider or Image grid.<\/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>Widget title<\/td><td>Title of element which will be displayed above widget.<\/td><\/tr><tr><td>Gallery type<\/td><td>Select gallery type from&nbsp;Flex Slider, Nivo Slider or Image grid.<\/td><\/tr><tr><td>Auto rotate slides<\/td><td>Select interval between auto-rotation of images or disable it.<\/td><\/tr><tr><td>Image source<\/td><td>Media Library for inserting images from Media Library;<br>External links for inserting link to image;<\/td><\/tr><tr><td>Images<\/td><td>Select images from media library. You can also upload images using media library.<\/td><\/tr><tr><td>External links<\/td><td>Enter direct link to external images.<br><strong>Note:<\/strong>&nbsp;available if \u201cExternal links\u201d is chosen in \u201cImage source\u201d.<\/td><\/tr><tr><td>Image size<\/td><td>Set size of your image. Set large, small etc. or set your own width x height in pixels.<br><strong>Note:<\/strong>&nbsp;External images accept only pixel values.<\/td><\/tr><tr><td>OnClick action<\/td><td>Select onclick action:NoneLink to large imageOpen prettyPhotoOpen custom link<\/td><\/tr><tr><td>Custom links<\/td><td>Enter links for onclick event.<br><strong>Note:<\/strong>&nbsp;available if \u201cOpen custom link\u201d is chosen in \u201cOnClick action\u201d.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Design Options<\/td><td>Control borders, background and other styling options.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"ContentElements-ImageCarousel\"><strong>Image Carousel<\/strong><\/h2>\n\n\n\n<p>Add fixed size animated image carousel.<\/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>Widget title<\/td><td>Title of element which will be displayed above widget.<\/td><\/tr><tr><td>Auto rotate slides<\/td><td>Select interval between auto-rotation of images or disable it.<\/td><\/tr><tr><td>Images<\/td><td>Select images from media library. You can also upload images using media library.<\/td><\/tr><tr><td>Image size<\/td><td>Set size of your image. Set large, small etc. or set your own width x height in pixels.<\/td><\/tr><tr><td>On click<\/td><td>Define action for onclick event if needed.<\/td><\/tr><tr><td>Slider mode<\/td><td>Slides will be positioned horizontally (for horizontal swipes) or vertically (for vertical swipes).<\/td><\/tr><tr><td>Slider speed<\/td><td>Duration of animation between slides (in ms).<\/td><\/tr><tr><td>Slides per view<\/td><td>Set numbers of slides you want to display at the same time on slider\u2019s container for carousel mode. Supports also \u201cauto\u201d value, in this case it will fit slides depending on container\u2019s width. \u201cauto\u201d mode isn\u2019t compatible with loop mode.<\/td><\/tr><tr><td>Slider autoplay<\/td><td>Enables autoplay mode.<\/td><\/tr><tr><td>Hide pagination control<\/td><td>If YES pagination control will be removed.<\/td><\/tr><tr><td>Hide prev\/next buttons<\/td><td>If YES prev\/next control will be removed.<\/td><\/tr><tr><td>Partial view<\/td><td>If YES part of the next slide will be visible on the right side.<\/td><\/tr><tr><td>Slider loop<\/td><td>Enables loop mode.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-Tabs\"><strong>Tabs<\/strong><\/h2>\n\n\n\n<p>Tabs is a complex element which consists of inner section collections(tabs) and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.<\/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>Widget title<\/td><td>Title of element which will be displayed above widget.<\/td><\/tr><tr><td>Style<\/td><td>Select tabs display style.<\/td><\/tr><tr><td>Shape<\/td><td>Select tabs shape.<\/td><\/tr><tr><td>Color<\/td><td>Select tabs color.<\/td><\/tr><tr><td>Do not fill content area<\/td><td>Do not fill content area with color.<br><strong>Note:<\/strong>&nbsp;content area of tab will be transparent.<\/td><\/tr><tr><td>Spacing<\/td><td>Select tabs spacing.<br><strong>Note:<\/strong>&nbsp;space between tab titles.<\/td><\/tr><tr><td>Gap<\/td><td>Select tabs gap.<br><strong>Note:<\/strong>&nbsp;space between tab titles and content area.<\/td><\/tr><tr><td>Alignment<\/td><td>Select tabs section title alignment.<\/td><\/tr><tr><td>Autoplay<\/td><td>Select auto rotate for tabs in seconds.<br><strong>Note:<\/strong>&nbsp;disabled by default.<\/td><\/tr><tr><td>Active section<\/td><td>Enter active section number.<br><strong>Note:<\/strong>&nbsp;to have all sections closed on initial load enter non-existing number.<\/td><\/tr><tr><td>Pagination style<\/td><td>Select pagination style.<\/td><\/tr><tr><td>Pagination color<\/td><td>Select pagination color.<br><strong>Note:<\/strong>&nbsp;available only if \u201cPagination style\u201d is selected.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-TabsSection\"><strong>Tabs Section<\/strong><\/h2>\n\n\n\n<p>Tabs section is an instance of Tabs element and controls one specific tab\/section. It is similar to principe row and column.<\/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>Enter section title.<br><strong>Note:<\/strong>&nbsp;you can leave it empty.<\/td><\/tr><tr><td>Section ID<\/td><td>Enter section ID (<strong>Note:<\/strong>&nbsp;make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\" >w3c specification<\/a>).<\/td><\/tr><tr><td>Add icon<\/td><td>Add icon to button from icon library.<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"ContentElements-Accordion\"><strong>Accordion<\/strong><\/h2>\n\n\n\n<p>Accordion is a complex element which consists of inner section collections and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.<\/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>Widget title<\/td><td>Title of element which will be displayed above widget.<\/td><\/tr><tr><td>Style<\/td><td>Select&nbsp;accordion&nbsp;display style.<\/td><\/tr><tr><td>Shape<\/td><td>Select&nbsp;accordion&nbsp;shape.<\/td><\/tr><tr><td>Color<\/td><td>Select&nbsp;accordion&nbsp;color.<\/td><\/tr><tr><td>Do not fill content area<\/td><td>Do not fill content area with color.<br><strong>Note:<\/strong>&nbsp;content area of&nbsp;accordion&nbsp;will be transparent.<\/td><\/tr><tr><td>Spacing<\/td><td>Select accordion spacing.<br><strong>Note:<\/strong>&nbsp;space between accordion sections, section titles and content area.<\/td><\/tr><tr><td>Gap<\/td><td>Select accordion gap.<br><strong>Note:<\/strong>&nbsp;space between accordion sections.<\/td><\/tr><tr><td>Alignment<\/td><td>Select&nbsp;accordion&nbsp;section title alignment.<\/td><\/tr><tr><td>Autoplay<\/td><td>Select auto rotate for tabs in seconds.<br><strong>Note:<\/strong>&nbsp;disabled by default.<\/td><\/tr><tr><td>Allow collapsible all<\/td><td>Allow collapse all accordion sections.<\/td><\/tr><tr><td>Icon<\/td><td>Select accordion navigation icon.<\/td><\/tr><tr><td>Position<\/td><td>Select accordion navigation icon position.<\/td><\/tr><tr><td>Active section<\/td><td>Enter active section number.<br><strong>Note:<\/strong>&nbsp;to have all sections closed on initial load enter non-existing number.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-AccordionSection\"><strong>Accordion Section<\/strong><\/h2>\n\n\n\n<p>Accordion section is an instance of Accordion element and controls one specific section. It is similar to principe row and column.<\/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>Enter section title.<br><strong>Note:<\/strong>&nbsp;you can leave it empty.<\/td><\/tr><tr><td>Section ID<\/td><td>Enter section ID (<strong>Note:<\/strong>&nbsp;make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\" >w3c specification<\/a>).<\/td><\/tr><tr><td>Add icon<\/td><td>Add icon to button from icon library.<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"ContentElements-PostGrid\"><strong>Post Grid<\/strong><\/h2>\n\n\n\n<p>Add posts of your WordPress site in grid view. Choose posts type, build your own unique query and define what kind of information to display.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Param name<\/th><th scope=\"col\">Tab<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Data source<\/td><td>General<\/td><td>Select content type for your grid.<\/td><\/tr><tr><td>Narrow data source<\/td><td>General<\/td><td>Enter categories, tags or custom taxonomies.<\/td><\/tr><tr><td>Total items<\/td><td>General<\/td><td>Set max limit for items in grid or enter -1 to display all (limited to 1000).<\/td><\/tr><tr><td>Display Style<\/td><td>General<\/td><td>Select display style for grid.<\/td><\/tr><tr><td>Show filter<\/td><td>General<\/td><td>Append filter to grid.<\/td><\/tr><tr><td>Grid elements per row<\/td><td>General<\/td><td>Select number of single grid elements per row.<\/td><\/tr><tr><td>Gap<\/td><td>General<\/td><td>Select gap between grid elements.<\/td><\/tr><tr><td>Include only<\/td><td>General<\/td><td>Add posts, pages, etc. by title.<br><strong>Note:<\/strong>&nbsp;active only if \u201cData source\u201d is set to \u201cList of IDs\u201d.<\/td><\/tr><tr><td>Custom query<\/td><td>General<\/td><td>Build custom query according to&nbsp;<a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/query_posts\">WordPress Codex<\/a>.<br><strong>Note:<\/strong>&nbsp;active only if \u201cData source\u201d is set to \u201cCustom query\u201d<\/td><\/tr><tr><td>Items per page<\/td><td>General<\/td><td>Number of items to show per page.<br><strong>Note:<\/strong>&nbsp;active only if \u201cDisplay style\u201d&nbsp;is set to \u201cLoad more button\u201d, \u201cLazy loading\u201d or \u201cPaginator\u201d.<\/td><\/tr><tr><td>Order by<\/td><td>Data settings<\/td><td>Select order type. If \u201cMeta value\u201d or \u201cMeta value Number\u201d is chosen then meta key is required.<\/td><\/tr><tr><td>Sorting<\/td><td>Data settings<\/td><td>Select sorting order.<\/td><\/tr><tr><td>Offset<\/td><td>Data settings<\/td><td>Number of grid elements to displace or pass over.<\/td><\/tr><tr><td>Exclude<\/td><td>Data settings<\/td><td>Exclude posts, pages, etc. by title.<\/td><\/tr><tr><td>Grid element template<\/td><td>Item design<\/td><td>Select predefined grid element template.<br><strong>Note:<\/strong>&nbsp;It is allowed to create new template or modify selected. Predefined templates will be cloned.<\/td><\/tr><tr><td>Filter by<\/td><td>Filter<\/td><td>Select filter source.<\/td><\/tr><tr><td>Style<\/td><td>Filter<\/td><td>Select filter display style.<\/td><\/tr><tr><td>Alignment<\/td><td>Filter<\/td><td>Select filter alignment.<\/td><\/tr><tr><td>Color<\/td><td>Filter<\/td><td>Select filter color.<\/td><\/tr><tr><td>Filter size<\/td><td>Filter<\/td><td>Select filter size.<\/td><\/tr><tr><td>Button Text<\/td><td>Load more button<\/td><td>Enter text for \u201cLoad more\u201d button.<br><strong>Note:<\/strong>&nbsp;\u201cLoad more\u201d will be used by default.<\/td><\/tr><tr><td>Button style<\/td><td>Load more button<\/td><td>Select button style.<\/td><\/tr><tr><td>Button shape<\/td><td>Load more button<\/td><td>Select button shape.<\/td><\/tr><tr><td>Button color<\/td><td>Load more button<\/td><td>Select button color.<\/td><\/tr><tr><td>Button size<\/td><td>Load more button<\/td><td>Select button size.<\/td><\/tr><tr><td>Button alignment<\/td><td>Load more button<\/td><td>Select button alignment.<\/td><\/tr><tr><td>Button icon<\/td><td>Load more button<\/td><td>Add icon to \u201cLoad more\u201d button.<\/td><\/tr><tr><td>Arrows design<\/td><td>Pagination<\/td><td>Select design for arrows.<\/td><\/tr><tr><td>Arrows position<\/td><td>Pagination<\/td><td>Arrows will be displayed inside or outside grid.<br><strong>Note:<\/strong>&nbsp;active only if \u201cArrow design\u201d is chosen.<\/td><\/tr><tr><td>Arrows color<\/td><td>Pagination<\/td><td>Select color for arrows.<br><strong>Note:<\/strong>&nbsp;active only if \u201cArrow design\u201d is chosen.<\/td><\/tr><tr><td>Pagination style<\/td><td>Pagination<\/td><td>Select pagination style.<\/td><\/tr><tr><td>Pagination color<\/td><td>Pagination<\/td><td>Select pagination color.<br><strong>Note:<\/strong>&nbsp;active only if \u201cPagination style\u201d is chosen.<\/td><\/tr><tr><td>Loop pages?<\/td><td>Pagination<\/td><td>Allow items to be repeated in infinite loop (carousel).<\/td><\/tr><tr><td>Autoplay delay<\/td><td>Pagination<\/td><td>Enter value in seconds. Set -1 to disable autoplay.<\/td><\/tr><tr><td>Animation In<\/td><td>Pagination<\/td><td>Select \u201canimation in\u201d for page transition.<\/td><\/tr><tr><td>Animation Out<\/td><td>Pagination<\/td><td>Select \u201canimation out\u201d for page transition.<\/td><\/tr><tr><td>Design Options<\/td><td><\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"ContentElements-MasonryPostGrid\"><strong>Masonry Post Grid<\/strong><\/h2>\n\n\n\n<p>Add posts of your WordPress site in masonry grid view. Choose posts type, build your own unique query and define what kind of information to display.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\" >Param name<\/th><th scope=\"col\" >Tab<\/th><th scope=\"col\">Description<\/th><\/tr><\/thead><tbody><tr><td>Data source<\/td><td>General<\/td><td>Select content type for your grid.<\/td><\/tr><tr><td>Narrow data source<\/td><td>General<\/td><td>Enter categories, tags or custom taxonomies.<\/td><\/tr><tr><td>Total items<\/td><td>General<\/td><td>Set max limit for items in grid or enter -1 to display all (limited to 1000).<\/td><\/tr><tr><td>Display Style<\/td><td>General<\/td><td>Select display style for grid.<\/td><\/tr><tr><td>Show filter<\/td><td>General<\/td><td>Append filter to grid.<\/td><\/tr><tr><td>Grid elements per row<\/td><td>General<\/td><td>Select number of single grid elements per row.<\/td><\/tr><tr><td>Gap<\/td><td>General<\/td><td>Select gap between grid elements.<\/td><\/tr><tr><td>Include only<\/td><td>General<\/td><td>Add posts, pages, etc. by title.<br><strong>Note:<\/strong>&nbsp;active only if \u201cData source\u201d is set to \u201cList of IDs\u201d<\/td><\/tr><tr><td>Custom query<\/td><td>General<\/td><td>Build custom query according to&nbsp;<a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/query_posts\">WordPress Codex<\/a>.<br><strong>Note:<\/strong>&nbsp;active only if \u201cData source\u201d is set to \u201cCustom query\u201d<\/td><\/tr><tr><td>Items per page<\/td><td>General<\/td><td>Number of items to show per page.<br><strong>Note:<\/strong>&nbsp;active only if \u201cDisplay style\u201d&nbsp;is set to \u201cLoad more button\u201d, \u201cLazy loading\u201d or \u201cPaginator\u201d.<\/td><\/tr><tr><td>Order by<\/td><td>Data settings<\/td><td>Select order type. If \u201cMeta value\u201d or \u201cMeta value Number\u201d is chosen then meta key is required.<\/td><\/tr><tr><td>Sorting<\/td><td>Data settings<\/td><td>Select sorting order.<\/td><\/tr><tr><td>Offset<\/td><td>Data settings<\/td><td>Number of grid elements to displace or pass over.<\/td><\/tr><tr><td>Exclude<\/td><td>Data settings<\/td><td>Exclude posts, pages, etc. by title.<\/td><\/tr><tr><td>Grid element template<\/td><td>Item design<\/td><td>Select predefined grid element template.<br><strong>Note:<\/strong>&nbsp;It is allowed to create new template or modify selected. Predefined templates will be cloned.<\/td><\/tr><tr><td>Filter by<\/td><td>Filter<\/td><td>Select filter source.<\/td><\/tr><tr><td>Style<\/td><td>Filter<\/td><td>Select filter display style.<\/td><\/tr><tr><td>Alignment<\/td><td>Filter<\/td><td>Select filter alignment.<\/td><\/tr><tr><td>Color<\/td><td>Filter<\/td><td>Select filter color.<\/td><\/tr><tr><td>Filter size<\/td><td>Filter<\/td><td>Select filter size.<\/td><\/tr><tr><td>Button Text<\/td><td>Load more button<\/td><td>Enter text for \u201cLoad more\u201d button.<br><strong>Note:<\/strong>&nbsp;\u201cLoad more\u201d will be used by default.<\/td><\/tr><tr><td>Button style<\/td><td>Load more button<\/td><td>Select button style.<\/td><\/tr><tr><td>Button shape<\/td><td>Load more button<\/td><td>Select button shape.<\/td><\/tr><tr><td>Button color<\/td><td>Load more button<\/td><td>Select button color.<\/td><\/tr><tr><td>Button size<\/td><td>Load more button<\/td><td>Select button size.<\/td><\/tr><tr><td>Button alignment<\/td><td>Load more button<\/td><td>Select button alignment.<\/td><\/tr><tr><td>Button icon<\/td><td>Load more button<\/td><td>Add icon to \u201cLoad more\u201d button.<\/td><\/tr><tr><td>Design Options<\/td><td><\/td><td>Control borders, background and other styling options.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"   id=\"ContentElements-Button\"><strong>Button<\/strong><\/h2>\n\n\n\n<p>Add button with multiple color and styling options: Modern, Classic, Flat, Outline, 3D Custom, Outline custom.<\/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>Text which will appear on the button.<\/td><\/tr><tr><td>URL (Link)<\/td><td>Button link.<\/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>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-CalltoAction\"><strong>Call to Action<\/strong><\/h2>\n\n\n\n<p>Create call to action block with heading, text, button and control its styling.<\/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>Heading<\/td><td>Enter text for heading line.<\/td><\/tr><tr><td>Subheading<\/td><td>Enter text for subheading line.<\/td><\/tr><tr><td>Use Custom font for Heading?<\/td><td>Adds option to set Custom font to Heading.<\/td><\/tr><tr><td>Use Custom font for Subheading?<\/td><td>Adds option to set Custom font to Subheading.<\/td><\/tr><tr><td>Text alignment<\/td><td>Select text alignment in \u201cCall to Action\u201d block.<\/td><\/tr><tr><td>Shape<\/td><td>Select call to action shape.<\/td><\/tr><tr><td>Style<\/td><td>Select call to action display style.<\/td><\/tr><tr><td>Color<\/td><td>Select color of the Call to Action.<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 with color picker.<br><strong>Note:<\/strong>&nbsp;Available if \u201cStyle\u201d is set to \u201cCustom\u201d.<\/td><\/tr><tr><td>Text color<\/td><td>Select color for text with color picker.<br><strong>Note:<\/strong>&nbsp;Available if \u201cStyle\u201d is set to \u201cCustom\u201d.<\/td><\/tr><tr><td>Text<\/td><td>Add\/Edit text of call to action block using WYSIWYG editor TinyMCE.<\/td><\/tr><tr><td>Width<\/td><td>Select call to action width (percentage).<\/td><\/tr><tr><td>Add button?<\/td><td>Add button to Call to Action. Control position, alignment, style, color etc.<\/td><\/tr><tr><td>Add icon?<\/td><td>Add icon to Call to Action. Control position, alignment, background, color etc.<\/td><\/tr><tr><td>CSS animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-VideoPlayer\"><strong>Video Player<\/strong><\/h2>\n\n\n\n<p>Insert video in your layout. Choose from multiple formats accepted by WordPress.<\/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>Widget title<\/td><td>Title of widget which will be displayed above widget.<\/td><\/tr><tr><td>Video link<\/td><td>Link to the video. More about supported formats at WordPress&nbsp;<a href=\"https:\/\/codex.wordpress.org\/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F\">codex page<\/a>.<\/td><\/tr><tr><td>Video width<\/td><td>Select video width in percentage. Percentage will be calculated from the size of container (column).<\/td><\/tr><tr><td>Video aspect ratio<\/td><td>Select aspect ratio of video with 16:9 set as default.<\/td><\/tr><tr><td>Alignment<\/td><td>Control alignment of video player within container (column).<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-RawHTML\"><strong>Raw HTML<\/strong><\/h2>\n\n\n\n<p>Insert your custom HTML content if necessary<\/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>Raw HTML<\/td><td>Enter your HTML content.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-RawJS\"><strong>Raw JS<\/strong><\/h2>\n\n\n\n<p>Insert your custom JS code if necessary<\/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>Raw JS<\/td><td>Enter your JS code.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<p><strong>Empty Space<\/strong><\/p>\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>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<p><strong>Custom Heading<\/strong><\/p>\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>Text<\/td><td>Enter your content.<\/td><\/tr><tr><td>Element tag<\/td><td>Select element tag.<br><strong>Note:<\/strong>&nbsp;H1 tag is available for Custom Heading starting from version 4.7.<\/td><\/tr><tr><td>Text align<\/td><td>Select text alignment.<\/td><\/tr><tr><td>Font size<\/td><td>Select font size. By default the size defined by your theme for specific tag will be used.<\/td><\/tr><tr><td>Line height<\/td><td>Select line height to set space between lines.<\/td><\/tr><tr><td>Text color<\/td><td>Select color of your text.<\/td><\/tr><tr><td>Use font family from the theme<\/td><td>Set font family of Custom Heading to theme default.<br><strong>Note:<\/strong>&nbsp;This will disable Font Family and Font Style options.<\/td><\/tr><tr><td>Font Family<\/td><td>Select Google Font family from predefined list.<\/td><\/tr><tr><td>Font style<\/td><td>Select font styling available for chosen font family. For example light, normal, bold, italic, etc.<\/td><\/tr><tr><td>Google Fonts preview<\/td><td>See how you chosen Font Family and Font style looks like.<\/td><\/tr><tr><td>CSS Animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<p><strong>Icon Element<\/strong><\/p>\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>Icons source<\/td><td>Select icon source (Library).<\/td><\/tr><tr><td>Icon<\/td><td>Select icon from chosen Icon source (Library).<\/td><\/tr><tr><td>Color<\/td><td>Select color of your icon.<br><strong>Note:<\/strong>&nbsp;Custom color is available.<\/td><\/tr><tr><td>Background style<\/td><td>Select background style for your icon (default is \u2018None\u2019).<\/td><\/tr><tr><td>Background color<\/td><td>Select color of icon\u2019s background (only if Background style is chosen).<br><strong>Note:<\/strong>&nbsp;Custom color is available.<\/td><\/tr><tr><td>Size<\/td><td>Select icon size from Mini, Small, Medium, Large, Extra Large.<\/td><\/tr><tr><td>Icon alignment<\/td><td>Select icon alignment.<\/td><\/tr><tr><td>URL (link)<\/td><td>Icon link.<\/td><\/tr><tr><td>CSS animation<\/td><td>Add animation to your element.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/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<h2 class=\"wp-block-heading\"   id=\"ContentElements-DefaultWidgetsofWP\"><strong>Default Widgets of WP<\/strong><\/h2>\n\n\n\n<p>With\u00a0WPBakery Page Builder you can easily add all existing default WP widgets. All widgets are listed within\u00a0WPBakery Page Builder element list.<\/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>Widget title<\/td><td>Title of widget which will be displayed above widget.<\/td><\/tr><tr><td>Element ID<\/td><td>Add unique element ID (Note: make sure it is unique and valid according to&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\">w3c specification<\/a>).<\/td><\/tr><tr><td>Extra class name<\/td><td>Add class name in order to refer to this element in CSS.<\/td><\/tr><\/tbody><\/table><\/figure>","protected":false},"excerpt":{"rendered":"<p>This is a list of 40+\u00a0available content elements\u00a0that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks, you are building your layout. Most of the content elements have options to set them click pencil icon. To save changes click save button. Row \u201cRow\u201c is the main content element of WPBakery Page Builder\u00a0 . Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1\/2 + 1\/2, 1\/3 + 1\/3 + 1\/3, and so on). Your page can have an unlimited number of rows. \u00a0 To change row\u2019s position, click and drag row\u2019s drag handler (top left row\u2019s corner) and drag row around (vertical axis). Param name Description Row stretch Select stretching options for row and content (Note: stretched may not work properly if parent container has \u201coverflow: hidden\u201d CSS property). Column gap Set gap between columns, all columns within row will be affected by this value. Full height row Set row to be full height.Note:&nbsp;if content will exceed screen size then row will be bigger than screen height as well. Columns position Set columns position for full height row \u2013 Top, Middle, Bottom.Note:&nbsp;active only if \u201cFull height row\u201d is selected. Equal height Set all columns to be equal height.Note:&nbsp;all columns will have same height as longest column. Content position Set content position within columns \u2013 Default, Top, Middle, Bottom.Note:&nbsp;Default value will be used top or other if defined within theme. Use video background Set YouTube background for row. YouTube link Enter link to YouTube video to set it as row background.Note:&nbsp;YouTube video will overwrite background images and can be used with parallax effect. Parallax Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options). Image Select image from media library for parallax.Note:&nbsp;active only if \u201cParallax\u201d effect is chosen. Parallax speed Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.Note:&nbsp;active only if Image or Video parallax effect is enabled. Row ID Enter row ID (Note: make sure it is unique and valid according to&nbsp;w3c specification). CSS Animation Add animation to your element. Extra class name Add class name in order to refer to this element in CSS. Design Options Control borders, background and other styling options. Important:\u00a0Row allows you build complex layouts by inserting inner row within root level row\/column. Take into account that it is not allowed to insert inner row within inner row. Column \u201cColumns\u201c are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position). Param name Description Use video background Set YouTube background for row. YouTube link Enter link to YouTube video to set it as row background.Note:&nbsp;YouTube video will overwrite background images and can be used with parallax effect. Parallax Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options). Image Select image from media library for parallax.Note:&nbsp;active only if \u201cParallax\u201d effect is chosen. Parallax speed Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.Note:&nbsp;active only if Image or Video parallax effect is enabled. Element ID Add unique element ID (Note: make sure it is unique and valid according to&nbsp;w3c specification). Extra class name Add class name in order to refer to this element in CSS. Design Options Control borders, background and other styling options. Width &amp; Responsiveness Control width, offset and visibility of element on different devices. Section \u201cSection\u201c is root type container element that allows you to \u2018group\u2019 several rows. You can insert section into root canvas only (section element can not be inserted into any other element, including row). Section element can contain only row elements. Param name Description Section stretch Add class name in order to refer to this element in CSS. Full height section? Set section to be full height.Note:&nbsp;if content will exceed screen size then row will be bigger than screen height as well. Content position Set content position within columns \u2013 Default, Top, Middle, Bottom.Note:&nbsp;Default value will be used top or other if defined within theme. Use video background? Set YouTube background for section. YouTube link Enter link to YouTube video to set it as section background.Note:&nbsp;YouTube video will overwrite background images and can be used with parallax effect. Parallax Add parallax type background for section (Note: If no image is specified, parallax will use background image from Design Options). Image Select image from media library for parallax.Note:&nbsp;active only if \u201cParallax\u201d effect is chosen. Parallax speed Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.Note:&nbsp;active only if Image or Video parallax effect is enabled. CSS Animation Add animation to your element. Section ID Enter section ID (Note: make sure it is unique and valid according to&nbsp;w3c specification). Disable section Allows you to disable section (It will not be visible to the public). Extra class name Add class name in order to refer to this element in CSS. Design Options Control borders, background and other styling options. 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 Add\/Edit content using WYSIWYG editor TinyMCE. CSS animations Add animation to your element. Element ID Add unique element ID (Note: make sure it is unique and valid according to&nbsp;w3c specification). 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 Choose color of your separator line, [&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-5656","docs","type-docs","status-publish","hentry","doc_category-page-builder"],"_links":{"self":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs\/5656","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=5656"}],"version-history":[{"count":0,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/docs\/5656\/revisions"}],"wp:attachment":[{"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/media?parent=5656"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/doc_category?post=5656"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bakrie-brothers.com\/id\/wp-json\/wp\/v2\/doc_tag?post=5656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}