Intro to 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.

Custom Element Templates

Overview and theme options

You can create your custom Advanced Layout Builder (ALB) element templates from existing ALB elements with fixed styling and content to speed up the process and to hide options you are not using/changing frequently.

You can use these custom elements as a base for your elements when creating your pages. Changes to these custom element templates will be used in the elements based on these templates.

When creating a CET, all your settings (including the ones that are not locked) become part of the shortcode for the CET (see shortcode in debug window).

If you add the CET to a page, you will find these settings pre-selected.

If you change unlocked settings by editing the CET, these changes are only applied on newly added elements to the page and not on existing elements.

If you add the ALB element and choose the CET as template, your settings of the ALB will remain unchanged and only the values of the locked elements will be used. So, you can always check the layout with different CETs and switch back to your original settings.

You can enable Custom Element Templates (CET) in Enfold > Theme Extensions > Custom Elements tab.

Custom Element Templates theme options

There are 2 groups of options in Custom Elements tab, simple options and advanced options.

Simple options are as following:

Custom Element Templates Management

This is where you enable/disable Custom Element Templates and choose which user roles can create and edit them.

Disabled: Disables CET and hides Custom Elements tab (see “Custom Elements tab” image below) from ALB. This option does not remove your existing CETs so you can temporarily disable this option if necessary.

Editors and Admins: Users with Administrator and Editor roles can create and edit CETs.

Admins only: Only users with Administrator role can create and edit CETs.

Custom Element Templates Locked Options

You can lock fields in your CETs for fixed styling and content. To reduce size of modal popup, locked options and their values are hidden when using element templates by default. However, you may want to enable them to see their values. This is where you choose which user roles can see locked options.

Hide locked options for all users: All users, including Administrators, cannot see locked options and their values.

Hide locked options for non admins: Adds “Show Locked Options” toggle into Customize tab of custom elements for admins only. Locked options and their values are visible to admins after enabling “Show Locked Options” option.

Show locked options to all users: Adds “Show Locked Options” toggle into Customize tab of custom elements for all users. Locked options and their values are visible to all users after enabling “Show Locked Options” option.

Show Locked Options

Checkbox To Show Locked Options

This option appears when you choose “Hide locked options for non admins” or “Show locked options to all users” in Custom Element Templates Locked Options field. By default, locked options remain hidden for admins and editors and can be enabled in “Customize” tab of custom elements. In this field, you can change the default option.

Unchecked for all users: “Show Locked Options” in Customize tab is unchecked for all users. Users need to check it to display locked options.

Unchecked for non admins only: “Show Locked Options” in Customize tab is unchecked for all users except for admins. All non-admin users need to check it to display locked options.

Checked for all users: “Show Locked Options” in Customize tab is checked for all users, locked options and their values are visible to all users by default.

Visible locked field after checking Show Locked Options

Advanced options are as following:

Custom Element Shortcode Buttons

By default, all of your CETs are added to Custom Elements tab of ALB. You can use this option if you would like to keep Layout elements, Content elements and Media elements in separate tabs.

All buttons in a single tab: This is the default option. Keeps all CETs in “Custom Elements” tab.

Custom Elements tab. All buttons in a single tab.

Group buttons similar to ALB: This option adds a dropdown to ALB where you can toggle between ALB Elements and Custom Elements. Custom Elements are added into separate tabs depending on their types, just as in ALB.

Grouped custom elements.

Hierarchical Custom Elements

This option is useful in case you need to create custom version of the same element more than once.

Do not allow hierarchical custom elements: Default option. Each element needs to be created from scratch.

Allow use of hierarchical custom elements: Adds “Select Custom Element Template” field to Customize tab of your Custom Element where you can choose another CET as a base template. Fields you locked in your base template remain locked. Recommended for advanced users.

Select Custom Element Template field for hierarchical custom elements option

Custom Elements For Subitems

Changing this option will have no effect on existing elements in a page. You must edit these elements and save the page.

All subitems use the same custom element template: Default option. Each item in your element will use the same fields. For example, if you create a new Tabs custom element and choose to lock Tab Icon option, Tab Icon will be locked for every tab you add in your element.

