How To Use the Elementor Page Builder Plugin

Website Design

I’m writing this post to celebrate the launch of our dedicated collection of Elementor Pro child themes. We still love Divi but there’s no denying that Elementor is right up there as a great option for building your website. To get you started, our Support Manager, Tom, has put together three really comprehensive tutorial videos.

Elementor vs. Divi?

Before we dive into how Elementor works, I know that many of you wonder what the difference is between Divi and Elementor and which I would recommend.

The key difference is that Divi is best used as a theme, whereas Elementor is a plugin that can be added to any website. But to be honest with you, which theme you use with Elementor doesn’t really matter, as all of the controls you need to build your site, can be found within Elementor itself. Personally, I like to use the lightweight Hello theme (made my Elementor themselves) as a base theme.

I’d like to say that there was an easy winner, but the honest truth is that they both have special features that the other doesn’t have. My advice is that it will come down to personal preference about workflow.

Luckily you can try them both before making a decision.

Things I Love About Divi

I’m a Divi power user, so I’ve definitely got my workflow down to fine art. I love being able to quickly repurpose sections by copying and pasting, extending styles and creating style presets and probably my favourite feature, is being able to adjust margin and padding by dragging.

The animations and parallax effects in Divi are also a lot more elegant and this is where Elementor sometimes falls down.In comparision, I find the Elementor builder a bit clunky with less seamless front-end editing.

Thing I Love About Elementor

Elementor has a few killer features that I’ve longed for in Divi. The global colours, global font styles and the Typography settings allow you to allocated styles to every H tag and easily change colours and fonts across your whole site at every level.

There are also a couple of nifty layout options that I really love. Elementor handles the small browser/iPad breakpoints really well, because you can easily set any column width to 100%, forcing the content to fill the screen width. This is perfect for when you any odd number of items (eg. a grid of three blog posts) that create two blogs side-by-side and the third post below on its own. There is no easy way of doing this in Divi.

The other handy setting I love, is the ability to reverse column order on mobile with just a toggle setting.

In case you’re wondering about speed…

I tested the Divi and Elementor versions of one of our themes. With identical design and the same images, the page sizes were roughly the same and so was the load speed.

1. Setting Global Colours & Font Styles

In the following videos, you’re going to meet, Tom, our Support Manager, who has been making sure our documentation and support resources are up to scratch.

2. The Header, Footer & Using Templates

3. Navigating, Preview & Adding Widgets

If you’d like some more detailed Elementor tutorials, I can recommend this guide from the team at Astra as well as the free Elementor Academy from Elementor themselves.

Get my DIY Your Website Ebook

+ get 20% off your first order

You don't have to settle for an average website.

Follow my 5 seriously actionable pro design tips to help you level up your website.

0 Comments

Submit a Comment

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

Free DIY Your Website Ebook +

20 % off your first purchase

You deserve better than an 'average' website...

By downloading our ebook, you agree to receive our excellent marketing emails.