Intro to Advanced Layout Builder

Overview and Settings

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.

Settings for Advanced Layout Builder can be accessed from Enfold > Layout Builder

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.

Build a web page with Advanced Layout Builder

Drag and drop web elements can be accessed by clicking on the “Advanced Layout Editor” button on any page or post. Web elements are sorted into 3 main categories called the Layout elements, Content Elements and Media Elements.

Things to note:

  • Color Sections, LayerSliders, and Masonry elements will always be full width and it will push the sidebar to the bottom.
  • Full-width elements like Color Sections, LayerSliders, and Masonry elements cannot be placed inside column elements.
  • The default visual editor and the Advanced Layout Builder use two different sets of data so you aren’t able to switch back and forth between them.

Layout Elements

Layout Elements section consist of Columns, Color Section, Grid Row and Tab Section.  Layout 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.

Content Elements

Elements that make up the content of your web page such as Text 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 position them on a webpage to suit your design.

Media Elements

Images, Sliders, Videos and other media elements can be accessed from the Media Elements tab. Using media elements on a web page can create a visually rich and interactive experience.

Templates

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 the template of your choice is very straightforward.

  1. 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.
  2. To load a template click on the template option and select any of the saved template from the list.

Shortcode

Shortcode for elements

Shortcode for Advanced Layout Builder elements can also be accessed from the Magic wand tool found in the text editor. To access any shortcode simply on the Magic wand tool and select the necessary element.

Debug mode

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’s elements. You can copy and paste the shortcode to re-produce the page and elements or something more advanced like nesting elements.

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:

//set builder mode to debug
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
  return "debug";
}

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.

If you are not using a child theme you need to add the above function after this line in the theme functions.php:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Custom CSS

Turn on Custom CSS Class field for all ALB Elements

Web elements with a unique CSS class name are easy to target using custom CSS and style them.  When the custom CSS class name option is enabled for the Advanced Layout Builder elements. A new field called Custom CSS Class will appear in the element pop-up options.

To enable it, please go to Enfold theme options > Layout Builder and check “Show element options for developers”:


Whenever you open a shortcode/template builder element now you will see the following custom class field:

 
Add Custom Classes to your Elements

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’s style.css file. Just make sure to use unique class names so there are no conflicts with other plugins or the theme’s CSS.

Keep Class Names Unique

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:

ktf-darkborder

Then in the Quick CSS filed in the theme’s Styling options:

#top .ktf-darkborder {
  border: 1px solid #333;
}

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 file using the code below.

add_theme_support('avia_template_builder_custom_css');

Customization

Add Elements to ALB

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’s functions.php:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');

  return $paths;
}

Now add a new folder in your child theme directory called shortcodes. If you copy an element from enfold>config-templatebuilder>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.

Activate the Shop Overview Page

Once you open the WooCommerce default Page, the “Home Page of your shop” 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.


So if you want to build a fancy shop overview with the advanced layout editor you got 2 options:

  • The easier option is to simply create a new Page and add a “Product Grid” template builder element, along with all the other stuff you want to show and simply don’t use the default shop page at all. This should be sufficient in most cases.
  • The more “complicated” option is to activate a beta feature of ours, that disables the WooCommerce Custom Query.
    If 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:
add_theme_support( 'avia_custom_shop_page' );

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

Please keep in mind that solution #2 is a Beta feature and is still tested.

Activate the WooCommerce Product page

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 “Plugin Additions” 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/.

To get access to WooCommerce features, we recommend using the default editor. If you use the layout builder then you’ll need to build the product information manually using the layout builder elements.

ALB for any post type

The Advanced 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:

add_filter('avf_builder_boxes', 'add_builder_to_posttype');

function add_builder_to_posttype($metabox)
{
  foreach($metabox as &$meta)
  {
    if($meta['id'] == 'avia_builder' || $meta['id'] == 'layout')
    {
      $meta['page'][] = 'post'; /*instead add the name of the custom post type here*/
    }
  }
  

  return $metabox;
}
  • We recommend to use a child theme and paste the snippet in your child themes functions.php file.
  • Make sure to replace the word ‘post’ with your custom post type.

Please be aware that this only works well for custom post types that do not use “overview pages” with multiple entries displayed (eg: although this works nice on single blog entries when used with the post type “post” the blog feed could easily be messed up because of fullwidth elements.)

Troubleshoot

Layout Builder is not loading properly

Troubleshoot: Advanced Layout Builder not loading

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:

  • First of all, make sure that you are running the latest version of the theme – you can find out what the latest version is here
  • Clear your browser cache and restart – Guide to clearing your browser cache
  • Try a different browser to verify if you are getting cached results or not – 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.
  • Disable all plugins to see if there is a conflict with any of them – if there is a conflict, you can reactivate them one by one to find out which one is causing the problem.
  • Increase the WordPress memory limit.
  • If none of the above should work, then try to overwrite your theme files with a fresh copy from your Themeforest account – Please make sure to properly back your site up prior to attempting this. Refer to this guide for further instruction on updating via FTP.
  • Still not working? Please open a new ticket in the support forum with admin login details for your installation supplied in private, and we’ll have a closer look at it for you.

Shortcode parser

Building websites sometimes require using theme shortcode and third-party plugins. Some plugins may require you to use shortcode provided by the plugin authors. If not used correctly shortcodes can sometimes break the layout for this purpose we have built a new feature called “Enfold shortcode Praser “.


To enable it:

  • Enable ALB debug mode
  • Below ALB debug window you have a section Enfold Shortcode parser with a select box
  • You have to update the page to check the content

Intended for:

  • normal pages to help users to validate the used shortcodes
  • on ALB pages to find possible problems that might cause a broken layout

Result page also shows the generated shortcode tree