Up next in 10
How To Use Elementor In Wordpress (2024)
220 views
Jun 24, 2024
The video "How To Use Elementor In WordPress (2024)" is a detailed tutorial for WordPress users looking to build and design their websites using the Elementor page builder. It covers the latest updates and features available in 2024, guiding viewers through the process of installing Elementor, navigating its interface, and utilizing its drag-and-drop functionality to create stunning, responsive web pages. Perfect for both beginners and experienced users, this video helps you unlock the full potential of Elementor to enhance your WordPress site with ease.
View Video Transcript
0:00
How to use Elementor in WordPress
0:02
Hey guys, welcome back to the YouTube channel. Today we will be taking a look at how you can get started with building your WordPress website using Elementor
0:12
So you can see over here I have logged onto my WordPress dashboard and you can use multiple different WordPress and installation platforms
0:21
So you can deploy WordPress onto your website. This is the website. I haven't built it at all. It is totally empty and we're going to begin building together
0:29
using Elementor. So Elementor is one of the most popular plugins that is used for WordPress site building because it can really simplify yet make your website customizable. So simply click on plugins on the left side of your screen and click on Add Nu. And once you go into the Add New section, you can search for Elementor. Once you search for Elementor, it will be the first plugin. And you will just have to click on Install now. And it just takes a couple of seconds to install
1:00
install. Once you do that, you can just go into your install plugins on the left side of your screen
1:04
You can see Elementor is present now, and you will click on Activate. Once you click on Activate
1:10
you will be able to see Elementor on the left side of your screen over here in the navigation panel
1:16
So you can click on the Elementor, you know, the Elementor text on the Navigation Panel, and you will be able to see what you can do
1:23
So we want pages and landing pages. We don't want posts. If you want to include posts or blog posts, you can enter that as
1:29
well. Next up you have integrations, advanced, and experiments. You don't really need to
1:34
change any of those things. We're just going to save it as it is. And you can click on your
1:38
role manager over here and you can enter multiple different roles for people that might
1:43
be using Elementor to, you know, edit your website. So if you have, you know, a team or multiple
1:48
different people, you can get started by that as well. Now if you log in to your Elementor
1:54
account over here, you will be signed in and you don't really need to access your Elementor
2:00
mentor website directly from you know elementary you can easily just go on to your
2:05
website over here just open it up and click on you and then you can click on
2:10
customize customized by elementor that is totally up to you I just going to go into details and you can just click on over here and you can click on change the theme And you editing with Elementor
2:22
So you don't really need to do anything else. But if you want, you can directly go into Elementor and access your WordPress site from there as well
2:31
But I'm just here on my WordPress site. And I will see you have 16 free themes that are or templates that are available that you can choose from
2:39
So let's say I want to continue with a simple template. So I think I want to continue on with a basic template like this one
2:51
Or you can even just go on ahead and browse themes as you want
2:55
So I think I'm just going to go on ahead. And I'm going to go with the 2021 theme or template
3:03
Now you can see over here, this is going to load up the screen
3:08
I'm just going to click on activate and publish just so you guys can see what it's like without changing the template and then we will begin customizing our template
3:16
So I'm just going to close this up and now this is what the website is looking like if I just go on ahead
3:23
And now I'm going to go back to WordPress and we're going to begin editing our website using Elementor
3:28
So the first thing you're going to do is go into the pages section and you're going to click on Add New Page and we're going to begin building our homepage
3:35
So once you click on Add New Page, it will open up the WordPress website builder, but you will see the Edit with Elementor button on the top of your screen
3:44
So I're just going to click on that. And don't worry about this, the Elementor 78, don't worry about that
3:50
We're going to change that later on. So just skip that and think this is the start of your page, so you can begin editing from here
3:58
And what you're going to do is you can see on the left side of your screen, you have a navigation panel
4:03
and in this navigation panel you have different sections that you can insert let's say i want to build a
4:09
basic home page so in my basic home page i first am just going to go ahead and show you guys the
4:15
different things that you can add so you have pages calendars you can drag and drop a wordpress page as
4:22
well you can enter the page title as well you can also insert different elements from your
4:27
wordpress site then you also have things such as e integrations as well as sidebars and um short codes and testimonials you can add but we going to focus on building our homepage so for our homepage i want to go on ahead and insert a image
4:44
so after you've inserted the image you will be able to see the image size in your image size you can
4:49
choose how you want the image to be presented and in your image you can go ahead and just select the image
4:56
that you want so you're just going to click on the image and you can upload your own files i'm just going to
5:03
continue with one of the pre-existing images that i used now after you've placed your image you can go
5:10
ahead and click on the layout on the top left like this and you can choose the column width you can
5:16
choose the vertical alignment how you want it to be you can choose the widget space the html tag
5:22
so on and so forth then you also have the style of the image insertion
5:26
Then you have advanced sections as well. Now, what I'm going to do is I'm just going to select this section and place it on the left and or maybe on the right
5:36
I'm just going to go on ahead and you can choose to, you know, increase the size of the image
5:42
This is a like lower quality image. So I really didn't want to increase the size, but I'm just showing you guys how you can do it
5:48
And you can also make it slightly less opaque if you want to, you know, put it as like a background image
5:53
then you also have borders that you can add and then you have your margins that you can add so if you want to be left margin or right margin however you want it to be presented so let's say i want to place it like this and then your padding is what you can control and you know move the image to the left or to the right so this can help you in moving the image to the side then you have your width so you can you know enter the width as well however you want it to be presented so after that you also have things that
6:23
as your layout. So in your layouts, these are probably the most important things. So you want to make sure that your layout is correct
6:32
So after that, you can just also really customize a section and add multiple sections in the forms of columns
6:38
For that you actually have to go back into your site builder And in that you can click on inner section and you can click on you know creating multiple different sections And I going to move this one over here and now I have created you know a two sections where I can enter my image and my text side by side
6:57
so I'm just going to go on ahead and do that so now I'm just going to go on ahead and move my
7:04
image into this column then I can enter text over here I just added this widget on the top
7:10
so you can choose the structure how you want it to be presented let's say you want four columns you can
7:15
get four columns and then within those four columns you can add any kind of section so if you want
7:20
images if you want image carousels if you want image boxes so on and so forth so uh you can even
7:27
scroll down and see you have text path read more's short codes as well i just want to add a bunch of
7:33
different images on the first section and i will just select my image and let's say we just want
7:39
to create you know a basic welcome section now uh don't worry about the top of this uh just as an example
7:45
I'm going to move through this a little quick because I want you guys to be able to do all of these features
7:51
So after you've added all of the things you want to add and, you know, fixed out your layouts however you want to lay them out
7:59
you're still going to be wondering the top section of my website does not look cohesive
8:03
So what you're going to do is you're just going to publish this. Go back into your WordPress site editor and then you will see your pages
8:11
What you're going to do is you're going to click on edit. you're going to go on head click on this click on quick edit and you're just going to rename the title to whatever the title of the page you want it to be and this will be the main page you can choose if it is the main page of the website or not then if you want it to be default template elementary canvas
8:32
elementary with full width so on and so forth then you can just click on update and you can even create password protected pages via this so this is now our home section now with this you can also just click on uh edit
8:43
with Elementor and click on Theme Builder and then you can change the theme of your website as well so you can
8:50
choose one of their premium features for setting up your website layouts as well so I hope you
8:56
guys found this video helpful and you're now able to get started with using Elementor in your
9:00
WordPress website make sure to leave a like and subscribe to the YouTube channel and I will catch you guys in the next video