{"id":4084,"date":"2017-09-18T01:39:09","date_gmt":"2017-09-17T16:39:09","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=4084"},"modified":"2025-04-15T13:41:25","modified_gmt":"2025-04-15T11:41:25","slug":"intro-to-layout-builder","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-layout-builder\/","title":{"rendered":"Intro to layout builder"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-22emmc-941abcd99902ceca92cd1e880a06a0d0\">\n#top .av-special-heading.av-22emmc-941abcd99902ceca92cd1e880a06a0d0{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-22emmc-941abcd99902ceca92cd1e880a06a0d0 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-22emmc-941abcd99902ceca92cd1e880a06a0d0 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-22emmc-941abcd99902ceca92cd1e880a06a0d0 av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  > Intro to Layout Builder<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-2rga1qc-13b8d448bd41cdf322c9d0bab71df369 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2r6k1f8-6569b66f83f3842fddd2c8322ab26ac6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview and Settings<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-2o70xus-a49324ab4518fcb40412fd7f1cf113d0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Advanced Layout Editor is a robust page builder with a simple drag and drop interface, it lets you create different page layouts in no time. Advanced Layout Builder (ALB) comprises of web elements like newsletters, tabs, background images\/videos, sliders, forms, maps, media elements, social icons, grid layouts, columns and a lot more.<\/p>\n<p>Settings for Advanced Layout Builder can be accessed from Enfold &gt; Layout Builder<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12771\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Enfold-Child-\u2039-Enfold-\u2014-WordPress.png\" alt=\"\" width=\"224\" height=\"625\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-2mt5gic-dac359abc8e7ea061c404fa00719f160 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold is built on the avia framework which is a very easy to use and powerful editor. Hence we do get a lot of question if users can buy the Advanced Layout Builder as a separate plugin to use it on other themes. The answer is at the moment we do not sell it as a separate plugin but it comes bundled with the Enfold theme.<\/p>\n<\/div><\/section>\n<div  class='hr av-2lks8ic-ac1769e7e9b1d24bce6f620e82e6ba2a hr-default  avia-builder-el-5  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2jnn610-f6cbf8011e1aa687b405a783b3bcfe98 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Build a web page with Advanced Layout Builder<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2ih0j44-0a91ca7ec133d0d19b39f22bceac541f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Drag and drop web elements can be accessed by clicking on the &#8220;Advanced Layout Editor&#8221; button on any page or post. Web elements are sorted into 3 main categories called the <strong>Layout elements<\/strong>, <strong>Content Elements<\/strong> and <strong>Media Elements<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7129\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/alb-button.png\" alt=\"\" width=\"206\" height=\"51\" \/><\/p>\n<\/div><\/section>\n<div  class='avia-video av-2ghpfzo-7d0db3211bb1adbbec1bfc4bace8134b avia-video-16-9 av-no-preview-image avia-video-load-always av-lazyload-immediate av-lazyload-video-embed'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/vimeo.com\/64927358'><script type='text\/html' class='av-video-tmpl'><div class='avia-iframe-wrap'><iframe loading=\"lazy\" title=\"Enfold - Advanced Layout Editor (short)\" src=\"https:\/\/player.vimeo.com\/video\/64927358?h=bcd4f34a28&amp;dnt=1&amp;app_id=122963&autoplay=0&loop=0&controls=1&muted=0\" width=\"1500\" height=\"844\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/script><div class='av-click-to-play-overlay'><div class=\"avia_playpause_icon\"><\/div><\/div><\/div>\n<section  class='av_textblock_section av-2ej1px0-79256b5d6fbef612e6b469ae84adff21 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Things to note:<\/strong><\/p>\n<ul>\n<li>Color Sections, LayerSliders, and Masonry elements will always be full width and it will push the sidebar to the bottom.<\/li>\n<li>Full-width elements like Color\u00a0Sections, LayerSliders, and Masonry elements cannot be placed inside column elements.<\/li>\n<li>The default visual editor and the Advanced Layout Builder use two different sets of data so you aren\u2019t able to switch back and forth between them.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-2diizo4-9241e1b6cca5d4f2b040ad11d88f527e hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2bwn88k-bc2508b39d5aa040a1d8f56503faedc7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Layout Elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2a63n50-f090ca76577f2e1e7aff1ea000bf0388 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Layout Elements section consist of Columns, Color Section, Grid Row and Tab Section. \u00a0Layout elements can be used to define the base layout of your web page. In the Layout Elements section, we will take a detailed look and create different page layouts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7133\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Layout_Elements.png\" alt=\"\" width=\"665\" height=\"235\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Layout_Elements.png 665w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Layout_Elements-300x106.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Layout_Elements-450x159.png 450w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-28e3bw4-3083c4fa1da0de7ca2e3ac207016ed29 hr-default  avia-builder-el-13  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-26rgryc-87460311dae804ffa877d57a5eb15d6e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Content Elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-250ltwk-ee53e4184ee53754a787fa07b7670a12 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Elements that make up the content of your web page such as\u00a0Text Block, Headings, Buttons, Portfolio and many more can be accessed from the Content Elements tab. Most of the content elements can be placed inside the Layout Elements to\u00a0position them on a webpage to suit your design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7131\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Content_Elements.png\" alt=\"\" width=\"665\" height=\"469\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Content_Elements.png 665w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Content_Elements-300x212.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Content_Elements-450x317.png 450w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-23arr0k-c3d9a01788d9126c8e66b3075aa4e519 hr-default  avia-builder-el-16  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-21wiz9w-acf8a0c26ea3227fcdaa3ce3f35e64ec '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Media Elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-204i0vo-bc4afbb70f91cdde3aa74225a1f08a59 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Images, Sliders, Videos and other media elements can be accessed from the Media Elements tab.\u00a0Using media elements on a web page can create a visually rich and interactive experience.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7135\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Media_Elements.png\" alt=\"\" width=\"668\" height=\"236\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Media_Elements.png 668w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Media_Elements-300x106.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Media_Elements-450x159.png 450w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-1yh6tlg-8a6b489f1481abe91a0b03c83a9b2784 hr-default  avia-builder-el-19  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1whmqec-fa41c20d3b7c0203a9b46f437b143e6e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Templates<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1ucivuc-6639f1b5ca55e26df650869e49c61503 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In some cases, you may have to create the same layout for many pages. The templates feature makes it easy and saves a lot of time to re-produce the layouts. Creating templates and loading\u00a0the template of your choice is very straightforward.<\/p>\n<ol>\n<li>To create a template which you can later re-use on other pages, click on template on top right of the advanced layout builder and save the template by giving a custom name.<\/li>\n<li>To load a template click on the template option and select any of the saved template from the list.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7137\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Template.png\" alt=\"\" width=\"672\" height=\"278\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Template.png 672w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Template-300x124.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Template-450x186.png 450w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-1qkr71w-7af6b0917b2e6e6b3f904c7717836fd7 hr-default  avia-builder-el-22  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1s30uuc-94f8fa09aa429be6720c47da923b5927 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Shortcode<\/h2>\n<\/div><\/section>\n<div  class='hr av-1qkr71w-23-b83a5fd1ff23dc09c5d1c625665096f8 hr-default  avia-builder-el-24  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-62o67o-8b60ce7fc63f85837cc17d8ba0893ff7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode for elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1mw7gn8-28d689a761a0014bcc925345ef8e1085 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Shortcode for Advanced Layout Builder elements can also be\u00a0accessed from the Magic wand\u00a0tool found in the\u00a0text editor. To access any shortcode simply on the Magic wand tool and select the necessary element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7134\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand.png\" alt=\"\" width=\"1035\" height=\"625\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand.png 1035w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand-300x181.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand-768x464.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand-1030x622.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand-705x426.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/magic-wand-450x272.png 450w\" sizes=\"auto, (max-width: 1035px) 100vw, 1035px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-1l9ljus-f4dc2f1a818d2ed6ea87013b578fb237 hr-default  avia-builder-el-27  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1k76g6s-207e96df593f45cbcfddb962ffbcf9f2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Debug mode<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1ikkytw-00b57388b47b62304bbdd94b03199f7d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you would like to view the shortcode of a page or elements of the page. The Debug mode allows you to view the shortcode for the page and it&#8217;s elements. You can copy and paste the shortcode to re-produce the page and elements or something more advanced like nesting elements.<\/p>\n<p>To do this, you need to enable the debug field for the Advanced Layout Builder. Adding the following to your child theme functions.php will do that:<\/p>\n<pre class=\"prettyprint\">\/\/set builder mode to debug\r\nadd_action('avia_builder_mode', \"builder_set_debug\");\r\nfunction builder_set_debug()\r\n{\r\n  return \"debug\";\r\n}<\/pre>\n<\/div><\/section>\n<section  class='av_textblock_section av-1fh6jtw-af5a7e26718ccffa88c459a2f69bbebe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You should now see a new field under the Advanced Layout Builder with the live output of the elements as you add them using the drag and drop interface. Just be careful of editing things in that field as there are no checks or automatic corrections for missing punctuation or code.<\/p>\n<p><strong>If you are not using a child theme you need to add the above function after this line in the theme functions.php:<\/strong><\/p>\n<pre class=\"prettyprint\">if(isset($avia_config['use_child_theme_functions_only'])) return;<\/pre>\n<\/div><\/section>\n<div  class='hr av-1dvknc4-bb2a80b3a30770f052651ade90dd3ace hr-default  avia-builder-el-31  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1co4nbo-7adf60c4bacfc152a47e561db48f9f3a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Developer options<\/h2>\n<\/div><\/section>\n<div  class='hr av-1dvknc4-22-b93fe4fc4cd8dde50658463b7760585d hr-default  avia-builder-el-33  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1co4nbo-21-549524ad21dfc6f68e9382daa27362c5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h3>How to use developer options?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-184bfxw-c927a12a6ab016528bbc6cf7a42a3cc7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold theme is developer friendly, you can add a unique CSS class name or ID to target using custom code to enhance the theme elements.<\/p>\n<p>To access the developer options, please go to Enfold theme options &gt; Layout Builder &gt; General Builder Options and Turn on or off the developer options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12773 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Custom-CSS-1.png\" alt=\"\" width=\"895\" height=\"530\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Custom-CSS-1.png 895w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Custom-CSS-1-300x178.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Custom-CSS-1-768x455.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Custom-CSS-1-705x417.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Custom-CSS-1-600x355.png 600w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-1co4nbo-20-db5b628d2c75f9758fb875c92e4dad30 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h3>Add Custom Classes to your Elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-15w4cr8-698b4122b07e53896360f0fb2b127a4a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12777\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Advanced-Tab-Developer-Options.png\" alt=\"\" width=\"890\" height=\"663\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Advanced-Tab-Developer-Options.png 890w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Advanced-Tab-Developer-Options-300x223.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Advanced-Tab-Developer-Options-768x572.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Advanced-Tab-Developer-Options-705x525.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Advanced-Tab-Developer-Options-600x447.png 600w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/p>\n<p>Now you can add a custom class name of your choice so that you can easily style that element either through the Quick CSS field, custom.css file or your child theme\u2019s style.css file.\u00a0Just make sure to use unique class names so there are no conflicts with other plugins or the theme\u2019s CSS.<\/p>\n<p><strong>Keep Class Names Unique<\/strong><\/p>\n<p>A good practice is to prefix the class with your initials. For example, Kermit The Frog would use the following to add a border to something:<\/p>\n<pre>ktf-darkborder<\/pre>\n<p>Then in the Quick CSS filed in the theme\u2019s Styling options:<\/p>\n<pre>#top .ktf-darkborder {\r\n  border: 1px solid #333;\r\n}<\/pre>\n<p>If you are using a version of Enfold older than version 4.1, and wish to enable the custom CSS class name field, add a function in the functions.php\u00a0file using the code below.<\/p>\n<pre>add_theme_support('avia_template_builder_custom_css');<\/pre>\n<\/div><\/section>\n<div  class='hr av-14j03ck-3fe44b2ad1e4e0e1b8afb82389759a55 hr-default  avia-builder-el-38  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1065vgk-2511b860b4a9aca8ccc695fb34f4fe76 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom heading tags for ALB elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1065vgk-18-7b39fa3496adcb73a9b5d055f6605975 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>For SEO purpose you can change the heading tags for certain theme elements. Please check the link <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/typography\/#change-the-heading-tags-of-the-theme-elements-for-seo-purpose\" target=\"_blank\" rel=\"noopener\">Change the heading tags of the theme elements for SEO purpose<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-14j03ck-19-aa04a12df899c210a580e07169375cc9 hr-default  avia-builder-el-41  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1065vgk-17-cb960f893af5ce2a8f4ed210ba1d0802 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Aria Label<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1065vgk-15-76ea46a270cb968832ac17cad5a97ce7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>ARIA (Accessible Rich Internet Applications) is a set of attributes added to your HTML to help assistive technologies, such as screen readers for the blind, make sense of certain things that are not native to HTML.<\/p>\n<p>To enable custom ARIA labels please use the below code in your functions.php file of your <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/child-theme\/\">Child theme<\/a>.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-wnzo-f314b64fd1c23b05d1bd93299bc13fff hr-default  avia-builder-el-45  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-m9ifhdiv-a7cb1bf3f9300e52923e2180bdeda757 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Force ALB on a CPT<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-m9ifl7ix-7e8d1f44ae79fcba8026d5947e5f1305 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can use this filter to force usage of ALB for a specific post type. This will also hide the switch button with CSS. Also works for Block Editor. When true, gets class avia-force-alb.<\/p>\n<p>If you do not want to force all posts of a post type to use ALB (e.g. because you have old posts using classic editor) you must use a more specific logic.<\/p>\n<p>Please use the below code in your functions.php file of your <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/child-theme\/\">Child theme<\/a>.<\/p>\n<pre><code>\r\nfunction custom_avf_force_alb_usage( $force_alb, $post )\r\n{\r\n\t\/\/\tsecurity check\r\n\tif( ! $post instanceof WP_Post )\r\n\t{\r\n\t\treturn $force_alb;\r\n\t}\r\n\r\n\t\/**\r\n\t * e.g. force all posts with posttype post to use ALB\r\n\t *\/\r\n\tif( 'post' == $post-&gt;post_type )\r\n\t{\r\n\t\t$force_alb = true;\r\n\t}\r\n\r\n\treturn $force_alb;\r\n}\r\n\r\nadd_filter( 'avf_force_alb_usage', 'custom_avf_force_alb_usage', 10, 2 );\r\n<\/code><\/pre>\n<\/div><\/section>\n<div  class='hr av-14j03ck-16-168e09f77751de1e7475c6bc49a323ef hr-default  avia-builder-el-48  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-13nsc3o-0e08ce4e9b39f379892f1ca5c74f11c1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-10wf38k-576c0c7a02056f87f84dd61af4866752 hr-default  avia-builder-el-50  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1065vgk-14-0a4827751ac48e1d53fadcc44a1c1a57 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add Elements to ALB<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-xjvgdw-2bcbaef172900be3273977a1adb2b2ce '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>From within your child theme, you may want to add or edit an Advanced Layout Builder element. To do so, first add the following function to your child theme\u2019s functions.php:<\/p>\n<pre class=\"prettyprint\">add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);\r\nfunction avia_include_shortcode_template($paths)\r\n{\r\n  $template_url = get_stylesheet_directory();\r\n      array_unshift($paths, $template_url.'\/shortcodes\/');\r\n\r\n  return $paths;\r\n}<\/pre>\n<p>Now add a new folder in your child theme directory called shortcodes. If you copy an element from enfold&gt;config-templatebuilder&gt;avia-shortcodes to this folder it will replace the one in the parent and be used instead. You can also add new ones using the other shortcode elements as examples.<\/p>\n<\/div><\/section>\n<div  class='hr av-vm0vp0-1cc0d1601cfc9e36d8287f5c3194421e hr-default  avia-builder-el-53  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-uf6qpw-e604229c526eb7196510e49bc8865c08 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Activate the Shop Overview Page<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-sca73o-0ac5051a852497abf25a010985f994e3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Once you open the WooCommerce default Page, the \u201cHome Page of your shop\u201d so to speak, you will notice that the advanced layout editor is disabled by default (See image). This is because Woocommerce overwrites the contents of this pages and executes a custom query for your products. This does not play well with the way the Advanced Layout editor works.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7130\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/ALB-for-shop-overview.png\" alt=\"\" width=\"1004\" height=\"145\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/ALB-for-shop-overview.png 1004w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/ALB-for-shop-overview-300x43.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/ALB-for-shop-overview-768x111.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/ALB-for-shop-overview-705x102.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/ALB-for-shop-overview-450x65.png 450w\" sizes=\"auto, (max-width: 1004px) 100vw, 1004px\" \/><br \/>\nSo if you want to build a fancy shop overview with the advanced layout editor you got 2 options:<\/p>\n<ul>\n<li>The easier option is to simply create a new Page and add a \u201cProduct Grid\u201d template builder element, along with all the other stuff you want to show and simply don\u2019t use the default shop page at all. This should be sufficient in most cases.<\/li>\n<li>The more \u201ccomplicated\u201d option is to activate a beta feature of ours, that disables the WooCommerce Custom Query.<br \/>\nIf thats the way you want to go, you will need to add the following snippet to either your themes or child themes function.php file:<\/li>\n<\/ul>\n<pre class=\"prettyprint\">add_theme_support( 'avia_custom_shop_page' );<\/pre>\n<p>This will enable the Layout Builder for the default Shop page but also remove the default WooCommerce Products that would usually be displayed on that page. You then have to add them with a template builder element, just as in solution #1<\/p>\n<p>Please keep in mind that solution #2 is a Beta feature and is still tested.<\/p>\n<\/div><\/section>\n<div  class='hr av-qw6zdw-5adb4fd306ea4fc4febf929aa3bdbe2a hr-default  avia-builder-el-56  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-pz1zus-7c4ec0a8a1ed77cb981b44d035c49c90 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Activate the WooCommerce Product page<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-o2a01w-ca394ab33512e0da1bd37e935d7d386f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Activating the Advanced Layout Builder on single product page will override all the default WooCommerce features to provide you with the complete flexibility to design a custom product page. Only elements\/shortcodes that is added by the user will be displayed on this page because ALB uses different set of loops and data. The elements in the \u201cPlugin Additions\u201d tab of the layout builder options can be used to build the product info page in combination with the shortcodes provided by WooCommerce in a codeblock element, http:\/\/docs.woothemes.com\/document\/woocommerce-shortcodes\/.<\/p>\n<p>To get access to WooCommerce features, we recommend using the default editor. If you use the layout builder then you\u2019ll need to build the product information manually using the layout builder elements.<\/p>\n<\/div><\/section>\n<div  class='hr av-m006c4-638726692fb9862a10b91aac6c671883 hr-default  avia-builder-el-59  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-ld0udw-34ffeaf8bf3291114a24a971afa636d1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>ALB for any post type<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-jlwgtw-dd8bdb173259186ddd6b77fdc1f01310 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To activate ALB on your custom post type, you can go to the Enfold theme options &gt; Layout Builder, enable the Show Advanced Options toggle, scroll down, and insert your CPT name into the Activate Your Custom Post Types For ALB field.<\/p>\n<div id=\"attachment_13668\" style=\"width: 2748px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13668\" class=\"wp-image-13668 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options.png\" alt=\"\" width=\"2738\" height=\"1572\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options.png 2738w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-300x172.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-1030x591.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-768x441.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-1536x882.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-2048x1176.png 2048w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-1500x861.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-705x405.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-450x258.png 450w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Show-Advanced-Options-600x344.png 600w\" sizes=\"auto, (max-width: 2738px) 100vw, 2738px\" \/><\/a><p id=\"caption-attachment-13668\" class=\"wp-caption-text\">The Show advanced options toggle<\/p><\/div>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13669\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB.png\" alt=\"\" width=\"2744\" height=\"1570\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB.png 2744w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-300x172.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-1030x589.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-768x439.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-1536x879.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-2048x1172.png 2048w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-1500x858.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-705x403.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-450x257.png 450w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Activate-Your-Custom-Post-Types-For-ALB-600x343.png 600w\" sizes=\"auto, (max-width: 2744px) 100vw, 2744px\" \/><\/a><\/p>\n<p>To use the old\/manual way of activating ALB for CPTs, please read on.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-1yj3h0-7f6c1b21159d1e61f972c531eee91c2c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The\u00a0Advanced Layout Builder is by default only active for Pages and Portfolio items. If you want to use it with other post types (which are added by plugins for example) you can use the following code snippet to do so:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-jlwgtw-13-373751cd672658eb206804efbf0a963e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>For layout meta box please use the below function:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-gdaq04-269d8d955fa543b6a49c03b7afecab1c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>We recommend to use a\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/child-theme\/\">child theme<\/a>\u00a0and paste the snippet in your child themes functions.php file.<\/li>\n<li>Make sure to replace the word \u2018CUSTOM_POST_NAME\u2019 with your custom post type.<\/li>\n<\/ul>\n<div id=\"attachment_13363\" style=\"width: 797px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13363\" class=\"wp-image-13363 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name.png\" alt=\"\" width=\"787\" height=\"429\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name.png 787w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name-300x164.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name-768x419.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name-705x384.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/custom-post-type-name-600x327.png 600w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/a><p id=\"caption-attachment-13363\" class=\"wp-caption-text\">You can click on your custom post type to find the custom post type name<\/p><\/div>\n<p>Please be aware that this only works well for custom post types that do not use \u201coverview pages\u201d with multiple entries displayed\u00a0(eg: although this works nicely on single blog entries when used with the post type \u201cpost\u201d the blog feed could easily be messed up because of fullwidth elements.)<\/p>\n<\/div><\/section>\n<div  class='hr av-e8unxg-85e6f0681fc98c233cc6e0c246338f02 hr-default  avia-builder-el-67  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9nx5xg-a663d4c8d5a9a76131a5b56c54609ce4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Displaying Metadata of your Custom Post Type<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-9nx5xg-9-dfc918d34b7ed3618935bad682551dbd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>After enabling ALB on your CPTs, you can simply add Post Metada element under Content Elements tab of ALB to your custom posts to display metadata.<\/p>\n<\/div><\/section>\n<div  class='hr av-kem1w-729e06400b0a5c0b291a71074099ffa6 hr-default  avia-builder-el-70  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4n9tk4-cb2855818d6c72a7f6639bb247948e2e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove editor name from page\/post title<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2vzfyc-91e6e82ac1dbcacf7d36ee6036a4b6e7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the editor name from the page or post title in the admin area please add the below code to your functions.php file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12378\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Editor-Name-1.png\" alt=\"\" width=\"462\" height=\"389\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Editor-Name-1.png 462w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/Editor-Name-1-300x253.png 300w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/p>\n<\/div><\/section>\n\n<div  class='hr av-e8unxg-10-5e7054a15c22f24254b2eac477f2f9c9 hr-default  avia-builder-el-74  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-lbggjeco-6e8d96a9f6305997dbe1636def12cd3c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to bring shortcode attributes to frontend JS<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-2w0xys-48f69c69ef359699c4e7762e390677c5 hr-default  avia-builder-el-77  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-ln8oter6-3f770d27035bafc592c270004c8bedd4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to duplicate a page or a post without using a plugin<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-9nx5xg-6-5bb6a1cac488c0667490b9a47e3d193a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can use this <a href=\"https:\/\/github.com\/KriesiMedia\/enfold-library\/blob\/master\/codesnippets%2C%20tricks%2C%20plugins\/WP%20Core\/duplicate-posts-and-pages-without-plugins.php\">WP code duplication script<\/a> to duplicate posts or pages without using third-party plugins. Third-party plugins usually cause unexpected issues when duplicating content created with ALB so we recommend using this script.<\/p>\n<p>Please also see <a href=\"#templates\">Templates.<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-4devs4-f21e42f3a1bfa16aa59f3c50ed1cb0d4 hr-default  avia-builder-el-80  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-cvktwk-b69f0148a295dfca4a21fa4e7b5f29ea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<div  class='hr av-144pbo-f2667f71a6fb3d926653af949605a71c hr-default  avia-builder-el-82  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9nx5xg-8-0fe58b00177f25d410bdd5c1089c7cc5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Using special characters<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-229204-0c6d5be691470c07c0f282c5379f5076 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There are some special characters you cannot use in Textblock and input fields because they break the internal structure \u2013 this is a known limitation in our builder.<\/p>\n<p>Download the <a href=\"https:\/\/github.com\/KriesiMedia\/enfold-library\/blob\/master\/codesnippets%2C%20tricks%2C%20plugins\/Enfold\/integration%20plugins\/Enfold\/Special%20Character%20Translation\/avia-special-characters_1_1_3.zip\" target=\"_blank\" rel=\"noopener\">Special Character Translation plugin<\/a> that helps to solve the problem.<\/p>\n<p>And here is the list of characters and their replacement:<\/p>\n<pre><code>&lt; = ###lt### &gt;    =    ###gt###\r\n[    =    ###91###\r\n]    =    ###93###\r\n<\/code><\/pre>\n<p>Whenever you want to use one of the above special characters please replace the character with its hash value.<\/p>\n<p>Usage example:<\/p>\n<p>Replace <code>&gt;<\/code> with ###gt###<\/p>\n<p>Note: If you would like to add tags to run code in your page, you do not need to use the plugin. Your code would run, that is expected behaviour. You would need the plugin if you would like to have button with &#8220;Click here &gt;&#8221; title, for example.<\/p>\n<\/div><\/section>\n<div  class='hr av-144pbo-7-e90c139ee65796c2c57eedd5b57e5e59 hr-default  avia-builder-el-85  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9nx5xg-5-8997d3ac86f3929160f53ae3eb72736f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Layout Builder is not loading properly<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7s3w4k-a05d7f7aea50d159e383138192a508ef '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Troubleshoot: Advanced Layout Builder not loading<\/strong><\/p>\n<p>Sometimes Advanced Layout Builder may stop loading due to different factors like browser caching, server issues or plugin conflicts. Here are a few things you could try to fix it:<\/p>\n<ul>\n<li>First of all, make sure that you are running the latest version of the theme \u2013 you can find out what the latest version is <a href=\"https:\/\/themeforest.net\/item\/enfold-responsive-multipurpose-theme\/4519990#item-description__changelog\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><\/li>\n<li>Clear your browser cache and restart \u2013 <a href=\"http:\/\/www.refreshyourcache.com\/en\/home\/\" target=\"_blank\" rel=\"noopener noreferrer\">Guide to clearing your browser cache<\/a><\/li>\n<li>Try a different browser to verify if you are getting cached results or not \u2013 preferably a browser you have never used to log into the WordPress installation in question with before. If it works as expected in this browser, then you are getting cached results in the first one.<\/li>\n<li>Disable all plugins to see if there is a conflict with any of them \u2013 if there is a conflict, you can reactivate them one by one to find out which one is causing the problem.<\/li>\n<li>Increase the <a href=\"https:\/\/codex.wordpress.org\/Editing_wp-config.php#Increasing_memory_allocated_to_PHP\" target=\"_blank\" rel=\"noopener\">WordPress memory limit<\/a>.<\/li>\n<li>If none of the above should work, then try to overwrite your theme files with a fresh copy from your Themeforest account \u2013 Please make sure to <a href=\"http:\/\/localhost\/enfold\/documentation\/how-to-install-enfold-theme\/#back-up-your-work\" target=\"_blank\" rel=\"noopener noreferrer\">properly back your site up<\/a> prior to attempting this. Refer to <a href=\"http:\/\/localhost\/enfold\/documentation\/how-to-install-enfold-theme\/#ftp-install\" target=\"_blank\" rel=\"noopener noreferrer\">this guide<\/a> for further instruction on updating via FTP.<\/li>\n<li>Still not working? Please open a new ticket in the support forum with admin login details for your installation supplied in private, and we\u2019ll have a closer look at it for you.<\/li>\n<\/ul>\n<\/div><\/section>\n<section  class='av_textblock_section av-7s3w4k-4-dce8683f2f1adcce832ceecd7d10b7e3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Troubleshoot: Text Block element not loading<\/strong><\/p>\n<p>This is a rare case but if typing certain words, such as &#8220;<strong>get<\/strong>&#8220;,&#8221;<strong>include<\/strong>&#8220;, &#8220;<strong>select<\/strong>&#8221; or &#8220;<strong>head<\/strong>&#8221; in Text Block element breaks it after saving, there might be a modsec rule in firewall settings causing this issue.<\/p>\n<p>This is a security measure taken by hosting providers and it is not a theme issue. You can contact your hosting providers and ask them to whitelist those words and that should fix the issue.<\/p>\n<\/div><\/section>\n<div  class='hr av-6kq8zo-40b1e2093343dcc5080778c7f34880c1 hr-default  avia-builder-el-89  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4cyt2s-8e46e2d1d9147528748144cd7c4a22b4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode parser<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2a0z5w-fd2585371ecb18702578f87a1ad521a4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Building websites sometimes require using theme shortcode and third-party plugins. Some\u00a0plugins may require you to use shortcode provided by the plugin\u00a0authors. If not used correctly shortcodes can sometimes break the layout for this purpose we have built a new feature called &#8220;<strong>Enfold shortcode Parser <\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7136\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing.png\" alt=\"\" width=\"1036\" height=\"213\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing.png 1036w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing-300x62.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing-768x158.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing-1030x212.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing-705x145.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/09\/shortcode-prasing-450x93.png 450w\" sizes=\"auto, (max-width: 1036px) 100vw, 1036px\" \/><br \/>\nTo enable it:<\/p>\n<ul>\n<li><a href=\"#debug-mode\">Enable ALB debug mode<\/a><\/li>\n<li>Below ALB debug window you have a section Enfold Shortcode parser with a select box<\/li>\n<li>You have to update the page to check the content<\/li>\n<\/ul>\n<p>Intended for:<\/p>\n<ul>\n<li>normal pages to help users to validate the used shortcodes<\/li>\n<li>on ALB pages to find possible problems that might cause a broken layout<\/li>\n<\/ul>\n<p>Result page also shows the generated shortcode tree<\/p>\n<\/div><\/section>\n<div  class='hr av-6kq8zo-3-fe75d73b26ebdeeb5bda22909738f0e3 hr-default  avia-builder-el-92  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4cyt2s-2-d8eeb73e8f260981d7fef30ede9c7e2a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Frontend media uploader or lightbox when CDN enabled not working<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2a0z5w-1-188c0a6d6b06f4b023fb90472462c0e6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you are using a 3rd party plugin that uses a frontend media uploader and noticed that media button is not working or lightbox is not working when CDN enabled, please go to <strong>Enfold theme options &gt; Performance &gt; Disable Features<\/strong> and set &#8220;Self hosted videos and audio features (WP-Mediaelement scripts)&#8221; to &#8220;Always load media features (= WP default behaviour)&#8221;.<\/p>\n<p>By default the theme will load wp-mediaelement scripts only if needed on your posts and pages. You can disable the feature or force loading these elements if you run into troubles &#8211; some plugins require these elements and rely on the WP default behaviour loading these scripts.<\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,4],"tags":[],"class_list":["post-4084","post","type-post","status-publish","format-standard","hentry","category-documentation","category-getting-started-with-enfold","documentation","getting-started-with-enfold"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/4084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=4084"}],"version-history":[{"count":21,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/4084\/revisions"}],"predecessor-version":[{"id":13929,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/4084\/revisions\/13929"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=4084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=4084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=4084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}