The Enfold Theme review: features, advantages, disadvantages & hacks

The Enfold Theme enjoys great popularity with over 250,000 customers and is an Austrian success story. The developer Christian “Kriesi” Budschedl has developed one of the best WordPress themes with his Enfold Theme. What the multi-purpose theme can (and can’t) do, I’ll show you in this article.

Enfold is extremely flexible and is not only aimed at WordPress beginners. If you take a closer look at the Enfold theme, you will notice that it does not score with the usual strengths and features. And that’s what makes this theme so extraordinary.

While other big themes come with ready-made demo layouts in the triple-digit range, the Enfold theme offers a measly 28 theme demos. Even the demos don’t make the hyper-future design impression. Why is the Enfold theme still one of the best rated themes on the ThemeForest platform?

 

1. the advantages of Enfold Theme

Here I don’t want to rattle off the usual bullshit marketing advantages of the theme, with which every other WordPress theme comes or should come. Responsive web design, WooCommerce compatibility, WPMl-ready etc. should be every premium theme for WordPress nowadays. Here, the Enfold leaves nothing to be desired and does not need to hide behind the Avada theme or other top dogs.

1.1 Good support

The popularity of the Enfold theme is certainly based in large part on the good support. Since the theme comes from Austria, there is a support forum. In addition, Kriesi has meanwhile discontinued all other themes to focus directly only on the Enfold theme. With 7 additional employees the support team is not the biggest – but the most capable!

With a huge community, some English and the support forum, there are really no problems or questions that someone else hasn’t asked before. Over 140,000 posts on the Enfold Theme support forum provide you with a huge resource for your questions. And in the (very unlikely) event that you do run into a unique problem, there’s a competent support response within 24 hours.

 

1.2 Custom Layout Builder

The Enfold Theme is based on the Avia Framework. Kriesi developed this framework especially for the Enfold Theme. It also includes the Avia Layout Architect. This is the page builder of the Enfold Theme. In my eyes the most intuitive and clearest page builder on the wordpress theme market. Unfortunately, the Avia Layout Architect is only available with the Enfold Theme and not separately as a page builder.

In times of Divi Builder and Elementor, Avia Layout Architect seems a bit dusty. Nevertheless, it is clear, reduced and you can implement everything with it. The grid of the theme is also very clear and can be changed intuitively.

Those who come from the Avada theme and know the Visual Composer will be pleased with the clarity of the Avia Layout Architect.

Sure, there are live front-end editors these days that let you set EVERYTHING. But with many options comes a high cognitive challenge. The Avia Layout Architect is logically structured and the elements are clearly divided into tabs. This makes it easy to get started, especially for newbies.

 

1.3 Tidy code

As a WordPress freelancer, I usually throw myself headfirst into the code of the themes. And here the Enfold Theme can score on the whole line. That’s why the Enfold Theme is also interesting for WordPress developers. Of course, non-coders also benefit from the clean and semantic code. This leads to fewer bugs and is also optimally read by Google (search engine optimization).

The clean code results in fewer conflicts with plugins.

In addition, the Enfold code also makes it easier to integrate extras and other features into the theme.

 

1.4 Loading time

The Enfold theme reacts more often to new developments (DSGVO, cookies, pagespeed, etc) in web design. Website loading time is an important ranking factor. That’s why Enfold Theme gives you several options for load time optimization.

Great feature: Unused elements of the Enfold theme are not loaded at all. This way, the theme saves itself.

 

1.5 Developer options

As a developer, the Enfold theme offers you the perfect starting point for your new project. Many hooks and filters allow you to implement extensive adjustments to the theme in an update-safe way. In addition, you can mark each element with its own CSS class (or ID). Especially the CSS code is extremely semantic and can be customized very comfortable. Other themes (like the Avada theme) can take a leaf out of your book.

That’s why the Enfold theme is also very suitable for agencies.

 

1.6 Restrained design

What sounds like a disadvantage at first, can also be an advantage. Due to the restrained (old-fashioned?) design, the Enfold theme leaves a lot of room for your customization. Bad if you just want to install a demo and be done with it. Good, if you have created your own, individual screen design and the Enfold Theme should now serve as a WordPress basis.

 