Individually select subitem custom element templates: This option lets you create custom subitem templates and to use pre-added subitems. For example, you could create a custom Button Row element with 3 buttons so when you add this element to your page, all 3 buttons will be loaded.

You can also create custom template for subitems and load these templates in Customize tab of subitem. For example, you could create a new subitem template for Button Row subitems and lock “Button Icon” field. When editing your Button Row subitems, you can load that template in each button subitem individually. Recommended for advanced users.

Individual selection of subitem custom element templates.

“Save as new custom element” button creates a new CET with the settings of the current ALB element (including locked values) pre-selected.

Do not allow to use subitem custom element templates: If you choose this option, you will not be able to customize subitems of your elements. Recommended for advanced users.

Creating and editing Custom Element Templates

You will see a new tab in ALB called Custom Elements after enabling Custom Element Templates Management in Enfold theme options. This is where we add and edit our CETs.

You can create CETs from almost every ALB element. Available elements are:

Layout Elements

  • Color Section
  • Column elements

Content

  • Accordion
  • Animated Countdown
  • Animated Numbers
  • Blog Posts
  • Button
  • Button Row
  • Catalogue
  • Comments
  • Contact Form
  • Content Slider
  • Fullwidth Button
  • Headline Rotator
  • Icon
  • Icon Box
  • Icon Grid
  • Icon List
  • Magazine
  • Masonry
  • Notification
  • Portfolio Grid
  • Post Metadata
  • Post Slider
  • Progress Bars
  • Promo Box
  • Separator / Whitespace
  • Social Share Buttons
  • Special Heading
  • Tabs
  • Team Member
  • Testimonials
  • Textblock
  • Timeline

Media

  • Accordion Slider
  • Audio Player
  • Easy Slider
  • Featured Image Slider
  • Fullscreen Slider
  • Fullwidth Easy Slider
  • Gallery
  • Horizontal Gallery
  • Image
  • Image with Hotspots
  • Masonry Gallery
  • Partner/Logo Element
  • Video

Plugins

  • Events Countdown
  • Product Grid
  • Product List
  • Product Slider
  • Upcoming Events

Creating CETs is pretty simple. You can simply choose the element you would like to customize, name it and then simply adjust the values in the fields that are meant to be fixed and lock them.

Custom Button Template with locked Button Color and Custom Background Color fields.

Please note, if you choose “Custom Color” option and lock it, users of this CET will be able to change “Custom Background Color”. If you lock only “Custom Background Color”, users will be able to change “Custom Color”. So in case you would like to set a fixed custom color, you would need to lock both options.

If you would like to delete your CET or to edit it to lock additional fields or to unlock them, you can simply click Edit Custom Elements button and hover on your CET to reveal edit and delete icons.

Custom Elements edit view

For Developers

This is only a quick guide – for more details, please check already existing elements.

Mark an ALB element to support templates:

$this->config['base_element'] = 'yes';
$this->config['name_item'] = __( 'Button Row Item', 'avia_framework' );
$this->config['tooltip_item'] = __( 'A Button Row Button Element', 'avia_framework' );

Add the template selection tab:

				array(	
						'type'			=> 'template',
						'template_id'	=> 'element_template_selection_tab',
						'args'			=> array( 'sc' => $this )
					),

Mark options to support locking (not all options support locking yet – check in config-templatebuilder\avia-template-builder\php\html-helper.class.php)

'lockable' => true,

Select multiple options to lock with:

'locked' => array( 'icon', 'font' ),

For a type = modal_group element add:

'editable_item' => true,

in editor_element():

$locked = array();
$attr = $params['args'];
$content =  $params['content'];
Avia_Element_Templates()->set_locked_attributes( $attr, $this, $this->config['shortcode'], $default, $locked, $content );

and use:

$this->class_by_arguments_lockable( 'icon_select, color, size, position', $attr, $locked )

$this->update_template_lockable

If template needs a reload to show locked options correctly add to (outer) container:

data-update_element_template='yes'

in shortcode_handler()

Avia_Element_Templates()->set_locked_attributes( $atts, $this, $shortcodename, $default );

If $content is locked:

$locked = array();
Avia_Element_Templates()->set_locked_attributes( $atts, $this, $shortcodename, $default, $locked, $content );

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;

Developer options

