This is Day 6 of the 10 day Build Your Website Challenge, on how to build a home page for your website. If you missed Day 5, on Organizing your Content, you can find it here.
The goal is that, at the end of 10 days, you’ll have your DIY website up and running!
YAY! Today’s the day!! It’s time to build a home page for your DIY website!
Maybe you wonder why we are halfway through the challenge and there’s still nothing on your site? That’s normal! Usually, people don’t realize the amount of prep work that goes into building a site, and that’s what you’ve been doing over the past 5 days. Now, you have all of that done, so there’s a good chance you’ll be surprised at how quickly you can actually build your home page.
This part of the challenge – to build the home page – is actually in two parts. Today, we’ll focus on getting the page built, getting the actual content onto the page in recognizable layouts. If your site looks like it was built in HTML by a college student in the 90s, it’s fine!! Tomorrow, we’ll work on the design and polish it all up.
Psst…. Luckily, there is a cheat code for today, as well: the Divi layouts. First, choose a layout you like, and replace the existing dummy content with the content you collected and organized over the past two days.
How to get started building your home page:
In your WordPress dashboard, go to add pages > add new. Add in your title and click ‘use the Divi builder.’ If this is your first time opening Divi on your website, a basic tutorial will pop up. It’s super helpful and gives you a good overview of how the theme works. (If you miss it, you can watch the tutorial here.) Obviously, if you want to use one of the premade layouts, choose the purple ‘use a premade layout’ button. Or, if you want to build from scratch, pick the blue ‘build from scratch’ button. (Don’t worry, you can always just made another page later, and you really can’t break anything by playing around with the theme!)
I hope you did your homework yesterday and organized all of your content into sections, because that’s going to be a huge help today. Just work on one section at a time. You don’t have to go in order. If you get overwhelmed or confused, just leave that section how it is and come back to it later. The goal is just to get all of your content onto the page today.
To build from scratch:
Once you have the blank page open with the Divi builder, you’re all ready to start building your home page. Work on one section at a time. You don’t have to go in order. Pick a section that you feel like you have a good idea of what you’d like to build. The blank section will already be there, outlined in blue, but you can add more sections by clicking the blue + sign in the center.
Decide how many columns you want in your row for your section. You can use more than one row, which works really well if you want to have a headline (1 column row) and then some side by side content with more columns. Click the green plus sign and you’ll see all of the options for the row configurations. Don’t be afraid to play around with them and you can always change the configuration later.
How to add in your content:
Once you have a section (blue) and a row (green), you can add in whatever module (grey) that you like. The modules are where you’ll put your actual content. Divi has so many to pick from, but I tend to use the same ones over and over. If you’re overwhelmed here, don’t worry, you really only need 3: images, text, and buttons. With those two modules, you can do pretty much whatever you want. If you’re more adventurous, some of my other favorites are: blurb, accordion (use for FAQs!), slider, pricing table, social follow (to add social media buttons), testimonial, and of course, videos. I do also use email optin, contact form, and blog for more specific functions, but you probably don’t need those just yet, so save those for when you’ve mastered the images, text, and buttons.
Remember, today, we’re just adding in the content and not really worrying too much about the design. If it looks bad so far, that’s fine!!! The goal is to get all of the content onto the page in a layout that makes sense and more or less follows the organization you did yesterday.
To use a premade layout
If you find a layout you like, or at least part of a layout that you like, you can absolutely use that section or sections instead of having to build it yourself. It’s a bit of a process to copy them and put them all together onto one page, but it will still save you time in the long run. Basically, the idea is this: Add a new page, choose the layout you want, copy the section you want, and then paste that section onto the actual page you are building. You can repeat that with as many sections as you want, on as many pages as you want. So, maybe you want the about section from the bakery layout, but the pricing table from the farmers’ market layout, and the email optin from the florist layout. You can pick and choose the pieces you want and the ‘frankenstein’ them together all onto one page to fit your specific content. Here’s how to do that, step by step (you might want to open two tabs – the home page you’re building and a new page):
A. Add a new page.
This should be separate from the home page you’re building.
B. Choose the ‘use a premade layout’ option.
Then, select & load the layout you want to use. For an easier way to look through all of them and choose, you can see all the layouts here.
<>h5C. Copy the section you want.Hover over that section and click the 3 dots in the blue outline. Choose ‘copy section.’
D. Paste the section on your home page.
Go back to the home page that you’re building. Find the section above where you want to paste the new section (you can rearrange them later, don’t worry). Hover over that section and click the 3 dots in the blue outline. This time, choose ‘paste section.’ The section will paste BELOW the section you clicked on. It will not erase or copy over that section, it will just add the new one below it.
E. Repeat!
You can reapeat these steps as many times as you want to copy/ paste all the sections your heart desires. You can paste in different sections from different pages, even if they are from different layouts (just open a new page each time.)
F. Delete the pages you aren’t using.
When you’re done, go back and delete any pages/ layouts that you won’t need any more, to keep your site clean. From your WordPress admin dashboard, click ‘all pages.’ Hover over the ones you want to delete and click ‘trash.’
There’s a key step before you’re done here – make sure your new page shows up as the home page on your website:
1. Go to your WordPress dashboard > settings > reading.
2. At the top, click ‘a static page.’
3. Where it says ‘homepage,’ click the drop down and select the page you just built. If it doesn’t show up there, it’s likely because you didn’t publish it. Go back and publish, then reload this page and you should see it there.
4. Scroll down to the bottom and click ‘save changes.’
Okay, that’s it for Day 6 of the DIY Website Challenge. If you didn’t get through everything, it’s okay! We’ll be working on the home page more tomorrow, when we focus more on the design. (Or maybe you couldn’t help yourself and you started playing around with colors & fonts today? I don’t blame you!) And of course, you can always keep adding content as you go.