2. the Enfold Theme disadvantages

You’ve probably already noticed that I’m an absolute Enfold fan. Okay: I admit it! The WordPress projects of the last year I have implemented to a large extent with Enfold. For my needs and application scenarios, the Enfold theme is just perfect. As an absolute beginner who wants to build a hyper-future website with a few clicks, Enfold may not be optimal. So here are the Enfold Theme disadvantages.

 

2.1 Few demos

As mentioned above, there are only 28 pre-built demos for the Enfold theme. These represent many industries:

  • Blog
  • Business website
  • Comming Soon Website
  • Photography portfolio
  • Restaurant Theme
  • One Page Layout
  • Startup Business Theme
  • Store Theme
  • Wedding website
  • Churches website
  • Construction Theme
  • Landing Page Website
  • Lifestyle Blog with Enfold
  • Minimal Portfolio Theme
  • Hotel Website
  • Spa website
  • Travel Theme
  • Consulting Theme
  • App Demo Page
  • Health Coach Website Demo
  • Fitness Studio Theme

However, other themes can score much better here. If you look at the list of the best WordPress themes, you will find many themes with demos in the triple digits. So if you were planning to just install a demo (which is also one-click with Enfold), you might want to check out the DIVI theme. The Enfold theme is only conditionally suitable here.

2.2 No live editor

Live frontend editors seem to be very trendy these days. The Enfold theme comes with a great page builder. However, this is far from live frontend editing. You always have to click save and refresh the page. For me, that’s been part of it since day 1. But the Enfold theme runs stable. However, if you’re not sure about the design and go by trial-and-error, all the saving and updating can be very time-consuming.

2.3 Restrained design

Admittedly: The theme’s own typography is a disaster. I have to edit it for every project. The body text is definitely too small and also the many headlines with small caps (capital letters) are usually hard to read.

Moreover, many themes nowadays come with soft shadows and are extremely “apple”-ized. In contrast, the design of the Enfold theme looks very spartan and not very trendy. That’s why you should make design adjustments. As a trained designer, I usually look forward to this work. However, if you are aesthetically unsure, you should use other themes.

3. enfold theme shortcodes & elements

The Avia Layout Architect structures all elements under the four tabs Layout Elements, Content Elements, Media Elements, Plugin Additions. The individual elements then each have some more options, which are again structured in tabs. This makes the Enfold theme still quite clear despite an increased complexity. In the following I will introduce the individual elements.

 

3.1 Layout elements

The Layout Elements tab deals exclusively with the grid. These are the columns of your website. Here you can define rough layouts. By the way, you can set the width of the whole container (i.e. 1/1) under Enfold Theme -> General Layout -> Dimensions. The container width is 1310px by default.

Parallax backgrounds and video backgrounds can be realized with the color section. The color section is always full-width. When creating raster layouts, you should always group semantic blocks in a color section.

 

3.2 Content elements

38 content elements are at your disposal. Especially nice elements are the Icon Lists, Tab Sections, Accordeon, Post Slider, Process Bars and the Customer Recommendations. With them you can build great websites.

 

3.3 Media elements

Media Element describes everything visual. There are images, videos (also possible via lazy-load), galleries and sliders. Here you can also find Google Maps. Is somehow also a picture. Especially the Accordeonslider is beautiful and versatile. You can also assign an input animation to each image.

 

3.4 Plugin additions

Here you can find everything that was somehow integrated into the Enfold theme via plugin. Most of it is probably from WooCommerce. So you can insert WooCommerce product slider, product grid and others here. With this you can also build your own product subpage.

 

4. the Enfold Theme – Suitable for everyone?

As already mentioned, the Enfold theme is not ideal for everyone. Certainly it’s my favorite theme because I know the code almost by heart over the years. Apropro: Enfold freelancer wanted? 😉

If you don’t know CSS at all and don’t want to deal with it further, you will quickly reach the limits of the theme with the manageable demos. So if you are not technically savvy and not afraid to write a few lines of CSS, you should choose another WordPress theme. Just have a look at the Best WordPress Themes article from me. Here you will also find themes that can offer you 300 pre-built demos. So you can create your own individual website with just a few clicks.