How to use developer options?

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.

To access the developer options, please go to Enfold theme options > Layout Builder > General Builder Options and Turn on or off the developer options.

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');

Custom heading tags for ALB elements

For SEO purpose you can change the heading tags for certain theme elements. Please check the link Change the heading tags of the theme elements for SEO purpose

Aria Label

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.

To enable custom ARIA labels please use the below code in your functions.php file.

/* 
 * Returns option settings for developer options.
 * Allows to distinguish settings for individual input fields.
 * This implementation was used prior 4.6.4 where each input field had an own option
 * 
 * @since 4.5.7.2
 * @param string $value				
 * @param string $setting			
 * @param string $option_value		'show' | 'hide'
 * @return string|false				'deactivate' = hide and ignore input values  (is removed from options)
 *									'hide'       = hide input fields but use values
 *									'developer_options' | 'developer_id_attribute' | 'developer_seo_heading_tags' | 'developer_aria_label'       
 *									              = show input fields and use values
 */
function custom_alb_get_developer_settings( $value, $setting, $option_value )
{
	
	switch( $setting )
	{
		case 'custom_css':
			/**
			 * allowed return values
			 */
//			$value = 'developer_options';
//			$value = 'hide';
//			$value = 'deactivate';
			
			break;
		case 'custom_id':
			/**
			 * allowed return values
			 */
//			$value = 'developer_id_attribute';
//			$value = 'hide';
//			$value = 'deactivate';
			
			break;
		case 'heading_tags':
			/**
			 * allowed return values
			 */
//			$value = 'developer_seo_heading_tags';
//			$value = 'hide';
//			$value = 'deactivate';
			
			break;
		case 'aria_label':
			/**
			 * allowed return values
			 */
//			$value = 'developer_aria_label';
//			$value = 'hide';
//			$value = 'deactivate';
			
			break;
		case 'alb_desc_id':
			/**
			 * allowed return values
			 */
//			$value = 'developer_alb_desc_id';
//			$value = 'hide';
//			$value = 'deactivate';
			
			break;
		default:
			$value = false;
	}
			
	return $value;
}

add_filter( 'avf_alb_get_developer_settings', 'custom_alb_get_developer_settings', 10, 3 );

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:

function avf_alb_supported_post_types_mod( array $supported_post_types )
{
  $supported_post_types[] = 'YOUR CUSTOM POST NAME';
  $supported_post_types[] = 'YOUR CUSTOM POST NAME';
  return $supported_post_types;
}
add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);

For layout meta box please use the below function:

function avf_metabox_layout_post_types_mod( array $supported_post_types )
{
 $supported_post_types[] = 'YOUR CUSTOM POST TYPE';
 return $supported_post_types;
}
add_filter('avf_metabox_layout_post_types', 'avf_metabox_layout_post_types_mod', 10, 1);
  • We recommend to use a child theme and paste the snippet in your child themes functions.php file.
  • Make sure to replace the word ‘CUSTOM_POST_NAME’ 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 nicely on single blog entries when used with the post type “post” the blog feed could easily be messed up because of fullwidth elements.)

Remove editor name from page/post title

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.

// Hide editor info

add_filter('display_post_states','remove_ALB_post_state',999,2);
function remove_ALB_post_state( $post_states, $post ) {
	if("! has_blocks( $post->ID )") {
		unset($post_states['wp_editor']);
	}
	if("!= Avia_Builder()->get_alb_builder_status($post->ID)") {
		unset($post_states['avia_alb']);
	}
return $post_states;
}

Troubleshoot

Using special characters

There are some special characters you cannot use in Textblock and input fields because they break the internal structure – this is a known limitation in our builder.

Download the Special Character Translation plugin that helps to solve the problem.

And here is the list of characters and their replacement:

< = ###lt### >    =    ###gt###
[    =    ###91###
]    =    ###93###

Whenever you want to use one of the above special characters please replace the character with its hash value.

Usage example:

Replace > with ###gt###

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 “Click here >” title, for example.

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.

Troubleshoot: Text Block element not loading

This is a rare case but if typing certain words, such as “get” or “include“, in Text Block element breaks it after saving, there might be a modsec rule in firewall settings causing this issue.

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.

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 Preser “.


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