How to Install and Setup the Avada Theme on Your Website

Introduction

For more than five years Avada has been the #1 selling theme on all major marketplaces with over 425K+ satisfied customers within 4 years, making it the most used all-in-one WordPress theme on the market today. In this article, we will be showing you the range of powerful customization options, unlimited design potential and flexible framework development that make Avada so loveable. We will begin by exploring the Avada theme’s various customization options and move on to installing and setting up our Avada theme website. So let’s get started.

Avada

Avada is a brilliant WordPress theme developed by two freelancers, Luke Beck and Mohammed Haris in 2012 to help users create beautiful multipurpose websites even with zero coding skills. It has been proven to be a flexible solution that can be used to build beautiful functional websites. The Avada theme gives you the ability to build websites that conform to virtually any design style and is packed with all the customization options, prebuilt layouts, features, and third-party plugin integrations you would need to get started.

Like most top grossing multipurpose WordPress themes, Avada also makes use of a powerful drag and drop Fusion Builder that allows you customize your entire website without any coding experience. Avada also right out of the box with several professionally designed demos that are easy to import and adapt to your needs. A major appeal of the theme that is not immediately visible is the powerful code that lets it loads really fast on all modern browsers.

100,000 products with Avada?

A common question is how Avada coping with a big site, let say a.WooCommerce shop with tens of thousands of products?
Only one solution to be 100% sure: install Avada on a 100 thousand products WooCommerce demo. The demo is on Cloudways, with Elasticsearch and or plugin WPSOLR.

As you can notice, Avada is pretty fast when coupled with WPSOLR, both on suggestions and filtering.

You can find the demo link and ask questions on our forum topic 100 thousand products demo for Avada and Elasticsearch on Cloudways.

Installing the Avada Theme

There are three things we need to have in place before we begin the installation process:

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 Avada theme file in a compressed .zip format. You will be given the link to one if you purchased it.

Note: The Avada theme is supplied with all the necessary plugins and a child theme that allows you to change some aspects of your website while preserving the theme’s look and functionality.

Everything all set? Let’s get started!

Step 1 – Uploading the Avada theme and child theme file.

From the WordPress control panel pictured above, navigate to the Appearance option at the lower left-hand side of the screen and click on it.

Look for the Add New button that is usually located above the currently active theme and click on it.

You will be taken to a page where you can download and upload themes to your website. Locate and click on the Upload Theme button located above the list of themes and select that.

You will be given the option to upload and install your theme in a .zip format. Select the Choose File button.

A pop-up dialogue will allow you to navigate to the location of the Avada theme .zip file in your computer system. In my case, the theme file is located in my Downloads folder. Select the file and click on Open.

When you are sure you have selected the right file, you can go ahead and install your Avada theme by clicking on Install Now.

Everything is pretty much automatic from here and you will be notified when the installation process is complete. You should get a message which says “Theme installed successfully” on the notification screen like the one below.

$C:\Users\Dozie\Pictures\Untitled2.png$

Click on Return to Theme page as we are not done yet, we still have to install the child theme and several plugins for Avada to work properly.

On your theme page, you can follow the steps outlined above to install your Avada child theme

This time, select the Avada-Child-Theme.zip file and install it. You should see a different set of installation messages notifying you that it requires a parent theme to work, everything should go smoothly if you have the Avada theme installed.

Note: You must have the main Avada theme file installed before attempting to install the child theme.

With your main theme and child theme installed, you can head over to your theme page by clicking on Return to Theme page so you can activate the child theme. It is possible to activate and make use of the main Avada theme but we advise that you use the child theme as it performs the same functions and protects your main theme file in case you make a mistake.

On the Avada Child option, click on Activate.

That’s it! You have successfully installed and activated your Avada theme. You can visit your website on a new page to see if the changes have taken effect. If everything was done correctly, you should have a screen like this:

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled8.png$

Step 2 – Installing and activating the required plugins