So if you are a developer and looking for a stable and valid theme, then you are well advised with the Enfold theme. Many functions and animations are already available and you don’t have to start from scratch. The Avia Framework is in no way inferior to other frameworks and will be further developed. With a little practice you can even create your own content elements and integrate them into the Avia layout architect. This way, your customers can also use these elements themselves via drag and drop.

Beginners should rather go for the DIVI theme. For advanced WordPress users, however, the Enfold theme offers the necessary code freedom. The Enfold theme is also worth a look for agencies.

5. examples – The Enfold in use

A picture is worth a thousand words. And a website more than an Enfold testimonial. That’s why I’ve collected some website examples based on Enfold. By the way, my own website kopfundstift.de is also based on the Enfold theme.

 

6. tips, plugins & tricks for Enfold Theme

Also for the Enfold theme there are addons, tips and know-how, which I have accumulated over the last years. If you have also developed an addon or have extensions for the theme – please share them with the general public. Write in the comments or send me a mail.

6.1 Repeating content in Enfold

If you have repetitive content and don’t want to change it on every page, here is the Repeatable Content Addon for the Enfold Theme:

https://habenicht.io/product/enfold-repeatable-content/

6.2 WooCommerce DE Addon for the German speaking market

To make WooCommerce legally compliant in Germany, you also need the German Market plugin. To make the German Market plugin work perfectly with Enfold, you should get this free addon:

https://kriesi.at/support/topic/woocommerce-de-erweiterung-fur-kriesi-themes/

Additionally, you’ll get a few design tweaks to the Enfold theme resulting from the longer sentences. An example would be for example: “Add to Cart” and “Add to Cart”. This can sometimes lead to unsightly design errors in Enfold. The WooCommerce DE extension provides a remedy for this.

 

7. upgraded the Enfold Theme – Hacks & Snippets

This point is more aimed at the Enfold developers. There is a GIT: https://github.com/KriesiMedia/enfold-library/

There is no guarantee of completeness. Note that you should always make all changes in the functions.php of the child theme. If you don’t understand anything from here on, you should leave the code alone, so that your Enfold installation won’t be damaged. From now on it’s getting nerdy 😉

7.1 Enfold Actions, Hooks & Filters

You can add these hooks and filters to the functions.php of your child theme. The Enfold gives you a lot of freedom. For example, if you want to insert code after the navigation in the theme, this example will help you:

You use here the hook “ava_after_main_menu” of the theme and add to it your own function with the name “my_own_function”.

