Introduction to Elementor Basics
In this video, I'm going to show you all the basics of Elementor, as well as the simplest way to understand how it works with WordPress and your theme. And to show you the basics, I'm going to be building a beautiful hero section from scratch and showing you everything from how to add and customize text, how to add backgrounds with color, images, or even videos, how to add images and customize them, how to customize your spacing in your layout, and how to add fun stuff like shape dividers that help content flow from one section to the next, or animations that bring a lot of life to your website. So, let's get started.
How Elementor Works with WordPress & Themes
First, how does Elementor work with WordPress and themes? Well, at its core, a website is just a group of connected pages, and each page follows the same structure. First, you have the header, which contains your logo and a navigation menu. Then, you have the page content, which makes up the bulk of the website. And then, at the bottom, you have a footer, which usually contains a lot of other helpful resources. No matter what page you click into on a website, the header and the footer almost always stay the same across the entire site. Only the middle part changes, which is our page content.
So, how does WordPress fit into this? Well, to edit these pages, you need a content management system, which is just a fancy word for what WordPress is. WordPress is the control panel for your website. It's where you find your pages, your plugins, install a theme, and customize your settings all in one convenient place. And it's on the back end of your website, so only you can see it whenever you log in.
So, how do we get WordPress? Well, to get WordPress, first you need web hosting. And web hosting is simply just a server where all of your website files are stored. And it's connected to the internet and running 24/7 so that anyone can visit your website at any time. You need web hosting in order to own your own website and have your own custom domain name. And the web hosting service that I use for all of my websites is with Hostinger. They're super easy, reliable, and affordable. And I also have a special discount code for all my viewers. So, you can get that by clicking on the very first link in the description. It'll save you a bunch of money on your hosting, and you can even install WordPress in a single click after getting your web hosting.
The Power of a Page Builder
So, now, how does Elementor fit in? Before page builders like Elementor, you would download a theme to edit everything, your header, your page content, and your footer. But the tools and settings that you were given to edit your website would be different theme to theme. So, you'd often run into limitations and have to switch themes or try to fix it with custom code, which, let's be honest, is never easy.
Then, page builders like Elementor changed everything. With a page builder, you can drag and drop elements right onto your website and customize them in a really convenient toolbar. And then you can see your changes updating live right in front of you. And with Elementor, the layout and design customizations are completely endless. It's all up to your imagination. And the best part, it's free. So, do I still need a theme if I'm using Elementor? Well, yes. With WordPress, you always need a theme. And you also need something to install Elementor, too. Elementor can't run without a theme. And your theme is also how you edit your header and your footer, unless you have Elementor Pro, which then you can build a header and a footer using drag and drop just the same way that you would a regular page.
How to Install Elementor
So, how do we get Elementor? Well, with WordPress, it's really easy and I'll show you right now. So, from inside the WordPress dashboard, you would just go over to plugins and then click add plugin and then just go up to the search bar and type in Elementor. And then you'll see Elementor website builder right here. But I've already got it installed. But if not, just click the install now button and then activate it. And then once you do that, you'll see a little Elementor tag inside your toolbar right here.
The Elementor Interface & Structure
Okay. So now let's move on to the basics of Elementor. And we're going to be doing this by building a page together. And this is using the free version of Elementor. So inside of Elementor, we have our toolbar over here, which is where we can drag and drop widgets into our website. And this is also where we edit those widgets. And then this big area here is just your viewport. This is where you visually design your website and it updates live in front of you.
So to start building, we need to start with a section. So we can just come over here and click the plus button. And then I always just choose flexbox. And then you can select your structure. So this is going to give you columns that are arranged just like these images. I'm going to go with this one right here. So the first thing to understand about Elementor is its structure. So you start with a section which is outlined in pink and then inside of that section you have columns which are dotted gray outlines and then inside those columns is where you can drag and drop widgets which are also outlined in pink. So it goes sections then columns and then widgets. Generally you change to a new section anytime you're going to do a different background.
Adjusting Layout and Spacing
Okay. So with that said the second thing that we need to know about Elementor is how to edit our spacing and our layout. So currently this section is really thin. So let's just make it a little bigger to fill the screen. So you can just click on a section by clicking on the six dots right here. And you can edit the spacing in two ways. You can just go over here and drag up the minimum height and that will make this much bigger. Or you can do it with padding.
So I'll just delete this. And then we can come over to advanced. And padding is my favorite way to do this. So all you do is just unlink these values right here. And then we can just add some padding to the top and bottom. And you can do that by clicking on this button and just waiting. Or you can just type something in. So I'll do 150 on the top and 150 on the bottom. And then this section will grow bigger as we put widgets inside of it.
Adding and Styling Text
So first let's start with some text. So to drag in some text, you just click on this little plus button to add an element, which is just another word for a widget. So we'll just grab this heading text right here, and just drag it in. And you can change this text just by clicking right on the screen and typing, or you can do it over here inside this box.
And to change the look of our text, like the color and the font, we just go over to style. And then we can click on typography. So I'm going to change the font family here to something different like Times New Roman. It's always a classic. And then you can change the size of the text by dragging on the slider. So I'm going to do like a 64.
And to change the color, you just click out of it. And then you'll see text color right down here. And you can just click here and select any color that you want, but I like the classic black. So, I'm just going to leave it as is. And we can also add some simple text with Elementor. So, we'll just click on the plus button. And then we'll just drag in a text editor. And we'll just put that underneath. And this is just a simple basic text box. You can also duplicate items in Elementor by hovering over them and just right-clicking and selecting duplicate. So, I'll just change this text to say web designer. And then I'll just make this text a little bit smaller. So I'll go to style and then over to typography and just drag this down.
Adding and Customizing Images
So now let's add an image. So to do this, we're just going to click on the plus button up here. And then you'll see the image widget right here. We'll just drag that over here to this column. And to change the image, we'll just go over here and click choose image. And you'll have your media library here. Or you can just click on upload files and just drag one in. So I'm just going to do that now. And then once that's uploaded, you can just click on select and then that will place your image in. And I used a PNG image with a transparent background. And you can change the size of the image by going over to style. And then you can just change the width right here. And you can drag it up or down. But I'm going to leave it as is because this image is going to resize as we change the spacing of this section.
Okay. So next we need a button. So let's go up to the plus button and add an element. And then we'll just drag in the button widget right over here. And you can change the text of this button right here. So I'll just say work with me. And then here is where you put a link to where you want that button to go. So you can just delete the hashtag and paste in your URL.
And we can edit the color and the size and the animations of the button by going over to style. And we'll just come down here to where you see normal and hover. So first we'll focus on the normal and then we'll do the hover color whenever you hover your mouse over. So, for the normal color, I'm going to go over here to color. And I'll just change this to a blue. Maybe something like that. And then for hover, we'll click on that and change that to a little bit of a darker blue. Maybe like this. And then whenever you hover over, you can see it changes color. And then you can also add a hover animation. So you can just click here to hover animation underneath the hover tab. And you can just say grow. And whenever you hover over the button will grow, which is really cool. And there are lots of fun options in here, but grow is definitely my favorite. And if you want to make the button a square, you just come down here to border radius. And then we can just increase that a little bit to give it slightly rounded corners. And you can make the button bigger by just increasing the padding. And you can also unlink these values if you want to do more on the top and the bottom and less on the right and left. But I'm happy with the way that it looks.
And there's lots of fun widgets in here. If you go over to the add element button, we can add something like a divider. Just really helps organize our website a little bit more. Gives it a professional look.
Customizing Section Backgrounds
So now, let me show you how to change the background. So to do this, we're just going to go up to this section here and click on the six dots. And then we'll just go over to style. And then you've got all of these background types. So first you've got classic, which is where you can add a color or an image. So you can just click on color here. And I could just select like a blue color just like this. Or if you want to go with an image, you can just click choose image right here. And then we can just upload an image by clicking on upload files and just dragging one in. And then just click select. And now our image is in the background.
Or you can do a gradient by clicking on this button here. And then you can change the colors here. So we could start with maybe a white and then go down to maybe a blue. And now we've got a gradient in the background. Or you can also do a video by just clicking on the little video symbol here. And then you can just paste in a YouTube link like this. And now we've got a video playing in the background. Cool.
So now we just want to push this text down to be center aligned with me. So to do that, we can just click on the column that all that text is in. And then you can just come over here to justify content and select center. And that will put it right in the middle.
Adding Animations and Shape Dividers
Okay. So now let's add something fun like animations. So this is super easy to do. So, I'm just going to click on the entire column because I want this entire column to fade in. So, I'll just click on that and go over to advanced and then we'll just come down to motion effects and then you'll see entrance animation. We can just change this. So, you can do a fade in. So, whenever we load the website, it will then fade in like that. Cool. And don't forget to click on publish to save your work. And then now if you just click on the preview changes button, you can see that entrance animation. Just like that. Looks really nice.
Okay. So now we're going to move on to adding a shape divider. So what I did was just created a services section down here. And I don't really like this hard line. I kind of want these to flow together a little bit better. So to do that, we're just going to click on the six dots for this top section. And then we'll just go over to style and then down here to shape divider. And you can choose top or bottom. I'm going to go with bottom because I want it to be on the bottom of this section. And I'll just start with the mountains. And if I scroll down, you can see I've got some cool mountains now added. And if you scroll down, you can edit the width of those mountains to make them bigger or also the height to make them taller.
Using Elementor Templates
But let's say that you don't want to do all that work from scratch. Well, now we can talk about Elementor's built-in templates. So, if you start over with a new page, instead of building by clicking the plus button, you can also just click on this little folder icon right here. And you can add in full blocks, which are just full sections. And Elementor has a ton of options. And if you see the little pro symbol, it just means that you need Elementor Pro to use that block. But there are free options in here if you scroll and find them. And then you can also do full pages as well. But again, a lot of the options are with Elementor Pro. You're going to get fairly simple ones with Elementor free.
The Value of Elementor Pro
And now that leads us to Elementor Pro. Is it worth it? And what do you get with it? I love Elementor Pro. First, you unlock all of the templates inside of Elementor's built-in library. And you also unlock all the pro widgets. So, with the free version, you only get these basic widgets, but with Pro, you unlock all of these like looping carousel, off-canvas menus, pricing tables, and so on. It gives you a lot more endless options.
You also unlock a lot of advanced settings. So, for instance, I could go over to motion effects and I can do scrolling and mouse effects. So, if I turn on mouse effects and I do 3D tilt, whenever I move my mouse around, this image now rotates with it. And you can turn it up and it can be more aggressive or you can also do scrolling effects. So, if I turn this on and I choose say scale, whenever I scroll, it gets bigger and smaller as I scroll down. Same thing with transparency or blur and so on. So you can add a lot more life to your website with these settings. And the best part is you can create custom footers and custom headers using Elementor Pro. And you design them just by simply dragging and dropping just as we would by building a normal page. That way you're not limited to your theme's header and footer settings. And if you want Elementor Pro, just click on the link in the description to get it.
Conclusion and Next Steps
Okay, so that was all the basics of Elementor. If you want to learn how to design a fully functional, beautiful website with Elementor, then click on the link in the description to one of my other videos. I go much more in depth in that video. And if you found this one helpful, please consider giving it a like. Or if you want to see more videos like this, then please consider subscribing to my channel. My name is Dale McManis and I will see you on the next.
