WordPress makes it easy for anyone to build a website, but when combined with Elementor, you get a powerful, simple tool with a 100% visual design.
Hi everyone, I’m Kelly, and today I’m going to show you how to get started with the Elementor page builder for WordPress.
Install the Elementor Plugin for WordPress:
- Go to the Dashboard
- Down to Plugins
- ‘Add new’
- Search for Elementor
- Click on ‘Install now’
- Click on ‘Activate’ to activate it on your website.
With any WordPress website, you need a theme to control the appearance and layout, and with over 20,000 WordPress themes out there, it’s easy to get overwhelmed with choice. Most of the queries and headaches I get are from clients trying to work out what a developer has done to a theme to get it to behave the way it is.
I now exclusively use the Hello Theme from Elementor, as it is lightweight and quick to load, and it comes almost empty of styling and scripts. This is the perfect base for you to build your website exactly as you want it using Elementor.
Changing your theme:
- Go to ‘Appearance’
- Go to ‘Themes’
- If you’re working on an existing website that’s already got a theme, it’s probably best to not install the ‘Hello Theme’ because it is going to change the way your website looks completely.
- If you’re starting from scratch, then definitely use the Hello theme.
- Click on ‘Add new’.
- Search ‘Hello’ in here in the same way as we did in the plugins (it is the one with the palm trees).
- Click on ‘Install’
- Click on ‘Activate’
You can now go back to your website, and you will see it has no styling at all, apart from a pink colour and it’s ready for me to create everything I need to, using Elementor.
Using Elementor
Create a new page:
- Go to ‘pages’
- Click on ‘add new’
- Type ‘home’ into the search bar, as you will need to create a homepage.
- You can ‘save it to draft’ if you don’t want it live on your website, or you can click ‘publish’ if this is just a demo site or one you’re building.
- At the top you will see a button labelled ‘Edit with Elementor’ – click on that and it will take you into the Elementor page builder.
You will now see your website exactly as it looks in the Elementor workspace, and on the left-hand side, you will see different controls. Towards the middle, you will see it says ‘drag widgets’.
When you first start a page, you have two options:
- Start from scratch – You can start it from scratch by adding a new section, and you can select your structure. You have many different options for columns; so let’s say I just want one column, for now, it’s as simple as dragging in the controls. If I wanted a heading, I can drag that in, and anytime you want to get back to the controls, you just click on these little squares up here [top left of the screen, to the right of ‘Elementor’]. If I wanted to add some text in, I could just drag it in. I can create a new section by clicking on the plus [here] or clicking on the plus [down here], and I can add in images and everything like that through here [controls on the left]. There is a pro version and a free version of Elementor and these elements here, which are enough for most basic websites, are included in the free version. The page for widgets is shown [here], under the pro category, so if you wanted a blog, portfolio, posts, or a gallery on your form, you would have to pay. At the time of recording this, it’s $49 for a one site license, so that’s not that much at all, and you can get started with the free version and then upgrade if you’re enjoying it. Every widget you add in has some settings over [here] on the left. If you click on it, you can see the setting’s changed. This is the text editor, and it says, ‘edit text editor’, or if I click on the heading, then I’m changing the heading. Within here [style], I can change things like the colours in the style section. I can change the typography, so I can choose which font I want it to be, and the size as well, if I want it to be uppercase. It’s all pretty self-explanatory. If you want to make it bigger, I can just drag this [slider next to size], and as you can see, it’s very visual. I can see exactly how it’s going to look on my website.
- Use an Elementor template – But this [starting from scratch] is very plain, and you don’t want to start your website from scratch like this, so what I suggest is you click on this little folder icon [centre of page], which allows you to use the templates provided with Elementor, and there are different types of templates. You can have blocks, which are just sections of a page, or you can also use a full page template. The free version of Elementor comes complete with some templates. These ones without pro are free, and there’s a lot more as you scroll down. The ones with ‘pro’ against them are the ones that are only available in the professional version. I can search for ‘home’ here because I am adding a home page, then I will see lots of different templates. If I click this little plus [sign] magnifying glass, I can see exactly what this page is going to look like, and I can go through and look at a few different ones. Go back to ‘library’, I can look at this hotel one, see if that’s one that I like, go back to ‘library’, and I can also filter this list if I was searching for a specific business. For example, if I was a restaurant, I could type ‘restaurant’ in there and it will filter it to show me everything with ‘restaurant’ in. You will see [here] with the ‘pro’ version there are different pages for all the different things you could need within your website. For example, this is a Japanese restaurant, and I’ve got a homepage there. I’ve got a ‘chefs’ menu, ‘bar’ menu, ‘about’ page, a ‘gallery’ page, ‘events and a reservation’ page. If you bought the ‘pro’ version, you could use each of these templates, and you know your website is going to look very professional straight away, like a theme in the traditional sense for WordPress, but extremely easy to edit.
Let me show you how to edit. Let’s go back, search for ‘home’ again, and I’ll find a free template so I can show you; scroll down. I quite like the look of this one [the fourth one along on the top row]. Imagine if I was a law firm; that would be perfect. Again, I can click that to look at it, or I can click insert and that will insert it into my page. If I click down here, can you see this little eye? This allows me to preview my page. As you can see, it’s created all these different sections for me, and it looks very professional. At the top here, I’ve got this logo that isn’t set up properly yet, and also the homepage as a title, which doesn’t look right, and to get rid of those, you can click on ‘settings’. Here we’ve got ‘hide titles’, so if you say ‘yes’ to that, then that gets rid of the ‘home’ at the top, and then under ‘page layout, if I change that to ”Elementor Canvas’, that’s going to get rid of the header form as well. If I click on ‘update’, then that’s all saved. I come back here, and now it looks super professional. Now, you can see this page is made up of sections, so if I click on that [blue tab at the top], you’ll see it says ‘edit section’ there, and if I scroll down, each of these different areas is a section. We’ve got practice areas, then we’ve got an ‘about’ section, and the ‘firm partners’, and right at the bottom, a ‘contact us’. Then down here [bottom of the page], I’ve got the option to add more sections if I want to.
If there was something that I didn’t want on here, so say for example there was only one firm partner, just Jillian, then I can just click the cross next to these two, and that deletes them.
If I wanted to change the font colour, then I could just click on ‘practice areas’ there. The ‘content’ tab allows you to change the content within the particular widget, and the style allows you to change how it looks.
Say I’m not keen on this brown and I want to make it more of an orangy brown, for example, then [there you go] I can do that. A great shortcut is, if I ‘copy’ that [blue pencil, right-hand corner], I can then come down and ‘paste styles’, so instead of saying ‘paste’, I’ve clicked ‘paste style’, and it’s copied the style from this one [above] down to this one [below]. Then I can put that back into the centre if I want to.
I can change the text by either typing into the box, or typing over on the left-hand side, as well. Everything is editable, basically, super easy.
To change a picture, you click on the picture that you’ve got and, a top tip for this, if you click on it and look at the image in the media library, you can see the size of it. This one here is 500 by 500 pixels, so if you create an image that’s the same size as that, you know it’s going to look just as good as the one from the template. If it wasn’t Jillian, it was this guy here, then I can insert that. Simple as that, I changed the picture.
If there was another section I wanted to add onto this page, then I can scroll down to the bottom, click on the folder to ‘add template’, go to ‘blocks’, choose the type of block that I want, for example, add a ‘subscribe to newsletter’ at the bottom, then I could scroll down and there we go: we’ve got ‘get the demo’, so I could insert that one in there. It’s given me a form to subscribe, and I can just come in here, change this [header in the text box], to “subscribe to newsletter”, and set up the form here [blue pencil box]. By clicking on ‘form’, I can change the fields, I can click and drag: you see how visual it is? It’s super cool and really easy to use. I can come down and choose what I want to happen after ‘submit’, and this is a bit beyond the scope of this video, but I will do another video soon on how to customize forms, so keep your eyes peeled for that and make sure you subscribe on my YouTube Channel. If I want to make sure it’s exactly the same font as these, remember, I can just do a copy, and then ‘paste style’. That’s the only thing to be careful of when you’re using blocks from different templates: they might not be the same fonts or colours you’ve used so far.
There’s so much that I could show you, but one thing I really need to show you in this video is the ‘Responsive Mode’. So down here, you will see an icon, ‘Responsive Mode’. If I click on that, I can change it, and at the moment I’m viewing it in desktop mode, but I can change it to tablet or mobile.
If I change it to ‘tablet’, it makes it look like a tablet, and as I scroll up it shows me how it’s going to look on a tablet. Then if I can click on mobile, it shows me how it’s going to look on a mobile, so, super, duper easy. If I want to change something, not everything is customizable for the different views. If I click on here [blue pencil icon], for example, and click on ‘style’, anything that I can change has got a ‘mobile view’ next to it. If I change it here while I’m viewing the ‘Responsive Mode’ for mobile, it will only change it on the mobile. If I want to ensure a space is moved up a little bit, or, for example, I could make it much bigger on a mobile, if I then change it back to desktop, you can see it’s gone back to the size it was originally; they’re all the same, tablet; they’re all the same, but then on the mobile, the one I changed to start with, it’s bigger. So if it’s got a mobile icon next to it, you’re safe to change it.
When I’m finished, I click on update, and that’s it, my page is saved. To come out, I can click on that [three lines, top left] and click on ‘exit dashboard’.
I hope you’ve got a clearer understanding of what Elementor can do for your website. It’s an excellent tool, which I use within my websites and also use to teach my students in the ‘Website Formula Course’.
I’ve only just scratched the surface of what you can do with Elementor in this video, but I will be releasing many more tutorial videos on it in the future, so make sure you like and subscribe to my YouTube Channel, and I will see you soon.
