How to Build a Website with Divi: Step-by-Step Guide for Beginners [2025]

If you’re planning to build a website in 2025 and want something flexible, powerful, and beginner-friendly, Divi is a smart choice. Whether you’re launching a personal blog, a business site, or a portfolio, Divi’s visual builder and pre-made layouts can help you get online fast—without touching a single line of code.

In this guide, I’ll walk you through how to build a website with Divi from scratch. You’ll learn everything—from installing WordPress to customizing your site with the Divi Builder. This post is designed for total beginners, but even experienced users may pick up a few tricks.

Let’s begin by understanding what Divi really is and what you need before launching your first site.

What is Divi Theme and Divi Builder?

Divi is a popular WordPress theme and website builder developed by Elegant Themes. But it’s more than just a theme—it’s a complete visual design framework that lets you build custom websites with drag-and-drop ease.

Divi Theme vs Divi Builder

If you’re new to this, you might come across two terms: Divi Theme and Divi Builder. The Divi Theme is a full WordPress theme that includes the builder. The Divi Builder, on the other hand, is a standalone plugin you can use with other WordPress themes. Most people starting fresh go with the theme because it’s fully integrated and beginner-friendly.

Why Divi is Great for Beginners

• It comes with over 2000+ pre-made layouts you can install in one click
• No coding needed: Everything is done with a visual builder
• It’s mobile-responsive and customizable across devices
• Includes a powerful theme builder for headers, footers, blog templates, and more
• Backed by a strong community, regular updates, and excellent documentation

A study by BuiltWith shows over 4 million websites currently use Divi, making it one of the most trusted WordPress themes in the market.

If you’re looking for a WordPress theme that works for agencies, freelancers, small business owners, and bloggers, Divi is a reliable bet.

In the next section, we’ll look at exactly what you need to get started—your domain, hosting, and Elegant Themes subscription.

What You Need to Get Started with Divi

Before we dive into building your website, there are a few things you’ll need to have ready. These are the foundation of any WordPress website, and getting them right at the start can save you time and hassle later on.

Choose a Domain Name

Your domain name is your web address—something like yourbrand.com. It should be short, easy to remember, and ideally include your business name or relevant keywords.

You can register a domain from popular providers like Namecheap or GoDaddy. Most hosting companies also offer domain registration during checkout, which can simplify the process.

Tips for choosing a domain:

• Avoid hyphens or complicated spellings
• Prefer .com extensions if available
• Check for trademark conflicts

Get Divi-Compatible Web Hosting

Next, you’ll need a WordPress-friendly hosting provider that works smoothly with Divi. While Divi works on almost any host, performance matters. A fast, secure, and reliable host can drastically improve your site’s speed, SEO, and user experience.

Some of the best Divi-optimized hosting providers include:

• SiteGround – Known for excellent speed, security, and support
• Bluehost – Recommended by WordPress.org and affordable for beginners
• Cloudways – Offers better scalability and cloud hosting for growing sites

Make sure your hosting plan supports:

• PHP 7.4 or higher
• MySQL 5.6+ or MariaDB 10.1+
• HTTPS (SSL certificate)
• WordPress auto-install or cPanel access

Purchase a Divi Theme License

To use Divi, you’ll need to buy a license from Elegant Themes. You can choose between:

• Yearly Access ($89/year)
• Lifetime Access ($249 one-time)

Both give you unlimited website usage, updates, support, and access to other Elegant Themes products like Bloom and Monarch.

Pro tip: Elegant Themes runs big sales during Black Friday and Cyber Monday, where you can get up to 30–40% off. It’s worth waiting for if you’re planning ahead.

Installing WordPress and Divi Theme

Once you have your domain, hosting, and Divi license ready, it’s time to install everything. This process is simple, and most hosting providers offer one-click tools that make setup fast and painless.

Install WordPress on Your Hosting Account

Most beginner-friendly hosts like Bluehost and SiteGround offer a one-click WordPress install from their control panel. Just select your domain, enter your site name, and follow the prompts. In under 5 minutes, you’ll have WordPress installed.

If you’re using a more advanced host like Cloudways, you’ll use a custom control panel to deploy WordPress on a cloud server (like DigitalOcean or AWS).

Once installed:

• Set your permalinks to “Post name” under Settings > Permalinks
• Delete the default post, page, and plugins you won’t use
• Set your timezone and site title

Upload and Activate the Divi Theme

Here’s how to install the Divi theme in WordPress:

1. Log in to your WordPress dashboard
2. Go to Appearance > Themes > Add New
3. Click Upload Theme, then upload the Divi.zip file from Elegant Themes
4. Click Install Now, then Activate
5. Next, go to Divi > Theme Options and paste in your Elegant Themes API key to enable automatic updates

Once activated, you’re ready to start building your website.

How to Design Your Website Using Divi Builder (Step-by-Step Guide)

Now that Divi is installed and running, it’s time to design your website. This part is fun—you’ll be able to see your changes live as you make them using Divi’s Visual Builder. Whether you want to use a ready-made layout or build from scratch, I’ll guide you through both.

