How To Build a Website With Divi

Divi, Web Design | 7 comments

This step-by-step guide will walk you through the basics of building your own website with WordPress + the Divi theme by Elegant Themes.

Before we dive in, you should know:

This post contains affiliate links, which means I will earn commission if you decide to purchase a product using my link. I only recommend products that I personally use and love, and hope you will too.

Step 1:

Set Up Your Domain + Hosting

Purchase your domain.

Here’s what you’ll need to do:

Go to NameCheap.com*
Enter your desired domain name in the Search Bar.
Click the Search icon.
Locate the available domain, and Add to Cart.
Follow the steps to purchase.

Purchase your hosting plan.

Here’s what you’ll need to do:

Go to Siteground.com*
Hover over Web Hosting, and select Shared Hosting.
Find the StartUp plan, and click Get Started.
Select I already have a domain, and type in your domain.
Click Proceed.
Follow the steps to complete your account.

Point your domain to your hosting.

Here’s what you’ll need to do:

 Within SiteGround, go to My Accounts.
Click on Go to cPanel.
Under Account Information, copy your Name Servers.
Log in to your Namecheap account.
Select Domain Lists.
Find your domain, and click Manage.
Under the Name Servers section, select Custom DNS.
Paste your Name Servers in each field.
Click the checkmark to save.

HOVER OVER IMAGE + SCROLL TO SEE MORE

Step 2:

Install WordPress

Install WordPress on SiteGround.

Here’s what you’ll need to do:

Log in to your SiteGround account.
Go to My Accounts.
Select Go to cPanel.
Under the Autoinstallers section, select WordPress.
Click Install Now.
Under Choose Domain, select your domain.
Under Site Name and Site Description, enter your info.
Under Admin Account, enter a username, password + email.
Click Install.

(HOVER OVER IMAGE + SCROLL TO SEE MORE)

Here’s what you should see:

Default WordPress Theme

WordPress will install a default theme on your website. This is temporary before we install Divi.

Step 3:

Set Up WordPress

Add your pages.

Get started by adding standard pages such as Home, Blog, About and Contact page. 

Here’s what you’ll need to do:

 Go to Pages, select Add New.
Enter your page title.
Click Publish.
Repeat for each page.

Create your main menu.

Here’s what you’ll need to do:

Under Appearance, click Menus
Give your menu a name (i.e. Primary Menu).
Click Create Menu.
Select your Pages on the left.
Click Add to Menu and rearrange the order, if needed.
Select Display Location to Primary Menu.
Click Save Menu.

If you want to add a Secondary Menu or Footer Menu, the process is relatively the same.

HOVER OVER IMAGE + SCROLL TO SEE MORE

Set your Front + Posts page.

Here’s what you’ll need to do:

Under Settings, click Reading.
Select the A static page (select below) option.
Set the Front Page to your Home page.
Set the Posts Page to your Blog page.
Click Save Changes.

If you want to design a custom Blog page, leave the Posts Page field blank.

Set up your permalinks.

Here’s what you’ll need to do:

 Under Settings, click Permalinks.
Choose your option.
Click Save Changes.

Important: This step should only be completed if you haven’t created any blog posts yet to avoid broken links. If you have, stick to the same permalink structure you’re already using.

Install your base plugins.

Here’s what you’ll need to do:

Under Plugins, click Add New.
Use the Search Bar to find each plugin.
or use the Upload Plugin button to upload your file.
 Click Install Now.
Click Activate.

Pro Tip: Before you install, make sure every plugin:

has about 4-5 star rating + positive reviews.
has been updated within the last 3 months.
is compatible with the latest version of WordPress.

WordPress Plugins

Here are some highly recommended plugins:

FOR SEO

All-In-One SEO Pack

FOR BACKUPS

UpdraftPlus

FOR WEBSITE SECURITY

iThemes Security

Step 4:

Install The Divi Theme

Join Elegant Themes

Choose your Elegant Themes membership.

You have the option to choose a Yearly Access or Lifetime Access membership where you’ll get access to The Divi Theme, The Divi Builder Plugin, Bloom (Email Optin Plugin), Monarch (Social Sharing Plugin) + all of the other great products that Elegant Themes has to offer.

Yearly Membership

This is perfect for you is you are looking for a more affordable option. You’ll receive access to all that Elegant Themes has to offer for $89/year.

Buy Divi Now

Lifetime Membership

This is perfect for you if you are looking for the best deal. You’ll receive access to all that Elegant Themes has to offer for a one-time fee of $249.

Buy Divi Now

Download your Divi theme.

Here’s what you’ll need to do:

Log in to ElegantThemes.com
Within the Members Area, find Divi.
Click the Download button.
Save the ZIP file for the next step.

Install the Divi Parent Theme.

Here’s what you’ll need to do:

Go to your WP Dashboard
Under Appearance, click Themes.
Click Add New button.
Click Upload Theme button.
Click Choose File button, and upload your Divi ZIP file.
Click Install Now.
Once it’s been installed, click Activate.

Create a blank Divi Child Theme.

Here’s what you’ll need to do:

 Under Plugins, click Add New.
Use the Search Bar to find One-Click Child Theme.
Click Install Now.
Once it’s been installed, click Activate.
Under Appearance, click Themes.
Find Divi, and click Theme Details.
Click Child Theme button located at the bottom.
Give your theme a name.
Give your theme a description.
Click Create Child.

HOVER OVER IMAGE + SCROLL TO SEE MORE

Enable Elegant Themes updates.

Here’s what you’ll need to do:

Log in to ElegantThemes.com.
Under the Account tab, click Your API Key.
Copy your API Key.
Go back to your WP Dashboard.
Under Divi, click Theme Options.
Click the Updates tab.
Enter your username + paste your API Key.
Click Save Changes.

HOVER OVER IMAGE + SCROLL TO SEE MORE

Here’s what you should see:

Default Divi Theme

This is what your Divi theme looks like out of the box.

Step 5:

Brand Your Website

Upload your logo + favicon.

Here’s what you’ll need to do:

Under Divi, click Theme Options.
Under Logo, click Upload and choose your logo file.
Under Favicon, click Upload and choose your favicon file.

Add your brand colors.

Here’s what you’ll need to do:

Go to Color Pickers Default Palette
Enter the six-digit hex codes for each of your brand colors.
Click Save Changes.

Set your Site Identity.

Here’s what you’ll need to do:

Under Divi, click Theme Customizer.
Go to General Settings.
Select the Site Identity tab.
 Enter a Site Title.
Enter a Tagline.
Click Save + Publish.
Click the back arrow.

Set your Typography.

Here’s what you’ll need to do:

Select the Typography tab.
Adjust each to your preferred settings.
Click Save + Publish.
Click the back arrow twice.

Pro Tip: A good rule of thumb is to set the Body Text Size to about 16 to 18.

You’ll also have the option to customize your typography using CSS in future steps.

Step 6:

Style Your Header

Choose a header format.

Here’s what you’ll need to do:

Go to Theme Customizer.
Under Header Format, choose your Header Style.
Click Publish to Save.

Style your primary menu.

Here’s what you’ll need to do:

Go to Theme Customizer
Under Header & Navigation, select Primary Menu Bar.
Adjust the Menu Height.
Adjust the Logo Max Height.
Set your Font Styles and Colors.

Capture leads with Hello Bar.

Here’s what you’ll need to do:

Create your free account with Hello Bar.
Follow the steps to Create a new Hello Bar.
 Adjust your Hello Bar settings to fit your website goals.
Click the instructions link to install your Hello Bar script.
Under I use WordPress, click Download to download your preconfigured plugin.
Install + activate the plugin on your website. Follow this.
Refresh your site to view your new Hello Bar.

HOVER OVER IMAGE + SCROLL TO SEE MORE

Step 7:

Style Your Footer

Edit footer credits.

Here’s what you’ll need to do:

Go to your Theme Customizer
Select Footer > Bottom Bar.
Add your copyright credits.

Add your footer menu.

Here’s what you’ll need to do:

Go to your Theme Customizer
 Go to Menus > Select Create New Menu
Give your new menu a name
 Under Menu Location, select Footer Menu
 Click Next
 Add your Menu Items
 Click Publish To Save

HOVER OVER IMAGE + SCROLL TO SEE MORE

Insert footer widgets.

Here’s what you’ll need to do:

Go to your Theme Customizer
 Under Widgets, choose your Footer Area
 Select your widgets.
 Adjust the settings.
 Click Publish to Save

HOVER OVER IMAGE + SCROLL TO SEE MORE

Step 8:

Design The Rest Of Your Website

Choose an option that works best for you…

=
Design It Yourself

Browse Divi tutorials provided by the Divi community and teach yourself how to customize your own Divi theme. 

=
Buy A Divi Child Theme

Browse Divi child themes created by talented designers of the Divi community. Here are a few of my favorite:

=
Hire A Divi Designer

Work with a professional Divi website designer to design the website of your dreams.

Free Divi Layout Pack

Designed for creative entrepreneurs

Get a head start on your creative business website with these pre-made Home, About, Blog + Contact Divi layouts.

By signing up, you agree to the Privacy Policy.

About The Author

Hi there, I'm Britt! I'm a branding + website designer based in Austin, Texas. I started my business to help women entrepreneurs stand out online so they can make an impact on the world with their creative business. I believe in the power of good design, and how it can work for your business. Check out more posts related to Branding, Web Design, The Divi Theme, and Behind The Brand.

Are we friends on Pinterest yet? Let's fix that.

You're one step closer to downloading the Ultimate Branding Checklist for your online creative business.

Enter your name and email below and you'll be redirected to your checklist!

Success! You should be redirected to your checklist. If not, email me at hello@brandedbybritt.co.

Pin It on Pinterest

Share This