How to Build a Website with Divi from Scratch?

Imagine being able to create stunning websites of any kind within minutes, even if you have zero coding knowledge. That’s exactly what Divi lets you do.

Divi, the most popular WordPress theme and page builder, boasts over 4.1 million users. With its drag-and-drop visual builder, even a complete beginner can easily create a professional website.

What’s more, Divi boasts an extensive library of premade layouts, handy extensions, modules, and compatibility with third-party plugins, ensuring you have all the tools required to bring your digital vision to life.

Uncover the secrets of website creation with Divi, from domain selection to launching your site, all in this user-friendly, all in this comprehensive guide.

Steps to Build a Website With Divi

Unlike many guide blogs, we won’t demonstrate the website-building process using pre-configured layouts. Instead, we’ll guide you through creating a complete website from scratch, just like a professional web designer.

We’ve broken down the site-building process into five major steps, each with its own set of substeps:

Get a Domain Name and Web Hosting

Hosting and domain registration are fundamental requirements for a website. Domains are like digital storefronts that visitors will see first. As for hosting, it’s the platform that stores your website’s files and makes them available to visitors.

Register a Domain Name:

Domain name is the address of your website, and that’s why it’s necessary to choose a name that reflects your brand or business. The best practice is to choose a domain name that is short, simple, unique, relevant, and memorable. Some of the well-known and reliable domain registrars are Namecheap, Domain.com, GoDaddy, Bluehost, etc.

Choose a Hosting Provider:

When choosing a hosting provider, prioritize accessibility, security, and reliability in customer service. Hosting is the gateway to your website’s online presence. Consider reputable hosting providers, such as SiteGround, Bluehost, HostGator, WP Engine, Cloudways, etc.

Important: Protect your website with SSL (Secure Sockets Layer). It encrypts all data exchanged between a website and its users, keeping data safe from threats. Most hosting providers offer SSL for free, and you can also purchase it from providers like Comodo SSL, DigiCert, and SSL.com.

You can also obtain a free SSL certificate from Let’s Encrypt and Cloudflare.

Install WordPress CMS System

Once you have both the domain and hosting, it’s time to install WordPress. Most hosting providers offer one-click installation. Simply log in to your hosting account’s control panel, find ‘One-Click Install’, choose the WordPress icon, then click ‘Install,’ and follow the on-screen instructions.

Alternatively, if your hosting service does not offer one-click installation, follow the following instructions. Here, you’ll learn how to install WordPress manually :

• Visit WordPress.org to download the WordPress installation file
• Download and unzip it, then upload it using your hosting provider’s file manager or a FTP client
• Create a database for your WordPress website using your hosting provider’s database management tool
• Create a configuration file, then visit your site and follow the on-screen instructions to complete the WordPress installation

Install the Divi Theme on Your WordPress Site

Most likely, your website is up and running now, so it’s time to configure the Divi theme. Divi is a premium theme from Elegant Themes, so you’ll need to purchase and install it. Follow the instructions below:

• Choose one of Elegant Themes’ membership packages (yearly or lifetime access)
• Then, download the zip file and upload it to WordPress. Follow the following path: 

Dashboard>appearance> Theme> Upload Theme> Click Divi> Activate the theme

Note: Make sure you authenticate your Divi theme with the API keys that you will find in the Elegant Themes’ Members Area. Update the key by going to:

WordPress Dashboard > Divi > Theme Options > Updates

Input the API key and click on “Save Changes.” Authenticating your Divi account is mandatory in order to receive theme updates and customer support.

Start Designing Your Site with Divi Theme

From domain hosting to WordPress and theme installation, everything is done. It’s time to start building your website. We’re going to create a beautiful and unique business website layout to show you the complete website creation process.

Beginning a website design requires a series of easy-to-follow steps, which we’ll break down into 5 main steps, each with a group of substeps. Let’s begin:

Step 1: Create Essential Pages and Menu

Start by logging in to WordPress. Then, create the essential website pages, such as the homepage, about, services, blog, etc. Following the creation of these pages, set up your website’s navigation menu to make browsing as convenient as possible.

• Page Creation: 

For our business website layout, we’ll include four pages. As of now, all we have to do is create the pages and style them later:

1. Go to Dashboard > Pages > Add New
2. Enter a title for your page, such as ‘’Home’’
3. Then click on ‘’Publish,’’ and you’re done

Note: As well as creating a “Home” page, begin creating About Us, Services, and Contact Us for your website by following steps 1-3.

• Create a Menu: 

Creating a menu is a fundamental step in web development as it’s the most effective way to help your visitors navigate throughout your website. You can easily create a menu by following the section below: 

1. Go to Appearance > Menus in your WordPress dashboard
2. Create your menu by entering a name in the Menu Name field
3. Tick on “Select All” and then Add to Menu (rearrange the menus as you need)

Make sure to select a suitable location for the menu on your website, and the primary menu is the ideal place. After choosing a location, click “Save Menu” to save your changes.

Step Two: Configure Divi Theme

Configuring the Divi theme involves global settings like color, typography, header, and footer. By using these global settings, you won’t have to customize certain settings every time you create a page or post. Guide to configuring global settings: 

• Color

Designing a website requires the use of multiple colors, and it can be tedious to input color codes every time for your design. To simplify the process and ensure consistency, you can utilize a color palette option. Here’s how to do it:

Navigate to the WordPress Dashboard > Divi > Theme Options

Following that, you will see a menu option called “Color Pickers Default Palette.” Here, you can select eight colors that you can use throughout your website design.

• Typography

Ensuring consistent typography in your theme can contribute to a more professional-looking website. Here’s how to set up global typography in WordPress:

1. WordPress Dashboard > Appearance > Customize
2. Select General Settings > Typography

There, you can customize font size, and style, and select fonts for different sections of the website, such as the header and body.

• Header

Header is the first section visitors see and typically contains site branding and the navigation menu. Hence, creating a global header will maintain consistency and ensure a user-friendly experience for your visitors.

In this section, we’ll walk you through the process of creating a global header that will be used across your entire website. Let’s get started:

Dashboard > Divi > Theme Builder > Add Global Header > Build Global Header

• Now, design the section by clicking on the section settings icon (If you want to change the default look).

• Insert row by clicking on the green “+” button (a single row is ideal for good menu design).

• Then insert the “Menu” module and customize it based on your preferences.

Divi modules have three main categories, including content, design, and advance. If you don’t know coding, only the first two categories are good enough to design a stunning website. 

Select your menu from the “Menu” option, upload a logo, and customize the background color. You can adjust the text color, apply hover effects, and more through the ‘Design’ tab.

• Footer

The global footer is as important as the global header, as its primary goal is to provide a seamless user experience for your visitors. Make sure to design a footer that represents a cohesive and informative element of your website. 

Dashboard > Divi > Theme Builder > Add Global Header > Build Global Header

Afterward, you can make necessary changes to the section’s design, add rows by clicking the green “+” button, and insert modules as needed. Usually, footers have links, social icons, terms, signup forms, and more, all set up in multiple columns.

Step Three: Design the Home Page

As mentioned earlier, we’ll have a total of 4 pages for our business website layout. Let’s start with the ‘’Home’’ page, where you can add sections, rows, and modules to suit your needs.

For the homepage, focus on the first or hero section with the headline, subheadline, and CTA button. Also, make sure to include sections for your products or services, social proof, featured blog posts, testimonials, search bar, sign-up form, etc.

We’ll add all of these sections to our homepage design and show you the process. 

• Hero Section:

Hero section is the highly visible area visitors see when landing on a web page without scrolling down. Hence, it’s essential to design it with key content elements that convey your message and engage users. 

Here is how to design a stunning hero section: 

1. Dashboard > Pages > All Pages > Home > Edit with Divi > Start Building
2. Click on the section’s setting icon to change the background color (choose a background color for the entire section)
3. Click on the green plus icon and add 2 rows
4. In the first row, click “+”, then insert modules. Use heading, text, and button module for the first row
5. In the second row, insert an image module to add an image

About Us Section:

After the hero section, we’ll add the ‘’About Us’’ section to display business-related information. In this section, we’ll change the section’s background color and add two rows. Here are the modules we’ll use in these rows:

1. Insert an image module to add an image in the first row
2. In the second row, add heading, text, and bar counter modules

• Our Service Section:

In this service section, you can provide details about your services or business. We’ll add two rows and multiple modules to design our services page. First, add a section, change the background color, and then insert a single row.

Once you’ve inserted the row, it’s time to start designing:

1. Add a heading module for heading text and a text module for text
2. Click on the green “+” icon to add another row; this time, add three rows
3. Use the blurb and button module in the first row to showcase the service
4. Apply the same modules and design the remaining two rows

• Customer Review or Testimonials

Customer testimonials or reviews enhance credibility; therefore, it’s necessary to add reviews that attract user attention. Divi has a testimonial module, but its functions are very minimal.

To make the review section stand out, we’re using  DiviGear’s Divi Carousel Module 2.0. It comes with advanced features like single or multi-slide options, Auto-play and pauses on hover, loop, coverflow , lightbox, social icons, rating options, etc.

Using Divi carousel is like using any other Divi module, and here is the breakdown of it:

1. Add a new section, a single row, and then insert the Divi carousel module
2. Click on “Add New Item” to add and design the testimonial with Divi Carousel’s advanced content element add and design options
3. Follow the same method, and then add as many reviews as you want

• Email Signup Section:

Building an email list, nurturing leads, and promoting your services becomes easier when you incorporate a newsletter signup form into your website. Start by adding a new section, followed by two rows text, and contact form modules.

Follow the section below to create a functional signup section:

1. Add a heading and text module to tell about why to sign up briefly
2. Then, insert the contact form module to include a signup form

Note: When you’re done adding all your content elements, click the ‘’Save’’ button on the bottom-right corner, then preview it.

Step Four: Create and Design Other Pages

Having finished the homepage design, it’s now time to create other pages such as About Us, Services, Blog, Contact Us, etc. Access each page individually from the dashboard and design them by enabling visual builder. 

Simply add sections, rows, and modules based on your design requirements, and remember to save your work. Here are some module suggestions for pages like About Us, Services, Blogs, and Contact Us:

• About Us Page: 

About Us is one of the essential pages of a website, where you’ll include information about your site, organization, or business. This is the place where site owners typically include the site’s history, team, mission, or any other relevant information.

It’s up to you how many sections you want to include on this page, but certain Divi modules let you design a fantastic About Us page. They are:

• Image
• Text
• Blurb
• Bar Counters
• Button
• Video

• Services Page: 

The services page is the only dedicated page where you provide information about your products or services. This page’s primary purpose is to let visitors know about your business or service so that they engage, purchase, or take action.

Add a number of sections and rows based on your needs, then use these Divi modules to design content elements of your services page:

• Image
• Text
• Blurb
• Accordion 
• Portfolio
• Call to Action
• Pricing Tables

• Blog Page: 

The blog page is where you display blog posts or articles chronologically. It’s the primary location for organizing content, using blogs and other essential modules. To set it up, add a section and row, then use the blog module with its customization options for styling.

Note: This is how you can build a website with Divi from scratch. Add as many pages as you want and use modules to add and style content elements. 

Step Five: Use Pre-configured Layouts

Rather than building a website from scratch, you can utilize Divi’s library of over 2000 premade layouts for quick site design. Start by creating your desired pages, setting up your menu and global settings, and then insert the layouts.

After completing all the previous steps, you can now add layouts. We’ll demonstrate how to add a layout to the homepage, and you can apply the same method to all other pages:

1. WordPress Dashboard > Pages > Homepage > Edit with Divi
2. Then click on “Browse Layouts” from the window that appears
3. Now select a layout, or you can use the search option to find one
4. Select your preferred page layout and then click on “Use this Layout”

That’s it. It’ll take a few seconds to import the layout onto your page. Once the import is complete, you can customize each aspect to meet your design preferences, then click the ‘Save’ button to save the changes.

Note: Apply the same layout importing process to different pages, and then customize the design to fit your brand or business. 

Final Thoughts

Congratulations! Now you know how to build a Divi website from scratch using a pre-configured layout. With either process, you’ll be able to create an interactive, incredibly functional Divi website in no time.

Divi is a versatile theme suitable for various types of websites, and the library of 2000+ professionally designed layouts makes the process easier. Begin building your dream site today.

Feel free to let us know your choice between starting from scratch or using a layout, and we’d love to hear about the type of website you have in mind. Happy website building.