How to Use The Avada Theme Tutorial – 2024!

To get the Avada Theme go to the Themeforest website where you can download it after checking out.

We’ll go through all the steps necessary for you to install and activate it and what files to download in the following steps.

Download Avada Theme

To download the Avada theme you will need to go to the Themeforest website to purchase it. The great thing about the Avada theme is its a one time purchase and you can get all the updates in the future so it’s a small investment for a very powerful WordPress theme.

Here is the link to the Avada theme website (Themeforest)
After going through the checkout process, you’ll be logged into your Themeforest account
Click on the Download button and download All Files
Also download the pdf or text for the license, since we’ll use that to activate the theme for updates

Install Avada Theme

To install the Avada theme, we need to log into WordPress. If you haven’t setup your WordPress website yet, you can check out our step by step tutorial on how to set up a wordpress website.

Once you’re logged into WordPress, hover over Appearance on the Dashboard
Click on Add themes
Click up Upload themes
Go to where you saved the Avada zip file you just downloaded
Open up the Avada folder, click to open Avada Theme folder
Click to install the Avada.zip file
Click on the Install button
Once it’s installed, click on Activate

Set Up Website

Once you have Avada install and registered, click on the Set up button at the top of the page

Select the pre-built option so we can started using the website builder to learn how to use Avada theme
Choose whichever template you want. Just know we will be using the Classic template.
Install all of the content and then let’s get started on learning how to use the Avada theme.

Now that we have our website set up with Avada, we can check it out. So go ahead and hover over your website name on the upper right and click on visit site.

And if this is your first time using Avada and making a WordPress website, don’t forget to go to your WordPress settings if you need to make any changes. You can always check out our tutorial on how to set up a WordPress website (self-hosted) to go through the WordPress settings.

WordPress Settings

Just really quickly for anyone using WordPress for the first time, I’ll go through the settings really quickly

Go to your WordPress Dashboard
Hover over settings
Click on General for your site title and time/date preferences
Click on Reading to change your homepage and blog page settings
Click on Permalinks to change your URL structure that best fits your needs
Make sure you click save on each of these pages to save the changes!

Theme Settings

In order to have the WordPress website that we want with the Avada theme, we want to go into the theme settings to customize our layout options. The layout options include everything from the spacing, to the colors, font styles and much more.

The Avada theme has a lot of website settings so it can be overwhelming so we will go through it one thing at a time so you can learn how to use the Avada theme to customize your website however you want.

Go to your WordPress website dashboard
Hover over Avada
Click on options (you can also just click on Dashboard for Avada and click on options at the top of the section)
Let’s start at the top with layout and work our way down

Layout

I would keep the layout settings as is for now since we haven’t really done much to the website. You can always change your layout settings later.

Responsive

Nothing to change here unless you think its necessary after customizing your website

Colors

Here you can manage the global color preset that you will have easy access to for whatever colors you want for your WordPress website. It’s up to you if you want to change them from the default settings.

Please note that there is a Primary Color option at the bottom for you to choose what is the primary color across your site. You will be able to change this for your elements as you make them, it’s just a default setting.

Header

You’ll notice there is a notification at the bottom of this page that says the options are not turned on because a global header is being used. We can click on the link to go and edit the header layout on the builder page.

Logo

Here we can replace the logo for the WordPress website with a new logo

You can also replace the logo for the mobile devices if you have a different one and customize the spacing.

Page Title Bar

If you want to customize the title section of your pages then you can do so here.

You will notice that the default setting is set for a title section with a grayish rectangle background area.

To change this you need to go to the Layout tab to the single page > single page PTB section to get rid of the gradient

As I am typing this, I realize that there are a lot of options! And not every one of them is necessary to go through, so I will only post the ones I think are noteworthy in this section, but you should go through all of them if you need to.

Footer

Go to the layout builder to customize the footer, just like the header.

Sidebars

The main thing to note here is that you can go into each tab to select whether you want a sidebar to show up or not.

Typography

In this tab you can go into each font type and change the font style if you would like.

Blog

If you want to change the blog layout, you can do so here. We’ll keep it the same in this video tutorial for Avada theme.

Portfolio

If you want to change the layout for your portfolio pages from grid to masonry then you can do so here.

Social Media

For social media, you want to add the icons you want to show up and then add the social media profile URLs.

Slideshows

I’m not sure if people still use sliders for their WordPress website but Avada has a slider option and here is where you can customize it a bit.

To create and edit slides and sliders for Avada theme, you want to go to the slider section under Avada.