Option 1: Use a Pre-Built Layout Pack (The Fastest Way)

Divi includes 2,000+ professionally designed page templates for all types of websites—business, restaurant, portfolio, blog, personal brand, and more.

Step-by-Step: Load a Layout Pack

1. Go to your WordPress dashboard
2. Click on Pages > Add New
3. Name your page (like “Home”) and click Use Divi Builder
4. When prompted, choose “Browse Layouts”
5. Use the search bar or filter by category to find one that matches your niche
6. Click on any layout pack you like
7. Click “Use This Layout”

Divi will automatically import the layout, including:

• Section structure
• Images and icons
• Pre-written text (you can replace this later)
• Mobile-optimized design

Pro Tip: Even if the layout doesn’t match your exact business, you can replace the content and images without affecting the design.

Option 2: Build a Page From Scratch (With Drag & Drop)

Want full control over every section of your site? You can also design pages from scratch using Divi’s drag-and-drop builder.

Step-by-Step: Build a Custom Page

1. Go to Pages > Add New
2. Click Use Divi Builder
3. Select “Build From Scratch”

You’ll see a blank canvas with three layers:

• Sections (Blue) – these are the main building blocks (like a hero area, testimonial section, or footer)
• Rows (Green) – these divide your section into columns (e.g., 1-column, 2-column, 3-column layout)
• Modules (Gray) – these are your content blocks (text, images, buttons, forms, etc.)

Step 1: Add a New Section

Click the blue “+” to insert a new section.

Step 2: Add a Row

Choose your layout (e.g., 2 columns)

Step 3: Add Modules

Click the gray “+” to add a module inside any column. Some beginner-friendly modules include:

• Text Module – for headings, paragraphs, or instructions
• Image Module – to upload logos or photos
• Button Module – for links, CTAs, or “Learn More”
• Blurb Module – perfect for features or services (icon + title + text)
• Contact Form – to let visitors send messages

Click any module to open the settings panel. From there:

• Use the Content tab to enter your text or images
• Use the Design tab to change fonts, spacing, shadows, and more
• Use the Advanced tab if you want to add custom CSS later

Preview on Mobile: Click the device icon in the bottom panel to switch views and see how your design looks on tablet or mobile.

Save Your Work: Click the purple button at the bottom and hit Save to avoid losing changes.

This is the exact process you’ll repeat to build pages like:

• Homepage – include a banner, services, testimonials, contact info
• About Page – add a team blurb, story section, mission/values
• Contact Page – use the contact form module with map or address
• Blog Page – include Divi’s blog module to show latest posts

Customizing Your Website’s Appearance in Divi (Step-by-Step for Beginners)

Once your pages are ready, it’s time to make your website look like your brand. Divi gives you total control over your site’s design—even if this is your first time building a website. In this section, I’ll show you how to customize your header, footer, and site-wide styles step by step.

How to Customize the Header and Footer Using Divi Theme Builder

To get started, follow these exact steps:

Step 1: Open the Theme Builder

• From your WordPress dashboard, go to the left-hand menu
• Click on Divi > Theme Builder

This is where you can manage your global header and footer templates.

Step 2: Create a Global Header

• Inside the Theme Builder, click the grey “Add Global Header” box
• Select “Build Global Header”
• This will open the Divi Visual Builder

Now you’re in full control. You can:

• Click “+” to add a Section
• Inside the section, click to add a Row
• Inside the row, click to add a Menu Module

Step 3: Add Your Site Logo and Navigation Menu

• Inside the Menu Module, select your existing WordPress menu
• Use the Image Module to upload your logo
• Drag the logo to the left and menu to the right (or stack them vertically on mobile)

You can customize the background, text colors, and hover effects using the Design tab.

Step 4: Save and Exit

• Click the Save button (bottom-right corner)
• Then Exit Visual Builder
• Back in the Theme Builder, click Save Changes

Now you’ve created a custom header that will appear on every page of your site.

Step 5: Add a Global Footer (Optional but Recommended)

• Click “Add Global Footer” > Build Global Footer
• Use similar steps: Add a section, row, and modules like Text, Social Follow, or Newsletter Form
• Include your contact info and copyright

How to Set Global Styles in Divi (Fonts, Colors, Buttons)

Divi lets you create default design styles for your entire website, so every button or text box looks consistent without editing each one individually.

Here’s how to do it:

Step 1: Open Any Page in Divi Builder

• Go to Pages > All Pages
• Hover over any page and click Edit with Divi

Step 2: Use the Presets System

• Click on any module (e.g., Text Module or Button Module)
• In the top bar of that module, click the Preset dropdown (top left)
• Click Create New Preset from Current Styles

Name it something like “Primary Button Style” or “Body Text Default.”

You can adjust:

• Font family and size
• Text and background color
• Border radius and spacing

Once saved, every future module of that type can use the same preset.

Step 3: Set Global Color Palette

• From your WordPress dashboard, go to Divi > Theme Options
• Click the General tab
• Scroll down to Color Pickers Default Palette
• Set your brand colors here (you can add up to 8)

These will appear throughout the builder whenever you choose a color.

Step 4: Preview Mobile and Tablet Views