do_action(‘ava_after_main_title’ );
do_action (‘ava_add_custom_default_sidebars’);
do_action(‘ava_after_content’, ”, ‘error404’);
do_action(‘ava_after_content’, $the_id, ‘loop-author’);
do_action(‘ava_after_content’, $the_id, ‘loop-search’);
do_action(‘ava_after_content’, $the_id, ‘post’);
do_action(‘ava_after_content’, get_the_ID(), ‘page’);
do_action(‘ava_after_content’, get_the_ID(), ‘single-portfolio’);
do_action(‘ava_after_import_demo_settings’ );
do_action(‘ava_after_main_container’);
do_action(‘ava_after_main_menu’);
do_action(‘ava_after_main_title’ );
do_action(‘ava_after_theme_update’ );
do_action(‘ava_before_bottom_main_menu’);
do_action(‘ava_before_footer’ );
do_action(‘ava_frontend_search_form’);
do_action(‘ava_generate_styles’, $options, $color_set, $styles);
do_action(‘ava_inside_main_menu’);
do_action(‘ava_main_header_sidebar’);
do_action(‘ava_main_header’);
do_action(‘ava_search_after_get_header’ );
do_action(‘ava_trigger_updates’, $this->db_version, $this->theme_version);
do_action(‘avia_404_extra’);
do_action(‘avia_action_before_framework_init’ );
do_action(‘avia_add_to_cart’, $post, $product );
do_action(‘avia_after_custom_import_hook’);
do_action(‘avia_after_footer_columns’);
do_action(‘avia_after_import_hook’);
do_action(‘avia_ajax_after_save_options_page’, $current_options );
do_action(‘avia_ajax_reset_options_page’);
do_action(‘avia_ajax_save_options_page’, $current_options );
do_action(‘avia_backend_theme_activation’);
do_action(‘avia_before_footer_columns’);
do_action(‘avia_import_hook’);
do_action(‘avia_mega_menu_option_fields’, $output, $item, $depth, $args);
do_action(‘avia_meta_box_save_post’, $post_id, $result);
do_action(‘avia_meta_header’);
do_action(‘avia_save_post_meta_box’);
do_action(‘avia_shortcode_dialog’);
do_action(‘avia_shortcode_prev’);
do_action(‘avia_wpml_backend_language_switch’);
do_action(‘aviw_after_widget’, $instance );
do_action(‘aviw_before_widget’, $instance );
do_action(‘import_end’ );
do_action(‘import_post_meta’, $post_id, $key, $value );
do_action(‘import_start’ );
do_action(‘layerslider_activated’);
do_action(‘layerslider_after_slider_content’);
do_action(‘layerslider_before_slider_content’);
do_action(‘layerslider_deactivated’);
do_action(‘layerslider_installed’);
do_action(‘layerslider_ready’);
do_action(‘layerslider_uninstalled’);
do_action(‘layerslider_updated’);
do_action(‘tgmpa_register’ );
do_action(‘tribe_events_after_template’ )
do_action(‘tribe_events_before_template’ );
do_action(‘tribe_events_single_event_after_the_content’ )
do_action(‘tribe_events_single_event_after_the_meta’ )
do_action(‘tribe_events_single_event_before_the_content’ )
do_action(‘tribe_events_single_event_before_the_meta’ )
do_action(‘wp_import_insert_comment’, $inserted_comments[$key], $comment, $comment_post_ID, $post );
do_action(‘wp_import_insert_post’, $post_id, $original_post_ID, $postdata, $post );
do_action(‘wp_import_insert_term_failed’, $t, $term, $post_id, $post );
do_action(‘wp_import_insert_term’, $t, $term, $post_id, $post );
do_action(‘wp_import_post_exists’, $post );
do_action(‘wp_import_set_post_terms’, $tt_ids, $ids, $tax, $post_id, $post );
do_action(‘wp_nav_menu_item_custom_fields’, $item_id, $item, $depth, $args );

ava_main_header
ava_main_header_sidebar
ava_after_main_title
ava_before_bottom_main_menu
ava_inside_main_menu
ava_after_main_menu
ava_after_main_container
ava_after_content
ava_add_custom_default_sidebars
ava_frontend_search_form
ava_search_after_get_header
ava_before_footer
ava_mailchimp_contact_form_elements

avf_blog_style
avf_author_name
avf_update_theme_tab
avf_modify_thumb_size
avf_default_icons
avf_dynamic_stylesheet_filename
avf_menu_items
avf_fallback_menu_items
avf_ajax_search_query
avf_ajax_search_function
avf_ajax_search_messages
avf_ajax_search_label_names
avf_ajax_search_excerpt
avf_ajax_search_no_excerpt
avf_social_widget
avf_title_args
avf_header_setting_filter
avf_header_classes
avf_sidebar_menu_filter
avf_builder_elements
avf_mega_menu_post_meta_fields
avf_allow_drag_drop
avf_frontend_search_form_param
avf_sidebar_position
avf_custom_sidebar
avf_show_default_sidebars
avf_show_default_sidebar_pages
avf_show_default_sidebar_categories
avf_show_default_sidebar_archiv
avf_template_builder_content
avf_wp_link_pages_args
avf_tag_label_names
avf_related_post_loop
avf_avia_menu_conditions
avf_execute_avia_meta_header
avf_markup_helper_args
avf_markup_helper_attributes
avf_markup_helper_output
avf_logo
avf_author_email
avf_author_description
avf_loop_author_content
avf_exclude_taxonomies
avf_loop_index_blog_meta
avf_google_content_font
avf_social_icons_options
avf_google_heading_font
avf_skin_options
avf_portfolio_cpt_args
avf_safe_string_trans
avf_ajax_form_class
avf_form_el_name_length
avf_contact_form_submit_button_attr
avf_form_el_filter
avf_datepicker_dateformat
avf_form_send
avf_form_sendto
avf_form_from
avf_form_subject
avf_form_mail_field_values
avf_form_use_wpmail
avf_form_mail_header
avf_form_copy
avf_form_message
avf_form_custom_autoresponder
avf_form_autorespondermessage
avf_form_autoresponder_from
avf_load_google_map_api
avf_file_upload_capability
avf_file_upload_extra
avf_google_fontlist
avf_option_page_init
avf_option_page_data_init

 

