Anybody can create a WordPress website.
But it’s a lot easier (and quicker) when you use a how-to guide which takes you through the process step-by-step.
What you’re reading right now is the manual I wish I had when I built my first WordPress website.
Building that first website cost me weeks of trial and error. It was a process of reading an endless number of articles which all shed light on one piece of the puzzle, but never showed the full picture.
In this guide I’ll show you how to build a complete, self-designed WordPress site from scratch. In only a few hours.
To be more precise, I’ll show you how to:
- Set up web hosting and register a domain
- Install WordPress (the right way)
- Install and use a WordPress theme (so you’ll never have to depend on an external web developer)
- Choose and install the right plugins (and not those that slow down or mess up your site)
- Run your website through a secure connection (via an SSL-certificate)
- And more
Are you ready? Then let’s dive right in.
1. Choosing WordPress hosting and a theme
First, let’s take a look at what your website will look like after you’ve finished this tutorial.
Your site will have a homepage, a services page, an about page and a contact page. This is an excellent starting point for most websites.
The theme we’ll be using, Divi, is the theme which powers WebsiteGecko. It’s one of the most versatile WordPress themes out there and it lets you build pretty much any website you can imagine.
After you’ve finished this tutorial, you’ll be able to easily alter the content and design of your site according to your preferences.
The web hosting we’ll be using is SiteGround. As with Divi, WebsiteGecko is powered by SiteGround as well.
There are many WordPress themes and web hosting providers out there. So why did I choose Divi and SiteGround to build this website with? And why am I recommending them to you?
Reasons for choosing Divi
- First, Divi is much more than just a WordPress theme. It’s a complete website builder which is vastly superior to the standard WordPress editor
- It’s the world most popular WordPress theme, used by both beginners and WordPress veterans
- With Divi you’re building your site in the frontend. What this means is you can just drag and drop elements and see straight away how it looks
- Divi has an insanely great customer service. No matter the problem you’re facing, a Divi support staff member will help you solve it in a matter of minutes
Reasons for choosing SiteGround
- WordPress officially recommends SiteGround as a web host
- Elegant Themes, the company behind Divi, recommends using SiteGround as well
- SiteGround is one of the most recommended web hosts out there and hosts over 2 million websites
- As is the case with Divi, SiteGround too has a ridiculously good customer support team. Don’t expect to wait more than a few minutes to get your questions answered
Alright, now it’s time for action. We’re going to set up your web hosting and register a domain.
2. Setting up web hosting and registering a domain
A website can’t exist without web hosting. Web hosting is where your website lives on the internet. It’s the place where your website’s content is stored.
But in order for people to reach your website, you’ll need a domain name, too.
In order to sort out both of these, let’s visit SiteGround. First, select WordPress hosting.
Now you should pick a plan that fits your needs. At this stage, the only relevant choices for you are probably the first two. GoGeek only becomes relevant once you generate thousands of visitors each month, at which point you can always upgrade.
If you’re planning to build one website, then StartUp (1) is a good choice. Are you looking to host a bunch of them, then pick GrowBig (2).
Next up is choosing a domain name. Find the name you fancy and hit proceed.
In case you’ve already got a domain registered elsewhere, select I already have a domain. You’ll be able to easily connect this domain to SiteGround.
Finally, you’ll just have to fill out in your personal details and payment method, and you’re good to go. Just make sure the Data Center is set to wherever is closest to you (if you wish, you can always change this later).
You don’t have to purchase SG Scanner. SiteGround’s security is already rock solid which makes the SG Scanner a pretty unnecessary add-on.
Congratulations, you now possess a piece of internet real estate!
Next up: installing WordPress.
3. Setting up WordPress and installing an SSL-certificate
In this chapter we’ll be installing WordPress. Also, we’ll make sure your site runs through an encrypted connection thanks to an SSL-certificate.
3.1 Installing WordPress
In order to install WordPress, go to Websites in your SiteGround account and click on Add New Site.
Click on Existing Domain and choose your domain name.
Then select Start New Website (1) and choose WordPress (2). At Set Up Login (3), set up your site’s login credentials.
Hit Continue, click Finish, and within two minutes your site will be ready.
3.2 Install an SSL-certificate
Before we dive into WordPress, we’re going to install an SSL-certificate on your website.
An SSL-certificate enables an encrypted connection. It’s kind of like sealing a letter in an envelope before sending it through the mail. You can see when a site has an SSL-certificate through the lock icon in your URL-bar.
In order to install an SSL-certificate, go to the Site Tools section by clicking Manage Site.
Then select Security (1) in the left-hand menu. Click on SSL Manager (2) and choose Let’s Encrypt (3) underneath Select SSL. Finally, press the Get (4) button.
Now you’ll just have to wait a couple of minutes.
Even though you’ve installed an SSL-certificate, your website doesn’t know just yet it should use an encrypted connection. We’re going to make sure it does through the WordPress dashboard.
Head over to the WordPress dashboard by typing [your domain name]/wp-admin/ in your URL-bar.
Alternatively, you can navigate to the dashboard by selecting WordPress (1) in the menu on the left, click on Install & Manage (2) and click the icon below Actions.
You’ll be now asked for your WordPress site’s user credentials. After logging in, click the Exit button.
You’re now in the WordPress dashboard. Go to SG Optimizer (1), click on Environment Optimization (2) and enable HTTPS (3).
After this, you’ll automatically get logged out of WordPress and you’ll have to log back in.
Alright. We’ve taken care of a domain name, web hosting, setting up WordPress and making sure your site is protected through an SSL-certificate.
Now it’s time to install our WordPress theme, Divi.
4. Installing a WordPress theme
We’re now entering the fun part of this tutorial. It’s time to install a WordPress theme.
4.1 Download the Divi theme
Let’s head over to the Divi website, go to All Products, and click Join to Download.
Choose your desired license: yearly access for $89 or lifetime access for $249. You can cancel your subscription at any time or upgrade to a lifetime membership at any point.
If it turns out that Divi isn’t the right theme for you, then you can use their 30-day money-back guarantee.
Fill out all the necessary fields and complete your registration.
Head over to your Divi account and click on the Download the Divi Theme button.
4.2 Install the Divi theme
In order to upload the Divi theme, let’s heads back to the WordPress dashboard.
Click on Appearance (1), Themes (2) and upload the theme via the Add New (3) button.
Then you click on Upload Theme (1), after which you can select the Divi theme zip file via the Choose file (2) button. After this you should click on Install Now (3).
Once the Divi theme has been installed, make sure to click the Activate button to actually use the theme on your site.
There it is. The Divi theme has been successfully installed and activated.
Now before designing your pages with the Divi Builder, we’ll be first adding the necessary pages.
Then, I’ll show you how to use the WordPress Theme Customizer. The Theme Customizer lets you choose a font for our website, build a navigation menu, adjust your website’s name, and more.
5. Add pages to your WordPress site
Let’s start by removing the pages WordPress automatically adds to your site. You won’t be needing them.
To do so, click on Pages (1) in the WordPress dashboard. Then, tick the box next to Title (2) to select all pages. Click on Bulk Actions (3) and hit Move to Trash. Finally, click on Apply (4) to remove the pages.
Now, let’s add some new pages. Click on Add New to add a new page.
Name this page “Home” at the title field (1) and click on Publish (2).
Return to the WordPress dashboard by clicking the WordPress icon.
Repeat this process and add the following pages:
Keep in mind you can always rename these pages later if you wish.
6. Give your WordPress site a homepage
The “Home” page we just created doesn’t automatically become your actual homepage.
In WordPress, you can set a homepage through the Theme Customizer. In the WordPress dashboard, first click on Divi (1) and then on Theme Customizer (2).
Select Homepage Settings (1), click on Homepage (2), and choose “Home” (3) from the list of available pages. Hit Publish to save your settings.
7. Choose a website title and tagline in WordPress
When visitors land on your homepage, they’ll see your website title and title tag.
To adjust these, go back (1) in the Theme Customizer menu, click on General Settings (2) and then select Site Identity (3). Fill out your desired site title and tagline (4) and hit Publish (5).
8. Choose a default font and font size for your WordPress site
When working on a website, you’ll probably want to automate as many processes as possible.
One thing that serves this goal, is selecting a default font and font size. This ensures that whenever you’ll add text to your site, you don’t have to manually select the right font. Of course, you’ll be still able to change the font after or choose a unique font for certain parts of text.
To select a default font for your website, click Typography within the General Settings of the Theme Customizer.
You can pick a font for both the body of text (1) and header text (2).
You can follow the font settings from the image below or pick a font and font size according to your own preferences.
Keep in mind: the size of a website’s font does not correspond with that of, say, a Microsoft Word document. A font size of 12 would be way too small to comfortably read on a browser. I’d recommend you pick a font size of at least 16 for your site.
Once you’re done selecting your font, click on Publish (3).
Now it’s time to set up a navigation bar.
9. Design a navigation bar
Pretty much every website has got a navigation bar on top of every page. You can easily set up a navigation bar for your website, again by using the Theme Customizer.
To kick things off, let’s disable the search icon which sits in the right-hand side of your navigation bar.
First, select Header & Navigation (1). Then, click on Header Elements (2) and remove the check mark right next to Show Search Icon (3). You’ll see that the search icon is now gone.
Next up, we’ll be adding your pages to the navigation bar. Select Menus (1), Create New Menu (2) and click on Primary Menu (3). Hit Next (4) and then click the Add Items (5) button.
Since the icon in the navigation bar already links to your homepage, there’s no need to add your homepage to the bar.
That’s why we only select Services, About and Contact for our navigation bar. Once you click on these pages, they’ll automatically appear in the navigation bar. You can drag and drop these pages and put them in whichever order you wish.
Once you’re done, click Publish.
We’ve come really far since we started off this tutorial. And now it’s time for the part of this tutorial where the magic happens… We’re going to be working with the Divi builder and make your website come to life.
10. Build a homepage with Divi
Let’s first build a homepage. In the WordPress dashboard, go to Pages (1) and click on Home (2).
Then, click on Edit with the Divi Builder.
As we’ll be designing the homepage from the ground op, click on Start Building.
10.1 Designing a header
You’ll be asked straight away to select a column structure. As we’ll be designing our header image, which consists of text on the left side and an image on the right side, pick the second option.
Then, search for the Text Module.
Now, you can add your title and text to your homepage header. You can change your first line of text into a title by clicking on the dropdown that says “Paragraph.”
Put here whatever text fits your website. In case you want to save your copywriting for later, you can just put in some placeholder text.
Once done, click on the green checkmark button at the bottom of the module.
Now we’re going to add a button below your text, which links to your services page. To do so, add another module by clicking on Add Module. Search for the Button module.
Select Text (1) and put in “Click Here.” Then go to Link (2) and add the URL [your domain name]/services/. This ensures the button will link to your Services page.
As the button color kind of blends in with the background color we’ll be using, let’s change it. Navigate to Design (1), pick Yes (2) at Use Custom Style for Button, and choose White (3) for your Button Text Color.
Head over to Spacing (1) and enter 50px at Top Margin (2).
Once done, click the green check mark to save your module.
Now it’s time to add some color to our header. First, click on Row Settings.
Select Background (1) and add the following color code: #3c87f4 (2). If you wish, you can also experiment with the Gradient (3) functionality to add multiple colors to your background.
Next up, head over to Design (1), click on Sizing (2) and enter the following settings:
- Custom Gutter Witdh (3) – yes
- Gutter Witdh (4) – 1
- Width (5) – 100%
- Max Width (6) – 100%.
Then, click on Spacing (1) and change the Top and Bottom Padding (2) to 0px.
Go back to Content (1) and select the gear icon (2) next to the first column.
Head over to Design (1), select Spacing (2) and follow the Padding (3) settings you see in the image below.
Go back and click on the gear icon next to the second column. Select Background (1) and click on the image icon (2). Here you can upload a background photo.
If you’re looking for some beautiful stock photos free of charge, I recommend Pexels.
At Parallax Effect, select Yes (3).
In order to make our text contrast nicely with the background, we should change the text color to white.
To do so, go to the settings of the Text Module. You can adjust the color in the Text Editor.
To add the finishing touches to your header, head over to Section Settings.
Go to Design (1), click on Spacing (2) and follow the padding settings (3) below:
There we are. The hardest part of the tutorial is done.
By designing this header you’ve gotten accustomed to quite some elements of the Divi builder. This will make the subsequent steps of this tutorial much easier.
10.2 Adding blurbs
Now that we’ve finished the header, it’s time to add some blurbs to your homepage. These will help your visitors understand what you and your site are all about.
Right below the header, click on Add New Section (1) and select Regular (2).
Select the row with 3 columns.
At Insert Module, search for Blurb.
Add your desired text at Title (1) and Body (2), or just put in some placeholder text for now.
Go to Image & Icon (1), select Yes (2) and pick an icon.
Head over to Design (1) and at both Title Text and Body Text, center the alignment (2).
Then, click on the green check button to save your module.
Right below the blurb, click on Add New Module and add a Button. Link this button to [your domain name]/services/.
Go to Design (1) and at Button Alignment (2) pick the second option.
Repeat these steps for the second and third columns of this section.
You can speed up this process by using the Duplicate Module (1) and drag the copied modules with the Move Module (2) button.
Our blurb section has now been finished. This is what it should look like:
10.3 Adding a testimonial
Whenever you’re able to get testimonials from your customers, put them on your website. If at this point you don’t have any customers yet from which you can get a testimonial, then save this step for later.
Divi makes adding testimonials super easy with their Testimonial module.
First, add a new section with just one column. Now, search for and add the Testimonial module.
Fill out the Text (1) section and add a photo at Image (2).
In order to generate some contrast between this section and the blurb’s section, change the background color of this section via Section Settings at Background. Use the color code #f7f7f7.
That’s it: you’ve got yourself a homepage. Make sure to click the Save and Publish button on the bottom right so your visitors can see it.
Now it’s time to put together a services page.
11. Build a services page with Divi
Return to the WordPress dashboard. Go to the Pages section and click on the Services page.
Then select Edit with the Divi Builder.
And just like we did with the homepage, choose Build from Scratch.
Select the single column structure and add a Text module.
In the Text Module text field, add a title and name it “Services.” Navigate to Design, Heading Text and Heading Text Alignment, and make sure the alignment is set to center.
Set the Heading Text Size to 48px.
Save your module by clicking the green checkmark icon.
Add another section, choose a single column, and select the Text Module once more. Describe one of your services like below or add some placeholder text.
Add a New Section but select Fullwidth this time around.
Search and select the Fullwidth Header module.
Click on add image and add an image of your choice.
Repeat these steps a few times, and you’ve got yourself a great looking services page.
12. Build an about page with Divi
Follow the same steps as in chapter 10 and 11 to edit your About page.
Then, add a title to your page following the same steps as in chapter 11. Name the page “About.”
Add a section and select a 2-column structure.
Add a Text Module and fill out some text about yourself and/or your company.
For the second column, add an Image Module. Upload an image of yourself or one that represents your company.
At this point, your About page should look something like this:
Then, add a new section with one column. Add a title like you did before, and name it “Our team.” Make sure to turn this text into Heading 2, as you’re already using Heading 1 at the top of your page.
In order to easily distinguish this section from the previous one, let’s turn the background grey via Background in the Section Settings. Use the color code #f7f7f7.
Now it’s time to add our team.
Add a row below the “Our Team” title and pick the 3-column option.
Select the Person module.
Fill out any of the fields (1) which are relevant for you. You can also add a bio. Click Image (2) to add a photo.
Head over to Design (3), Text (4) and set the alignment to center (5).
Save the module once done and repeat this process for the other two columns.
There it is, your very own About page.
For the last section of this tutorial, we’ll be setting up a contact page.
13. Build a Contact page with Divi
First, follow the same steps from the previous chapters. This time around, add a title with the word “Contact” at the top of your page.
Change the background of this section to blue (color code: #2b87da) and add below and on top of your text 50x spacing.
Add a new Section with one column. Search and select the Contact Form module.
Adjust the Title, the Success Message and the Submit (1) button. Fill out the email address (2) you’d like to link to your contact form.
Finally, you can adjust the titles and text fields of your contact form by clicking the gear icons (3).
Save the module and… it’s a wrap! You’ve successfully finished this tutorial.
We’ve covered a fair amount of Divi functionality. Once you grasp the basics, adding onto your site is a piece of cake. You can now start adding more pages and content.
In the next chapter, we’ll discuss WordPress plugins, Google Search Console and some solid tutorials to bring your WordPress site to the next level.
14. The next steps
14.1 WordPress plugins
Regarding WordPress plugins I’ve got the following rule of thumb: use as little plugins as possible.
Every plugin you install adds a bit of weight to your website. Furthermore, the more plugins you install, the higher the odds that they will conflict with one another or your theme.
Luckily, most websites don’t need more than a few plugins.
You can manage your WordPress plugins at the Plugin section in your WordPress dashboard.
The following plugins are the ones I recommend for pretty much every site:
- Yoast SEO. Since 2008 Yoast has helped millions of websites to rank higher in Google. Yoast is a super easy to use plugin that gives you actionable advice per page and post to help it rank higher
- MonsterInsights. With more than two million active installs MonsterInsights is the most popular Google Analytics plugin for WordPress. MonsterInsights lets you connect Google Analytics to your website in just a few clicks
- Loginizer. Everyday 1000s of WordPress websites get hacked. Loginizer is a WordPress plugin which protects you against brute force attacks from hackers trying to access your site. It does so by blocking the IP-address after a certain amount of login attempts
14.2 Google Search Console
Google Search Console is a Google web service which shows you how much organic traffic your WordPress site is raking in. It also gives you tons of insights on the health and usability of your website. This tool is a must-have for anybody who owns a website.
14.3 The best Divi tutorials
Check out the following Divi tutorials to bring your website to the next level:
- Design a blog with Divi
- Optimize your website for phones and tablets (tutorial provided by Divi)
- Design a footer (tutorial provided by Divi)
- Add a newsletter sign up service (tutorial provided by Divi)
15. Final words
I want to congratulate you on finishing this tutorial. Being able to create a WordPress website is a super valuable skill. I’m sure you’ll benefit immensely from it.
Now I want to turn things over to you.
Is there anything that you’d like to know about building a WordPress site that hasn’t been covered here? Or do you have any questions based on this tutorial?
If so, leave a comment below.