Understanding Elementor, Themes, and WordPress
In this video, I'm going to explain the basics of Elementor. And I'm going to show you how it works inside of WordPress. It's important to understand how Elementor, your theme, and WordPress works together. Otherwise, you're going to spend a lot of time trying to figure out it all by yourself like I did. So, let's get started.
What do we need to understand? The difference between Elementor for free and Elementor Pro. Why you need a theme and what WordPress does. To simplify it, a website is nothing more than a few pages that are connected with each other. A page consists of a menu with a logo and some menu items, the content of the page, and the footer. The menu and footer appear on all pages and the content within those pages is different on all pages.
The Evolution from Themes to Page Builders
So, to edit these pages, you will need to go to the backend of WordPress. WordPress is the interface where all of your pages are, your plugins, your theme, and your settings, which you can only see when you log in.
So, back in the days, you would download a theme somewhere on the internet, which would give you a lot of options to edit your pages, your menu, and your footer. For every page, you would go to a specific edit page where you could play around with the settings of that page. Then you would save it and check if your changes worked out on the live page. This meant that you had to go back and forth all the time to see if it worked out in the way you wanted. Also, all of the themes had different options, but no theme had all the options. So, often times, you would stumble upon limitations of that theme, and you would need custom code to get the page that you want. This was how Elementor worked for years.
But then, something new hit the market, the page builders like Elementor. With a page builder, you can skip the edit page and go straight to the live page. You will get a sidebar with different options and you can drag and drop different elements on the page. This means that you don't need to use the difficult edit page anymore. And build up your pages super-fast with an experience that's similar to a design tool. The only reason you will still need your theme is to run Elementor, because Elementor cannot run without a theme. And you will need your theme to edit your menu and your footer.
Your First Page: Using Basic Elements
So, let's build our first page. So, here I am on the free version of Elementor on a blank new page and I can just drag the elements out of Elementor on my website. So, for example, I can just drag a video on a canvas and then, I can place a YouTube link in here and I just have a video on my website. Or for example, if I click here, I can add a title super easy and I can type the title here. This is a title. I can drag a button and make it link to a website that I want.
Things like an image gallery, a progress bar, or for example, a testimonial, where you can change the photo, the text, and everything about it. And then, if I just click publish, the website is saved and this page is live.
Speeding Up Design with Page Templates
And if you have no inspiration for what to put on your page, they have these templates. And these are fully designed templates that you can click on to get some inspiration. And what's even better is that you can insert them. So, if you have a template that's similar to the website you want to create, you just click on insert. And then, this whole page is inserted into your page and then, you can change that page.
So, let's just try that for now. Let's insert this page. Now, I need to zoom out a little bit because my screen is too small. But now, this whole page is inserted into my page and I can just change the text in here. So, for example, featured courses and if I then click update, this page is also live. So, this is super cool.
Assembling a Page with Section Blocks
But for people who want to make their own design, and don't want to rely on a design from somebody else. They also have something great and that's called blocks. So, that's what you find here. And with this blocks you can build up a page really fast because these are the blocks, the sections on every page. So, let's say you want to build your own portfolio. So, you've made a little sketch just on paper with the first section and you want a big video in the background here, you want some text, then, you want your services section, and you want three parts here. And then, you maybe want an image gallery for your work. And then, maybe you want some contact information with a map. So, let's say this is what you want to build.
And this is where the categories come in. So, they already have the most common categories here in the block. So, if you click on hero, that's like the upper section of your website. You can already insert something like we've sketched on paper. For example, let me zoom out, something like this. And then you can replace this image background with a video. So, now, if you want to add our services block we just go to services because they also have a services tab. And then, you will be like oh, this section looks like what I want. So, you insert that. And then, you have your services section. Maybe you just want one row. So, you delete this one, super easy. Now, we're going to add our portfolio section. They also have a portfolio section. So, for example, check out my work. Something like this. Boom! You have your portfolio. Now, at last we want a contact place. So, something like this, which I've sketched on paper. And there you have it, there's your contact section, all right.
Customizing Design: Fonts, Colors, and Style Copying
So, this is, this is super cool. Now, you have all those blocks on top of each other. But now, of course, you want to change the design to your fonts and your colors. So, let's just say for example, we want to change this title. So, we click on the title and then there's the style tab, and within the style tab we can super easy change the color, for example, right. Or we can change the font size because we think it's too big. We can even change the font itself. So, I'll make it something like this. Or the font that I use.
And now, this looks already a little bit more unique. But now, I have my other titles. And they've made it really easy, this also is so cool. They have copy and paste. So, if you click, right click on the title, you click copy, you go up, you go to another title. And you click, right click, and you click paste style, it's copying the style. So, that makes it really fast and really easy to change the whole page in like, 10 seconds, right. So, if you paste this style, now you see it's middle aligned because this text is also middle aligned. So, if it's left aligned you can click here and then, you just click on alignment and then it's left. Super easy, super fast, and if you click save it's live.
Elementor Free vs. Pro: Dynamic Content and Templates
Now, we have just designed a simple page that you can save and it's live. This works great for simple websites that don't change. But often times, a website is more than just a few static pages. Most websites have sections that change a lot. For example, a blog with blog posts. Or a web-shop with product pages and search results.
If you have just Elementor for free you would still need a theme to edit those pages, with of course the limitations. So, if you also want to design those dynamic pages on your website, you will need Elementor Pro. Also, with Elementor Pro you can design your own menu and footer. So, as you can see here you can design the header, the footer, your blog items. What's also a nice benefit about Elementor Pro is that they have a lot more templates, right. Because as you can see, a lot of those blocks are only available when you buy Pro. So, for example, on these pages, you will see this first five are free, but then, a lot of them have this Pro icon. So, if you want all the templates that they provide you would also need Pro.
Also, they will give you a lot more widget, right. Because this is pretty limited. It's already super nice, which you can do with the free version. But for example, I'm here on a website where Elementor Pro is installed. You would have this new section, right. So, you could add sliders, you could add an extra navigation menu, you can insert a form, your own contact form. And most importantly, you can insert your blog post and design them yourself.
And also, when you're designing bigger websites, you will have a lot of elements that are the same on every page. And if you only have the free version and something changes, you would need to change every page manually. And that's not a really nice experience. So, that's why in Pro they have this thing called template. So, if you think like, okay, this part I'm going to use on all the pages on my website. You can click on it and click on save as a template. And then, if you change something inside of the template it will change on all the pages, right. So, if you're building bigger websites you would want that template feature, trust me.
And what's also really great about the Pro version is that they have a role manager. And role manager allows you to limit what the client can do. So, if you're working for a client and you want them to edit the text only, but not mess up your design, they have a roll manager. So, for example, you add a user, a vapor user and you give them their own email and their own login. You can say they can only edit the content. And then they can only edit the text and the images. And if you give them you know, all access, they can just mess up your whole website and you need to start over. So, that's also a really nice feature if you're working with clients.
Getting Started and Next Steps
So, if you want to get started the download link for Elementor free is in the description. I've also put the link for Elementor Pro and there's also a recommendation for hosting if you don't have hosting yet. I will make a video very soon on how to install Elementor and WordPress on your hosting. So, if you don't know how to do that you should wait for that video. But chances are the videos is already live when you're watching this. So, check the description. All right, thanks so much and see you next week.
