How to Build a Divi Website: Step-by-Step Guide

Kaniz

Updated: July 24, 2023
Table of Contents

Over 2.5 million websites have been built with Divi Worldwide. 

Yup, you heard that right.

When 2.5M people are willing to invest in a premium plugin, it proves that Divi has some charm which is hard to find anywhere else. So, what’s the secret of their success?

Takes WordPress to A Whole New Level.

Wondering how? With Its incredibly advanced visual builder technology, you can craft a website easily even though you don’t have any coding knowledge.

Sounds impressive, right? Let’s see How to Create a Website with Divi from Scratch.

So, What is the Divi Theme by the way?

First of all, Divi is more than just a theme.

Instead of a post editor, it works like a visual editor. No matter which type of website you dream of, Divi has 200+ website elements to make it a reality.

Is Divi easy for beginners?

Yes, a 2k pre-made design with high customizability makes it a beginner-friendly theme. But yes, one needs time for the learning curve to get used to Divi. 

What makes Divi a multipurpose theme? It’s a customization feature. Let me show you some great things about this page builder-

  • Hover State Styling
  • Responsive Editing
  • Fonts & Text Styling
  • Shape Dividers & border options

How to Build a Website with Divi

Look:

No matter which theme you use, the initial step (like domain, hosting etc.) is pretty much the same for building a website. Let’s see the steps of How to create a website using Divi.

Step 1: Get a domain & hosting

Step 2: Fix the SSL

Step 3: Install WordPress

Step 4: Active Divi theme

Step 5: Design your website using Divi Theme 

  • Create a new page from Scratch
  • Create a new page using existing layouts

Step 1: Get a Domain & Hosting

It’s the basic yet the first baby step to start the journey in the right way. First, get a domain name which goes well with your brand or product.

You can take any domain, but for Divi, I recommend sticking with the all-time solution Namecheap.

Now come to hosting. Keep in mind that speed and performance are hugely related to hosting. And as Divi has so many elements, good hosting must support its permeance and functionality.

I always suggest Hostinger for the Divi site. Having a data centre worldwide, Hostinger maximizes the website speed professionally. And the Hosting installation is also pretty straightforward.

  • Open the official website and click “Get started”.
  • Choose the hosting plan
  • Make the payment
  • And you’re done!

Step 2: Secure Your Website with SSL

Don’t underestimate the SSL, aka Secure Socket Layers.

Forget the hacker; even the Google Chrome browser will let people know the site is not secure if it doesn’t have that HTTPS benchmark.

This is the certificate that will bring that “HTTPS” to your site, and it’s ensured that the site is safe and secure to visit. The good news is that with Hostinger, getting the SSL certificate is painless. And it’s a lifetime.

Step 3: Install WordPress

We’re almost set; now it’s time to start the game with WordPress. Like Hostinger, most of the hosting offers a one-click installation of WordPress.

Step 4: Setup Divi Theme on WordPress

How can you build up a site with Divi without installing Divi theme builder?

Yes, we’re on that stage right now. First, download the Divi theme from Elegant by paying the price.

And then upload the Divi theme on WordPress. Don’t worry; uploading the theme is also easy. All you have to do is Go to WordPress Dashboard>appearance> Theme> upload theme> Click Divi> Activate the theme.

Is Divi part of WordPress? It’s actually a popular WordPress theme.

Step 5: Design Your Website Using Divi Builder

As you can see….

I did not dive deep into the initial process of building a website as the domain hosting thing is almost the same( just touch a sneak peek). Rather, emphasize the full website design journey with the Divi theme and modules. You can create a page with Divi in two ways (actually Three).

  1. Create a new page from Scratch
  2. Create a homepage using existing layouts

Since it’s your first attempt with Divi, cloning doesn’t seem applicable to you.

Divi Theme Options Customization

Once you activate the Divi theme, your dashboard will look like this……

In the Divi section, the theme options are popping up. Look closely; We got 8 options, right?

  • General
  • Navigation
  • Builder
  • Layout
  • Ads
  • SEO
  • Integration
  • And Updates

General:

 In the general tab, you have 2 setting options-

General sub touches the usual stuff you need to touch to function well, like logo, block style mode, colour palette, sidebar layout, social media links, Google fonts, back-to-top buttons, a custom CSS block. Customize these things according to your own preference.

And for performance, you need to work the setting with CSS and Javascript to optimize, which ultimately will have an impact on the site’s speed & performance.

Navigation:

In navigation, there are 3 main subcategories-

Pages and categories consist of similar kinds of settings like showing or hiding dropdown menus, displaying a home page link, and more. And the general setting asks for your opinion on the top-tier dropdown menu link.

Builder:

There are two sub-tabs under the builder option.

Layout:

There are 3 sub-tab in this category, and they are all about how you want to display the layout on your pages.

Ads:

This category is for you if you want to display ads on your site and change the setting.

SEO:

It’s all about page SEO, how you want to handle the homage, single page and index page.

Integration:

This is a tab for cutinizing the code integration, actually. Look like-

Update:

It’s simple, setting up basic updates like username, API and version rollback.

Method 1: Build a Page from Scratch with Divi

Now we’re officially on the main road. So, how to make a website with WordPress – divi theme? Go to the dashboard and select post.

When you first open the page, you’ll most likely see something like this-

If you click the “Edit with The Divi Builder”, there will be a pop-up with 3 subheadings. As we create a page from the start, we’ll select Build from Scratch.

Now you’ll be asked to insert the row of your preference. Look at the green part of the Row design. You can select 1 row, 2 rows and even 3 rows to make the first block. Or you can simply add it from the library.

 I choose 2 row, and here they are, asking to add the module.

Put whatever you want to put on the page (text, image, heading, audio, bar); the possibility is literally endless.

Method 2: Design a Page with a Premade Divi Layout

We’ll try the premade layout here. If you click the “Browse layouts”, a huge collection of Layout packs will appear in different categories on your screen. Select one that goes well with your niche and categories and start working.

Now all you have to do is put the text, image and other stuff on that template. For example, I clicked the Divi beauty salon.

Just click and edit your content on the blocks. Divi will automatically adjust everything. And after putting everything in, click the publish button.

That’s it!

Kaniz

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *