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.

Conclusion

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 is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time when it was only used to blog.

16 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.

Leave a Reply