Introduction & Overview of Elementor
Look, there are so many 1-hour plus tutorials out there explaining Elementor like it's a Harry Potter book. But you don't need that and you don't want that. So, here's Elementor in 13 minutes.
This video will have six parts. The overview of Elementor, containers and columns, standards, templating and header and footer, tips and tricks, and taking Elementor further. So, let's jump right into it.
Elementor, in my opinion, is the best page builder. It allows for so much customization while still being easy to use, unlike some page builders. Also, unlike some other page builders, Elementor is available for free right from the plugin library. The free version of Elementor is probably good enough for 90% of people. However, there is a paid pro version available that gives you a lot more options. If you go to their website, elementor.com, you can buy the pro version of the plugin.
You need to install both the pro version and the normal version of the plugin at the same time for it to work. If you're some kind of web designer or developer, you'd likely appreciate and utilize many aspects of the Elementor pro version. But if you aren't, you can get away with not needing it. The biggest advantage of Elementor pro is creating templates for creating websites from scratch. When building a site in Elementor, there's a lot of different setups and configurations you can have.
But likely you'd fall under one of these three scenarios. Number one, you are using a preset downloaded Elementor-powered theme that gave you demo content and alongside some custom header and footer and theme customizable options.
Two, you are building a website from scratch just using Elementor with maybe a theme like Hello Elementor, which can be used as a base template for you to build out the rest of your elements of your website from scratch.
Or three, I hope this isn't you, but you've installed the plugin alongside your theme which already had an existing page builder. Don't do this.
Based on what setup you have, the setup of your templates and headers and footers might be different, but I'll cover those differences later.
The Elementor Editor Interface
Let's start with the basics. Editing pages is easy with Elementor. Start off by going to pages and clicking edit with Elementor on the pages you want to edit.
If you click the normal edit button, it will bring you to the Gutenberg editing view of the page. Here you can do normal page stuff like setting the page title, page parent, and featured image.
When you edit the page in Elementor, you can also change some of those things by clicking on the gear icon in the bottom left or in the new versions of Elementor, the top left.
But, if you want to edit the actual contents of your page, you're going to have to edit the page in Elementor to use it. Once you actually start editing a page, you can just click on elements to edit them and a panel will pop up on the left side where you can change the element's content and style.
Most elements will have this three-tab setup to edit them: content, style, and advanced.
Content is where you're going to be editing the content of the element. Style has all the styles that are specific to that element. And then advanced has more styles that are common among all the elements.
On this advanced tab, you'll use margin and padding the most. And on the styles tab, you'll be using pretty much all of them.
There's tons of different elements you can use and even other plugins that you can install to add more elements. Anything from headings, text, images, sliders, icons, lists, pricing tables, and more.
If you click onto this tab, you can edit some more site-wide styling. This is the style that the elements will follow by default without editing them. We'll come back to this, too.
Building Layouts with Containers & Flexbox
Containers and columns.
We're going to recreate this design as an example. You'll be using this element a lot, container, and maybe grid. These are the elements for creating layouts with columns or putting elements side by side, which pretty damn important when you're designing a website. You can start at the bottom and and click the plus button, and then click flexbox. Flexbox is for 99% of layouts. The grid one is used for creating a layout that's very repetitive, such as this. You can even create a layout like this with the flexbox one. It's just easier to do in the grid in that case.
When you've clicked on flexbox, it shows you different grid layouts. I could click on the obvious one for the layout we need, but I'm going to do it the hard way because that's how you'll learn. I'll click the first option.
By default, there's no columns here. So, let's add in a text editor element with some content inside, as well as an image element. You can see now that they're on top of each other. To create a two-column layout, click on the pink section, and then click on this right arrow, which is row horizontal. This makes everything in the container side by side.
Now, look at what happens when you add a button into this. It makes it side by side. This isn't what we want in our case. So, to fix this, we'll need to put everything in another container. So, this is now a container inside of a section element. And the container just contains all the elements. What I like to do is to have two containers as the parent objects, which means all the elements will be inside some kind of container. And so, if I just right click and click on structure, you can see the kind of hierarchy of the elements going on here. What's cool about the flexbox grid is that when you click on one of these container elements, you can make everything side by side just like that parent pink section. And you can have a container inside of a container an unlimited amount of times.
You can click and drag the width of the columns to get it perfect for your layout. And these are glitchy as hell. And so, how you'd customize that is you click on the container and edit this size number box and then add in how wide you want it. By clicking this right here, you can change the units, but in most cases you want to be using percentages, so you should definitely be using percentages. One thing you need to watch out for is accidentally adjusting the width of an element instead of the container. This can easily break your layouts. You can see here this is what it looks like when I edit the width of the element and not the container.
But with this grid system, when you go to mobile, it should automatically stack on top of each other by default. You may find that when you have your columns, that the gap between them isn't quite the way you'd want it. And so if you edit the main container and then go all the way down to gaps at the bottom here, you can change the column spacing and this will give your design a much better look.
And that's the basics of columns and containers.
Design Standards & Global Styles
Now that we're done with that, I think it would be a good time to introduce you to some standards.
This will be simply the way I think is best for creating Elementor websites properly. Because each element has dozens if not a hundred customization options. So the more consistent you are making your website, the easier time you're going to have when editing it.
Every time you have a new heading, you don't want to be copying and pasting a previous one just to ensure you have the same styles. You want to make sure it's consistent by default.
In Elementor, you can click these different device screen size options, so you can edit styles for elements that are specific to that size. So if I click the mobile one and change the font size here, it will only change it for mobile. But if I change it to say a hundred on desktop, unless you override it on tablet and mobile, tablet and mobile will inherit that style.
When it comes to sections, you want to make sure that there's consistent padding above and below the section, so it will look consistent and properly designed. I like to use 80 pixels for desktop, 60 for tablet, and 40 for mobile. Now, another standard you should have is with typography.
And if you're going to take anything from this video, it should be this part. If you want a good-looking website that's easy to edit and use, then you'll want to set up your typography in these settings found by clicking this button. Here are all the master settings for your headings and text. So, when you drag and drop a new heading or text element on the page, it'll all come out looking the same.
This is extremely important to set up. A ton of specifically Elementor websites will have dozens of different headings and text styles just because they have not set it up in these master settings. So, click into typography and scroll through all of these different heading styles and edit each one so it's perfect. And make sure to also edit the tablet and mobile version, too.
Just like the typography, you'll also want to set up styles for your buttons, too. Because you don't want to rely on setting your styles individually for each element. You want to make it as easy as possible. Another helpful one is to go to the global colors, too, and set up your colors that your website uses. This will make it so whenever you open the color picker on any element, it will show these colors that you can quickly select from.
Templating and header and footer.
This is the more advanced side of Elementor. So far, what we've been editing is just pages. But with Elementor Pro, you can edit page templates and headers and footers.
This is where the differences in your theme configuration can come into play. Some themes add in header and footer support without the need of Elementor Pro. If you're working with the Pro version, then all these settings can be found under templates here.
If your theme supports headers and footers by default, you may see them on the left side of the navigation. Or if you're viewing the site logged in, you'd almost always find them if you hover over edit with Elementor when viewing a page. And then, if you edit one of those, they edit exactly the same as we've been working with.
An example of editing a template file is a single blog post layout. Here you can see when editing this template file, there are different elements you can use like content, categories, the featured image, and the post date. These elements will actually pull the actual values from the blog post. So, this is one template that is being used for all the different blog posts. You can also edit the template for the default page, which is what happens when you create a new page and just use the Gutenberg editor. It will output the default page. Or you can edit other templates like the search results, the 404 page, or custom post types like portfolio, case study, or team if your theme has it.
If you have Elementor Pro, there's also some other cool things like being able to edit pop-ups and utilizing the kit library.
Essential Tips & Tricks
There's a couple different little things that are good to know when using Elementor. So, here's my wisdom over the years of using it.
First, make something perfect once and then copy and paste it to use again just swapping out the content. Make sure you styled it for mobile responsiveness, too, or add in any animations you want to use. Do it once so you don't have to do it again, and this makes everything consistent as well.
Next, if you can't access an element to click on it because there's some weird thing happening with your layout, right click anywhere and click on structure. This brings up the different elements of your page in a hierarchy, so you can easily click on what you're looking for.
If you have a section that is repeated from page to page like a call to action, for example, you can create a section template under templates, and then use the shortcode it generates to put on other pages. This way this section appearing on many pages is edited once in one place.
When using entrance animations, I recommend using the fast animation duration. Even that I think is too slow, but the slower ones are way too unbearable for users to wait through.
Extending Elementor with Add-Ons
Taking Elementor further.
One good thing about Elementor is that it's very popular. And that means you can find a lot of free add-ons for it. There's a couple of these plugins out there that add other functionality like headers and footers, starter templates, dozens of elements, features like progress bars, scroll-to-top buttons, sticky menus, mega menus, and more.
A lot of this stuff can be had for free without the need of Elementor Pro. But all these individual plugins will likely have their own pro version. If there's specific functionality you need, most of the time you can do it for free.
If you're looking to edit your theme's base templates like page, post, search, header and footer, and more for free without Elementor Pro, I recommend the Theme Builder for Elementor plugin. Link in description. If you're looking to add in a mega menu, more elements, header and footer for free, I recommend the ElementsKit plugin. Link in description. If you're looking for Elementor templates to easily let you start from designed sections and a shitload of new elements, I recommend the Essential Addon for Elementor plugin. Link in description.
But with all these plugins, they are more or less massive. They typically load tons of files on your website slowing it down if you're not too careful. You can sometimes find that in these plugins you can toggle on and off the functionality, which can help with this. But still, these plugins are big and you should be cautious when installing them.
And that's it for Elementor. You'll learn Elementor best from doing, so log in to your website and begin editing. If you want to become a better web designer or developer, watch my other videos.
