If you are wondering what the “best theme ever” is… it’s the Enfold Theme. A top rated seller on Themeforest with over 158K sales and an average rating of 4.85 stars, Enfold is the preferred theme for both web designers and their clients. The Enfold theme produces professional looking websites with a plethora of customization options that will satisfy any need from simple and clean websites to highly functional websites. In this article, we will be exploring the functionality of the Enfold theme and it’s various customization options after which we will install and set up our Enfold theme website. So let’s get started.
The Enfold theme is a beautiful, professional, and versatile WordPress theme by Kriesi ; dubbed as the most user-friendly theme ever made. Enfold allows you to build responsive websites in mere minutes and have fun while customizing your pages with its one-of-a-kind Avia Layout Editor. I have used a number of themes as a professional web designer and I have to say that I’m yet to see a better and more flexible theme than the Enfold Theme.
The theme is super responsive and comes ready for HD retina displays with great graphics that your website looks great whether seen on a smartphone, tablet, or computer ! As an added bonus, Enfold comes with several prepackaged demo websites that you can install on your website and start editing in mere minutes. With its beautiful full-screen sliders, awesome masonry elements and 2-minute demo setups, Enfold promises to be all you need in one amazing theme.
Easy to Use Visual Layout Editor
Enfold remains a highly sought after theme for users with little WordPress or theming experience because of its Avia Drag and Drop Editor which keeps things as simple and intuitive as possible. The theme is built on the Avia Framework which was also designed by Kriesi the framework makes use of the WordPress template engine ensuring that every single detail conforms to WordPress best practices.
Installing the Enfold Theme
Before we begin the installation process, there are three things we need to have in place :
1. A hosted domain with cPanel or any other web hosting control panel in place. In this case, I am using the AMPPS self-hosting platform but others hosts such as GoDaddy and Bluehost will have a similar interface.
2. An installed version of WordPress on your cPanel as this is where we will install our theme file. You will have an admin control panel such as the one below if you have WordPress installed.
3. An Enfold theme file in a compressed .zip format. You will be given the link to one if you purchased it from the Themeforest or the Kriesi website.
Everything in place? Let’s go!
Step 1 – Uploading our Enfold theme file.
To upload out theme file we have to first click on the Appearance option at the lower left-hand side of the WordPress control panel screen.
This will take us to our theme page with a list of all our pre-installed themes, this page also allows us to upload new themes on WordPress. Search for the Add New button that is usually located above the currently active theme and click on it.
Enfold is not available for free download on WordPress as it is a proprietary theme and must be installed manually. To do this, we have to locate the Upload Theme button located above the list of themes and select that.
Click on Choose File and navigate to the location of the Divi theme .zip file in your computer system.
In the image below my theme file is in my C:\Users\Dozie\Downloads\ Enfold Theme folder. Select the file and click on Open.
Then you can go ahead and install your Enfold theme by clicking on the Install Now button.
Your Enfold theme will be automatically uploaded into WordPress. After your theme is installed, navigate back to the themes page and you should see your new installation. Hover your mouse over it and click on Activate.
And that’s it! A visit to your website will show that the Enfold theme has been successfully installed.
Step 2 – Importing Demo Data
Importing some demo data is a good way of quickly populating your bare looking website. Enfold’s demo data is designed to show off the theme’s functionalities as well as showing how your website should look and feel as well.
The Enfold theme comes with several default demo files that cater to various niches from construction to graphics design. When installed, the theme adds several menu options to your to your control panel.
To begin the demo data importation process, we have to navigate to the new Enfold menu option located on the left-hand side of the WordPress control panel screen and click on it.
This will present you with the Enfold Theme Options which allows you to customize every aspect of the theme as you see fit. Here you have options for everything from your logo and favicon to general and advanced styling. You can also customize your website’s layout, menus, speed and performance from the Enfold theme options.
This is also where we can find the Demo Importation options which allow you to import demo content into your website.
On the Demo Import page, you will be able to select your preferred demo content from over 2 dozen options from simple landing pages to multilingual corporate pages and professional online shops. Enfold covers several functionalities so you don’t have to waste hours of research allowing you to kick-start your project by adding dummy content. Each demo content option allows you to visit a demo website to see what you get and shows the recommended plugins.
Click on your preferred demo data to begin importing it. Note, the demo data will overwrite all of your current data and settings so this will essentially reset your website. Some demos may also need several recommended plugins to function properly. You will need a plugin like WordPress Reset to completely remove a demo installation after importing it.
Enfold theme demo data is designed to showcase all the themes features so you not only get theme layouts you also get several pages, comments, reviews, and images depending on the demo you choose. You won’t need most of these and you may have to do some deleting to get what you really want. For this tutorial, I will be using the Small Business – Flat Demo.
The demo import process may take a few minutes and you will see this message:
“Import started. Please don’t reload the page. You will be notified as soon as the import has finished! (Usually within a few minutes) :)”
When done, the page will reload. You can visit your website to see the changes that have occurred.
You can see that your website has been populated with several useful pages including the Home, Services, Work, About, Blog, and Contact pages. You will also notice some added options (Edit FrontPage and Theme Options) highlighted in red on the Admin bar. These allow you to quickly carry out specific or site-wide changes easily.
This ability to make use of different demo content is a very sought-after feature of Enfold. By setting up our website and creating several useful pages on demand, the time we would have spent to design and develop our website has been cut in half. Demo data also come with embed our website with several standard functionalities depending on the chosen industry.
Step 3 – Customizing your Website
With our demo data in place, it is time to begin editing and customizing the different sections and elements to the way we want. To begin customizing your Enfold theme, navigate to the Pages menu option located on the left-hand side of the WordPress control panel screen and click on it.
You will be shown a list of your active pages which will include the demo content pages. You can customize each page the way you want or delete them if you don’t need them. I will begin by customizing the Frontpage, so we are going to click on that.
On the selected page, you will be able to use either the Default Editor or the Avia Layout Builder which comes with the Enfold theme. We will be working on the Avia Layout Builder in this tutorial.
The Avia Layout Builder
A truly powerful theme is nothing if it isn’t user-friendly and the Avia Layout Builder is Enfolds solution to simplifying the process of designing websites. The Avia Layout Builder is an easy-to-use drag and drop builder that comes with a plethora of options that allow you to modify your website’s styling, colors, fonts, and layout directly from within the backend.
The Avia Layout Builder is filled with different design elements divided by type. There are three main types of elements, Layout Elements, Content Elements and Media Elements which are divided into different tabs (represented in black). The Avia Layout Builder can also be expanded to a full-screen mode by clicking on the button.
The website itself, which is displayed under the Avia Layout Builder, is divided into different sections, each section can contain any number of elements depending on what you are going for. All sections can be stacked on each other and this can be used to group your website content into distinguishable areas.
The layout element tab contains several custom layouts that can be used to section your page contents and design how your website looks. These elements include a grid row, tab, color, and full-width sections among others.
Layout elements would look empty on a website without some content in them. The Content Elements contains various elements to house your content including the text block, icon list, buttons, sliders, notifications, testimonials and contact forms among others. Each content element has its own unique set of customization options that allow you to present your content is any number of ways.
These include image, video, gallery, maps and masonry options that allow us to present our media just the way we want.
Each element can be dragged from its position on the tab and dropped into any section of your choice. You can also click on them and the selected element is automatically added under the last element section on your website.
Section and Element Settings
All sections and elements will show three options on their top left when you hover your mouse above them. The icon allows you to save the section or element as a template, the icon lets us clone our content and settings while the icon lets us edit that section or element.
You can also click on any element to pull up its settings. The image below is an example of element settings, in this case, the Special Heading element. As you can see, each element setting come with several options and a preview window so you can see any changes in real time before saving.
Adding a New Section and Element
To add a new section you just need to navigate to the Layout Section and drag your preferred layout section to where you want it. In this case, I chose the half section element and wish to place it before the first element (header) of our demo website.
This leaves us with one half of our section as shown below.
We can go ahead and add our element from the Content Elements and Media Elements tabs. We will add an Image element to our new section.
We can edit the element’s properties and add an image by accessing the settings by clicking on the icon or on the element itself.
After selecting our preferred image and customizing our image we can save it. Then we can move on to the second half of our section. To begin we have to drag and drop the second half of our section element to complete the section.
Then we can add our content element, customize it, and save it. In this case, I added a Text Block element with some random text. When we are done, we should have something that looks like this.
You can now update and publish your edits on your website and visit your website to see the changes. As you can see, a new section has been added to our website just where we placed it in the backend.
Congratulations, you have successfully created a two column section with different elements. You can add several sections to your website and add any number of elements to an existing section. You can also delete any section or element by clicking on the close () icon.
Enfold Theme Options
The Enfold theme includes a custom theme options interface which gives you control over many styling and customization elements of your website. The theme options allow you to add and edit things like your logo, favicon, menus, navigation settings, general layout, and styling as well as options for the Avia layout builder. The General Styling options also allow you to insert some custom CSS styling to various elements of your theme. You can also export your current theme setting and import a theme configuration file from the Import/Export option.
To access the Enfold theme options from the WordPress dashboard, just click on the Enfold option on the left corner of the screen.
You will be presented with the theme options page where you can define your website basics like adding your header and logo and more advanced options like how specific elements look when certain actions are taken. The Enfold Theme Options panel makes it easy to manage all style, layout, social profiles and update settings by bringing them all together in one place. This panel also allows you to update the theme.
You can gain access to multiple menu options that allow you to carry website-wide edits by flipping through the various tabs. You can save your progress whenever you make a change to the options by clicking on the Save all changes button (pictured in green) located on the top and bottom of the page. You can also reset all options to their default by clicking on the Reset all options button (pictured in red)
The Enfold theme is reputed to be an all in one theme that makes configuring and customizing your websites very easy. This is made possible with its drag and drop Avia Layout Editor and editable demo content that allows even beginners without any technical skills to build a responsive website in mere minutes.
The Enfold theme options panel is easy to navigate through and understand even if you are new to WordPress. Enfold gives its users tons of customization options for their website which they can use to create a great experience for their website visitor. Enfold also makes sure that your website provides a great user experience on any device–both on mobile and on the web.