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.
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.
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.
PLANNING YOUR WEBSITE
Creating a sitemap, writing copy, gathering resources
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.
Identify your brand, target audience and appropriate website tone.
Think through how you would like your website to be able to function. What features does it need?
Think about what colors and images you want on your site and how it compares to competitors.
Decide how you want your audience directed through your website.
Let’s tackle these one by one.
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.
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:
Decide on an overall look for your website using the colors, tones, and attitudes of your brand.
Choose a color scheme that compliments your brand. Cameron Chapman of Smashing Magazine has written an exceptional article on creating a color scheme.
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.
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.
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.
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?
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!
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:
- Most reliable host available after HostGator
- Instant response times
- Fast & efficient customer support
- Increased security
- Money-back guarantee
- Discounts require long term commitment
- Restrictions on cheaper plans
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:
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.
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.
Congratulations, you now have a web hosting account with HostGator!
Now, let’s continue to the next step, installing WordPress.
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
Click on the link next to Your Control Panel.
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.
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
Once you’ve done that, click the link under Admin Area.
From now on, you can access the WordPress Control Panel any time by typing the link you wrote down into your browser address bar.
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!
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.
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.
GETTING TO KNOW WORDPRESS
Introduction to WordPress, choosing and customizing a theme
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!
- 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:
- 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.
- Posts: If you website has a blog, you’ll be able to view, create and manage blog posts from this section.
- 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.
- 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.
- 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.
- 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.
- 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.
- Users: In the case that there will be more than one user editing your website, you can moderate them from here.
- Tools: Import and Export functions, as well as tools added from installed plugins, are available from here.
- 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.
Let’s take a look at your website.
Click the Home icon on the left of the Admin Bar to visit your 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.
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.
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.
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.
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.
In order to use any of these themes, download the theme to your computer and then follow the instructions below.
THE IMPORTANCE OF RESPONSIVE THEMES
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.
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.
Theme Options: Even more customization settings
In addition to the WordPress Customization Tool, WordPress themes often have even more customization settings in their Theme Options. To 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.
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!
- 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.
- 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.
- Page Content Toolbar: Bold, italics, alignment, and other common options for text appear here, just like they would in a word processor.
- Add Media Button: Use this button to add images into your content.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
Start by clicking the spot in the Content Area where you’d like your photo to appear, then click the Add Media button.
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.
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.
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!
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.
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.
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.
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.
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.
Click on any module below to learn more about it.
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.
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.
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.
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.
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.
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.
Here are some well-loved plugins available for WordPress. You can try them out now; just search for them in your Plugin Manager.
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!