Elementor WordPress Builder One Page Scrolling Site In 15 Minutes

by | Oct 23, 2018 | Elementor Page Builder, Web Design

Elementor WordPress Builder One Page Scrolling Site In 15 Minutes – Hi guys and welcome to another WordPress Elementor page builder tutorial this is Jamie from system 22 and web design and tech tips .com – Well in our last video we just installed the Elementor plugin and had a little look around so in this one let’s see how easy it is to throw a page together. So I’ve just got the twenty-eleven theme generic theme here installed I’ve just installed the elementor plug-in and here it is in our dashboard sidebar.We’ve got a default template an elementor has added a couple of options here canvas and elementor full width. That’s probably what I want there so I go ahead and publish it and have a look. Yeah I see it’s got our page title there and that’s full width so let’s go back. Let’s have a look if we put the default one on. Okay well let’s stick with that one Elementor full-width.


Let’s go ahead and use our Elementor page builder and that’s opened up a new page here. We’ve got two elements and global is our elements that are included, Looks like an interesting bunch of elements, and you can get more with the pro version obviously. We can add things by adding a section, by using that or let’s have a look see if they’ve got any templates in the free version. Yes, they sure do! Good grief! I see they some of them have got the little red Pro button in the top corner there but there’s still a good selection.


Let’s just throw one of these templates in have a look at it. Wow! Well how quick was that? We’ve just thrown together, a whole page, and I guess the little pencil icon in all these sections here is what you use to edit them, yeah there we go! Update on a little green button down there, there we go, simple as that. There’s the little eye icon there we can preview our changes, we can check it on responsive, tablet, or mobile versions there. Let’s just preview our changes – That’s quite impressive actually, it’s put a nice-looking little site here. Obviously you’ll have to farm in your own images and text and what have you, but actually that is quite impressive.

Now how can we make it work? Let’s create a menu quickly and see if we can’t get it to scroll through these sections here. Exit to the dashboard, I’m going to go to appearance and I’m going to create a menu quickly. Now let’s use some custom links with some CSS IDs and we’ll create them in a minute see if we can’t scroll to a template section. So we’ll call this test as well. Crate menu custom link first, one just a hashtag for the top of the page. I’ll call it home, and next one let’s just say about. I’m doing this pretty quick I’m just guessing I just want to see how quickly we can throw a page together with this builder. Services, I’m putting hashtag up here because I’m going to create some IDs, we always use a hashtag for IDs on the sections themselves, in a minute, that we can jump to with this menu and I’ve got hash tag and the section ID name that’s where it will jump to. Now, let’s do one more, contact, Okay, save this menu.

Okay now let’s go to our theme customizer. As you can see its 2017 and we’ll set our homepage that page we just created,

Which was test, there it is okay. Not too sure about that long piece on the top, let’s get rid of that, that’s looking more like it now! Let’s add that menu that we just created. Publish that, exit out of this, visit our site.

So what have we got here? We don’t need all these sections but let’s link these to our sections. Home takes us to the top, about, these won’t do

Anything at the moment because we don’t actually have those IDs in place so let’s do that quickly. We want to edit with Elementor.

To edit our sections there’s a little blue tag right on the top here in the middle, edit the section with the dots in the middle. If you want to add a section, hit that one, if you want to get rid of it hit the X okay. I’ve hit the three dots in the middle I want to give it an ID so we can scroll to it with the menu, that’s probably going to be under advanced, so look at the styling. Okay different backgrounds or what have you, that’s fine. Yeah CSS ID right here we’ll call this one about and save that one. I’m going through this as quickly as I can, team, we’ve got a team one so let’s give this one select the section again advanced, CSS ID,  team. Don’t have a FAQ section as such but let’s just call this one the FAQ section. I’ll hit the Update button. Let’s see if we can’t add a services section as what we want, so, let’s just say we’ll call this one the contact section, it’s got an email address in there..

I think it was a services section I need between the team and that section, so let’s hit the plus button or add a section, and we can either hit the little grid icon here to get back to our widgets, or, let’s hit add template this time see if we can add just a single block. Okay pretty cool looks like there’s a lot of free ones here. Let’s put this black one here. That was easy and again I want to edit it and call it services with CSS ID.

There we have it, that’s our new services section. Let’s see if our menus going to scroll down to these things. So, we’ve got home which is the top here’s another and what about here, that takes us to services. Fantastic, team to team, FAQ not really but it’ll do.

Wow! so that was pretty quick actually to build a little site Let’s go back to the editor and how easy is it, I wonder, to change the background-color of this section, so let’s click that for edit section let’s go to style, background, here’s the background, pretty easy. Okay we can have a gradient or we can have a video. Let’s make a gradient, a bit lighter top they’re lite blue and down the bottom, let’s make a darker color. Wow, that’s quite impressive yeah that was easy to do. For a free builder that’s pretty good I’m going to leave it there let’s just preview our changes, and we’ll do another one doing it with the scratch modules, we’ll take a closer look at the modules, but, so far quite impressed with this little elementor page builder. We’ve gone from our pretty boring looking 2011 site to something that you can actually use, like I say, obviously you want to put your own content in here, but it’s done most the hard work for you.


Subscribe To Our YouTube Channel

4.5 million views on youtube

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This