HOW TO BUILD A WEBSITE

A Comprehensive, Step-By-Step Guide for the Absolute Beginner

Get your whole website up in just a few hours.

Hi There!

I’m Nick Palmer, and this is my free guide on how to build a website, completely and professionally. This guide covers every aspect of how to build a website from start to finish, and is aimed at the absolute beginner, meaning no coding, design, or I.T. knowledge is required.

I’ve been building websites for nearly 15 years using all sorts of methods, simple and complicated alike. Here, I’m going to share my favorite one, the one that I use on a daily basis and can be utilized for whatever type of site you’re looking to build. We’ll go over the steps in detail to make sure that everything’s covered and nothing’s left in the dark.

If you’ve stumbled across this guide, you’re probably in a hurry, so we’re going to shoot to have this whole thing done in just a few hours of clarified, step-by-step instruction. Time is valuable, and potential customers are looking for you online as we speak. So let’s get started!

This is a Quality Article.

The Quality Article Seal symbolizes that I have done my absolute best to make the most concise, clear, informative article on the topic of creating a website with WordPress.

If you come across a piece of content that is more helpful or informative than the one that I wrote, let me know. I will rewrite this article and credit you.

All the best— Nick Palmer

TIMES HAVE CHANGED.

Building a website no longer requires coding knowledge.

And I’m sure it comes as a relief to many of you! In fact, not using code to build a website is far more effective, simply because it’s much less time consuming. In this tutorial, we will be using a content management system (i.e., a web publishing software) called WordPress to build our site. You may have heard of it already, as it powers over 25% of the Internet already!

OTHER FREQUENTLY ASKED QUESTIONS

What will I learn in this guide?

In this guide, we will be going over step-by-step how to plan your website, set it up on the Internet, and fill it with content. We’ll also go over how to make it look beautiful and appealing to your visitors. My intent is to show you how to create a website yourself that can easily compete with the big guys with budgets.

How much is this going to cost?

Good question! This guide assumes you have around $10-15 a month to keep your website up and running. We’ll be purchasing a couple of products that will assist us with our website building, such as a web host and content editor. I’ll be providing discounts to you along the way to help you lower the price even further.

CHAPTER LIST

STEP 1: PLANNING YOUR WEBSITE – Here we’ll go over the essentials to planning a successful website, and what you’ll need handy before getting started to avoid hangups down the road.

STEP 2: LAYING THE FOUNDATION – In this chapter we’ll set up a host and install WordPress to it, making sure it’s configured correctly. We’ll also install the Divi Builder, a page builder that will significantly ramp up the speed at which we create content.

STEP 3: GETTING TO KNOW WORDPRESS – We’ll take a look at the ins and outs of WordPress, and learn how to apply and customize WordPress themes.

STEP 4: BUILDING CONTENT – We’ll start building our web pages in this chapter, and use the Divi Builder to quickly add modules that make our pages look like works of art.

STEP 5: MORE WORDPRESS SKILLS – Once we’ve got our website themed and our content created, We’ll touch over the other skills needed to wrap things up. By the end of this guide, you should be ready to start inviting visitors to your site, and I’ll provide as thorough instructions as I can to guide you each step of the way.

STEP 1

PLANNING YOUR WEBSITE

Creating a sitemap, writing copy, gathering resources

Planning your website

Planning is the most important step to building your website.

If you don’t have everything drawn out for you beforehand, you’re just going to cause headaches for yourself down the road. Here, I’ll teach you the most effective way to plan a successful website. For me, starting is the hardest part. Looking at that blank computer screen is awfully intimidating. But working one step at a time makes things a bit easier. Mindy Lilyquist of The Balance has developed a handy acronym for putting a website down on paper. Take a look below.

I’VE ALREADY PLANNED OUT MY WEBSITE. CAN I SKIP THIS PART?

I recommend you at least scan through it to make sure you’ve covered all the bases. If there’s something you’ve missed, take the time to take care of it before you start building; it will make it easier on yourself later.

Prepare

Identify your brand, target audience and appropriate website tone.

Landscape

Think through how you would like your website to be able to function. What features does it need?

Aesthetics

Think about what colors and images you want on your site and how it compares to competitors.

Navigation

Decide how you want your audience directed through your website.

Let’s tackle these one by one.

Prepare

Just like any company, a website needs a brand. A brand is more than a name or a logo—it’s an entire personality that appeals to your target audience. Who is reading your content? What might they look like? What hobbies do they enjoy? And most importantly, would they get along with the personality your brand communicates? John Williams of Entrepreneur Magazine shares a few simple tips for defining your brand:

Get a great logo. Place it everywhere.

Write down your brand messaging. What are the key messages you want to communicate about your brand? Every employee should be aware of your brand attributes.

Integrate your brand. Branding extends to every aspect of your business—how you answer your phones, what you or your salespeople wear on sales calls, your e-mail signature, everything.

Create a “voice” for your company that reflects your brand. This voice should be applied to all written communication and incorporated in the visual imagery of all materials, online and off. Is your brand friendly? Be conversational. Is it ritzy? Be more formal. You get the gist.

Develop a tagline. Write a memorable, meaningful and concise statement that captures the essence of your brand.

Design templates and create brand standards for your marketing materials. Use the same color scheme, logo placement, look and feel throughout. You don’t need to be fancy, just consistent.

Be true to your brand. Customers won’t return to you—or refer you to someone else—if you don’t deliver on your brand promise.