After activating the Avada Child theme (or Avada theme) you may get a notification that Avada requires some plugins to be installed/updated. These plugins include Fusion Core, Fusion Builder, and Layer Slider and they are all included in the Avada theme file.

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled9.png$

To begin installing our plugins, click on the Add New plugin option under the Plugin menu option on the lower left-hand side of the WordPress dashboard.

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled10.png$

You will be presented with a page that allows you to download or upload a plugin much like the one we saw when uploading our theme. Like before, click on the Upload Plugin button located above the list of plugins.

This will unlock the upload wizard similar to the one we used when uploading our theme.

Click on Choose File and navigate to the location of the Plugins Avada folder (pictured above) in your computer system. Choose one plugin and click on Open, you can start from the top so as not to skip any.

With a plugin selected, we can go ahead and install it by clicking on Install Now.

This will take us to a page that shows the installation process, you should receive a message which says “Plugin installed successfully.” Click on the Activate Plugin button to finish the installation.

Note: There are several plugins available and you will have to repeat this process for each one before you can start using the Avada theme.

Alternatively, you can use the Go Manage Plugins button on the Avada notification banner (outlined in red).

You will be taken to a page where you can view and install all the plugins directly into your website. Just click on any of them to begin the installation process.

When done you should see several changes to your WordPress dashboard with several new options available immediately under your Dashboard.

That’s it, we have our theme and plugins all set.

Note: If you are installing Avada version 5.0 and above, you may need to perform a patch to ensure that everything is working fine. To do this, navigate to the Fusion Patcher option located under the Avada menu option.

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled19.png$

Apply all the recommended patches for your version of Avada until you have green tick marks on the status column.

This helps prevent any errors when using the Fusion Builder Core plugin you just installed.

Step 3: Importing Demo Data

The Avada theme comes with over 40 complete demos that can be used to completely transform your website any way you want. Each theme demo is designed to address a particular industry (e.g. Salon, Electrician, University…) and is so complex and in-depth that they effectively make Avada seem like 40 WordPress themes for the price of one. The best part is that all Avada demos can be imported in full or in part (pages, sections, elements etc.) so you can effectively choose any element you like in each one and import it into your website.

You can preview each theme demo before installing it on your website and when you import a demo, it will display a badge so you can quickly recognize and modify its content. You can also uninstall any demo content at any time and doing this will remove all the imported content from that demo and restore your website to its previous state.

To begin importing demo content, navigate to the Avada menu option located on the left-hand side of the WordPress dashboard and click on it.

This will take us to the Avada welcome page which contains several useful tabs including Registration, Support, FAQ, Demos, Plugins, and System Status. To import our demo data, we will navigate to the Demos tab.

You will be presented with a list of the currently available Avada demos which is constantly updated.

You can hover your mouse over any demo to import or preview its contents. Some demos may require you installing and activating some plugins before you can install them. Click on Import to begin the demo content importation process.

A pop-up will present you with the option to install any required plugin and select what content you wish to import. This is a great thing about the Avada theme demo installation system as most WordPress themes can install lots of unwanted posts, pages, and media content with their demo import. Avada actually provides a tool that lets you select what data you really need. You also have an option to uninstall the demo.

When you have installed all the required plugins and selected your import content then you can click on the Import button.

You will get another pop-up message, a warning this time, stating that the demo content will replace your current theme options and widgets. If you are certain of your selection, you can click on OK to begin importing your demo content.

The whole process takes a few minutes and you should see a Currently Processing status bar showing what stage your importation is at. When the process is complete, click on Done to close the pop-up. $C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled28.png$

You can now visit your website’s frontend to see the changes.

You now have a fully functional website that you can edit to suit your particular needs just minutes after installing the Avada theme. Your website will be populated with several pages depending on the demo you choose. All of the demo content available on Avada look great, are highly optimized and are embedded with several standard functionalities for different industries.

You can import and add every demo page layout onto any page on your website using the Fusion Builder Library option. For example, if you like the About Us page from a particular demo, you can add it to your website’s About Us page without importing anything else. This essentially leaves you with hundreds of beautiful layouts at your disposal.