• While editing any page, look for the Responsive Icon (tablet symbol) next to any setting
• Use it to preview and adjust how things look on mobile, tablet, and desktop
• Adjust font sizes, padding, and layout as needed for smaller screens

How to Optimize and Launch Your Divi Website

Once your pages and design are ready, the next step is to make your website fast, mobile-friendly, and ready to go live. This part ensures your visitors have a smooth experience—and that Google loves your site too.

Step 1: Optimize for Mobile Devices

Divi makes it easy to check how your site looks on phones and tablets.

How to Preview and Adjust Mobile Layout

1. Open any page using Edit with Divi
2. Hover over any module or section
3. Click the tablet icon next to layout settings (like font size or padding)
4. Toggle between Desktop, Tablet, and Phone

If things look squished or misaligned:

• Reduce padding/margins on mobile
• Use smaller font sizes
• Stack columns vertically (one per line)

Divi lets you adjust these settings without affecting desktop view.

Step 2: Improve Speed and Performance

Fast-loading websites rank better and keep visitors longer. Here’s what to do:

Enable Static CSS File Generation

1. Go to Divi > Theme Options
2. Scroll down and enable Static CSS File Generation
3. This helps your site load CSS styles more efficiently

Use a Caching Plugin

Install a caching plugin like WP Rocket or W3 Total Cache:

• Reduces load time
• Combines and compresses CSS/JS files
• Enables browser caching

Optimize Images

Use a plugin like ShortPixel or Smush to compress images automatically. Always upload JPEG or WebP images under 300 KB.

Pro Tip: Use GTmetrix or PageSpeed Insights to test your site’s performance.

Step 3: Install a Basic SEO Plugin

You’ll need an SEO plugin to help your website appear on Google.

Recommended Plugins:

• Rank Math (beginner-friendly and free)
• Yoast SEO

How to Set It Up:

1. Go to Plugins > Add New
2. Search for “Rank Math” and click Install Now
3. Click Activate
4. Follow the setup wizard to connect your site and configure meta titles, sitemap, and schema

Step 4: Launch Your Website

You’re now ready to publish your Divi site to the world.

Final Launch Checklist:

• Preview all pages on desktop and mobile
• Test your contact form by submitting a message
• Make sure navigation links work correctly
• Remove placeholder text and demo images
• Set your homepage: Go to Settings > Reading > Your homepage displays > A static page

Make Your Site Public

1. Go to Settings > General
2. Uncheck the box that says Discourage search engines from indexing this site
3. Click Save Changes

Congratulations—your Divi website is now live!

Must-Have Plugins to Enhance Your Divi Website

Even though Divi comes packed with features, a few additional plugins can help you extend its functionality, protect your website, and improve performance.

Below is a list of highly recommended WordPress plugins that work seamlessly with Divi.

1. Rank Math SEO – For Search Engine Optimization

Helps you optimize your pages, add meta descriptions, create a sitemap, and improve your chances of ranking on Google.

To install:

1. Go to Plugins > Add New
2. Search for “Rank Math SEO”
3. Click Install Now, then Activate
4. Follow the setup wizard and connect your free account

2. WPForms – For Easy Contact Forms

While Divi has a built-in contact form module, WPForms gives you more control—like conditional logic, multiple recipients, spam filtering, and more.

To install:

1. Go to Plugins > Add New
2. Search for “WPForms Lite”
3. Install and activate, then go to WPForms > Add New to create your form

Embed it on any page using the Shortcode Module or Divi’s Code Module.

3. Smush or ShortPixel – For Image Compression

These plugins automatically compress images as you upload them, helping your website load faster without losing quality.

To install:

• Search for “Smush” or “ShortPixel” in the Plugins menu
• Install and activate
• Run the initial bulk optimization

4. UpdraftPlus – For Backups

Backing up your website regularly is essential. UpdraftPlus lets you back up to Google Drive, Dropbox, or your server with one click.

To install:

• Search UpdraftPlus, install and activate
• Go to Settings > UpdraftPlus Backups
• Choose your backup schedule and storage location

5. Wordfence – For Website Security

Protects your Divi site from malware, brute-force attacks, and login attempts. Great for beginners because it’s easy to set up and doesn’t slow your site down.

6. Bloom and Monarch (from Elegant Themes)

• Bloom helps you grow your email list with popups and opt-ins
• Monarch adds beautiful social share buttons to your pages and blog posts

These are available with your Elegant Themes membership. To install:

• Go to ElegantThemes.com
• Download the plugin ZIP files
• Upload them via Plugins > Add New > Upload Plugin

Final Thoughts

You’ve now learned exactly how to build a website with Divi—from choosing your domain and installing WordPress to designing pages, customizing your layout, optimizing performance, and adding plugins.

Building with Divi is a smooth experience once you understand the workflow. And the best part? You don’t need to touch any code.

If you follow every step in this tutorial, you’ll not only have a functional website—you’ll have a fast, SEO-ready, mobile-friendly one that looks professional from day one.

Ready to get started? Get Divi here and launch your new site today.

Frequently Asked Questions (FAQs)