Be consistent. I placed this point last only because it involves all of the above and is the most important tip I can give you. If you can’t do this, your attempts at establishing a brand will fail.

Solidify your brand and objectives before you start, as you will be basing your website entirely around your brand. It will be using colors, logos, images, backgrounds, fonts, and copy that reflect your brand and your message to your viewers.

Landscape

What type of website are you looking to build? An e-commerce website? A blog? A photography or video website? To get a feel for the types of websites you’re able to build with WordPress, Samiksha Sanghi of Pixelmatic offers up some ideas, such as a:

  • Business Website
  • E-Commerce Site
  • Blog or Personal Website
  • Job Board
  • Business Directory
  • Social Networking Website
  • Online Discussion Forum
  • News Website or Magazine
  • Questions And Answers Website
  • Wiki
  • Classified Add Website
  • Portfolio Website
  • Coupon Website
  • Podcasting Website
  • Reviews Website
  • Affiliate Website
  • School/College Website
  • Membership Website
  • Wedding Website
  • Real Estate Website
  • And many more…

Once you’ve decided on the type of website you’re building, think about the features the website will need to function. A blog, for example, in addition to having regularly updated content, is going to need a comments section for your readers to write down their thoughts. If you want them to share your posts on Facebook or Twitter, you’ll also need some share buttons on each page to help them do so. Moreover, if you’re looking to start a mailing list, you’ll need an opt-in form at the bottom of each page. Lastly, you’ll need an analytics tool if you want to track the daily visits to your blog. Make a list of each feature your website will have. This is important and will come in handy later on while you build.

Aesthetics

Decide on an overall look for your website using the colors, tones, and attitudes of your brand.

Colors

Choose a color scheme that compliments your brand. Cameron Chapman of Smashing Magazine has written an exceptional article on creating a color scheme.

Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start. Read More…

Adobe Color
Adobe Color is a free web app which can assist you in choosing your color scheme.

Fonts

Choose appropriate fonts for your headers. By appropriate, I mean, don’t choose a crazy-looking font for a conservative business website. It’s important to make sure that all of the elements of your website look pleasing together. In this tutorial, we will have access to the fonts posted on this page.

Images

This is also a good time to gather the images you will use in your website. First, get together your brand logos and photography (e.g., pictures of your products, staff, building, etc.) that you already have on hand. Make sure you have nice, large images. Hi-res is important when working with websites.

Next, it’s time to start looking for stock images. Having a visually appealing website is just as important as it is when dealing with posters and brochures—it keeps the reader interested and scrolling. In the case that you have a shortage of photos for your website, as I often do, stock images can be your saving grace. There are a number of different places to get stock images. ShutterStock and iStockPhoto usually come to mind first, with their high quality footage sporting prices that are just as high. But there are ways to get professional stock images without breaking the bank.

My personal favorite is DepositPhotos, which recently announced a “Flexible Plan” offering $9 for 10 downloads a month (or $29 for 30 downloads a month in select areas). Any downloads you don’t use carry over to the next month, which is a sweet deal compared to other sites’ pricing plans. If you would rather not spend money on stock images, there are tons of other sites that have their own free repository of stock photos. Amos Struck of StockPhotoSecrets.com has composed a list of the best free stock photo sites currently available. If you’re looking to save a few bucks, definitely check it out.

And finally, of course, there is always Google Images. If you decide to utilize it, just be sure to always get permission to use the image before putting it on your site.

DepositPhotos
DepositPhotos has an impressive collection of images for a more flexible price.
Still unsure about how your site should look? Take a look at some of your competitor’s websites for inspiration. What makes them stand out? How do their colors, images, and fonts depict their brand?

WHAT IF I’M NOT A GRAPHIC DESIGNER?

If your design skills are bad enough to make Paul Rand turn in his grave, never fear! Throughout the guide we will be exploring WordPress Themes, which have the design part already done, and only need a couple of clicks from you to implement. We’ll go into more detail on this later on, don’t worry.

Navigation

This is the most important step of planning your website, and involves building a Site Map. A site map is basically a list of all the pages on your website. For instance, in addition to having a homepage, websites commonly have an About Us and a Contact Us page. What pages will your website have?

Sitemap Example
A simple example of a site map, in flowchart format.

At the top of your site map is your Landing Page, the first page your visitors will see upon arriving at your site. In the example above, the landing page contains links to four new pages, each in turn linking to pages of their own. Make a list consisting of each page and where it will appear on your website. Every page on your website will contain content, such as images, videos, and text. Now is the best time to write out all the text for each page on your website.

Depending on how fast of a writer you are, this may be the longest part of your planning stage. But it’s well worth it, when you start building, to have all of your copy already written out and accessible.

That’s all for the planning stage, now it’s time to start building!

STEP 2

LAYING THE FOUNDATION

Choosing a hosting service, installing and configuring WordPress

Now that you’ve got all the attributes of your site on hand, you’re ready to start building your website.

But before you do anything, you need to find a web host for your website; that is, a place for it to live on the web. Otherwise, nobody will be able to reach it! In this section, we’ll go over choosing a web hosting service and setting it up so that you can get building.

There are many, many different web hosting services to choose from around the Internet. Let’s take a look at the hightest-rated ones:

HostGator Cloud

Pros:

  • Most reliable host available, according to reviewers
  • One of the fastest hosts available
  • Inexpensive
  • User-friendly
  • Quick support

Cons:

  • No social support channels

A2 Hosting

Pros:

  • Most reliable host available after HostGator
  • Instant response times
  • Fast & efficient customer support
  • Increased security
  • Money-back guarantee