Step 4 – Customizing your Website

With some demo content setup, we can now proceed to edit and customize the different content elements to suit our needs. To begin customizing your Avada theme, navigate to the Pages menu option located on the left-hand side of the WordPress control panel screen and click on it.

On the next page, you will see a list of all the active pages on your website including the pages created by your demo content import. You can click on each page to customize it the way you want or delete them if you don’t need them. In this tutorial I will be customizing the Home page, so we are going to click on that.

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled29.png$

When editing your page, you will be able to use either the WordPress Default Editor or the Fusion Builder which comes with the Avada theme. We will be using the Fusion Builder in this tutorial.

Fusion Builder

A theme may be beautiful, but its backend builder is what makes it user-friendly and easily adaptable. Avada’s Fusion Builder is a powerful drag and drop page builder that can be activated at the back-end of not just website pages, but also posts and other post types. To begin using the Fusion Builder, you have to locate and select the “Use Fusion Builder” option and you’re good to go.

Unlike most WYSIWYG drag and drop page builders in the market today, the Fusion Builder features a simple black, blue, and white color scheme that may take some getting used to. However, It compensates for this by being super fast, functional, and easy to navigate. The Fusion Builder also contains options to use the builder or import a pre-made layout from the library.

Structure of the Fusion Builder

The Fusion Builder is divided into three distinct elements, container elements, column elements, and content elements. The content elements are placed inside column elements which are then placed insider container elements.

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled33.png$

Container elements

These are top-level elements that house/contain column elements. Container elements are used to section your page contents and design how your website looks and may contain a custom layout.

Column elements

These elements are used to structure content elements and design the overall layout of the website. You can differentiate them from column elements by the lack of the empty space option which is outlined in red above.

Content elements

The content elements contain various styling elements that can be used to house and customize your content. These include the Gallery, FAQ, Text block, Social links, Pricing tables etc. Each content element allows you to present your content just the way you want.

Adding a new container, column and content element

To show how you can add and edit all of the elements above I will be adding a Google Maps element to the bottom of our demo homepage. You can try this with anything, a text box, a countdown timer, or an image.

First, we need to add a new container immediately after the last container on the website, in my case, it is a Newsletter container. Click on the + Container button below it.

You will immediately see a pop-up that allows you to choose your preferred layout. I chose the blank layout (highlighted below).

$C:\Users\Dozie\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Untitled30.png$

You can easily rename your container by clicking on the name. Next, you have to select a column by selecting the + Column button.

This will open up another pop-up where you can select your preferred layout option. In this case, I selected the full-width layout outlined below.

This will leave us with a defined container and column element, now its time to add our content element. To select a content element, click on the + Element button outlined below.

On the pop-up list of content elements, select your preferred element (like the Google Maps element) and you will be automatically directed to that element’s options page.

A content element options page allows you to input or edits your content data. For example, a text box content element’s options page will allow you to type in your content while an image element option will allow you to upload your image. In this case, my Google Maps element option page will allow me to add the address to be shown on the map.

When you are done editing, click on the Save button to save your work.

That’s it! You have successfully created a container, a column and inserted your content. You should have something like this when you are done. You can also add as many content and column elements as you like inside a container element by clicking on the + Element button.

Don’t forget to update your website. You can do this by clicking on the Fusion Builder Update button located on the lower right-hand side of your screen or by clicking on the default WordPress Update button on the top-right side of your screen.

Now we can visit our website’s frontend to see if the changes have taken effect.

As you can see, a new Google Maps has been added immediately below the Newsletter signup. You can use the content element options to style your content any way you want as Avada comes with hundreds of customization elements.

Conclusion

Avada has consistently been the most sought-after WordPress theme for the past four years and there is a reason for this. With its amazing customization options, time-saving features and super adaptable Fusion Builder, the theme promises to be the all-in-one website builder you will immediately fall in love with. Happy building!

Tutorials

Table of contents :