7.2 Typical requirements

Meanwhile you can also find this function under Enfold Theme -> “Import/Export” -> “Custom Font Manager”.

Here you can upload the Google Webfont that you previously downloaded as a zip file and the Google Webfont is automatically integrated into the theme. All you have to do now is scroll down to the bottom of the dropdown menu in the Theme Options under “General Styling” -> “Fonts”. Voila!

For the sake of completeness: to include your Custom Google Webfont, add the following code snippet to your child theme’s functions.php:

add_filter( 'avf_google_heading_font',  'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Kaushan Script'] = 'Kaushan Script';
return $fonts;
}

add_filter( 'avf_google_content_font',  'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Kaushan Script'] = 'Kaushan Script';
return $fonts;
}

This code snippet inserts the Kaushan Script Font.

Sometimes you import blog posts that don’t have a read-more tag. If you now have hundreds of such posts, it’s difficult to set the read-more tag manually afterwards. But you can shorten the post excerpt automatically after a certain character length. To do this, add the following to your functions.php:

add_filter('avf_postgrid_excerpt_length','avia_change_postgrid_excerpt_length', 10, 1);
function avia_change_postgrid_excerpt_length($length)
{
   $length = 100;
   return $length;
}

Now each excerpt is 100 characters long. Of course, you can also adjust the number to your needs.

You would like to have a few containers next to each other and they should have the same height (for example to display a button at the end of these boxes)? Then you can set this directly in the page builder. Go to Edit at the first box and select “Same height” under “Height”. In the past, this was only possible via script:


add_action('wp_footer', 'ava_producttablebtn');
function ava_producttablebtn(){
?>
<script>
(function($){
function c() {
if( $.avia_utilities.isMobile ) return;

$('.productsidetext').css('height', '');

var elementHeights = $('.productsidetext').map(function() {
return $(this).height();
}).get();

var maxHeight = Math.max.apply(null, elementHeights);

$('.productsidetext').height(maxHeight + 40);
}

$(window).on('load', function() {
c();
});
$(window).on('resize', function() {
c();
});
})(jQuery);
</script>
<?php
}

In this example, you should give each container (for example, the 1/3 box) the CSS class “productsidetext”.

Add the following to functions.php:

do_action('ava_after_main_menu', 'my_personal_code', 10);

function my_personal_code()
{
   echo '.... write the code you want to output ....';
}

If you want to insert a script or code only on a specific page (keyword: speed optimization) add the following to functions.php:

function add_something_to_header(){

if (is_page(10)); {    
code inside here

 }

}

add_action('wp_head', 'add_something_to_header');


In diesem Beispiel wird der Code nur auf der Seite mit der Page ID 10 eingefügt. um die Page-ID rauszukriegen, schau dir doch diesen Screenshot an:

If you want the code to load in the footer, you can add it to functions.php as follows:

function add_custom_footercode(){
?>
<script>
YOUR CODE GOES HERE
</script>
<?php
}
add_action('wp_footer', 'add_custom_footercode');

If you want to rename the Taxonomy Portfolio completely (in the example to Patents), you can add the following to functions.php:

