Getting Started with Elementor
If you’ve worked with me, you know I love building my custom website designs in WordPress. Not being beholden to a theme’s cookie-cutter layouts is a godsend for a designer, especially if you have a particularly layered, textured, artsy aesthetic.
I like my websites to look like personalized collages that fit my clients’ personalities, and I am able to build exactly what I design by using Elementor. In fact, this site you’re on right now is built with Elementor, using only the free version of the minimalist Astra theme!
Now, you don’t need to be a fancy designer to get loads of benefits from working with the Elementor page builder plugin—even the free version.
In this post, I’m going to share with you my favorite Elementor page builder tutorials for beginners. Whether you’re managing a site that’s already been built in Elementor for you, or you’re looking to build your own site from scratch, this post has everything you need to get comfortable and confident working with the Elementor page builder.
How to use Elementor page builder
Elementor uses a drag-and-drop interface that allows you to easily add new sections or pre-built templates onto your pages. You can drag new widgets into the sections, add or remove columns, and edit images, colors, fonts, and loads more.
This short video is a great intro to the page builder user interface.
Elementor's Global Settings
With the release of Elementor 3.0, we got some really cool new features, including the global site settings, where we can set our global colors, typography, and more.
This video shows you how to access the global settings panel and how to manage updates to global colors and fonts.
Avoiding some common mistakes
Mastering a new page builder certainly has a learning curve, and you will make mistakes. The good news is that you can almost always fix them. As we’ve already learned, there are versions of your pages that you can fall back to if needed, but you can also sidestep some common mistakes by watching the video below with pro tips for avoiding theme incompatibility, poor spacing techniques, incorrectly nested inner sections, and more.
Using (free!) Elementor special effects
Now that you understand how easy it is to use Elementor page builder, let’s look at how you can build a highly engaging landing page on your website, using only the free version of Elementor.
There are so many amazing features you can take advantage of and I love how this video shows you some of the lesser-known options.
Planning ahead for responsive design
As more than half of all internet users are on their smartphones these days, you have to make sure that your website looks just as good and works flawlessly on tablet and mobile. Elementor has a great tool included in their editor that allows you toggle between the desktop, tablet, and mobile views, AND you can even set different paddings, margins, and font sizes for each device. However, there are some best practices that will help you create your responsive design with less of a headache. Watch the video below to check them out.
This is just scratching the surface on what Elementor page builder is capable of, but hopefully it’s been a helpful introduction if you are just getting your feet wet with Elementor. I’ll be sharing some more advanced tips and tricks from my favorite Intermediate and Advanced tutorials in a future post. Until then, thanks for stopping in and happy page building!
Note: Some links in this post are affiliate links, which means I get paid a small “thank you” for the referral if you decide to use the same tools that I use. This doesn’t change what you pay, and I only recommend products that I use and love. Thanks for supporting me!