Skyrocket Your Avada Theme With Elementor Page Builder

In this post, we show you just how easier it is to build a WordPress website with Avada theme if you include Elementor Page Builder in the process.

Avada has been the #1 best selling premium theme on ThemeForest for the last four years.

We wanted to demonstrate just how better Avada gets if you combine Elementor with it. This video demonstrate how you can speed up your entire web design process by incorporating the powerful features available in Elementor.

Not only is it faster and easier to design on the frontend, you also get a ton of unique design features that help turn your site into a more stylish and well crafter website.

To showcase how easily Elementor & Avada work together, we decided to recreate a complete homepage design from the Phoenix Startup UI kit by designer Dima Blover.

In the video, we use Avada and Elementor to design the entire page from scratch, going section by section. This way we cover every section of the page, including:

  • Above the fold hero section
  • 2 feature sections
  • Services section
  • Call to action subscription form section
  • Price table section
  • Testimonial section

As you can see in the video, using Elementor page builder gives you the flexibility to create any design you want in Avada. The theme and page builder work perfectly together, allowing you to take your design to the next level.

Features You Get By Adding Elementor to Avada

There are specific features inside Elementor which we feel will be a game-changer for Avada theme users. These are unique features that transform your workflow. After you use them once, you will wonder how you ever managed to create an Avada website without them.

Visually design forms

Drag and drop Elementor’s form widget to quickly add a call to action section or contact form to your Avada theme pages. You can integrate all forms to MailChimp, MailPoet and other services with just a few clicks, as well as customize all actions that are made after a form is submitted. The entire setup of forms is done on the frontend, while designing the page, so you don’t need to switch between screens to finish the entire design process.

Price table

Increase your sales by using the Price Table widget, allowing you to change every element of the price table: Header, price, currency, sale, period, features, footer, button, additional information and ribbon.

Hover Effects

Increase the engagement of every page you create in Avada by adding hover effects to almost every widget.The hover effects include: Background color hover, background gradient hover, image and video hover, color overlay hover, box shadow hover, border hover and hover animations.

Gradient background

This feature allows you to add gradient backgrounds to your page sections without touching any CSS. Using only visual settings you can completely customize the gradient effects, and add a primary and secondary color, choose between linear or radial gradients and set the gradient angle.

Shape divider

Follow the popular trend of shape dividers and introduce them to your Avada websites. Choose from 18 different section separators, including waves, fan opacity, triangle, tilt opacity, drops, curve, waves brush, pyramids, tilt, split, triangle asymmetrical, waves patern, book, clouds, zigzag, mountains, curve asymmetrical and split. You can also visually control your section separator, and scale their size and position as you like.

Box shadow

Accentuate the clean and modern look of the Avada theme by adding box shadows to your buttons, videos, images and other elements. You can also add text shadow effects to your headlines to make them pop out.


As you have seen, understanding the basics of how to use Elementor as part of your Avada theme workflow doesn’t take too long. The interface is friendly enough to make any designer’s workflow faster.

If you’ve created an Elementor + Avada theme website which you’d like to share, we’d love to hear about it in the comments below.

Download Elementor for FREE, or go for the Pro version. Any way you choose, your designs are bound to get a considerable upgrade with Elementor. 

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,365,209 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