/**** Portfolio rename im Dashboard ****/
add_action( 'init', 'unregister_taxonomy_for_custom_label', 30);
function unregister_taxonomy_for_custom_label(){
  global $wp_taxonomies;
  $taxonomy = 'portfolio_entries';
  if ( taxonomy_exists( $taxonomy))
    unset( $wp_taxonomies[$taxonomy]);
}

// portfolio args
add_action( 'init', 'init_reg_portfolio', 50 );
function init_reg_portfolio() {
  add_filter('avf_portfolio_cpt_args', 'avf_portfolio_cpt_args_mod', 50, 1);

  $tax_args = array(
    "hierarchical" => true,
    "label" => "Patente Categories",
    "singular_label" => "Books Category",
    "rewrite" => array('slug'=>_x($permalinks['portfolio_entries_taxonomy_base'],'URL slug','avia_framework'), 'with_front'=>true),
    "query_var" => true
  );

  $avia_config['custom_taxonomy']['portfolio']['portfolio_entries']['args'] = $tax_args;

  register_taxonomy("portfolio_entries", array("portfolio"), $tax_args);
}

add_action( 'after_setup_theme', 'init_reg_portfolio' );

function avf_portfolio_cpt_args_mod($args) {
  $labels = array(
    'name' => _x('Patente', 'post type general name','avia_framework'),
    'singular_name' => _x('Patente Entry', 'post type singular name','avia_framework'),
    'add_new' => _x('Add New', 'book','avia_framework'),
    'add_new_item' => __('Add New Patente Entry','avia_framework'),
    'edit_item' => __('Edit Patente Entry','avia_framework'),
    'new_item' => __('New Patente Entry','avia_framework'),
    'view_item' => __('View Patente Entry','avia_framework'),
    'search_items' => __('Search Patente Entries','avia_framework'),
    'not_found' =>  __('No Patente Entries found','avia_framework'),
    'not_found_in_trash' => __('No Patente Entries found in Trash','avia_framework'),
    'parent_item_colon' => ''
  );

  $args['labels'] = $labels;
  return $args;
}
/*** Ende ****/

You want to display text in a lightbox? Please add the following to functions.php:

/**** Content as Link in Lightbox ****/

function popup_inline() { ?>

<?php }

add_action('wp_head', 'popup_inline');
/*** Ende ****/

And then paste the following as HTML code to the desired location:




LINKTEXT
Insert the content here

And the following goes into the QuickCSS field (or your style.css file):


.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

the ID (test-pop-up) must be changed for each lightbox popup. So if you need three vers. Lightboxes (with different content) you have to name the first one e.g. “test-popup1”. The second lightbox then “test-popup2” and so on.

If you are looking for global elements in the Enfold theme – you will search in vain! Unfortunately, the developers did not provide for this. Often you use the same element on several pages. If this element changes now you have to edit it on all pages. This can be annoying. With the plugin Enfold Nested Shortcodes for Enfold you can style an element with the Layout Architect and use this via shortcode everywhere on your website! When the element changes, you edit it only once and it is updated everywhere (as a global element) on the page.

Download here:

Enfold – Nested Shortcodes

To insert code into the head of Enfold (for example a meta tag from Facebook) you simply paste your code into your functions.php:

function add_custom_code(){
?>
//YOUR CODE HERE

 

7.3 Enfold image sizes

Sometimes the image sizes of Enfold don’t make sense at all. If you want to change the image sizes, you can of course do that in functions.php. Here are the image sizes of Enfold:

 

Image name Image size in px Comment
widget 36 x 36 small thumbnails, e.g. sidebar news
square 180 x 180 small pictures for the blog
featured 1500 x 430 Images for full-width pages & sliders
featured_large 1500 x 630 Images for full-width pages & sliders
extra_large 1500 x 1500 Images for the full screen slider
portfolio 495 x 400 Portfolio images (2-3 columns)
portfolio_small 260 x 185 Portfolio images (4 columns)
gallery 845 x 684 Portfolio images (2-3 columns)
magazine 710 x 375 Images for Element magazine
masonry 705 x 705 Masonry full screen images
entry_with_sidebar 845 x 321 Large images for the blog
entry_without_sidebar 1210 x 423 even bigger pictures for the blog

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *