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

With over 2.5 million websites worldwide, Divi has proven its charm and success in the premium theme market. 

Its advanced visual builder technology takes WordPress to new heights, allowing users to easily craft stunning websites without any coding knowledge. 

In this comprehensive guide, we’ll walk you through the entire process of how to build a Divi website, step-by-step. 

From setting up your WordPress site to designing custom layouts, we’ll cover everything you need to know to create a website with Divi. 

Let’s get started!

Step 1: Get a Domain & Web Hosting

Choosing a domain name and web hosting are two fundamental steps in creating a website. It’s the basic yet the first baby step to start the journey in the right way. 

A domain name is your site’s unique address, so pick one that’s relevant and memorable. Web hosting on the other hand involves storing your website’s files on a server, so choose a reliable provider based on your needs. Register the domain through a registrar, set up hosting, and connect the domain to the hosting via DNS configuration. That’s it!

For Divi users, we recommend Namecheap for domain registration. When it comes to hosting, Hostinger stands out as our preferred choice for Divi sites, boasting global data centers that efficiently enhance website speed. 

Note: Ensure your website’s security with SSL (Secure Socket Layers). The absence of HTTPS may prompt Google Chrome (including other popular browsers) to label your site as insecure. Hostinger makes acquiring an SSL certificate easy, providing a lifetime assurance of a safe and secure browsing experience.

Step 2: Install WordPress

Once we are done with the domain and hosting, it’s time to install WordPress. Most hosting providers offer a one-click WordPress installation option. Look for an option like “Install WordPress” or “WordPress Installer” in your hosting control panel.

Follow the prompts to choose the domain where you want to install WordPress, set up an admin username and password, and customize other basic settings.

To further protect your site, using a password manager ensures your credentials are securely stored and easily accessible.

If your hosting service lacks a one-click installation, you can install WordPress manually by following these steps:

• Go to WordPress.org to download the installation file.
• Download the file and unzip it on your local machine.
• Use your hosting provider’s file manager or an FTP client to upload the unzipped files.
• Use your hosting provider’s database management tool to create a database for your WordPress website.
• Generate a configuration file for WordPress.
• Go to your website and follow the on-screen instructions to complete the WordPress installation.

Step 3: Configure WordPress Settings

WordPress settings play a crucial role in determining how your website functions and appears to visitors. These settings cover various aspects of your site, including its title, URL structure, comments, and more. 

To access settings, log in to your WordPress dashboard, navigate to Settings, make changes, and save. Here’s a breakdown of the essential settings you need to configure in WordPress:

General Settings:

• Site Title: Enter the name of your website, which will appear in browser tabs and search engine results.
• Tagline: Add a brief description or slogan for your site, providing visitors with a quick overview.
• WordPress Address (URL) and Site Address (URL): Specify the URLs for your WordPress site, ensuring they are accurate and accessible.
• Administration Email Address: Enter the email address used for administration purposes, such as system notifications and user management.
• Membership: Configure settings related to user registration and membership options, if applicable.
• New User Default Role: Choose the default role assigned to new users upon registration.
• Site Language: Set the language for your website, ensuring that it is accessible to your target audience.
• Timezone: Select your site’s timezone to ensure that post scheduling and timestamps are accurate.
• Date and Time Format: Choose the format for displaying dates and times across your site.
• Week Starts On: Select the starting day of the week for calendar and date-related functions.

Writing Settings:

• Default Post Category: Select the default category for new posts.
• Default Post Format: Choose the default format for new posts, such as standard, gallery, or video.
• Post via Email: Configure settings for posting via email, allowing you to publish content remotely.
• Update Services: Enter the ping services to notify when you publish new content, helping increase visibility.

Reading Settings:

• Front Page Displays: Choose whether your homepage displays latest posts or a static page.
• Blog Pages Show at Most: Set the number of blog posts displayed per page for optimizing site performance.
• Syndication Feeds: Configure settings for your site’s RSS feeds which will allow users to subscribe to your content easily.
• For each post in a feed, include: Choose between full text or summary for blog posts in RSS feeds.
• Search engine visibility: Control whether search engines can index your site. 

Discussion Settings:

• Default Post Settings: Specify default settings for comments and trackbacks to controll how users interact with your content.
• Other Comment Settings: Configure settings related to comment moderation and notification for managing user engagement.
• Email Me Whenever: Choose whether to receive email notifications for various comment-related events and stay informed about user activity.
• Before a comment appears: Control whether comments need manual approval before being visible to prevent spam.
• Comment Moderation: Define criteria for automatically holding comments for review, based on factors like the number of links or specific words indicating potential spam.
• Disallowed Comment Keys: Enter words, phrases, or URLs triggering automatic comment moderation or marking as spam.
• Avatars: Decide whether to display user avatars alongside comments and set the default avatar for users without a custom image.

Media Settings:

• Image Sizes: Set dimensions for thumbnail, medium, and large images, optimizing image display across your site.
• Uploading Files: Configure settings for organizing uploaded files, ensuring efficient media management.

Permalinks Settings:

• Common Settings: Choose a permalink structure for your website URLs, optimizing SEO and user-friendliness during a website audit.
• Optional: Customize the permalink structure using custom settings, tailoring URLs to specific content types.

Privacy Settings:

• Privacy Policy Page: Select the page that contains your site’s privacy policy, ensuring compliance with data protection regulations.

Step 4: Setup Divi Theme on WordPress

Now, it’s time to configure the Divi theme. Keep in mind that Divi is a premium theme from Elegant Themes, requiring a purchase and installation. So here are the things to do, 

First, download the Divi theme from Elegant by paying the price. Then navigate to your WordPress Dashboard and follow the instructions below,

• Go to Appearance > Themes.
• Click “Add New” and choose “Upload Theme.”
• Select the Divi Theme ZIP file and click “Install Now.”
• After successful installation, click “Activate” to make Divi your active theme.

You must authenticate your Divi theme with API keys from Elegant Themes in WordPress Dashboard > Divi > Theme Options > Updates. Input the key, and click “Save Changes” to ensure access to updates and customer support.

Note: If you’re using one of Divi’s partner hosting accounts, the theme will be automatically installed for you. However, the outlined process is all you need to follow for external hosting services.

Step 5: Configure Divi Theme

After installing and activating the Divi theme, your site’s front end will display the default Divi theme. Before moving on further proceeding we need to configure some essential tasks.

Divi Theme Options Configuration

Within the Divi Theme Options, you’ll find 8 different settings to fine-tune your website. Let’s break down the 8 available options:

1. General: Under the General tab, you’ll find settings for essentials like logo, color palette, and social media links, customization options such as sidebar layout and Google fonts, and performance optimization through CSS and Javascript adjustments for improved site speed.
2. 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.
3. Builder: There are two sub-tabs under the builder option including Posts Type integration and some Advanced settings.
4. Layout: There are 3 sub-tabs in this category, and they are all about how you want to display the layout on your pages.
5. Ads: This category is for you if you want to display ads on your site and change the settings.
6. SEO: It’s all about page SEO, how you want to handle the homage, single page, and index page.
7. Integration: This tab facilitates code integration customization.
8. Update: It’s simple, to set up basic updates like username, API, and version rollback.

Configure Global Settings

Configuring the Divi theme involves global settings like color, typography, header, and footer. By configuring these settings, you can maintain consistency through the design process for future pages and posts. 

• Color: Divi’s color management system is among the most robust in WordPress. With the ability to edit and create saved, global, and recent color palettes based on user interaction Divi’s magic color system simplifies the color selection process and ensures consistency throughout your website design. 

Simply follow these steps to configure global color,

• Navigate to WordPress Dashboard > Divi > Theme Options.
• Locate “Color Pickers Default Palette” and choose eight colors for your design.

• Typography: Within the typography panel, you can modify the default text appearance site-wide, including adjusting body and header font sizes, colors, line heights, letter spacing, and font styles. 

Simply follow these steps to configure global typography in Divi,

• Go to WordPress Dashboard > Appearance > Customize.
• Select General Settings > Typography.
• Customize font size, and style, and select fonts for different sections like the header and body.

Header and Footer Design

The Divi Theme Builder revolutionizes website design by allowing the dynamic addition of global headers and footers to pages and posts. You can seamlessly create a custom header or footer using the Divi Builder and apply it across your entire Divi website.

To create a Global Header,

• Access Dashboard > Divi > Theme Builder > Add Global Header.
• You will find two options here, Build a global header and Add from the library.
• Insert multiple rows for optimal menu design.
• Add an “Image” module to upload a logo.
• Then insert the “Menu” module and select a menu or create a new one. 
• Finally, personalize the header from the module settings. (You can adjust the background color to the text color, apply hover effects, and more.)

To create a Global Footer, 

• Navigate to Dashboard > Divi > Theme Builder > Add Global Footer > Build Global Footer.
• Customize the design, add rows, and insert modules such as links, social icons, terms, and signup forms as needed.

Step 6: Create Essential Pages and Menu

Time to map your website’s flow. Let’s start with the page creation. 

• In the WordPress dashboard, navigate to the Divi section on the left. Hover over it and select Theme Options.
• Next, go to the Pages option on the left-hand side of the dashboard. Select Add New. Alternatively, you can use the admin bar at the top of the page. 
• Hover over the “+ New” option and click on Page.
• Name your page, starting with the Home page. Enter the title in the designated field and click on “Publish”. 
• Repeat these steps for each new page you want to add. Start by creating pages such as About Us, Services, Blog, and Contact Us. 

This sets the foundation for your website structure, which you can later customize and style.

As we near completion, the final step is setting up a navigation or menu for the Primary Header. To do so, 

• Navigate to the Appearance option on the left-hand side of the WordPress dashboard and hover over it. Then, select “Menus.”
• Click on “Create a new menu” and input your desired menu name in the Menu Name box. 
• Click the blue “Create Menu” button. On the left-hand side, you’ll find options to add various types of pages, posts, or custom links.
• Click on the “Pages” tab to view a list of all created pages. Select the ones you wish to include and click “Add to Menu.”
• Ensure to check the box for “Primary Menu” or “Secondary Menu” based on your menu type. Then, click “Save Menu.” 
• If creating a menu for the footer of your website, select the “Footer Menu” option in a similar manner.

Step 7: Design Your Website Using Divi Theme and Builder

Now that we’re on the main road, let’s explore how to create a website using the Divi theme. There are two primary methods for building with Divi:

1. Method 1: Construct a page from the ground up with Divi.
2. Method 2: Design a page using a pre-made Divi layout.

Design the Home Page

Imagine we’re tasked with designing an agency layout in Divi. Such a layout’s homepage typically includes essential sections like the hero, about us, services, testimonials, portfolio, and contact us. Each section must be carefully crafted with vital details and descriptions to effectively showcase the agency’s offerings, achievements, and client satisfaction.

To begin, navigate to Dashboard > Pages > All Pages > Home > Edit with Divi to initiate the building process.

Now, let’s delve into a comprehensive guide to creating an impactful agency layout using Divi:

Step One: Designing the Hero Section

Begin by designing a prominent hero section featuring a captivating headline, subheadline, and call-to-action (CTA) button.

Customize the hero section by selecting a background color that aligns with your branding.

Next, create two rows within the hero section:

• In the first row, use the Heading, Text, and Button modules to create an attention-grabbing headline and subheadline.
  

Since the default Divi heading and text module lack in customization option, we recommend using DiviFlash’s Advanced Heading Module. It offers diverse design options for Title Prefix, infixs, and Suffix, along with dual text, dividers, custom borders, and more.

• In the second row, insert an image module to visually showcase your agency’s unique visual identity.

Step Two: Crafting the About Us Section

After the hero section, focus on the ‘About Us’ segment to introduce your agency.

Change the section’s background color and add two rows:

• In the first row, insert an image module to visually represent your agency.
• In the second row, use the heading, and text modules to highlight key aspects of your agency’s story.

Step Three: Showcasing Services

Create a dedicated ‘Our Services’ section to outline the offerings of your agency.

Start by adding a section with a background color that aligns with the previous section.

Insert a three-row in two columns to visualize six different services:

• Use the blurb modules in the first row to present the service you’re offering.
• Repeat the process for the remaining rows, maintaining consistency in design and layout.

Step Four: Displaying Testimonials

Enhance your agency’s credibility by showcasing customer testimonials. Start by applying a distinct background color to set this section apart from others.

• Add a new section with a single row and insert the blurb module to include a title.
• Next, add another row just below the previous one and insert the slider element. Utilize its advanced content element options to add and design testimonials.

Alternatively, you can opt for DiviFlash’s Testimonial Carousel Module for enhanced features such as a regular slider or overflow, device-specific settings, actionable animations, item order, and more.

Step Five: Highlighting Portfolio

Showcase your agency’s portfolio to demonstrate expertise and quality work.

Create a ‘Portfolio’ section with the same background as the service section.

• Use the blurb modules in the first row to present the heading.
• Add multiple rows and insert the Gallery modules to display portfolio items effectively.

Step Six: Including Contact Us Section

Now the last part, incorporating a ‘Contact Us’ section facilitates smooth communication with your customer.

Start by adding a new section with a background color that aligns with the previous sections.

Insert two rows:

• The first row will feature the contact field, while the second row will display essential information about your agency. 
• Utilize the Contact Form module in the first row to design the form with the input field and a submit button. Consider using one of DiviFlash’s three Contact Form Styler Integrations (WP Form, Contact Form 7, and Gravity Form) to customize your form design even better.
• Use the Blurb module in the second row to offer a concise overview of your contact details. 

After adding all content elements, click the ‘Save’ button to preserve your layout and preview it to ensure a seamless user experience. That’s it. 

Design Other Essential Pages

Beyond the homepage, an Agency website also includes other essential pages like the About Us page, Services page, Portfolio page, Blog, and Contact Us page. Access each page individually from the dashboard’s page option and enable the visual builder to design them individually. 

Here’s a breakdown of designing these essential pages:

1. About Us Page: For the About Us page, include sections detailing your site’s history, team, mission, and more. Utilize Divi modules such as Image, Text, Blurb, Bar Counters, Button, and Video to create a compelling narrative.
2. Services page: On the Services page, provide comprehensive information about your products or offerings. Use modules like Image, Text, Blurb, Accordion, Portfolio, Call to Action, and Pricing Tables to effectively showcase your services and encourage engagement.
3. Portfolio page: The Portfolio page showcases your agency’s past projects and successes. Display your best work in an organized and visually appealing manner to demonstrate your capabilities to potential clients.
4. Blog Page: The Blog page is where you’ll feature blog posts or articles in chronological order. Create a section and row, then use the blog module with its customization options to style and organize your content effectively.
5. Contact Us Page: The Contact Us page provides visitors with essential contact information and a means to reach out to your agency. Include a contact form, phone number, email address, and physical address to make it easy for visitors to get in touch.

Remember to save your work as you add sections, rows, and modules based on your design requirements. 

Design a Page with a Premade Divi Layout

Designing a page with a premade Divi layout offers a convenient and efficient way to create stunning web pages with minimal effort. Divi provides a wide range of professionally designed layouts that can be easily customized to suit your specific needs and preferences.

There are multiple options to use a layout. You can either choose one from Divi’s template library or upload one any of the existing pages we have created before (This required setting up the menu and configuring global settings before inserting the layouts.)

After completing the preliminary steps, follow these instructions to add a layout to your homepage. 

Install a free layout pack from Divi:

• Begin by adding a new page to your website in WordPress. Alternatively, use the already created Homepage. Simply navigate to the WordPress Dashboard > Pages > Homepage > Edit with Divi
• Select the “Choose A Premade Layout” or “Browse Layouts” from the three options displayed. This allows you to browse and select from a variety of pre-designed Divi layouts.
• Use the search and filter options on the sidebar to find your desired layout pack. Click on it, then click “Use This Layout” to load it onto the page.
• Customize the layout according to your preferences using the Divi Visual Builder. Once satisfied with your modifications, click the ‘Save’ button to save your changes.

Import a layout pack from an external source:

You can import a layout in Divi in two different ways: Through the Divi library, and through an existing page. 

Through the Divi library:

• Go to your WordPress dashboard and navigate to Divi > Divi Library.
• Click on “Import & Export” located on the top left side.
• Choose “Import” and select the pre-downloaded layout file.
• Click “Import Divi Builder Layouts” to complete the import process. The layout will now appear in the Divi library section.
• To use the imported layout, go to any existing page and click “Edit with Divi.”
• Choose “Choose A Premade Layout” or “Browse Layouts” from the options displayed.
• Under “Your Saved Layouts,” click on the layout you imported to load it onto the page.

Through an existing page:

• Go to your WordPress dashboard and navigate to Pages > Homepage > Edit.
• Click on “Edit With The Divi Builder” and select “Build From Scratch.”
• Scroll down to the bottom rounded setting and click on “Portability.”
• Choose the Import option and upload the pre-downloaded layout file.
• Click on “Import Divi Builder Layout” to upload the layout.
• Before importing, ensure to check the “Replace Existing Content” option.

Repeat the same process for other pages and customize them as needed to ensure consistency and reflect your brand or business identity.

Additionally, you can explore DiviFlash’s extensive library of full-site and single-page premade layouts for swift website design. Simply navigate to DiviFlash’s main website, heading over Layouts and then Landing Page Layouts. Download your desired layout and import it for immediate use.

Final Thoughts

Throughout this guide, we’ve explored the step-by-step process of building a website with Divi, from setting up a WordPress site to designing various pages and utilizing Divi’s powerful features like the Theme Builder and Visual Builder. 

Whether you’re creating a global header, customizing page layouts, or adding dynamic elements like testimonials and contact forms, Divi offers the tools and flexibility to tailor your website to your unique needs and brand identity.

For enhanced functionality, consider using Divi extensions like the DiviFlash, a plugin seamlessly integrating with Divi. With over 40 new custom modules, DiviFlash offers additional creative options for your website.

We’d love to hear about your preference for starting from scratch or using a layout, as well as the type of website you have in mind. Let us know your experiences in the comments below.