How to Create a WordPress Website For Beginners

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.

Install theme

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.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

30 Responses

  1. Hi Ben, nice post. But it shows how complicated it is to build even a simple WordPress website. Which could be why 75% of website owners choose something else to build their website and why there are so many all-in-one website builders.

  2. Hi Ben, first of all, Elementor is my preferred page builder. But of course this wasn’t complicated for you. You’re a WordPress expert, work with WordPress for a living, and probably have 1,000s of hours of experience. But your post was for “Beginners,” so someone of your experience and talent is not the target market. You need to ask WordPress “beginners” what they think of your post and building their first WordPress site, and comparing that with building a site using Squarespace or other all-in-one website builder. But proper WordPress sites need experienced WordPress developers/designers. So I find it strange that so many WordPress pros are focused on convincing non-WordPress pros to build their own WordPress sites. Hope this helps!

  3. Thanks for the articles Ben. I have a problem when trying to import templates on localhost. The template(s) loads, buttons and styling etc load… but the images do not download. I get the Elementor “choose image” I mentioned that I had tried a few versions of PHP, 5.5, 5.6, 7.x and the problem persisted.

    I requested help from the help desk as I have purchased the pro version of the software and I was told “There is an issue with localhost on Macs”… “I should upgrade my SSL libraries. Can you create a blog post on how to fix this “known Mac problem”.

    I have had to resort to developing on my cloud hosting account and then migrating to my computer. Imagine that, I’m working backwards to the way most people do. LOL.

    I hope you can help me as the help desk person who told me it was a “known” problem, really came across as bothered by my question and I was made to feel like “go away” 🙁

    For the record, I’m not here trolling. If this really is KNOWN problem with Macs and Macs are used heavily in this industry… I think my response to this post is on topic.

    Thank you.

  4. Ben, all you did was add a menu in wordpress and it magically appeared on your elementor site, that doesn’t work for my site, what is the trick that I am missing? Also, the CSS function. Is that different than the anchor widget? For the anchor widget, when I go to another page, but have the same header as previous page, the anchor widget no longer re-routes back to that page, any idea what I am doing wrong?

    1. If you followed the four steps that are in the video, you should also see the menu:
      1. Install the Hestia theme
      2. Set the page template to ‘page builder full width’
      3. Go to Appearance > Menus and check the ‘primary menu.
      4. Add your menu items and save

  5. I only use child themes if I am editing something outside of CSS. Once I start editing the PHP it’s child theme time.

    CSS can be handled in the Additional CSS portion of a WP install. Though of course that could be edited by a client…which always is dangerous. But usually they don’t know about it. 🙂

    1. Well, not all sites need PHP modifications. Since this is a beginner’s guide, I think there’s no reason to explain about child theme. I mean, going through the 30 minutes is hard enough…

  6. Ben in your tutorial i don t understand why you download heistia template and you don t use ?
    Second i want a site on many page , do you have templates and tutorial ,
    thanks
    Olivier

  7. Hi Ben, I’m not a WordPress or Elementor “beginner.” But if Elementor hasn’t already, and assuming you really want to know what WordPress beginners think, you should find and get the feedback of several WordPress beginners (and do so regularly). But then again, WordPress is too complicated and demanding to be marketed as a DIY solution for WordPress beginners. Hope this helps!

  8. Hi Ben,

    I would like to have the following options in Elementor:

    1. “Go to top” floating button
    2. Able to customize the menu by adding transparency, floating across the site, different layout options (like burger menu). There are some plugins that allows this but it would be great to have it on the Elementor core.

    Regards

  9. Would you mind creating a video just for image manipulation? For example how to play with positions, sizes, etc. I would like also to see how to use an image as a background without having to include elements in order to see them

  10. Hi Ben, as someone who has taught a variety of computer apps at colleges and computer training centers, plus spoken with many people about WordPress for the last decade, I’d love to add my two cents about what people find intimidating about WordPress.

    First, I want you to allow me to tell a story. I have a friend who is a belly dancer. When she talks about moving your hips this way and yr left arm that way and your right arm going there, I am lost. Everyone else is following along and having a great time. One might ask what is wrong with me?

    I’m just not physically coordinated like many. I need someone to HOLD my hand and walk me through everything. I get confused, embarrassed and give up.

    So now you keep asking what’s hard about what I’m showing? SMH. Right?

    Well, many are simply overwhelmed. They freak out at the computer. They can’t find what you clearly showed them. It’s too much to do, to remember, to understand. So they shut down.

    They have a perception Squarespace is easier. Wix even easier. Are they? I don’t think you and I agree. But there’s a market for many. It’s just intimidating to many.

    I know, makes no sense to us. I ask people and they don’t have an answer. They just have a mindset it’s too hard.

    I saw a vid about Elementor using Base theme. A LOT of steps. I got dizzy looking at it. BUT I get it. I can do it! But I have to focus, follow the directions, and after awhile, it will become second nature. And because I’ve used page builder themes, I get it.

    But honestly, many don’t get it. They’ve been taught they are stupid. They are bored with learning. They don’t want this in their life. And more mindsets like that.

    And face it, the price of being able to design exactly what you want for a reasonable price, is not a priority for many. They have no idea what they want their site to look like. They have no idea what to design. So for them, they should just use a built theme. Oh wait, there are templates. So what’s the problem?

    Answer that and you can make a lot of money and help a lot of people. Maybe just accepting it is the best answer. Cos you can waste time trying to figure it out. Or just accept it and focus on those of us who are willing to spend the time and thought to create sites WE want to see and use.

    My two cents after many years teaching and working with average folks who don’t see the benefit of all this work. I am very grateful for page builders! Sure beats trying to modify existing themes. You betcha!

    Thanks for the tutorial. You rock!

  11. Dear jennylens, you point out a lot of what most WordPress people try to ignore. While WordPress is great for professionals, it wouldn’t be a stretch to say that 99% of people do not have the time nor interest in building sites using WordPress because of how time consuming and complicated it is. That’s why it’s so baffling why so many WordPress people are obsessed with convincing novices to use WordPress. It’s a recipe for disaster.

  12. I’m a mgmt consultant. I agree that WordPress beginners, or business owners who need a “just gets the job done” web site, don’t have the time or inclination to build from scratch in WP. While Elementor comes really close to a “PageMaker” or InDesign style pasteboard layout environment, beginners and business owners generally suck at design. So putting a blank slate creation tool in front of them is a non-starter. I’ve seen beginners make a mess of Squarespace and Wix too for that matter.

    I think the best way to access that demographic is to give them a huge selection of expertly designed templates and have them edit and swap until the cows come home. Anything more should be left to people dedicated to the craft. Elementor appears to do this with their templates. So I think they are there. I just think this tutorial was pitched to the wrong audience (my humble opinion).

  13. Hello Ben, I want to build a website for my husband. We are older and beginners . He makes handmade wood muskie,pike and bass fishing lures that we sell on e-bay. Everybody tells us to build a website so it will get the info and the pictures of his product to more people. So, How much will it cost me and will you or I have fishing back rounds etc. available . Help.. answers please. Sincerely, Judy

    1. Elementor is a very good page builder. But I recommend that you build your website with a DIY-friendly service like Squarespace, or if you want to use Elementor and WordPress for your website, then hire someone to build it for you from a service like Upwork. You can also hire someone to build a Squarespace site.

      I think you’ll find that it’s best to spend your time making your handmade fishing lures instead of spending scores of hours trying to figure out how to build something as complicated and time-consuming as a well-designed e-commerce website.

  14. Hi Ben,

    Thanks for a great tutorial.

    I have a problem though, when creating my page “Home”, and selecting “Page builder blank”, the page created… isn’t blank. Plus I can’t get rid of the header 🙁

    Any help is much appreciated. Thanks Ben.

Leave a Reply