Cons:

  • Discounts require long term commitment
  • Restrictions on cheaper plans

Siteground

Pros:

  • Reliable uptime
  • Quite fast
  • Good online support
  • Free security add-ons
  • Free transfers for existing websites

Cons:

  • Setup fee for monthly billing
  • Less storage space compared to others

Web hosting reviews were provided by Hosting Facts.

My recommendation? Go with the Gator.

My recommendation used to always be BlueHost.com, mainly because I’ve been using them since 2006, back when they were fairly new. However, due to some clever marketing, they have grown considerably since then and as a result their reliability and customer service has started to falter. And along with uptime and speed, those are two points that can’t go unchecked. Here’s what Hosting Facts has to say about HostGator:

Do We Recommend HostGator? Yes. These upgraded Cloud hosting options are AWESOME. Yes, we couldn’t recommend these plans highly enough. Between the impressive 100% uptime, the user-friendliness of their site and all the outstanding extras, this really is one of the best places to host your WordPress website.

HostGator

For this guide, we will be using HostGator as our web host.

Click the button on the left to sign up with a 20% discount!

Let’s get started!

Go to HostGator.com and choose a hosting plan. The recommended one is fine, but you can’t go wrong with whichever one you choose. Then, choose a Domain, or web address. This is what people will type into their address bar to view your website. In the example on the right, we are registering wpt101.com.

Note: Click on any screenshot in this guide to enlarge it.

HostGator - Choose Domain

SHOULD I CHOOSE .COM, .NET, .ORG,
OR SOMETHING ELSE?

This is a question I get asked an awful lot. Many people are concerned that if they aren’t able to get that .com address, their site will somehow become less prioritized. I’m personally a fan of the newer domain names (as evidenced by my choosing palmer.digital for this site, rather than palmerdigital.com), but the actual answer is: It doesn’t matter, as long as your domain is easy for people to remember. So long as your website is helpful and usable, it won’t be prioritized any less than the other websites out there.

HostGator Account Setup
Once you’ve chosen a domain name, verify the hosting plan you chose is selected, and choose a billing cycle, username, and security PIN for HostGator.
In the next section, enter your billing information.
HostGator Account Setup
HostGator Account Setup
Finally, select any additional offers you’d like to add. You can choose whichever ones you’d like, although none of them are required. After this, you can review your order details and checkout.

Congratulations, you now have a web hosting account with HostGator!

Now, let’s continue to the next step, installing WordPress.

WordPress Logo

WHAT IS WORDPRESS, ANYWAY?

WordPress is likely the easiest as well as the most powerful website creation tool available. Put simply, it’s the reason we aren’t coding our websites from scratch anymore. WordPress is used by over 25% of the Internet to make websites. Among its prolific users are TechCrunch, The New Yorker, The BBC, Bloomberg, Variety, Sony, The New York Times, and CNN. Best of all, WordPress is free to use. We’re going to install it on our host right now so you can use its power to create the website of your dreams.

Open your email inbox and you should see two new emails from HostGator. Open the one labeled HostGator.com :: Your Account Info. You should see some important information, namely:

  • Your Control Panel
  • Username
  • Password

Click on the link next to Your Control Panel.

HostGator Account Setup
cPanel Login
You should be greeted with a page similar the one shown here. Enter the Username and Password from the email into the boxes.
You should now be in the HostGator Control Panel. Scroll down and under Software and Services, click the button labeled Quick Install.
HostGator cPanel Dashboard
On the left of the page, Under Popular Installs, click on WordPress.
Then click on the Install WordPress button.

You should be taken to a form similar to the one shown here.

  • In the first box, click the drop-down menu and select your domain name from the list. Leave the second box blank.
  • In the Admin Email box, fill in your email address.
  • In the Blog Title box, enter the name of your website. Don’t fret too much over it; you’ll be able to change it later.
  • In the Admin User box, choose a username. You will use this username to log into WordPress once you have it installed.
  • Finally, fill out your first and last name in the remaining boxes.
Once you’re finished, click the Install WordPress button.
HostGator Account Setup

You’ll be taken back to the previous page. Once you are indicated that your install is complete, click the arrow next to View Credentials. Make sure to write down the following:

  • Admin Area
  • Username
  • Password

Once you’ve done that, click the link under Admin Area.

On the WordPress login page shown here, enter the Username and Password you wrote down previously. If you do not see a screen similar to this one, wait a little while and try clicking the Admin Area link again; it might take some time to propagate.
WordPress Login
WordPress Control Panel
If you are greeted with the WordPress Control Panel, Congratulations, you’re done! You’ve successfully installed WordPress. Moreover, you have a website! Access it by typing your domain (e.g., yourname.com) into your browser’s address bar.

From now on, you can access the WordPress Control Panel any time by typing the link you wrote down into your browser address bar.

Example: yourname.com/wp-admin

Keep this link safe, as well as your Username and Password. You will need it anytime you want to make changes to your website.

Great job, you’ve installed WordPress!

If you got lost along the way, YouTube user MartieDread has created a step-by-step video of the process above. (In fact, the screenshots I used are from his video.) You can follow him at @MartieDread.

You’re almost done! Before we go forward, though, I’d like to show you how to add to WordPress one more indispensable tool. It’s called the Divi Builder.

ABOUT THE DIVI BUILDER

The Divi Builder is a plugin that takes WordPress from being relatively easy to drop-dead simple. It can shorten the process of building a website from a few days to a matter of hours. In essence, it allows you to edit your page’s content right from the page itself. I highly suggest you pick it up; it is so far my favorite tool for building websites with WordPress, hands down. I’m going to be using it throughout the guide, and recommend that you do the same!

Divi Builder Plugin
The price of the Divi Builder is about $5.83 a month, billed yearly. The purchase also comes with over 80 responsive WordPress themes, which we’ll learn about in the next section. Use the button here to get an exclusive 20% discount.
To install the Divi Builder, go to ElegantThemes.com and click on the Sign Up Today! button. Enter your account info, then log into the site with your username and password.
Divi Builder Setup
Divi Builder Setup
In the Members Area, scroll down the the Divi Builder section, and click Download. Save divi-builder.zip to your computer.
Back in your WordPress Control Panel, on the left-hand menu, select Plugins, then Add New.
WordPress - Adding Divi Builder
WordPress - Add Divi Plugin
On the resulting page, click the Upload Plugin near the top. Then click Choose File, select your divi-builder.zip file from your computer hard drive, and click Install Now.

You should get a message indicating that the plugin has installed successfully. Click Activate Plugin. Congrats, you’ve installed the Divi Builder!

Note: If the plugin does not install successfully, there may be something wrong with your WordPress installation. In that case, take a screenshot of the error and contact HostGator (or whomever your hosting provider is) for assistance.

WordPress - Install Divi Builder

Perfect, we have our host set up and WordPress Configured!

I think we’re ready to start creating our website. Let’s move on to the next section.

STEP 3

GETTING TO KNOW WORDPRESS

Introduction to WordPress, choosing and customizing a theme

Building a Website

So far, we’ve written our plan of attack and installed a fresh copy of WordPress.

It’s time to start creating! Following a quick tour of WordPress, we’ll start putting the pieces of our website together. By the end of this section, your site will be starting to take shape!

A QUICK LOOK AT THE WORDPRESS CONTROL PANEL

WordPress Control Panel
  1. That bar at the top of the screen is called the Admin Bar.  You’ll see it at the top of each page on your website as long as you’re logged in. It provides shortcuts to commonly used actions, as well as a link to your website which can be viewed at any time.

    Now let’s take a look at the menu on the left:

  2. The Dashboard is the main page of the WordPress control panel and shows your website’s status and activities. You can customize this page to further suit your needs.
  3. Posts: If you website has a blog, you’ll be able to view, create and manage blog posts from this section.
  4. Media: Use this section to upload files, such as your photos and images, to your website. You can also do this while editing your pages, which we’ll explore later.
  5. Pages: This section lists all the pages on your website. You can add and edit each page on your website from here. We’ll be spending a lot of time here during the course of this guide.
  1. Comments: If you allow your visitors to post comments on your blog posts, you’ll be able to manage them here. By default, comments must be approved by your before they appear on your site, but you can change this behavior any time.
  2. Appearance: We’ll be spending a lot of time in this section too, as it houses most of the options needed for customizing the look and feel of our website.
  3. Plugins: WordPress’s vast array of features can be extended even further by use of the Plugins section. There are hundreds of plugins available and we will be exploring several of them throughout this guide.
  4. Users: In the case that there will be more than one user editing your website, you can moderate them from here.
  5. Tools: Import and Export functions, as well as tools added from installed plugins, are available from here.
  6. Settings: Manage WordPress’s general configuration and behavior from this section. For instance, you can change your site’s Title, Tagline (i.e., subtitle), and Email Address from here.
Note: Installing plugins and themes may cause additional menu items to appear on the left-hand menu as well, so don’t worry if your menu doesn’t look exactly like the one pictured.

Let’s take a look at your website.

Click the Home icon on the left of the Admin Bar to visit your website.

WordPress Control Panel
WordPress Default Website

Behold, your website! It probably doesn’t look anything like the one in your plans, though. In order to make it look more like the one you’ve planned out, we’ll need to take a look at some WordPress Themes and choose the one that works the best for our needs. So let’s do that first.

Click the Dashboard icon on the left of the Admin Bar to return to the WordPress Control Panel.

From the left-hand menu, select Appearance, then Themes.
WordPress - Install Themes
WordPress - Install Themes

Here we have a list of currently installed themes. The one you’re currently using shows first in the list. You can get a preview of how your site might look using another theme by hovering over it and selecting Live Preview.

Note: Activating another theme does not delete any of your website’s content. You can switch back and forth from themes without fear of losing anything important. To get more themes, click the Add New button.

From here, you have access to over 4,500 free themes to choose from. Simply search for what you’re looking for, then click Install and then Activate. Feel free to install and experiment with as many themes as you want until you’ve found one that fits your style.
WordPress - Install Themes

WHAT IF I CAN’T FIND A THEME I LIKE?

Maybe you feel like none of the offered themes really suit your fancy. In that case, we have a couple of other options to explore.

ElegantThemes.com

Go To ElegantThemes.com and you’ll find that your purchase of the Divi Builder came included with over 80 professional, responsive themes. These themes go a step above the WordPress included ones and come with tons of customization options and bonus content, as well as the original PSD files used to make them. If you are looking to give your website a premium feel, you can’t go wrong with any of these.

WordPress Theme Chooser
ThemeForest

ThemeForest.net

If you’re hungry for even more themes, ThemeForest will curb your cravings with thousands more themes to choose from. There are themes here for every type of website you can think of—from Auto Repair website themes with custom tow truck and tire icons to use, to Home Auction themes with their own IDX integration for real estate agents. Keep in mind that these are premium themes as well, so they’ll cost money to download and use.

The Divi Theme

If you feel like using pre-made templates is too constraining or don’t provide enough customization for you, I have one more option for you to consider. It’s called the Divi Theme (not to be confused with the Divi Builder).

The Divi Theme allows for near complete customization of all attributes of your website theme from top to bottom. It’s so versatile that many web developers tell me it’s the only theme they ever need to use. Of course that means a little bit more design talent may be required to use this theme than the others. Learn more about the Divi Theme here.

Divi Theme
You can download the Divi Theme from the Members Area of the Elegant Themes website just like the Divi Builder.

In order to use any of these themes, download the theme to your computer and then follow the instructions below.

WordPress - Upload Theme
From the Add Themes page we were just on, click the Upload Theme button.
Then click Choose File, select your theme’s ZIP file from your computer hard drive, and click Install Now.
WordPress - Upload Theme
WordPress - Upload Theme
You should get a message indicating that the theme has installed successfully. Click Activate. Congrats, you’re done!

THE IMPORTANCE OF RESPONSIVE THEMES

Responsive Design

People view websites differently from the way they did just a few years ago. Not only will your site be viewed from a desktop computer, but up to 50 percent of the time from a cell phone or tablet as well. Because of this, it’s important that the WordPress theme you’ve chosen is responsive, or responds to the type of device it’s on by formatting the content accordingly for better readability.

Take a quick scan through the theme’s description to see if it mentions whether the theme is a responsive theme. If not, you can test it yourself by viewing the theme’s Live Preview and then resizing your browser to be very narrow, similar to your phone’s screen. If you notice the content changing to accomodate this, it’s a responsive theme.

Let’s continue once you’ve found a theme you’ve liked and installed it.

In this guide, I’m going to be using the Divi Theme, my personal favorite. But you should have no trouble following along regardless of which theme you’ve chosen.

Now that we’ve decided on a theme, let’s get to work customizing it. From the left-hand menu, select Appearance, then Customize.

We’re greeted with the WordPress Customization Tool. As you can see here, our website is shown on the right, and various customization options are listed on the left. Change an option on the left and the result is shown in your website.

The options listed are different for every theme, so I won’t explore every one in detail. But let’s look at some of the more common ones to get an idea of what they do.

  • General Settings: 
    • Site Identity: You can change your site’s Title and Tagline (or subtitle) from here, as well as choose a Site Icon, which is that icon that shows up on your browser’s tab when you visit a website.
    • Layout Settings: Themes often offer to switch between full-width or boxed-width layouts, as well as other various options.
    • Typography: Choose the default text, header and subheader fonts and their colors.
    • Background: Choose the background color and image.
  • Header: Generally provides options such as changing your site’s logo, header fonts and colors, and position of the main navigation bar. The navigation bar is where we put links to the different pages of our website. We’ll be revisiting it later in the guide.
  • Footer: Options for the footer layout, fonts and colors go here, as well as copyright information and the appearance of footer widgets. Don’t worry about widgets yet, we’ll be going over them later on.
  • Colors/Color Schemes: Allows you to change colors of elements on your website. Some themes let you choose color schemes that are adapted throughout your website as well.
  • Menus: Allows you to choose which pages display on your menus. Leave this be for now; We’ll go over it once we start adding pages to our website.
  • Widgets: Widgets are a word given to content on your page that is not your main content, such as the content in the sidebar or footer. We’ll get more in-depth about widgets later in the guide, so don’t worry about them now.
  • Static Front Page: Allows you to choose which of your pages acts as your Landing Page, the page first displayed when someone visits your site. We’ll go over this once we start creating our pages.
  • Additional CSS: Here you can make further changes to your site through the use of CSS. Meant for advanced users, you can ignore this if you’re not familiar with CSS.
Feel free to play around with all the settings to get a feel for how they change your website. If you make some changes you don’t like, just click the X button at the top left corner to discard your changes and go back. Once you’re satisfied with your tweaking, click the blue Save & Publish button to apply your changes.

Theme Options: Even more customization settings

In addition to the WordPress Customization Tool, WordPress themes often have even more customization settings in their Theme OptionsTo get to the Theme Options, look for its link in the left-hand menu that was placed there when you installed the theme. In the Divi Theme’s case (left), it’s right there at the bottom of the menu. But with other themes such as the Fable Theme (right), the link gets buried under the Appearance menu.

Once you’ve located the Theme Options link and clicked on it, you’ll be shown the Theme Options page. Like the Customization Options, the Theme Options are different for each theme, so I’ll leave browsing through them to you.

Get a feel for the different options your theme provides, so that if you need to change a relevant part of the theme while you’re building, you’ll be familiar with where to do it.

Keep in mind that customizing your site is an ongoing process, something you’ll be visiting and revisiting throughout the time you spend building your site, and sometimes even after.

Feel free to come back to this section for a refresher, as it’s good to be familiar with all the tricks your theme has to offer.

STEP 4

BUILDING CONTENT

Creating web pages, using the Divi Builder

By now, your website should be starting to take form.

Hopefully, you’ve played around with some themes and decided on one that best fits what you’re looking for. If you haven’t, spend some time playing around with downloading, exploring and customizing multiple themes until you find a look worth working with. Like I said before, customization is an ongoing process! If you’re unhappy with a certain look down the road you can always come back and make more changes.

Next, we’re going to start creating our web pages. We’ll start with our home page and work our way down our site map from there. So without further ado, on to creating content!

Let’s start by creating our homepage.

Begin by clicking Pages on the left-hand menu.

You’ll be met with a list of pages on your website. Right now, we only have one sample page. From here, we have full control of all the web pages on our site. They can be created, edited, and deleted from this page. We’re going to be creating a new page, so click the Add New button.
This is WordPress’s Page Creator Tool. During our time using WordPress, this is the tool we will most likely spend the most time using. Let’s take a closer look at its most important features.
  1. Page Title: As you might expect, this is where you’d enter your page title. In most themes, the page’s title appears at the top of each page in your website.
  2. Page Content: This is the area where you’ll put the contents of your page. The text you type in this area is displayed as the content of your page.
  3. Page Content Toolbar: Bold, italics, alignment, and other common options for text appear here, just like they would in a word processor.
  4. Add Media Button: Use this button to add images into your content.
  5. Divi Builder Toggle: If you have the Divi Builder installed, pressing this button will enable Divi Builder mode. We’ll talk more about this in a moment.
  1. Visual/Text Toggle: Turns the formatting on and off. Clicking Text allows you to insert HTML into your content area. You can safely ignore this feature if you’re unfamiliar with HTML.
  2. Page Layout: By default, a sidebar appears to the right of each of your pages. You can use this option to remove it if you wish. Various themes such as the Divi Builder include this option.
  3. Featured Image: Many themes allow you to select an optional image to appear above the title of the page. You can set that image from here.
  4. Publish Area: When you’re done writing, you can save it or preview your page from here. When you’re ready to publish it to your site, click the blue Publish button to make it viewable to your visitors.

Let’s give it a spin.

Enter a title for your page (“Home” should do nicely, since it is your home page) and then enter some content. Then click the Publish button.

You’ll be notified that your page has been published. Now you can view your page any time from the Admin Bar. Click View Page.
Voila—Your page now appears on your website! A link to your page now appears on the main menu of your page as well.

ADDING MEDIA TO YOUR PAGE

As you can see, adding content to your pages is easy. Here’s a quick guide on how to add photos and videos into your page.

Adding Photos

Start by clicking the spot in the Content Area where you’d like your photo to appear, then click the Add Media button.

The Insert Media dialog appears, which you can use in several ways to add media to your site. To upload a photo from your computer, click the Select Files button. Then choose the photo you’d like to upload from your computer’s hard drive.
Once your photo has been uploaded, click Insert into page.
Perfect! Your image now appears as part of your content. Now let’s try adding a video to your page.

Adding Videos

The easiest way to add a video is to take it straight from YouTube. Go to your video and copy its URL from the address bar, like shown.

Now go back to WordPress, click the spot you’d like to place the video, and paste the URL.
Once you’ve done that, the video will automatically insert itself into your content. All set!

Assigning a page as your Landing Page

Let’s learn how to designate the page you’ve just build as your Landing Page, or the first page your visitors see when they view your site. To do this, select Settings from the left-hand menu, then select Reading.

Click the radio button next to A Static Page, then click the drop-down menu next to Front Page and choose your home page. That’s all there is to it! Click the Save Changes button and you’re done.

Once you’re done with your homepage, go through your site map and try building a couple of your other pages in order to get a feel for WordPress’s Page Builder.

Like I mentioned before, it’s the tool you will be likely be using the most, so try to get as familiar with it as possible!

BUILDING CONTENT USING THE DIVI BUILDER

Now that you’ve had some experience customizing WordPress and building some web pages, let’s kick things up a notch.

By adding the Divi Builder to the skills we have learned, we’ll be able to build websites that look like they were done on a five-figure budget in just a few hours time. Not only can you make changes right on you pages themselves, but you can customize them with all sorts of interactive content that will make your site easily line up with any other big name competitor you may have. Ready to get started? Read on!

To enable the Divi Builder, click on the purple Use The Divi Builder button.
The Divi Builder is now enabled. Your content area has now been replaced with a wireframe of your page. Next, click on the Use Visual Builder button.
We are back at our website, but check it out—Everything is now editable! You can modify text, resize margins, change column layouts, and rearrange content all just by clicking on it.

Getting To Know the Divi Builder

Pages made with the Divi builder are built using three types of building blocks—Sections, Rows, and Modules. Let’s take a closer look at each. 

The blue boxes are referred to as sections, the largest building blocks of the page. They are usually the first thing you add to your page. You can stack as many sections on top of each other as you want before adding rows inside them.

Section Buttons:

 Grab and drag to move the section.
Brings up the section’s settings.
 Duplicates the section.
 Saves the section for future use.
 Deletes the section.
 Adds a new section below.

The green boxes are rows. You can put any number of them inside a section. You can split up into columns to more easily divvy up your content—want 3 paragraphs next to each other? Use a 3-column row.

Row Buttons:

 Grab and drag to move the row.
Brings up the row’s settings.
 Duplicates the row.
 Changes the row’s column layout.
 Saves the row for future use.
 Deletes the row.
 Adds a new row below.

Finally, modules are the gray boxes and they hold your actual content. They go inside the rows. A module can hold any number of things from text to buttons to search bars to galleries to contact forms. 

Module Buttons:

 Grab and drag to move the module.
Brings up the module’s settings.
 Duplicates the module.
 Saves the module for future use.
 Deletes the module.
 Adds a new module in this area.

Let’s try adding one of each.

Add a standard section to your page, as shown on the right.

Select Regular from the dialog that pops up.

There are actually three types of sections in the Divi Builder: Standard Sections (blue), Fullwidth Sections (purple), and Specialty Sections (yellow). While standard sections are made up of rows, fullwidth sections do not use rows and instead use one module that spans the width of the page. Specialty sections allow for more advanced column layouts.

In this guide, we will be mainly sticking to the standard sections. Here’s a guide that goes into more detail about sections if you’re interested in learning more.

A section is added to your page. Adding a row comes next. Select the column layout you’d like for your row. For instance, if you want two pieces of content next to each other, choose the layout with two columns side by side, as seen on the right.
Next comes adding a module. Select the module you’d like to add. As you can see, we have a lot to choose from here. The Divi Builder allows you to add all types of content to your site and everything it offers is useful. Let’s take a quick peek at a few you have available to you.

Click on any module below to learn more about it.

Video Module

The module allows you to embed videos from just about any source, as well as customize the thumbnail image and play button to add a clearner style to the embed.

Gallery Module

The Gallery module lets you create and organize galleries anywhere on your website. The Divi Builder gallery module comes in both grid and slider format and supports large galleries with pagination.

Toggle Module

Toggles are a great way to consolidate information and improve user experience on your page. These toggles will look great inside any sized column.

Audio Module

The audio module allows you to embed an audio file + a custom audio player anywhere on your page. The audio player assumes the clean/modern style of the Divi theme.

Email Option Module

Growing your mailing list is easy using Divi’s email optin module. This module supports MailChimp, Aweber and Feedburner integration.

Tabs Module

Another way to consolidate layout is by use of tabs. Tabs built with the Divi builder look natural in any column, just like toggles.

Slider Module

Sliders, or slideshows, can be placed anywhere, spanning the full width of whatever column structure they are in. Divi sliders support parallax backgrounds, as well as video backgrounds!

Contact Form Module

Communication is the cornerstone of any business. With Divi, you can easily add contact forms to any part of your website.

Post Slider Module

Create a slideshow of your most recent blog posts using this module. Users can quickly see your newest updates without ever having to go anywhere.

Map Module

The map modules makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location.

Shop Module

The Shop Module allows you to add a searchable product gallery to your page with just a few clicks, thanks to its WooCommerce integration.

Video Slider Module

Divi makes it easy to add a Video Slider to your page. This is a great way to organize collections of videos from just about any source.

Now, if I were to walk you through the features of every single module, this would be a very long section.

Luckily, Elegant Themes has put together a documentation that does just that. If you’re interested in or would like help learning how to use a certain module, I recommend checking out their very helpful guide on Divi Modules.

For now, let’s select the Text module.

Now let’s add some text. Note that as you type, your content populates on your page in real-time.

This pane looks pretty similar to WordPress’s Content Area, but it’s got a few more features. If you scroll down you’ll see that we have the option to change the background of the text. In addition, up at the top we have two new tabs, Design and Advanced. The Design tab has options for text, header, border, sizing and spacing customizations. The Advanced tab has several options regarding CSS, if you’re familiar with that. When you’re done editing, click the green check box on the lower right of the pane to save your changes.

When you’re all done, just click the Exit Visual Builder button at the top to save your changes and go back to your website.

If you’d like to play around with a completed Divi page, I have one for you to look at here.

And finally, for any unanswered questions you might have, take a look at the extensive Divi Builder documentation available here.

In all honesty, the best way to get familiar with the Divi Builder is to use it. Add sections, format rows, modify modules—get a real feel for what the Divi Builder has to offer for your site. I promise you that once you get the hang of it, you will be flying around creating web pages like nobody’s business.

STEP 5

MORE WORDPRESS SKILLS

Writing blog posts, creating menus, adding widgets

Our two biggest sections, which had to do with customizing themes and creating content, are now behind us.

That means we’re on the home stretch! We do however have some smaller but still essential skills to cover. We’ll go over those in this section. Once you feel like you’ve gotten a handle on creating web pages, let’s continue on.

CREATING A BLOG

The best way to stay relevant to your viewers is to have a blog on your site.  Here I’ll take you through the steps to create your own. Most of these steps involve skills you already know, so it should be a breeze.

First, let’s make a new page for your blog posts to appear in.

This is very simple. From the left-hand menu, select Pages, then Add New. Then type a title for your page (such as “Blog”) and then click Publish.

Next, from the left-hand menu, select Settings,  then Reading. Make sure the radio button next to A static page is checked, then click the drop-down menu next to Posts page, and choose the page you just created. Finally, click the Save Changes button. All set. Time to create your first blog post.

Creating a Blog Post

Begin by clicking Posts on the left-hand menu.

This gives us a list  of all your blog posts. Currently, we just have one sample blog post. Similar to the Pages list, you can add, modify, and delete your posts from this page. To add a new post, click the Add New button.
You are brought to WordPress’s Post Creation Tool. Looks familiar, right? It’s nearly identical to the Page Creation Tool! From here, you can enter a title for your blog and write its content. I don’t generally use the Divi Builder to write blog posts, but you can if you want. When you’re done, click the Publish button, and your new blog post will become available on your site.

Extra Features

Let’s touch over some features on the Post Creation Tool that you haven’t seen yet.

Categories: These are used to separate your blog posts into groups. Add a new category, then, when you write a blog post that corresponds to that category, click the check box next to it before clicking Publish. On your blog, you’ll be able to filter posts by category from the sidebar. You can manage your categories by going to the left-hand menu and selecting Posts, then Categories.

Tags: You can tag your post with as many keywords as you want, just like you would on Twitter or Instagram. Just type them into the box provided (e.g., “running, workout, exercise”) to make it easier for your users to search your blog by tag. You can manage your tags by going to the left-hand menu and selecting Posts, then Tags.

CUSTOMIZING THE NAVIGATION BAR

The navigation bar is the part of your site, usually at the top, that links to all the main pages of your site. Let’s learn how to customize it.

Go to your website and take a look at your navigation bar.
If yours looks anything like mine, it has categories, duplicates, and unwanted pages in it. Let’s customize our navigation bar so our visitors have no problem finding the pages they want to view.
Go to your WordPress Control Panel and on the left-hand side select Appearance, then Menus.
This is the Menu Creation Tool, where you can create and manage menus in your WordPress site and assign them to different locations. Let’s create a navigation bar for the top of our page. Enter a name for it, then click Create Menu.
On the left sidebar, click the checkboxes next to the pages you want on your navigation bar. Then click Add to Menu.
Your new menu appears on the right. You can click and drag the links to rearrange them.  Once you’re finished, check the box next to Primary Menu, then click Save Menu to apply your menu to your page.
Want links other than your pages in your menu? Use the Posts, Custom Links, or Categories buttons on the left sidebar to add them to your menu in the same fashion.

Perfect—the navigation bar displays as intended now!

USING WIDGETS

As mentioned earlier, a widget is any content that is not your main content, such as a sidebar or a footer. Once added, a widget appears on every page of your website. Let’s learn how to add them.

Let’s say I wanted my contact information to display in the footer of each of my pages. I could accomplish that using a widget.

On the left-hand menu, select Appearance, then Widgets.

If we take a look on the right, it looks like the theme I’m using supports five different spots to put widgets: the sidebar, and four columns in the footer.

I want to put my content in the footer, so let’s click Footer Area #1. It expands to show the widgets inside. Right now, there are no widgets in the footer, so nothing shows up in there.

Now let’s take a look on the left at the list of available widgets.

There are quite a few to choose from, from a list of your pages, to images, to calendars, to comments. You can install even more widget types using plugins, which we’ll be going over next. But we just want to add some text, so click and drag the Text widget into Footer Area #1. 

Text widget has been added to the footer. We’ll give it a title, and enter the contact information we want displayed in the footer. When you’re done, click the blue Save button to apply the changes.
When we return to our site, we can see that our text we added has been inserted into our footer. Success!

ADDING PLUGINS

We’re nearing the end of the guide, as we’ve gone over all WordPress’s main features. But WordPress is capable of much, much more thanks to hundreds of available plugins that extend its functionality. Let’s discover how to add them and look over some of the more popular ones you can add right now.

Adding a plugin to WordPress

On the left-hand menu, select Plugins.

We are shown a list of the plugins that are installed to WordPress. You’ve installed one already if you purchased the Divi Builder. To add a new plugin, click the Add New button.
WordPress has an enormous database of plugins that you can download straight from your WordPress control panel. Simply search for the one you’re after, and once you’ve found it, click its Install Now button. Then click Activate to add it to WordPress.

Here are some well-loved plugins available for WordPress. You can try them out now; just search for them in your Plugin Manager.

Akismet

Akismet is a plugin developed by the people behind WordPress. It is basically an anti-spam plugin which checks all comments and filters out the spammy comments.

MonsterInsights

The best Google Analytics plugin for WordPress. See how visitors find and use your website, so you can keep them coming back.

Newsletter

Newsletter is a real newsletter system for your WordPress blog: perfect for list building, you can easily create, send and track e-mails, headache-free.

Jetpack

Jetpack is a multi-function plugin that takes care of your site security, website performance, traffic growth, image optimization, website appearance and a lot more.

MailChimp

MailChimp for WordPress, the absolute best. Subscribe your WordPress site visitors to your MailChimp lists, with ease.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents to your liking.

Yoast SEO

Yoast is the most loved SEO plugin on WordPress. Use it to write better content and and make your site easier for search engines to find on the web.

The Events Calendar

The Events Calendar is a carefully crafted, extensible plugin that lets you easily share your upcoming events.

Ad Inserter

Ad management plugin with many advertising features to automatically insert adverts. Perfect for all kinds of ads including AdSense and Amazon.

WooCommerce

With WooCommerce, you can sell both physical and digital goods in all shapes and sizes, and even sell affiliate goods from online marketplaces.

OptinMonster

OptinMonster helps you grow your email list by converting visitors into subscribers and customers.

Wordfence Security

Secure your website with the most comprehensive WordPress security plugin. Firewall, malware scan, blocking, live traffic, login security & more.

WRAPPING UP

Congrats, you’ve reached the end of the guide! At this point, you should be ready to start putting your web address on your business cards. Head below for a few final thoughts.

If you’ve been following along, you should now have all the necessary skills to build a professional website that accurately and proudly reflects your business or cause. But even if you’ve completed your website, your task isn’t over yet. Remember that in order to stay relevant, you must constantly stay busy creating content, building connections, making updates, and posting information.

I’ll be releasing a free e-book soon that builds on the skills I tought you in this guide, with even more detail on building a superior website and keeping it up to date with relevant content.

If you’ve enjoyed this guide or have comments or suggestions, be sure to let me know below! I love to hear that my content is helping others and bringing them closer to online success. And if you have any questions, let me know as well, I’ll try my best to answer every one. Talk to you soon!