43 Responses

  1. Look, Elementor is too beautiful and good to be in the same boat with Avada which is kinda crappy in terms of coding. I’ve used it on 2 projects and I totally don’t recommend it.

    Why would you need a theme, in the end with Elementor? And even so, Avada has too many plugins and I don’t understand why people still buy it. It’s been built years ago and the code is a horror. IF you try to extend the theme, they release some update or something that will break your site. I suppose Avada has that great number of sales due to support.

    Please, don’t promote crappy themes.

    1. There are thousands of Avada users that can benefit from using Elementor. It is useful to many people. I understand you don’t like it, but even if you don’t, there are a lot of takeaways to be learned by following this tutorial.

  2. One weakness of Elementor is that it cannot style the category and archive pages.
    This is apparently a weakness of WordPress’s rules according to Generate Press’s creator Tom Osborne. He cannot easily allow this to be done with Generate Press. But this also means category and archive pages suck in styling.
    Elegant Themes gets around this by creating an integrated page builder and theme called Extra Theme (which contains the DIVI Page Builder). This makes it child’s play to style the category and archive pages.
    Beaverbuilder gets around this by creating the expensive Beaver Themer hack of certain themes.
    Elementor should create its own integrated theme to allow complete styling of the category and archive pages.

  3. Hi, Ben, thanks for a beautiful video. I am still unsure which theme to choose with my Elementor ( I am currently working offline with the 2017 free WP theme. I want to minimize code residues and other problems some commentors mentioned above, but otherwise Avada seems fantastic. Was looking also into Total, Divi, Himmelen, Make (even though it will be a personal , not a business site) and less enthusiastically at Generate Press. Which of those can work cleanly with Elementor and also be flexible, customizable, easy to use, intuitive, fun? My blog will have quite a few different categories, including gallery, writings, and a travel section, so I would really like the theme to be very flexible and allow differnet customization for different pages. Is Avada in your opinion the best of this lot? Or do you perhaps have any other theme recommendations? I get dizzy just looking at the theme forest alone…

    1. HI Ben, installed Total in the end but also the Elemntor Pro and deleted the VC.
      A small question: How can I use the drop cap function to show on EVERY paragraph in a chosen post and how do I customize its color etc. Thanks for answer.

  4. Hi,
    Is Elementor already built in the themes by or these are two separate functions, get a theme separately and get a plugin and they work well together.
    Unsure as I don’t wanna double pay and I can’t find any help docs for that question.

    What would be an ideal combo for a paid theme with element or pro? with Elementor or genesis themes from Studio press with Elementor?

    Requesting guidance for a small business website for Doctors, a multi page site with focus on treatment pages and not primarily on blogs.


  5. What about the fusion page options? I want to adjust the header etc on particular pages can i still use the fusion options in conjunction with the element or content building?

  6. I’ve used two other page builders in the past but after discovering Elementor, It’s almost impossible to create a site with anything else. So I’m thrilled to have the Avada+Elementor combo 🙂

  7. Hello, do I have to install Fusion Core plugin if I want to use Elementor PageBuilder instead of Fusion Builder?

  8. Hello, after reading this, I see that I can not use the beautiful Demo templates that Avada has and none of the other great Realtor themes from ThemeForest as the Demo would not be compatible with Elementor. Is there an add-on to make Real Estate listings using Elementor?

  9. Hi there!

    Just watched your video and as I use Avada extensively, I am finding this very interesting.

    I do have a couple of questions… So watching your build, why bother with Avada at all? Any settings are completed in Elementor and that replaces the Fusion Elements. What parts of the Avada theme would I then be able to use and not have conflict with Elementor?

    Second question… I have a client who has built a website in Elementor/2017, what would the benefit be to transfer that over to an Avada theme, and is it even possible?

    Anything to make it easier for a client hand-off, I’m on it 🙂

    Thanks in advance for your reply 🙂

      1. Also wondering this — I have been on Avada for several years and use it for others’ sites, too (simply because I know it well enough to help them with it). I can’t see how Elementor adds to Avada here; it just seems to replace it and take over the same things that Avada’s theme can already do with its features. Wish there was somewhere that explains that; it looks like a great tool, but duplicate of Avada’s tools.

        Maybe it is just that — a replacement for Avada’s tools and a way to make it easier to get started with (Avada *does* have a learning curve…).

  10. I have a few sites I built using Avada, but I am now stuck with shortcode-based pages and slow load times due to all the pork included in Avada. I loaded Elementor as a step to learn it and hopefully – in time – migrate the pages from Avada to a new shortcode-free environment. I am testing this process in the “staging” site I set up so no live pages are effected. However, I am having some frustrations creating my first page and now wondering if anyone else has experienced the following:
    New page created from one of the templates in Elementor.
    Edited one section ot top of page.
    The page in editor looks fine, but when saved, then “preview”, all headings and formatting are missing.
    When return to WordPress editor, the formatting also does not appear.
    Upon viewing code in “text” mode in WP editor, no formatting code for sections or background is present.
    Yet, when I return to Elementor editor, all looks fine.

    Is this just an incompaitibility with Avada that I am not understanding?
    Thanks in advance.

    1. Hi Bill,

      To resolve your preview problem, go to Elementor > Settings > Advanced > CSS Print Method and change it to Internal Embedding. Then go to Elementor > Tools and click the Regenerate CSS button.
      If the conflict continues, you can contact our support.

      Please note – after editing a page with Elementor, you cannot go back to WordPress editor and make changes there.

  11. Hi, can i use elementor pro beside of avada for single post in theme builder? Also i have divi on another website but sometimes the page builder not work and not go to frontend mode but elementor free go frontend mode and easy to work.
    Help me about these:
    I have websites with divi and avada. Can i use elementor pro on these website beside of page builders (divi and fusion) OR i must delete fusion builder and divi builder?

Leave a Reply

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

Want to learn how to build better websites?

Join 1,365,209 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.