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.
I’ll be honest, I used to think that setting up a theme was one of the toughest parts of blogging. And I know I’m not alone: I can’t tell you how many friends of mine wanted to start a blog, but they got stuck in the “Theme” part of blogging and never quite got past it. When I taught my college students how to set up their websites, this was where they got stuck. There were so hung up on finding a blog theme that had the perfect X, Y, and Z, that they never moved on to what was most important for their site: CONTENT. I have found that the Divi WordPress Blog theme has cut out all of the stress. It’s an easy-to-use theme that allows me to set up my website pretty much however I want to set it up. It also has some template options available if you have absolutely no idea how to set up your site.
In this post, I’m going to walk you step by step through the process of setting up the Divi WordPress Blog Theme. If you do not yet have your website and hosting set up yet, I highly recommend you check out my post Setting Up A Blog: A Step-by-Step Guide before you get started.
How to Download the Divi WordPress Blog Theme
First go to the Elegant Themes website to download the theme.
Now heads up: for this theme you do purchase an annual subscription that is renewed each year. I personally have found this to be completely worth it (in the span of one year, prior to finding the Divi theme, I spent far more than the annual amount trying different themes that didn’t work). This also provides me with access to their customer support if I ever have questions. While they don’t go into my site and edit it, they do provide me with assistance on how to get my blog theme to display the specific elements that I want displayed.
Once you have purchased the subscription, you are taken to an area where you can pick your blog theme. You’ll see Installing Divi as one of the first options. In that section, click Download:
A zip file will now download to your computer. NOTE: You do NOT need to unzip the file. You actually want to upload it to WordPress as a Zip file. I’ll walk you through that in the next step.
Want some help with constructing your posts? Fill in your info below to get my FREE Post Planning Guide:
Upload Divi Theme Into WordPress
From your WordPress Dashboard (that is your website url ending with /wp-admin/) select Appearance from the side menu and then Themes:
Next, select Upload
Then Upload Theme
Next you will be asked to chose the file from your computer. Select Choose File:
Select the Divi.zip file from your computer (Remember: don’t unzip the Divi.zip file. Upload it to WordPress as a Zip file):
Then select Install Now
Next, click Activate
You did it! The theme is officially installed! Now it’s time to make it look awesome!
Set Up Your Home Page
This is the fun part! Let’s get started with creating your home page. I find this is the itch that most new bloggers want to scratch right away, so let’s do it!
From your Dashboard, select Pages and Add New
Next you’ll write “Home” as the title of the page. Then select Use the Divi Builder:
Now I want to take a quick second to talk about the Divi Builder. The Divi builder lets you select “Modules.” Basically it creates sections that each serve a particular purpose. For example, an “Image” module holds an image, a “Text” module holds a text, and so on. You’ll see the “Use Visual Builder” option (the blue button at the top of the image below)–in my experience, the visual builder is very confusing, and colleagues of mine have said the same. I’ll show you in a moment how to visually see your edits without using that. For now, select Load From Library
What we are going to do right now is to load a Pre-Defined template. I personally recommend creating your own as you get more proficient with Divi. But for now, let’s at least get you started.
The theme that I find to be a great starting point is Homepage Basic. This theme is simple, elegant, and easy to implement without you having a tremendous amount of content ready.
Want to see what it looks like? You’ll be automatically taken back to where you were editing your Home page. Now in the top right, click Preview:
In a separate tab or window on your computer, a preview of your site with the template will load. It should look something like this:
Don’t like an aspect of it? Don’t worry about it–this is completely customizable. I’m going to walk you through how to adjust it:
Editing the Home Page
Let’s start off by customizing that Slider Image.
Now 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 basically a slideshow on your homepage. You see this format in many popular websites. Often Apple.com does this on their homepage to feature their different products. You can add and customize multiple slides, but I’m going to stick with just one for 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 in the Divi Builder?
Those 3 lines!
The first text you can enter in is your Heading (see below). What do you want 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 a button that shows: “Read the Blog.”
Next, you enter the website address of where you want to direct your reader to in the section Button URL. 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.
Now let’s put in an image. Do you have an image that you want to use that fits those dimensions? I recommend making sure you put a good-quality image in there. It would be ideal if it’s of you, but if you don’t have a high-quality image of yourself, then 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 because of copyright restrictions. Pixabay images has high-quality, professional-looking images that can be used because they are free of copyright restrictions. 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 image 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 that I used. To edit this, 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 blog 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:
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:
At the moment, this particular section has a grey-colored background, as seen here:
However, 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:
Customizing 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 in the Divi Theme
Let’s say that 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 Divi there are 3 types of boxes: Section, Row, and Module. You can think of it like broader, narrower, narrowest.
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.
Adding Rows in the Divi Theme
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:
Adding Modules in the Divi Theme
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 tip 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).
Saving Templates in the Divi Theme
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. That way, 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 in 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)
Next 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)
I select the Text module
Next, I 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 Use Custom Styles for Button from Yes to No
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. Once I got it to a setting I was satisfied with, I clicked Save & Exit:
And here is how it all looks so far:
I’d like to keep my homepage at just that for now. It’s simple & easy to navigate.
Set Your Home Page as a Static Front Page
Now let’s get it to where that homepage appears right on the front of your site. In the WordPress Dashboard select Divi and Theme Customizer
Next select Static Front Page
Then make sure that Static Front Page is selected:
From the dropdown menu where it currently says Home Page, change it to the one that is Home (that’s the homepage you created earlier). You might be wondering why we didn’t just use the Home Page Divi starts with. That’s because it’s easier to start from scratch in customizing this one.
Once you are done, click Save & Publish at the top of the page.
And there you have it! Your homepage is done!!!
Do you want some more help with setting up your site? I highly recommend my Build Your Blog Online Course, I walk you step by step through the process of setting up your site & various pages on your website. I pass on my favorite strategies to create a professional-looking, user-friendly website. Click on the image below to reserve your spot: