Are you ready to roll up your sleeves and make some stuff happen on your website? Cool! So am I!
So, just a quick recap… before you got this far we:
- Created a company with a brand name and a logo.
- Developed a quick business plan / marketing plan.
- Secured our very own domain name.
- Got a hosting platform.
- Chose WordPress as our CMS (content management system) and installed it on our host.
- Added all of the plugins and the theme into WordPress.
If you’ve made it this far, FANTASTIC! If not, you can go back and take a look at all of the other previous posts I created. I’m giving this all away, and I’m striving not to hold back on ANYTHING!
Let’s Build a Web Page
Okay, so, we go to our website’s dashboard by going to www.mydomain.com/wp-admin (substitute your own domain name for “mydomain.com”), and enter your username and password. Click the button to login, and you’ll find yourself at your Dashboard.
In the left column you’ll see “Pages.” You can also see the “+” sign at the very top black nav bar which allows you to choose what kind of new content you can create such as Pages, Posts, and Media (more on those later).
What’s the different between a Page and a Post?
A Page in WordPress is a static web page… it’s agnostic about when it was created. The order in which it displays on your website id determined by you. This allows you to create your own structure with directories and subdirectories of pages.
Posts, on the other hand, are your blogs. They are time-ordered meaning that the newest blog post will show on the archive page and in the RSS feed as the first item by default. Posts can be categorized by Category (usually major topics), and they use tags to add further context.
Our First Web Page
Truthfully, I don’t normally start a website from scratch like this anymore. I’ll use a template site I created, and I’ll clone that site to the new location on the host. But, for the sake of this series, we’re going to completely build this thing from the ground up.
When you’re in the Pages section, click “Add New.” A new screen will appear. We’re going to build the home page here, so let’s name this page Home. Let’s make sure that we’re using the Classic Builder for now.
Scroll down the screen and find the Yoast SEO section. Let’s create a page title and a meta description. My page title will be: How to Create a WordPress Website | Build Your Digital Business. Our meta description will be: Do you have a business you’d like to take online. Learn how to build your digital business including how to create a website, email marketing, and social media. We just want to make sure that we are have the little bar show as being green in each section… orange means it’s too long or too short. Let’s use “how to create a website” as our keyword. We’ll be sure to use this in our web page copy too.
Now, let’s go to the featured image to the right. Click on the link to add a featured image. I recommend using an image which is 800X600 px for the Divi theme. I also highly recommend running the website through www.tinypng.com to compress the image properly. Drag your image into the gallery that pops up, and make sure you use alt text before committing it to the page.
Now, go back up and click “Publish.” This will immediately publish your page live.
Now, Let’s Add Some Style and Content
After we published our page, now let’s click “View Page” to be taken to the live page. In the top black bar, click the link that says “Enable Visual Builder”. The Page will then reload, and three choices will appear.
If you want to get off the ground right away, you can choose from some of the pre-made templates available in the Divi library. Otherwise, if you already have website pages, you can copy those pages over this page. Finally, you can build from scratch. In this lesson, we’re going to build this homepage from scratch using a few different Sections, Columns, and Modules. So, let’s choose that option.
We want to have a Heading 1 or “H1” tag to open our site. This is likely the first set of words your visitor will see on your page. Divi lets you use a few different ways to do this. For this page, I’m going to create a full-width section with a full-width slider module. You can also alternatively use a full-width header module. Caution: if you use a full-width slider with more than one slide, reserve your H1 tag for the next section you’ll build. Use H2 or lower (the defaults for the full-width slider module) in the slider.
Here, we’ll add the title of the page and a little bit about what the page discusses. We can even include a call-to-action button here.
I pre-wrote the content for this page in a Word document. Now, I’m going to start creating some text areas on my page for this content. So, I’m going to create a new regular row with a 2-column structure. I’m going to add a text module to one column and an image column in the next column. Now, I’ll cut-and-paste the text from my Word doc in the text module, and I’ll click the image module, and I’ll upload an image in that section. Make sure you use alt text for your image.
Once the page looks the way you want it to look, then click Save. Divi will autosave your work, but it’s still a good idea to actually click save now and again to avoid losing work potentially.
After you’ve saved the page and you like it, you can preview it as a tablet or a mobile device. If everything looks good and you do a final save, you can exit from the visual builder by clicking the link in the top black nav bar marked “Exit Visual Builder.”
Now, rinse and repeat for your other pages. Or, even better, you can clone the page you just created to use it as a template for those other pages.
Let me know how you’re coming along in your project.