In case you haven’t yet heard, the Divi theme is a hard-body page and website builder available for WordPress. They’ve been kicking ass since 2013 and currently host damn well over 2.5 million live websites today. We ain’t playing. They ain’t playing.
That’s probably because the WordPress Divi Theme is an intuitive and easy-to-use website builder that brings free templates and modules to the table of every user. The drag-and-drop utility adds to the already seamless control, too.
In this step-by-step Divi themes tutorial, we demonstrate everything you need to know to get started building a super fye website in no time!
It’s pretty straightforward and has the capacity to produce some stunning designs, making the Divi website builder one of our most recommended for any project or website.
We also have an in-depth video on the subject, so give it a gander once you’re through reading this article!
Step 1: Get a WordPress Domain Name & Web Hosting Account
The very first step to getting our website crackin’ is to set up our own personal domain name. Now, a domain name is just the address for your website – it’s what people are going to type in when they’re looking for your site in the address bar.
That might look like: blahblah.com.
Web hosting is just renting space on a server somewhere that is connected to the internet so that you can store all of your media files on a website, like texts, images, videos, and more.
So if you want to own your own website (which you DO) then you have to purchase your own domain name, and the easiest way to do this is to get your own web hosting.
Yes, it’s possible to create a free website, but without your own domain name, you won’t actually own or rule over your site. In other words, wherever your site is found will be the property of said place.
These non-ownership limitations have other nasty implications too, such as you not being able to upload new themes and plugins or monetize using on-site ads. Your site could also be deleted at any time since you don’t technically own it. Yikes!
For these reasons, we recommend getting a web hosting plan to kill two birds with one stone.
Our top recommendation is Hostinger – a superbad powerhouse and one of the best web hosting services on the market these days. Not only is it crazy fast with steller overall performance, it’s beyond affordable and most plans have a free domain name loaded in.
That being said, there are other top-notch services out there too, like HostGator. This particular step-by-step Divi WordPress tutorial follows along with our video tutorial which utilizes HostGator, so we’ll keep it relevant. Remember to shop around and see what works for you.
And so, for web hosting and domain name, let’s head on over to HostGator. For starters all we need is their Hatchling Plan – it’s cheap, get the job done, and we can always upgrade later.
Here’s where you can register your very own domain name, or you can grab one that you already own if you’re ahead of the game. So choose something catchy that’s available before moving down the page (we’d recommend going with .com since it’s most popular).
Keep in mind that you’ll be buying your domain name upfront for one year, although you have the option to pay for a short-term or long-term plan, up to 36 months.
Of course, the longer the commitment the less you’ll pay, but you will be paying for everything upfront.
Then enter in your HostGator account information and billing information before moving on to the additional services bit. You can go ahead and uncheck the SiteLock Essentials add-on as well as the site backup perk.
We have other videos where we show you how to do this stuff totally for free, so save yourself the trouble.
After that, make sure everything is as tight as a cucumber, and then hit the Checkout Now box. The HostGator team will take a few minutes to set up your site and voila! We’re ready to rock!
From the initial setup portal, skip everything on the page about website set up since we’ll show you how to do all this from scratch in a minute. Just go right to the dashboard!
Sweet! And with that, we’re on HostGator’s dashboard with a spanking brand new domain name and secured web hosting account!
No matter which web host you choose this process will be more or less the same, so use your own discretion but be sure to secure your very own domain name before doing anything else!
Step 2: How to Install WordPress
Next, we’ve gotta get WordPress on the field. If you don’t know, WordPress is the most well-known and well-used website builder out there right now. They have it all and they accommodate all, so look no further for where to build your website.
It’s also what we’ll need to put together our Divi website, so there’s no skipping this step (as if you’d want to anyway).
From your HostGator dashboard, you can just install WP by going into the control panel and clicking on Install WordPress. It’s pretty simple.
Just make sure you’re on the newest version of WordPress and also make sure you’re installing it to the right domain name if you own more than one.
Then set up your site name and site description (that subheading description you find under every website title on Google).
After, create the login for the backend account under the Admin Account section. Fill that stuff in as you like. Lastly, choose your language before skipping down to the very end to Install WordPress on your website – we’ll be learning how to install themes and all that stuff later!
And in a few seconds, our beloved WordPress will now have been installed! Sweet.
A page will pop up with some helpful information, including the Administrative URL, which is actually the shortcut to the admin login page for WordPress.
It’s actually incredibly important to remember this shortcut for getting to your site, so either never forget it or just bookmark it. Hehe.
Oh, and it’ll take up to 24 hours for your web host to propagate your new website. That means that every server everywhere in the world must now be notified of your new website and domain name. Until that’s finished, you won’t be able to access your new site.
Just keep refreshing the page to check on its progress. Propagation can be completed in only a matter of minutes too!
Step 3: How to use Divi theme in WordPress
With WordPress in the bag, let’s go ahead and activate the Divi theme. Follow the link right behind this sentence to pull up our ElegantThemes (the Divi creators) affiliate link and click on Pricing.
There are 2 available Divi plans for users: a yearly access plan and a lifetime access plan. Just choose your membership package (all coming at smashing deals) before creating and registering an ElegantThemes account.
After that, you’ll get the option to download either the Divi Theme or Divi Builder Plugin. Since the Divi theme also comes with the Divi builder, we’d recommend just downloading that one.
Just log in so you can download and install the Divi theme.
Okay, so now that Divi is downloaded, log in to your WordPress dashboard using the credentials we created earlier. Once inside your WordPress site, go over to appearances and then themes in the sidebar menu.
On this page, ignore the main themes and click on Upload at the top of the page since we’re going to upload our own theme from our computer.
So you can actually install the complete .zip file which should be in your downloads after installing Divi. Once that’s over, just activate the newly uploaded Divi theme so that it’s the active theme on our WordPress site. Sweet!
That’s the simple process of how to activate the Divi theme on WordPress!
Step 4: How to use Divi – Create a header menu
The next piece of the puzzle is where we learn how to use Divi builder to start finessing a badass website. Before customizing a website, it’s best to start from the top by creating a menu and logo so we can navigate accordingly with our template already laid out.
So first we’ll be creating some new pages for our website by going over to pages in the sidebar and clicking add new. We’re gonna add quite a few pages to create a multi-page website, starting with the “homepage”.
We also added a “consultations” page, a “photoshoot” page, a “web design” page, a “videos” page, and more. Maybe you can guess which kind of website we’ll be building up for this Divi tutorial.
Needless to say, create pages and descriptions and pictures and all the other important stuff that is relevant to your business and business model. We’ll show you the general “how to” in this tutorial – the ultimate “what” is up to you.
Now, we’ll just be editing the homepage this time around for simplicity’s sake. We like to open the Divi editor by going to Divi in the left sidebar and clicking on theme customizer.
This theme customizer will break up all the sections of customization for your site, making it a jiff to play around with functional edits. Yay Divi! Let’s start by creating a new menu above the header – really brightens up a site.
Now, if you go to “add items” to the new menu, you’ll see that Divi has already added our previously created pages to the menu. Cool. You can go in and choose which pages, projects, categories, etc. you choose to add to your new menu.
And you can always reorder the menu by dragging and dropping the items where you choose. You can also make sub-menus for menu items by dropping it a little more forward under the menu item – you’ll see the dotted box outline.
So with that, we’ve created and arranged a menu. Don’t forget to publish the site to save your edits!
Oh, and we need to tell Divi which page we actually want for our homepage (even though we just created a “homepage” page, Divi doesn’t quite know for sure that that’s the homepage we desire).
For this to happen, we need to go down to homepage settings and choose our “homepage” as the static page to remain set as the homepage.
So now with our homepage and general pages set up, let’s make a logo for our website. Luckily, ya’ boys here at Create a Pro Website know how you can make a banging logo completely for free! Speaking of which, let’s find out how to do that now!
Run on over to Logomakr, a sweet website where you can make and edit logos online. Lookup a keyword for a logo and choose one you like. From there, you can add any edits that make your heart sing, including words and small symbols.
We also recommend making 2 additional versions of your logo, one without any words that can be used as a favicon later, and one with no dark black lines.
A favicon is a small icon in the web browser that accompanies each tab or website. The logo with no black lines will come in handy in case you have a transparent header; it’ll be a whole lot more visible and sexy if there are no dark lines.
In fact, there’s grave importance to any website color scheme (more on colors later), so we recommend taking the time to choose a hardcore logo that works with your overall site and won’t be easily forgotten!
For this Divi theme tutorial, we whipped up a quick logo for our photography website:
When you’re done, hit the save icon in the top right and choose to download the low-resolution file for free – that’s all we’ll be needing anyway. And just like that, you’ve got your very own logo saved on your computer!
Now to upload this logo to our site as the favicon, go to general settings from your Divi dashboard and then go to site identity. There you’ll see a button to select site icon – that’s our guy. Use that button to upload the new simplified logo you just created for your Divi website.
We also want to add a new logo to our header on our website. For that, click the “X” at the top left of the Divi page editor to get back to the WordPress dashboard. Then, go down to Divi again in the sidebar, but this time click on theme options.
Here you can navigate through a bunch of settings and parameters, including uploading a logo (look right at the top). So drop in that new logo and save your changes.
Oh and to preview changes you make at any time, go to the house icon at the top left on the WordPress dashboard that has your website name and then click on “visit site” from the small dropdown.
Our new site icon and header icon should now be in order! Nice!
Step 5: Customize a website with Divi
Now we can go right into actually editing the website using Divi builder. We’ll lay out all the essentials of the process in this Divi builder tutorial with plenty of pictures to boot so you can follow along from start to finish!
So follow the same steps we just mentioned to “visit (your) site” and open that up in a new tab. Then click on the big enable visual builder button to begin site customization.
You’ll be offered a small tour on how to use Divi, but we’ll be showing you how to use Divi builder completely, so you can just start building instead.
Then choose to use a premade layout to make this process a lot more seamless.
You’ll see a bunch of different layouts to choose from and preview whichever one you like. Some have a bunch of different pages aside from just the landing page you can download individually. You can even get a live demo of each layout.
For this tutorial, we’ll be going with one called the “Fitness Gym Landing Page”. Feel free to choose whatever tickles your fancy.
Now once you pick your logo you’ll have to enter in your username and API key to import it through. The API key is part of your ElegantThemes account (the one you created to get Divi Theme) so you’ll have to go back there to find it.
Just open up your account and you’ll see a button that reads API Keys from the management page. There you can find your key and use it to download your chosen Divi theme.
With the theme imported, we can begin making edits to any section by clicking on the gear icon that pops up when we hover over a section. There are usually 3 tabs for editing each section: Content, Design, and Advanced.
The tabs have their own features that you should explore. Oh, and aside from the gear icon, if you click on the small blue paintbrush icon, it’ll take you directly to the “design” editor for that column, section, or widget.
To save changes after your edits, always hit the green checkmark in the editor. We’ll be going in and changing all of the colors of this template to a preferred blue color just to match the overall theme we want for the site. Again, colors are important friends.
That includes buttons, box shadows, texts, borders, and all the other stuff. As you choose colors for different parts of your site, Divi will automatically save them as your favorite global colors so sticking to the theme is much easier.
Okay so with the colors aligned on the homepage, let’s work our way down from the top cleaning up and making edits. We’ll be starting with the hero section or the primary section of the landing page of your website.
There are some borders for this theme in the hero section we don’t like, so we’ll delete them by hovering over them and hitting the trash icon.
We’ll change the background text too from “gym” to “Hagen” since this is technically Levi Hagen’s site, one of our contributors (he’s killing the pro-website-building youtube game, so check him out when you can).
For the main section, we also changed the text, subtext, and button text to something more relevant. You can change everything about a text in Divi from typography to stylization to alignment. Go crazy.
After, we’ll edit the quick description in the contact form right below the main section. Divi actually has its own contact form that’s really easy to just insert. To duplicate this form, hover over the form and hit the plus button.
From here you can add any one of several modules offered by Divi builder. Search “contact” to find their pre-built contact form which comes with a “name”, “email”, and “message” section. You can always add a new field to the form or remove fields too.
Plus, once you add a new field you can decide on the parameters of the field such as the minimum or maximum length or whether or not symbols are allowed or things like that.
There are splendid editing options for any section on your Divi website. You can choose redirect links for buttons, add ReCaptcha to prevent spam, add background colors, submission success messages, and more.
The call to action looks pretty good for us, so we’ll leave it as is and jump down to the next section, the services section.
Aside from the words, the text itself could use some rearranging, so we’ll make it a little larger and play around with spacing to make it pop out. In the left-hand column, we’ll delete all the default menu items too – we’ve got something a little more spicy in mind this time.
We’ll go ahead and center the main text at the top of this column and reformat it as an H2 heading, just to give it more presence. Then, we’ll hit the plus button and add an image module beneath it. We’ll use the duplicate button to add 2 more modules just like it.
We’ll add images to each of these 3 modules and create 3 separate menu options for visitors to choose from: photoshoot, video, and web design.
To make things simple, we went back to Logomakr and whipped up some logos for each section here. Of course, you could add other kinds of images here as well. To add an image, click on the editor for the module and open up the content tab. There you can choose an image to add.
If anything is off-kilter, play with the alignment and size until you get it right.
Once we’ve added our respective logo images, we want to make them into buttons that will link to another page. In order to do this, we’ll click on one of our images (let’s start with the top) and open up the content tab of the editor.
If we go down to link we can add a URL to the image. Also, we recommend setting links to open in new tabs since you want visitors to stay on your site for as long as possible. It’s also a pain in the ass sometimes when links suddenly take you away from a page!
Next, we’ll start having some more fun by really customizing the look of our site and changing the images.
Premium content is an absolute must for website success these days; people like to look at beautiful pictures and videos. Makes their hearts sing. And so, having great content should be a top priority when building a killer website.
There are a ton of cool websites that offer high-quality royalty-free images and videos. Stock up on dope content before adding the final touches to your new awesome website.
When you add images and videos the positioning and coloring will really make or break your finesse. This theme comes with a gradient overlay which we really appreciate so we’ll leave it on.
If you ever want to see a gradient overlay more clearly, just set the start and end position of the overlay somewhere in the middle around the same number, say, 50%.
We also want to add some gradients to our call-to-action section. Remember that you can change the entire row settings by finding the corresponding editor function. The key is to look for the highlighted section to know what’s being edited. They’ll be different colors too.
Then we’ll add an about me section right under here. We’ll be adding a delightful image of Levi Hagen himself. The image loads up as too big, so we just went to the design tab under sizing to adjust the height so it’s not so pixelated. We also centered the alignment. Perfect.
Lastly, we added a nice fat bottom border in the border section of the editor – just emboldens the image. And with the image inline, we’ll add a text module beneath so we can write in some delightful things about our guy Mr. Hagen.
Quick tip: During your editing process, whichever icons are blue in the editor have already been activated and are in use. Those which are gray and more inset are not being used.
The next section beneath this one we’ll be changing into a photo gallery. This template comes stock with a 2-column section at the top and a 3-column section beneath it for this section. We’ll be leaving the top more or less as is, but removing all the text modules from the 3-column part.
We took out the button too, and we decided to change the structure of the row from 3 columns to 2. You can always change the layout/structure of your sections with the choose layout button in the quick editor.
We also want our images to take up the entire width of the screen. By that, we just adjusted the width of the rows. You can do this by opening the design tab of the row editor, going to sizing, and maximizing the width from there. Divi makes all this stuff pretty simple.
Then we’ll add an image module before duplicating it a bunch of times, just to make things faster. You can always drag and drop modules like this one, too.
While adding some images, one was a little too dark. If you ever want to adjust the visual parameters of your images you can always adjust the image filter settings, which include things like hue, brightness, saturation, and all that stuff. It’ll be in the design tab.
The following section is the testimonials section, but it looks pretty good so we’ll leave it as is.
Quick tip: If you’ve got testimonials from any big brands, be sure to include the icon of the brand somewhere close by so that it’s easily recognizable and administers immediate points to the clout scale of your website to visitors. Images (especially familiar ones) always pop out first!
Way at the bottom of our now rather kickass Divi website is the full contact section. Adjusting this section will work just like the smaller contact section we edited a bit earlier – all the same stuff.
One thing that may not be obvious is setting the input email for your contact forms. Under the content tab under contact form settings, you’ll see an email input space. This email is the email that’ll receive all the form information when someone fills out a form.
Nice. The right column we want to keep, minus a few edits to make everything coherent. And Our site’s homepage is now pretty damn organized and appealing! Don’t forget to save often so we retain all those smashing adjustments!
The next thing we want to do is add some animation effects to a section or two to give that extra “pop! umph!” when you hit up the site.
Animation can be added to any section from the very bottom of the design tab under the animation menu. Experiment with different animation styles and durations until you find what feels right!
Step 6: How to check mobile responsiveness on Divi
The final step in our Divi website builder tutorial is how to configure your site for non-desktop viewing. Divi makes this super easy to do:
At the bottom center of the Divi page builder, you’ll find 3 purple dots. Click on those dots to open up some icons. They’ll appear to the bottom left. By just clicking a button, you can switch between a desktop, tablet, and mobile view of your website! It’s that simple.
One great reason to build a website based on an already existing template is that the platform’s algorithms have already accounted for the mobile conversion of the website. That means fewer alignment and scaling errors, which account for the bulk of compression issues.
Make sure the mobile version is A-okay since over 50% of the traffic to your site will come from mobile users on the go.
Also, keep in mind that the changes you make cascade down from the desktop version to the tablet version to the phone version. Making a change on the tablet version will affect the tablet and mobile versions only, for example. Mobile version changes only affect the mobile view.
Alright guys, congratulations on making it to the end of the tutorial using the Divi theme! This tutorial (while very mature) doesn’t even begin to cover the extent of control when building a website on WordPress!
There are tons of delicious templates and cool WordPress plugins to consider when molding the perfect website! Explore all of your options, leaving everything on the table and nothing to chance!
Also, to get a more competitive perspective on the great Divi and another kickass web builder, check out our post on Divi vs Elementor!
