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