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:

1. 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.
2. 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.

If you are wanting to add a widget area to your header then add this to the bottom of your functions.php file.

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}

Note: in case you’re using a layout with the menu below the header area use this code instead:

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}

And then navigate to Dashboard > Appearance > Widgets and create a new widget area named header and add some widgets to it.

Depending on what your trying to do some CSS code will be required. If you want the widget area to be centered in the header then add this to your custom CSS.

#header .widget {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
}

If you have any questions feel free to post them in the support forums and we’ll be with you shortly.

In this tutorial you’ll learn how to implement a MailChimp form in Enfold, we’ll use the MailChimp For WordPress plugin. I’m assuming you already have a MailChimp List set-up and your API Key inserted in the plugin options.

Creating a basic Form

Once you got the plugin installed and configured go to MailChimp for WordPress > Forms and replace the default Form mark-up with the following (modify according to your MailChimp List structure):

<p>
<label>Your Name:</label>
<input type="text" name="FNAME" placeholder="Your name" required />
</p>
<p>
<label>Email address: </label>
<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p>
<input type="submit" value="Sign up" class="button" />
</p>

Note: make sure the Load form styles (CSS)? setting is set to No.

Form styling

In order to get the MailChimp form to inherit the Enfold form styles you’ll need to add the following code to Quick CSS or child theme style.css (recommended):

.mc4wp-form form{margin:0!important;clear:both}
.mc4wp-form p br{display:none}
.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.mc4wp-form p{position:relative;clear:both;float:left;width:100%}
.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}
.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.mc4wp-form .first_form{clear:both;margin-left:0}
@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .mc4wp-form input[type='text'],#top .mc4wp-form input[type='email'],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}
#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}
.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

Using the Form

Now wherever (Text Block, Widget, etc) you place the plugin shortcode [mc4wp_form] it will automatically pick up the Enfold form styles:

Playing with columns

If you want to make use of the Enfold form columns you’ll need to modify the Form mark-up accordingly, for example for a one-line form (note the classes added to the paragraphs):

<div class="av-form-labels-visible">
<p class="first_form form_element form_element_third">
<label>Your Name:</label>
<input type="text" name="FNAME" placeholder="Your name" required />
</p>
<p class="form_element form_element_third">
<label>Email address: </label>
<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p class="form_element form_element_third modified_width">
<input type="submit" value="Sign up" class="button" />
</p>
</div>

Result:

Using only placeholders

Remove the “av-form-labels-visible” class if you are planning to not use placeholder for the form fields.

Extra: Opt-in box at the end of each Post

Add the following to your theme / child theme functions.php:

function add_mc_after_post_content() {
if (is_singular("post")){
?>
<div class="av-sub-box">
<h5 class='av-sub-box-title'>Suscribe to our Blog</h5>
<?php echo do_shortcode("[mc4wp_form]"); ?>
</div>
<?php
}
}
add_action('ava_after_content', 'add_mc_after_post_content');

And the following to Quick CSS / style.css:

/* av-sub-box */
.av-sub-box{ 
  padding: 20px; 
  background: #F4F4F4; 
  width:100%; 
  clear:both; 
  float:left; 
  margin-top: 80px; 
  border: 1px solid #e1e1e1;
  margin-bottom: -40px; 
  border-radius: 3px;
}

Result:

If your icons are showing like this, it may be because of a CORS-related issue, here’s how to fix it:

Apache

Look for the .htaccess file at the root of your WordPress installation and add the following to it:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

IIS7

Look for the web.config file at the root of your WordPress installation and merge it with the following:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

If you are not receiving e-mails from the contact form, here are some troubleshooting tips that you can try before asking in the support forums.

1. Typos and SPAM

Double check that the e-mail address you’re using does not have any typos. Also be sure to check your spam folder in your e-mail client. If possible, try with another address to discard.

2. Check if WordPress is able to send e-mails

Go to the login screen of your WordPress installation and attempt to recover your user password, if you do get the e-mail then it may be that your server is only allowing e-mails sent from the default WP address (should be like “wordpress@yoursite.com”). In this case you can set the Enfold contact form to send messages from that address, just add the following snippet to your theme / child theme functions.php file:

function change_cf_from() {
    return "wordpress@yoursite.com";
}
add_filter('avf_form_from', 'change_cf_from', 10);

3. Deactivate Plugins

If you see the contact form “Send” button is not responding then it could be that a plugin is causing a JavaScript conflict on the page. Deactivate all plugins and try again.

4. Third-party plugin form testing

Install the Contact Form 7 plugin, create a Form and do some tests. If no e-mails are received then it’s most likely a problem with your hosting provider. You will want to contact them and let them know you are having trouble with e-mail sending to see if there are any problems.

5. Using SMTP

If your hosting provider requires you to use SMTP then you can setup the WP SMTP plugin to have WordPress use SMTP instead of PHP mail. You will need to grab the SMTP server information from your hosting provider.

In case you want to modify something in an Enfold translation you can do it by directly editing the translation file. However, if you update the theme these modifications will be lost. To avoid this, it is recommended to use a child theme approach, here’s how to do it.

Step 1

Create a /lang/ folder in your child theme directory and copy (from the parent theme) the translation files to be modified:

Step 2

Add the following to your child theme functions.php file:

function overwrite_language_file_child_theme() {
    $lang = get_stylesheet_directory().'/lang';
    return $lang;
}
add_filter('ava_theme_textdomain_path', 'overwrite_language_file_child_theme');

Now the translations found in your child theme /lang/ folder will be loaded instead.

Please go to Appearance > Editor and open functions-enfold.php file and add following code right after closing of ‘//advanced title + breadcrumb function’ function

add_shortcode( 'bread_crumb', 'avia_title' );

Then add breadcrumbs using following shortcode

[bread_crumb]

then open Enfold/template-builder.php file and comment out 19th line as following

	 //check if we want to display breadcumb and title
	 //if( get_post_meta(get_the_ID(), 'header', true) != 'no') echo avia_title();

If you would like to add it to your child theme, please copy the whole functions from functions-enfold.php file to functions.php file of your child theme.

If you would like to display a different logo on mobile, please add following code to Functions.php file in Appearance > Editor

add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(wp_is_mobile() )
    {
    $logo = "http://www.kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    return $logo;
}

Some users will experience a limit to the number of items they can add to their menu. Unfortunately, this manifests as all menu items after the first X (X may be 16, 72, 270, or any number), and the rest will be lost.

This limit is NOT imposed by Enfold or WordPress. The limit is actually a server configuration issue. There are a few easy ways to solve this issue:

Via .htaccess file:

Add the following line to your .htaccess file:

php_value max_input_vars 5000

Via php.ini:

Search for the “max_input_vars” setting in your php.ini file and change it to:

max_input_vars = 5000;

General rule of thumb is: the higher the number in the setting, the more menu items you can create.

If neither of those 2 solutions fixes the problem there are a few other thing you can try, which are mentioned here

(Credit for the original article goes to sevenspark.com)

The following code will make Fontello-imported icons to be available as an option in Enfold > Social Profiles:

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
	$icons['icon_name']	 = array( 'font' =>'fontello', 'icon' => 'ue800');
	return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
	$icons['Icon Label'] = 'icon_name';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

Note: you may need to change “fontello” to the name of the imported font (you can check that in Enfold > Import/Export > Iconfont Manager) and “ue800″ for the icon code of the Icon you want to use (most of the times is ue800).

Depending on your menu item quantity and logo size, your menu may overlap your menu items on tablets. To avoid that, please firstly make sure that you chose to display mobile menu on Smartphones and tablets. You can check it in Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation

It should help in most cases. If it does not, please add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 1100px) { 
.av-main-nav > li > a { padding: 0 7px; }
}

Please make sure that > sign is not converted in Quick CSS field.

If that too does not help, please start a thread on our support forum and we will provide you accurate custom CSS code for your site.

You can add subtext to your logo by adding following code to Functions.php file of your child theme in Appearance > Editor

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= "Company Name";
    return $sub;
}

If you would like to wrap your subtext in a H1 tag, you can change the code to following one

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= '<h1>Company Name</h1>';
    return $sub;
}

And if you would like to display your site title, you can use following code

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= get_bloginfo('name');
    return $sub;
}

To remove logo, please add following code to Quick CSS in Enfold theme options under General Styling tab

.logo > a > img { display: none !important; }

Please make sure that > sign is not converted in Quick CSS field.

If you need help adjusting the code, please feel free to start a thread on our support forum and we will gladly help you.

By default, Enfold displays mobile menu on screens smaller than 768px. You can go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose to display mobile menu on Smartphones and tablets (990px)

Either way, desktop menu will be displayed on landscape mode on tablets. You can add following code to Quick CSS in Enfold theme options under General Styling tab to switch to mobile menu on landscape mode on tablets (1024px)

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}

You may want to hide certain menu items/elements on mobile to save some space and have more minimal look.

To hide certain menu items on mobile, please go to Appearance > Menu and then check “Screen options” on the top right side and then check “CSS Classes”. After that, new field will appear under your menu items. Now you can simply edit your menu items and give “only-dt” custom class to your menu items that you would like to hide on mobile

Please add following code to Quick CSS in Enfold theme options under General Styling tab to hide your selected menu items on mobile

@media only screen and (max-width: 990px) {
.only-dt { display: none !important; }}

and to display certain menu items on mobile, please give them custom CSS class “only-mo” and change your code to following one

@media only screen and (min-width: 990px) {
.only-mo { display: none !important; }}

To hide certain elements on mobile, please firstly turn on custom CSS field for ALB elements and then give them custom CSS class (in our example, we entered “only-desktop” in to custom CSS field) and add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 990px) {
.only-desktop { display: none !important; }}

and to display certain elements on mobile, please give them custom CSS class “only-mobile” and change your code to following one

@media only screen and (min-width: 990px) {
.only-mobile { display: none !important; }}

When you hover on images, their title (“Single Portfolio: 2/3 Gallery” in example below) would show up.

It is a browser feature but it is possible to hide them by adding following code to Functions.php file of your child theme in Appearance > Editor

function remove_title_attr(){
?>
 <script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
 </script>
<?php
}
add_action('wp_footer', 'remove_title_attr');

By default, footer menu and scroll to top button are disabled on mobile to save space. Also, since mobile browsers scroll to top automatically when top of the browser tapped, we think, scroll to top button will not be needed. You can, however, choose to display both elements by using custom CSS code.

Please add following code to Quick CSS in Enfold theme options under General Styling tab to display Footer menu on mobile

@media only screen and (max-width: 767px){
.responsive #socket .sub_menu_socket {
    display: block !important;
}}

Please add following code to Quick CSS in Enfold theme options under General Styling tab to display Scroll to top button on mobile

@media only screen and (max-width: 767px) }
.responsive #scroll-top-link {
    display: block !important;
}}

Even though Color Section element is a fullwidth element, its container width will be limited to “Maximum Container width” that you set in Enfold theme options > General Layout > Dimensions.

You may want to display Color Section element with fullwidth container for plugin shorcodes or to display ALB elements fullwidth.

Please add Color Section element to your page with a unique ID (“portfolio” in screenshot. Let us use “fwcs” to avoid confusion)

#fwcs .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }

In this tutorial you’ll learn how to integrate MailChimp For WordPress plugin. I’m assuming you already have a MailChimp List set-up and your API Key inserted in the plugin options.

Creating a basic Form

Once you got the plugin installed and configured go to MailChimp for WordPress > Forms and replace the default Form mark-up with the following (modify according to your MailChimp List structure):

<p>
<label>Your Name:</label>
<input type="text" name="FNAME" placeholder="Your name" required />
</p>
<p>
<label>Email address: </label>
<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p>
<input type="submit" value="Sign up" class="button" />
</p>

Note: make sure the Load form styles (CSS)? setting is set to No.

Form styling

In order to get the MailChimp form to inherit the Enfold form styles you’ll need to add the following code to Quick CSS or child theme style.css (recommended):

.mc4wp-form form{margin:0!important;clear:both}
.mc4wp-form p br{display:none}
.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.mc4wp-form p{position:relative;clear:both;float:left;width:100%}
.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}
.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.mc4wp-form .first_form{clear:both;margin-left:0}
@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .mc4wp-form input[type='text'],#top .mc4wp-form input[type='email'],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}
#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}
.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

