If you need to install Wardpress you can use Hostinger and go through our tutorial on how to set up a wordpress website.
- If you need the Avada theme, you can go get it at the envato marketplace / themeforest website
- If you still need to set up the Avada theme and want to go through the first part of setting up the website with settings and using the layout builder, check out the first part of our tutorial on how to use the Avada theme
This video will go over the live builder for the Avada theme.
After you install the Avada and choose the website template that you want to use, you can go to the edit page for the homepage (front page)
There are two options with the Avada theme page builder
- Back end builder
- Live builder
Both are the same, the only difference is that the Avada live builder allows you to preview the website while you edit it
We are using the live builder for the Avada theme in this video tutorial.
- At the top of the live builder you will see icons that allow you to navigate the website. Hover over them to see what they are.
- Click on the toolbar toggle for the sidebar to see the page settings, layout options and the webpage navigator
Add A New Container
- To add a new section click on the + button
- You can also use the studio library for the Avada theme
- We are creating sections from scratch replicating the classic theme first section
- We select a 1/1 column
- Once you see the section, you can hover over the icon on the left side to edit the container
- You will see three tabs (General, Design, Background, Extras)
- The general tab for the Avada theme will let you format the layout options for the section
- The design tab lets you format the custom settings for this specific section including spacing
- The background allows you to add a color, image or other options – check the tabs
- The extras tab is primarily for animations for the section
Edit the Column
- To edit the column, hover over the icon on the left side
- You can again go into the tabs to change the formatting
- You can also add elements/blocks here for the column
- In the design tab you can change the spacing for the column to make room for more per row
The best thing to do is to check out the video we have on how to use the avada theme in order to see how we format the section and columns
Add Title Element
- To add a title element for the avada theme or to use any premium element, you can click on the plus button on the column or the side navigator and search for what element you want to add
- You can format it with all the tabs once again
Add A Text Block
You can add a text block the same way you would for a title or any other element using the avada theme for your wordpress website
- If you want to format it, you can do so with the tabs, specifically the design tab
- Add Buttons to the WordPress Website With Avada Theme
- To add buttons you can click to add a new element
For creating buttons that are side by side instead of stacked up you will need to format the column so that it is a row instead of a column
Check out the video to see what we select for the settings for the general and design tab on the Avada live builder
Format the button either with the global layouts or click on the custom option and choose the colors you want to use for the button
- Change the text size and the padding if you would like
Adding Space To the Website
To add space to the website, you can go into the design tab for the container and the columns and different elements and add margin and spacing.
Notice on the template for the WordPress website we are using that sometimes the space and size is in “vw”, “pw” and “%” so make sure you add the right units to format it correctly
Adding A Separator Border
- For this tutorial, we added a new column
- The element we added is a section separator
- You can choose the shape you want for the separator
- And you can choose whether it is at the top or the bottom of the section
- Then go into the design tab if you want to customize the color for the separator
Make Your Website Responsive
In order to make your WordPress website responsive with the Avada theme you want to go into the general tab for whatever section or element you want to modify
- You will see a section called Element Visibility
- Here you can choose whether the element or container/column to show up on all the screen sizes or not
- Small = mobile
- Medium = tablet
- Large = desktop
Click to hide the section where you don’t like the formatting (you can view the website or a preview of the wordpress website by clicking on the icon on the upper left that lets you see what the website looks like on different devices)
- Duplicate the section that you want to replicate but format differently
- Go back into the general tab for this new copy and select the screens you want it to show up on
- Then go to the preview screen for that device/screen
- Format the section how you want
If you select a container to show up on specific devices, it will flow through all the other sub elements inside it (columns, elements).
That’s All There Is to It!
If you watch or learn how to use the live builder with the Avada theme in this tutorial and watch the first part where we go over the global options and learn how to customize the header and edit the footer for the WordPress website then you should know how to use the Avada theme afterwards.
In the first part on how to use the Avada theme we go over the layouts for the avada theme and the Avada theme so you can create global layout options and create conditions and rules for where they show up.
Let us know if you have any questions or need some additional help on using the Avada theme to make a WordPress website. Please note that this text tutorial was writing in 2025 so it should be up to date but if you have questions, please reach out!