In this video, you'll learn how to create a complete WordPress website from scratch, Step-by-step, from start to finish.
There are a lot of videos explaining how to create a WordPress website.
What makes this one unique is that I 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 this without coding and without any help from a web designer.
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.
Step #1 - Buy Domain Name and Hosting
The first thing you’re going to do is buy a domain name and hosting.
These will be used for the lawyer one-page website that you are going to create.
Most tutorials recommend hosting services through affiliate links.
This is not very objective…
It doesn’t give you a true indication of whether the hosting company is genuinely good, or simply got the recommendation for affiliate reasons.
In this guide, however, I recommend SiteGround, not an affiliate of mine.
This recommendation is given because I truly believe SiteGround is a great and trustworthy hosting company.
SiteGround might not be the cheapest, but when it comes to hosting choosing the cheapest company isn’t something I would recommend.
SiteGround is a great choice because of their support and service, their reliability and reputation.
Another reason to choose this company is because their support team works closely with ours, so you are covered in terms of using Elementor.
Buy domain and hosting from SiteGround
1. Visit SiteGround (link includes a special Elementor offer of up to 70% off)
2. Under web hosting, click on shared hosting. There are several plans here. Choose the start up plan
3. Register your new domain name
Step #2 - Install WordPress
Now that you’ve bought the domain and hosting, you can login to SiteGround and install WordPress, through their auto-installer.
1. Enter the username and password to log in.
2. Go to ‘My Account’ and then go to cPanel. The cPanel is where you manage your website and your domain.
3. Click on the WordPress auto-installer and complete the install.
After the installation is complete, you should wait between 24-48 hours, so the domain registration and hosting is processed.
Then, if you go to the URL of your domain, you should see the default WordPress installation. The default theme that is installed is TwentySeventeen.
Step #3 - Install Theme & Page Builder
In order to fully customize the design of your site, you will need to install a free theme and page builder.
1. Go to the WordPress admin. To do that, after the domain name type ‘/wp-admin’. This directs to the default WordPress login page.
2. Here, enter your email address and password to log in
3. Download the FREE Hestia theme by ThemeIsle.
4. Back in your WordPress dashboard, go to Appearance > Themes.
5. Click on Add a new theme.
6. Click on ‘choose file’ and upload the Hestia zip file. Then install and activate it.
To see how the new theme affected your website, visit your site’s homepage again.
Install page builder
Now it’s time to install the Elementor Page Builder. This is a free and visual page builder with tons of useful design features.
1. Back to the dashboard, go to Plugins.
2. Click on ‘Add new’
3. Search for Elementor, install and activate it
Step #4 - Add Template
Elementor lets you add a complete professional page design template with one click, using the template library.
1. Click on ‘Page’ > ‘Add New’
2. Enter the title of the page, and click the Edit with Elementor button. Here, you can see the editor panel, where you can design and view the site at the same time.
3. To get rid of this header that you get from the theme, go to the page settings and choose a page builder full width template.
4. Click: ‘Add template’. Now, choose from the long list of over 100 page templates, available in the Elementor page builder. Click ‘Insert’.
You can review all the sections you get: the hero section, our vision section, our achievements, the ‘About Us’ section, a quote, contact us and a carousel of logos.
Let’s go on to customize each and every part of this page, to make it completely different and unique.
Step #5 - Customize the Template
Start designing and changing the different parts of the page. I recommend going section by section, starting with the top section.
1. Change the background image. You should first find out the exact width and height of the image, and use that size to create the new image. You can use a free tool like Pixlr to crop and resize the image.
2. Add a backgrounds overlay, so the heading is more prominent
3. Other elements that you can customize include headings, text, icons, images, and buttons.
Change Colors and Typography
You can customize the colors and typography of the page.
To make your color palette more accessible, you should customize the color picker that appears in the editor.
Changing the color picker makes it easy to customize the page colors to your color palette:
1. Click on the hamburger icon, and go to color picker
2. Change the colors that appear in your picker
Now you can go over the page and change the colors to fit your website colors.
Changing fonts is done just as easy:
1. Under heading > style > family choose a font, from the large array of Google fonts.
2. Do the same to the rest of the headings
Step #6 - Add the Menu
With your page now fully customized, you need to go back to the WordPress dashboard and create a smooth scroll menu.
This menu will let the visitor navigate through the entire page.
When the visitor clicks on a link in the menu, the cursor will scroll smoothly into the right area of the page.
1. Name the different areas of the page. In the About section, go to section > advanced, and under ‘CSS ID’, write ‘about’. The same should be done to the services, testimonial, and contact sections.
2. Go back into the dashboard
3. Under appearance, go to menus.
4. Create a new menu
5. 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.
6. Add a few custom links. The first one to add is #about. It’s the same name that we used in our area. And the link text will be ‘About’. Do the same to #services, #testimonial, and #contact.
7. Save the menu
If you refresh the page, you will see the menu and will be able to click on a link and get the smooth scroll to the relevant section.
Step #7 - Make the Site Mobile Responsive
In the last part step of our tutorial, you’ll make the whole website mobile responsive.
1. To go to mobile view, click on the desktop icon on the bottom left and choose mobile.
2. Now, go over the page, and see if you can spot areas that could be improved, like reversing column order or adding padding to headlines.
Finish the Site
Almost finished now…
1. Under ‘Page Settings’ switch the status to published.
2. Go back to the WordPress dashboard and set this page as the homepage. Go to Settings > Reading and set a static page
Congratulations – You’ve Completed Your Site!
I hope you’ve managed to follow along and create your own website. I’d love to get your feedback about using this template method to create a one-page website faster.