Using the Form

Now wherever (Text Block, Widget, etc) you place the plugin shortcode [mc4wp_form] it will automatically pick up the Enfold form styles:

Playing with columns

If you want to make use of the Enfold form columns you’ll need to modify the Form mark-up accordingly, for example for a one-line form (note the classes added to the paragraphs):

<div class="av-form-labels-visible">
<p class="first_form form_element form_element_third">
<label>Your Name:</label>
<input type="text" name="FNAME" placeholder="Your name" required />
</p>
<p class="form_element form_element_third">
<label>Email address: </label>
<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p class="form_element form_element_third modified_width">
<input type="submit" value="Sign up" class="button" />
</p>
</div>

Result:

Using only placeholders

Remove the “av-form-labels-visible” class if you are planning to not use placeholder for the form fields.

Extra: Opt-in box at the end of each Post

Add the following to your theme / child theme functions.php:

function add_mc_after_post_content() {
if (is_singular("post")){
?>
<div class="av-sub-box">
<h5 class='av-sub-box-title'>Suscribe to our Blog</h5>
<?php echo do_shortcode("[mc4wp_form]"); ?>
</div>
<?php
}
}
add_action('ava_after_content', 'add_mc_after_post_content');

And the following to Quick CSS / style.css:

/* av-sub-box */
.av-sub-box{ 
  padding: 20px; 
  background: #F4F4F4; 
  width:100%; 
  clear:both; 
  float:left; 
  margin-top: 80px; 
  border: 1px solid #e1e1e1;
  margin-bottom: -40px; 
  border-radius: 3px;
}

Result:

Enfold uses custom fields (post meta data) to store the template builder data. Thus you must be careful if you want to export/import pages with plugins like WP Import/Export All because by default the plugins will not export/import custom fields. However it’s really easy to add these fields to the export/import file. If you’re using WP Import/Export All go to “All Export > New Export” on the wordpress admin page and select the post type you would like to export (i.e. “Pages”). Then click “Continue to Step 2”. On the next page you’ll notice the “Available Data” column on the right side. It contains three tabs (“Standard” for standard data, “Custom Fields” for post meta data and “Other” for other data fields).

If you want to be on the safe side I recommend to select the “All Standard”, “All Custom Fields” and “All Other” cards from the tabs and to drag’n’drop these cards to the left area. Then you can be sure that the required data will be exported. If you don’t want to export all fields (i.e. because of the size of the database) then you must at least select following fields – otherwise the template builder won’t work properly after the import: “<_aviaLayoutBuilder_active>”, “<_aviaLayoutBuilderCleanData>”, “<_avia_builder_shortcode_tree>”, “<_thumbnail_id>”, “<layout>”, “<sidebar>”, “<header>”, “<header_title_bar>”, “<header_transparency>” and “<footer>”.
Note: In some cases (i.e. if you’re using complex template builder layouts) you need to export additional fields – I recommend to search for all custom fields which contain the prefix “_avia” – these fields are always required.

After you added all required fields to the left area click on “Continue to Step 3” and then click the green “Confirm & Run Export” button. After the export process has finished click on the “Bundle” button to download the export files. The “Bundle” also contains a configuration file which automatically configures the import script if you want to import the data on another website/server.

To import the “Bundle” go to “All Import” > “New Import” on the wordpress admin page and click on the “Upload a file” button. The “Bundle” configuration file will automatically select the right post type for you and you just need to click on the “Continue to Step 2” button. You can ignore the next settings page and click on the “Continue to Step 3” button. On the next page you’ll notice that the “Custom Fields” tab at the bottom is already configured and contains the custom fields you exported before. Check if necessary fields are configured, then click on “Continue to Step 4”. On the next page click on “Continue”, then “Confirm & Run Import” and the import process will start.

That’s it – you successfully exported/imported your entries including the Enfold template builder data

The Advanced Layout Builder sometimes stops loading properly due to different factors like browser caching. 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
• 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 if for you. 

More information about Enfold and how to update it in THE COMPLETE GUIDE TO UPDATING ENFOLD