In this video, you’ll learn how to create a complete WordPress website from scratch Step-by-step, from start to finish. Now, there are a lot of videos on this subject. What makes this one unique is that I’m going to show you a foolproof method for creating a website that actually looks beautiful. This is a point that is often missed by people starting off and creating their first website. We’re going to do it without coding and without any help from a web designer. I’m Ben of Elementor, the free and visual page builder that is used by over 100,000 people from all over the world. I’m going to show how to utilize Elementor’s customizable templates to create a beautiful looking structure And then fully customize it for your website.
You’ll learn seven steps for creating your website: Buy a domain name and hosting, Install WordPress, Install a theme and page builder plugin, Add the page template, Customize the template, Create a top menu and finally Make the website mobile responsive. Keep watching, I promise it will be worth your while. So, the first thing we’re going to do is actually buy the domain name and hosting that will be used for our lawyer website. So to do this, I went to SiteGround, which is an excellent hosting company that we’re working closely with here in Elementor.
So under web hosting I’m going to click on shared hosting. There are several plans here. I’m going to choose the start up, because it includes one website 10 gigabytes of web space and I think it’s fine if you’re starting out. Click on ‘get started’ and I’m going to register a new domain name for our lawyer company which is called: McGillWexler.com Now, I’m going to enter all of my details. So extra services – I’m just going to choose domain registration. That’s it! I just bought my domain name and I can proceed to build my site. Now that I’ve bought the domain and hosting I can login to SiteGround and install my WordPress.
Let’s enter the username and password to log in. Now, I’m in the SiteGround dashboard. From here, I’m going to go to my account and go to cPanel. Now they’ll ask me about cPanel access and I’ll proceed. This is the cPanel. This is where I manage my website and my domain and everything. So here it’s pretty complex, but you don’t need to worry about all the things here. All you need to worry about is the auto-installer, because we’re going to install WordPress.
So easy. Click install. And we’re using a regular HTTP web site McgillWexler.com I won’t use in a directory because it’s the homepage. For site name we’re going to name it WordPress for now, because I want to show you later how I change this. Username Ben, and enter my password and admin email. Language English Okay, now it’s starting to install WordPress. Now that it’s installed I can login to the website and continue on. So in the URL I’m going to type McGillWexler.com Here is the default 2017 theme of WordPress. you see the background image, the title of the page and description as well as the default posts.
We will customize and change everything so it will look nothing like this. And to do this, we’re going to install the theme and the page builder. So let’s go first to the WordPress admin. To do that, after the domain name I’m going to type ‘/wp-admin’. This directs me to the default WordPress login page. Here, I’ll enter my email address and password to login Now, I’m inside the wordpress dashboard. You see the main editor and the menu. So the first thing we will want to do is change the theme. The theme I’m going to use is a theme by a theme company called ThemeIsle, one of the biggest companies and the theme is called Hestia. It’s a really cool free theme. This is the the page of the Hestia theme.
I’ll link to it in the description and you can download it now. Enter your email. And it downloaded the zip file of the same now back in my WordPress dashboard, I’m going to go to appearance > themes. Here is the list of themes that are installed in my website. All the default themes, plus the TwentySeventeen theme that we saw earlier. This one is the active one. So we will add a new theme.
Upload, and ‘choose file’. Click on the Hestia zip file, and install now, and activate it. There – it’s activated. It offers me a getting started, We won’t need this one. I can see that active theme is Hestia and I see that it added this menu. To see the changes, how it affected my website, I’m going to go here in the top menu, visit site. You see the design has completely changed now. Here is the menu and some sort of header. So let’s start customizing it. But first, we’re going to need a page builder. So back to the dashboard, under plugins. Here are the two default plugins that you get with WordPress. I’m going to add new.
These are the list of available plugins. Here is the search bar I will search for Elementor, that’s the name of our page builder. And we see a long list of addons, but this is the official plugin. You see over a hundred thousand active installs and a lot of five-star reviews. I’ll click install now. It’s installed. I’ll activate it. And it’s activated. It’s in my plugin list. To see how to go into the page builder I’m going to need to add a new page.
Our one page homepage. So, I’m going to go to pages > add new. Enter the title of the page, which is home, and click the Edit with Elementor button. Here, I see the editor panel, where I can actually see and design at the same time my WordPress website. Here is the panel with all the available widgets. The first thing I will do, I’m going to get rid of this header that I get from the theme, so I have only the menu here. To do that I’m going to click on the hamburger icon here. Go to the page settings and here I can choose a template. The template I’ll choose is the page builder full width template. This comes from the theme itself and will allow us to get a full width and clear screen.
So with the page builder I can actually design the entire page. I can add a section with columns. Let’s say 2 columns. Each column I can drag in a heading. Let’s change it to black, so it’s seen. I can drag a heading or a button, but I’m not going to do that because I’m going to use templates. A template lets me get the result I want in much less time So in Elementor I click: ‘Add template’. And now appears a list a long list of over 100 templates available in the Elementor page builder If I see something that I like, I can click on it and get a preview. There are really some spectacular design some really genuine and and unique designs here for every type of, you know from law firm, restaurant…
You can browse around and see. We keep adding more templates so you really have a lot of options for homepages, about, etc. But what I’ll use for this one-page lawyer website that I want to create is this architect template. I’ll change it. I’ll show you how easy it is to change it to a lawyer website. So after choosing this I’ll click insert. This actually created for me the entire template in my live website. So I have all the sections I need. I have my hero and bold headline, I have our vision section, our achievements, the about Us section, a quote and contact us and a carousel of logos.
I’ll actually customize each and every part of this page to make it completely different. You can also preview what the page looks like. so let’s start designing and changing the page. We will start section by section starting with the top section. So the first thing we will do is change the image. The background image that appears here. I’ll go to section, click on this hamburger icon here at the top of this section then go to style and in Elementor I have three columns that pretty much go along to every widget, in section and columns.
Its layout, style and advanced or content style and advanced. In the style I can see the background image and change it so to see the size of the image, I’ll click on the image and find it, and I see that its size is 1600 in width, and 772 in height. So I’m going to need to create the exact similar size and upload it. I’ve already created these images and cropped them. You can use Pixlr, it’s a free online tool. Let’s upload them all. I uploaded all the images and I’m going to choose the first image, which is this one. You see it has the same size – 1600X772. And click insert media.
So now it has placed the image as the background but I’m going to want to make this headline more conspicuous more prominent. So I’m going to go just below background I have backgrounds overlay. Here I’m going to click on the brush icon and choose the color and enter the color a gray color and I can play with the opacity making make it even darker. So now it’s nice and you see the headline is much more conspicuous, much more prominent. Speaking of headline, let’s go ahead and change it to make it fit our lawyer website McGill and Wexler Associates Inc And yeah we’ll get back to this section. Let’s go on to the next section. In this section it’s called our vision. We are actually going to place our about us right here.
So first let’s take care of this image. I’m going to click on the Edit. It’s an image widget and I can click on the image to change it. Choose this image right here, and change the text. I’m going to place the about Us text and change the call-to-action button to ‘get an estimate’. Next we have these icons so I’m going to customize it also Going on we reach the about us section. But we will again change this one. I think we’ll keep the image because i fits, this nice office to our lawyer website.
So works nice. I think now it’s time to add the menu. We have here you see the menu but it’s pretty empty so to add the menu I’m going to actually have it smooth scroll, so when I click on an icon a link on the menu I want it to scroll smoothly into the right area of the page. And this is really done easily here. I just first need to add to name the different areas of the page. Again in the About section, I’m going to section > advanced and under ‘CSS ID’ I’m going to write ‘about’.
Next, in this area here again section > advanced. I’m going to call it services. I can name it whatever I like of course. This section I’m going to call it testimonial. Under this section I’m going to call it Contact Now I’m going to save the page. and let’s go back into the dashboard. Under appearance, I’m going to go to menus. So you see I have no menu right now So I can create a menu.
Let’s call it menu. Create menu and set it as a primary menu This way it will be available at the top of the menu in the page we are using, and for the rest of the site. So I’m going to add a few custom links The first one I’m going to add #about. It’s the same name that we used in our area. And the link text will be about.
Add to menu The next link will be #services, and the link text will be services. I can of course change the position, but I’m going to keep it like this. Next we have testimonial. And finally contact. Now I’m going to save the menu, go back to my Elementor editor and click on refresh. So now I’ve named my sections and I created the menu. You see the menu right here If I click on any of the item I get a smooth scroll to the proper place on the page In the last part of this video, I’m going to show how to make the whole website mobile responsive.
To do so, I’ll click on the desktop icon on the bottom left Choose mobile. Now I see how the website looks like on mobile devices. I see that the heading doesn’t have enough padding on left and right, so I’ll go to advanced, Unlink padding, and give it a left and right padding Now this breaks the heading to a new line. So I’ll go back to style and reduce the size of the heading. Moving forward, I see that the two columns have been reversed and the image actually should appear above the text.
So I’ll go to section > advanced, and under responsive I have an option to reverse the column order, so the image appears on top. Now I’ll quickly go over the rest of the page, make sure everything is mobile responsive. And it all looks nice so I’ll go back to desktop, save my result and publish the page. Under page settings switch the status to published. Now I’ll go back to the dashboard and set this page as the homepage.
Go to Settings > Reading and set a static page. Save it. Now when I go back to the website I can see that this page I created is now the homepage. Let’s also change the website title. Under Settings give it our lawyer website name That’s it for this video. We’ve successfully created our one-page website. I hope you manage to follow along. If you’d like to get notified about future tutorials I suggest you subscribe to this channel I would also appreciate if you give us a like and a share and possibly comment Thank you very much for listening.