Disclosure: Some links on this page are affiliate links, but please note that I’d never put something on here that I wouldn’t highly recommend.
First impressions are everything, especially when it comes to a website. The Adobe State of Content report reveals that “59% of consumers globally would rather engage with content that’s beautifully designed as opposed to simply designed —even when short on time.” To help give your reader a fantastic first-impression, I want to walk you step by step through creating a homepage that will WOW your reader.
Heads up: I will be using the Divi Theme for this post. In my experience, I’ve found this theme to look incredibly professional and is the most customizable (even for those not incredibly computer savvy). if you don’t have Divi theme yet, here is a post that walks you through how to set up the Divi theme.
Upload Homepage Template
If you have Divi theme installed already, then visit the homepage of your website (while logged into WordPress) and click Edit Page.
Then select Use the Divi Builder
The Divi builder will then load on that page. Select Load From Library
Scroll down until you find Homepage Basic and click Load
You should then see the pre-defined edit uploaded. Now it’s time to go in and edit each of these modules.
Edit the Slider
Let’s start off by customizing that Slider Image.
From the page where you are editing, click on the three lines next to where it says slider. Any time you select those 3 lines, you are able to edit the content of that particular module or box:
Before we move on, let’s first understand what a slider is. A slider is like a slideshow, right on your homepage. Often Apple.com does this on their homepage to feature their different products. So you can add multiple slides and customize multiple slides, but I’m going to stick with just one for us right now.
Now if we want to edit this particular slide in the slideshow, do you remember what we click to edit whatever is in that box or module?
Those 3 lines!
The first thing you can enter in is your Heading (see below). What do you want to be said in bold right when they get to your site?
You can also customize the Button Text. For example, on one of my websites, I have it say “Read the Blog.”
Next, you enter in the button customization. This depends entirely on where you want your reader to go first. Perhaps you want them to go to an About page you have where you show your various services. Or maybe you just want them to go to where they can read blog posts. Whatever it is, enter in that URL.
Next, let’s put in an image. Do you have an image that you want to use that fits those dimensions? I recommend making that image of good quality. It would be ideal if it’s of you, but if you don’t have it, there are also high-quality images you have permission to use by going to Pixabay.com. Remember: you can’t just grab any image on the internet and use it. you need to have permission to use. Pixabay images allow you to use them. One you have the image you want to use, download it to your computer.
In the section where it says Background Image click Upload an Image. Then select the file from your computer that you want to use.
You’ll see a lot of different options in this section that you can use to customize the slide, but let’s scroll down to edit the text. In the section where it reads Content type the text that you want to appear below your welcome text on your page. Perhaps it’s a moment to share the mission of your blog and/or what value your content has for the reader:
One other feature to use occasionally is the Advanced Design Settings. You’ll see that option at the top. For this particular image that I used, I need the Advanced Design Settings because the text font is too light when put up against the image I used. So I can go to that section and edit the text color. I recommend playing around a little here to see what looks best.
The Custom CSS section is for those a little more advanced in coding. In my experience, I haven’t personally written code for it. however, I have had a time when I wanted the theme to do something in particular and I contacted the Divi Theme support and they gave me a code I could put here (that’s another reason why I like Divi Themes–they have great customer service).
Once you are done customizing this section, click Save:
Let’s take a peek at how this looks. Click on the Preview box in the top right of your editor to check it out:
Edit the Fullwidth Header
Now let’s edit the next section, the Fullwidth Header. If you’ll remember, a way to edit a section is to click on the 3 lines:
I notice the header is this grey color background, and I want it to reflect my brand colors a little more (if you haven’t identified your brand colors, I highly recommend doing so). Click on Background Color and then select the color you want:
Because I made my background color pretty dark, I needed to also change the text to “Light.”
But as you can see, you can make all kinds of edits to this section. Or, if you want to delete it altogether, you can always select the X button:
Remember that at any time you can click that Preview button to see what it looks like:
Here is how mine turned out:
Customize Other Sections
Now you’ve learned exactly how to edit the pre-existing sections, you can do the same for the “Blurb” sections following that–same methods of customizing as you’ve seen in the other sections! You could use these sections to feature different categories on your blog. Or, on one of my sites, I have it broken down into offerings for them: Newsletter, Coaching, Courses, and Blog.
Adding New Sections
Let’s say you want to customize this even more (which trust me, you will end up doing)–it’s actually incredibly simple! I can’t even begin to tell you how much time I’ve saved on my blog since I’ve used Divi and learned how simple it is to edit.
In there are 3 types of boxes: Section, Row, and Module. Basically, it’s like broader, narrower, narrowest. Think of it like Country, State, City.
The Section is the largest box. It allows you to customize the wrappers (things like the spacing around the section and such). Early on, you don’t need to worry much about this. I tend to focus most of my attention on Rows and Modules.
The Row gives you some fantastic justification with columns. First, start by selecting Add Row
A window will pop up that gives you some fantastic options for columns!
So you can have multiple rows, each with a different number of columns. This gives your website variety and a little pizazz. Here is an example from my website TaraSPorter.com of how multiple rows with different column numbers looks:
Modules are what you put within those columns. As you can see, under EACH column within a row, you can add a module by clicking Insert Module(s)
Up pops a window that allows you to pick from all kinds of modules. This is so fun! OK, I’m a nerd, so this is fun to me, not sure if it’s fun for the rest of the world. But play around with this and have some fun with it! Try different things!
One important point to remember is that you can have multiple modules in just ONE row. You’ll see in the image below taken from TaraSPorter.com—everything in this image is all ONE row. In that row, I selected a 2-column format. In one column I only have 1 module (an Image module). In the second column, I have 2 modules (a text module and a button module).
Another neat feature is that if you create a layout you really like, then you can save that as a template to use on other pages. This allows you to customize your pages and posts so much! For example, I could have my blog posts follow a certain format by creating a particular layout for that. I have a specific layout saved for my landing pages. So every time I want to create a new landing page, I can use that template that I created.
Simply scroll to the top of the Divi Builder and click Save to Library
Give the layout a name and click Save
If you ever want to access a template, you can go to the Divi builder of the page you are editing and select Load From Library
Then you can either select one of the Predefined Layouts Divi has created or to access one of the ones you saved, click Add From Library. And then Load the template you want.
Setting Up Your Customized Homepage
I walked you step by step through how to edit the template, but I thought it would be helpful to show you how I build pages in Divi from scratch, with no pre-existing template. I’m going to re-build my Homepage for you. You are welcome to do the same format for your site–of course adding your own images, wording, colors, etc:
I first start with the standard Divi view and select Insert Column(s)
I’d like to have my image next to some text and a button, so I’m going to select a 2-column format:
Next, I selected Insert Module(s)
Then I selected the Image option:
I then click Upload Photo and select the photo that I want
The Divi theme automatically ties an animation to an image module. Meaning it does this cool-looking slide in from the left side of the screen. It looks pretty sweet, but I find it slows down the loading time of my homepage. So I am going to scroll down to the Animation Section and select No Animation. Then I click Save & Exit
Let’s check out how that looks:
Then I got to work on my second module. I clicked Insert Module(s)
Then I select the Text module
I then entered in the text that I wanted to show and clicked Save & Exit
Next, I work on the second module in that column. I click Insert Module(s)
For this module, I’m going to create a Button
I enter in what text I want on the button and where I want the button to link to. I’d like to direct this to my about page where I show my various services:
I also want to edit the color, so I’m going to click Advanced Design Settings and then turn the switch from Use Custom Styles for Button from Yes to No
Then I played around with the colors, trying different combinations. I also adjusted the size of the text and button until I found a size I wanted:
And here is how it all looks so far:
I decided to add an extra layer to my homepage: giving someone an option to opt into my freebie before entering my website. Some call this a “welcome mat”, but usually welcome mats appear as a Pop-Up. I find that obnoxious. Instead, I have 2 buttons: one giving them the option to opt-in, the other allowing them to enter the site:
So there you have it! Creating a homepage is simple–and can make such a difference on your readers’ first impressions.
What questions can I answer for you about creating a homepage? Comment below! I’d be happy to help!
FREE Step-by-Step Blog Launch Checklist
If you are starting or re-launching a blog, chances are you might be a little overwhelmed with the process. In this Blog Launch Checklist, I break down everything that you need to do to get your blog running.