Lightbox

If you want a Lightbox for your photos to pop up then you can keep it enabled in this section.

Forms

We can change the font color for our forms here if we want but let’s wait to see how it looks before we do that (at least that’s what I recommend).

Contact Template

Put in the email address you want messages to be sent to from the contact form on your WordPress website.

Google Map

Input the API key for google and the address if you want to use the google maps element with Avada.

Extras

Make sure you check out the extras for the different types of features that you can select from. You won’t be able to see them without clicking on this tab to expand it (such as the featured image rollover option).

Code Tracking

May be important for analytics where you paste in your header code? I think so, if not similar.

Maintenance Mode

Turn on and off maintenance mode here.

Avada Elements

If you want to customize the elements with different color or spacing options and other things, you can see a list of all the elements here and go into them one by one to change the settings.

Avada Page Options

When you create a new page or edit an existing page, if you scroll down the edit page, you will see the Avada page options.

The page options are also on one of the tabs of the live builder.

Normally the Avada Page Options are already selected due to the default theme settings and you do not need to make changes.
You can look at existing template pages to see what the page options are for new pages you create.
Always make sure you click the update button if you make any changes.

Avada Theme Pagebuilder

Now let’s learn how to use the Avada theme page builder. This means we are going to learn how to customize our website and customize the pre-designed website template that you selected for your WordPress website and also learn how to create your own sections which will allow you to make new pages for your website.

To turn on the Avada theme page builder, we want to go to one of the pages.
Let’s go to the homepage
Go to the WordPress dashboard
Hover over pages
Find the page that is set as the Front Page
Click to edit it
The video tutorial for the Avada theme will explain the back end and all the different sections.
To turn on the builder, we can click on the live builder button or learn how to use the backend builder

First let’s go over a tour of the backend, which to me is easier to use because the options are full screen, but you don’t get to see what you are making (so live builder is better for that).

Pro tip: For each pre-made block there will be an edit button. Look at the extras tab to change or edit any responsive rules for the element/contatainer.

Each element will normally be set up the following way

Container
Column
- Alignment (general)
- Number of rows (design)
Elements

When you open up the edit button for a container, it will have 4 options at the top

General – width/height
- There is also an element visibility option for different screen sizes.
Design – margin, padding, link colors
Background – different media options/colors
Extra – rules for responsiveness, different color options

You can rename the container, clone it, save it, and put it in the trash.

Adding a New Section

To add a new section click on + container
Then select the number of columns you would like to have for this section
You can edit the container and sections (alignment, spacing, and so forth)
To add elements just click the + elements button in the middle

Editing Modules

First let’s talk about how to edit some of the existing modules on the Avada theme

Whatever template you have chosen, you’ll likely have a slider image, some text and a button. Maybe it will have something different, but editing each element is similar.

Hero Image

This is a container. The first thing you want to do is choose the content width
Then go to the background tab
There are options at the top to select an image, or video or even color
Once you upload your image, you can select your options
To add an overlay you can go to the gradient tab and select your beginning and end colors.
Click save when you are ready
The changes will not update unless you click on the Update button for your website
And don’t forget to clear your cache if you are using a cache plugin

Title Element

To edit text, you can click on the pencil to edit.
Choose the style of text you want. For most it will just be the text option.
Then type in your title.
The design tab will show the font options (style, color, alignment)
You can also edit the margin here
In the extras tab you can add your animation effect for this section if you would like.
As a friendly reminder, click save and you need to click on update for the entire page for the changes to be saved.

Pro tip: There is an element visibility section if you scroll down the general tab options for different screen sizes, so you may see two of the same element and wonder why that is. It’s similar to the ‘Extras’ rule for visibility for different devices.

Button Element

To edit the button, just click on the pencil and you can change the URL and text.
Button target depends on whether you want to open a new browser tab or the same window
The design tab will let you choose whether you want to have the default settings or choose custom options for the colors

In some of the templates you will notice that there are two containers that may have the same names. Expand them to see if the content is the same, sometimes it’s not or it is flipped. If it is the same, then check to see screen sizes in the general section or the extras tab for rules for visibility.

Customizing Your Pages

As you can see from the above, customizing your pages is actually really simple but can seem very overwhelming in the beginning.

With the above examples and exercises, you should be able to go through the other elements on your own and explore and add them or change them for your website.

There are a lot of Avada theme elements so make sure you take your time to look at the list to see what is available.

If you have any questions, please ask and we can help you out if there is a solution!