Divi 5 - What to Prepare Before Building Your Divi 5 Website

This is Part 1 of the Divi 5 Mastery Course, a hands-on series that takes you from a blank WordPress install to a fully designed, launched website for a coworking business. This part covers everything that happens before you open the builder: how Divi and WordPress fit together, how to install them, how to navigate the dashboard, and what raw materials to gather first. It's written for anyone starting fresh, whether you're new to WordPress or new to Divi.

How WordPress and Divi fit together

WordPress is a content management system. It handles your pages, posts, media, and site settings. On its own, it gives you a functional website, but designing that site requires either code or a tool that turns visual decisions into code for you. That's where Divi and Divi's Visual Builder come in.

A WordPress theme such as Divi controls your site's default appearance: fonts, colors, header and footer layout, and page structure. WordPress requires an active theme to work. Classic themes give you some control through a settings panel; newer block themes offer more flexibility through WordPress's built-in Site Editor. Either way, the theme sets the baseline that everything else builds on.

A page builder goes further. It gives you a visual, drag-and-drop interface for placing content blocks such as text, images, buttons, and columns, and styling them directly on the page. Instead of writing CSS or editing PHP templates, you make design decisions visually and see results as you work.

Divi is both. It's a WordPress theme and a visual page builder in one package. When you install Divi, you get a theme that handles your site's global structure and a builder that lets you design every page visually. You also use the Theme Builder, which controls templates for your headers, footers, blog post layouts, archive pages, 404 pages, and more. Layout, styling, global templates, and responsive design all live in one system.

Get WordPress and Divi installed

Before you can build anything, you need two things: a WordPress installation running on a web host, and the Divi theme installed on that site.

Web hosting and WordPress

WordPress requires web hosting, a server where your site's files and database live. Most hosting providers offer a one-click WordPress installation that handles the technical setup automatically. If you don't have hosting yet, Divi Hosting comes with WordPress and Divi pre-installed and activated, which is the fastest path from zero to building. If you already have hosting and need to install WordPress manually, see Elegant Themes' guide How to Install WordPress.

Install and activate Divi 5

Once WordPress is running, you install Divi the same way you'd install any WordPress theme:

Log in to your Elegant Themes Members Area and download the Divi 5 zip file.
In your WordPress dashboard, go to Appearance → Themes → Add New → Upload Theme.
Upload the zip file, click Install Now, then click Activate.
Follow the onboarding prompt to connect your Elegant Themes license so your site receives theme updates as they're released.

For the full walkthrough with screenshots, see Install and Activate Divi 5.

With Divi active, a new Divi menu item appears in your WordPress sidebar. That's your command center for everything Divi manages outside the visual builder.

Find your way around the dashboard

Divi adds several features to the standard WordPress dashboard. You don't need to memorize every option now; later parts of this course use specific settings in context. For now, here's a map of what's where and what matters most at this stage.

The Divi menu

Click Divi in the WordPress sidebar, and you'll see several sub-items:

Divi Dashboard is the main hub. It shows your license status, current Divi version, and links to create pages, manage templates, or generate a site with Divi Quick Sites. This course builds from scratch, so we won't use Quick Sites, but it's worth knowing it exists for future projects where speed matters more than custom control.
Divi 5 Migrator can be used to migrate an existing Divi 4 website to the Divi 5 new framework.
Theme Options is a settings panel that controls site-wide defaults: your logo, social media URLs, performance settings, SEO basics, and integration code. The tabs you'll use most early on are:
- General: Upload your site logo and set social media profile URLs. These feed into the default header and footer.
- General > Performance: Enable Dynamic CSS, Dynamic Module Framework, and Critical CSS to optimize front-end loading. These are good to enable from the start.
- Integration: Paste tracking scripts (Google Analytics, Meta Pixel, and similar) that need to load site-wide. The Add code to the head field is the most commonly used.
- Updates: Where your Elegant Themes username and API key are stored so WordPress can pull Divi updates automatically.
- The remaining tabs (Navigation, Builder, Layout, Ads, and SEO) exist but are either handled better by dedicated plugins or addressed later when we build specific templates. You don't need to configure every tab before moving on. For a fuller tour, see Divi 5 Theme Options.
Theme Builder is where you create and assign global templates: your site's header, footer, blog post layout, 404 page, archive pages, and other template-driven areas. We won't build these until Parts 6, 7, and 8, but it's central to how Divi controls your entire site structure. For now, the default Divi templates handle your header and footer until we replace them with custom ones. See Getting Started with Divi 5 Theme Builder for an overview.
Theme Customizer is where you can set the basic Basic Website Design System
Role Editor controls Divi's Visual Builder access for various WordPress users.
Divi Library is your local layouts library. It allows you to create, import, and manage all of your imported/created layouts.
Support Center gives you and our support team the tools to fix problems quickly and efficiently.

Edit pages with Divi

Divi 5 - Edit a page with Divi 5 Visual Builder

To build a page:

Go to Pages → Add New in WordPress (or Pages → All Pages to edit an existing one).
After you give the page a title and save it, you'll see the Edit With Divi option. This launches the Visual Builder, the front-end editing interface where all design work happens.

You can also launch the builder from the front end: while logged in, navigate to any page and click Edit With Divi in the WordPress admin bar at the top of the screen.

The Visual Builder is where you'll spend most of your time in this course. Part 2 covers the entire interface in detail; for a head start, see Divi 5 Visual Builder Interface, and when you're ready to build your first page, Create and Build a Page with Divi 5 from Scratch.

Gather your materials before you build

Learning a new builder while also figuring out what you want to build makes the process slow and frustrating. Get clarity on what you want to build before you start learning how to build it. That usually means having the following ready.

Brand direction

You don't need a 40-page brand guide, just enough to keep you focused. At a minimum:

Colors: Choose a primary brand color, a secondary or accent color, and a neutral palette (a near-black for text, a near-white for backgrounds, and one or two grays for borders and secondary text). Specific hex codes are even better. Starting from scratch? Tools like Coolors or Adobe Color help you build a palette quickly.
Fonts: Pick a heading font and a body font. Two fonts are enough for most sites. Google Fonts is the easiest source since Divi loads them natively. A reliable starting point is a clean sans-serif heading paired with a readable sans-serif or serif body.

You'll formalize these into Design Variables in Part 3, but you need to make the decisions before you can systematize them.

A logo

Your logo can appear in the header, the browser tab (as a favicon), the footer, and elsewhere. If you have one, make sure it works on both light and dark backgrounds. SVG or high-resolution PNG files with a transparent background are best for web use, and you may want different variations for different contexts.

No logo yet? Create a simple text-based placeholder in Canva, Photoshop, or GIMP. A styled site name in your chosen heading font works fine until a real logo is ready. You can also use Divi's default logo while getting started and replace it before launch.

Images and media

Stock images are fine to start. Free sites like Unsplash and Pexels work well for placeholder content. For the coworking site we're building, look for images of:

Open workspace and desk areas
People collaborating or working independently
Meeting rooms and private offices
Building exteriors or lobbies
Amenities such as coffee bars, lounges, and event spaces

Gather more images than you think you'll need so the build doesn't pause while you hunt for "one more hero image." Optimize images before uploading; tools like TinyPNG or Smush reduce file size without visible quality loss. Large, uncompressed images are one of the most common causes of slow WordPress sites.

A sitemap

A sitemap lists every page your site needs and how they relate. For the coworking site, it looks like this:

Homepage: The main landing page with an overview of the space, key benefits, and calls to action.
About: The story behind the space, who runs it, why it exists, and what makes it different.
Spaces (or Membership Plans): What's available, such as hot desks, dedicated desks, private offices, and meeting rooms, including pricing and features.
Blog: A dynamic archive page that pulls from blog posts. Useful for SEO and community updates.
Contact: Location, hours, a contact form, and an embedded map.

Your site might add pages like Events, FAQ, Careers, or Terms, but start with the core pages and expand later. A focused sitemap keeps the build on track.

Written content

Before Part 5, where we build the homepage, have at least rough drafts of your content:

Homepage headline and subheading: What does this space offer, and why should someone care? One sentence each.
Value propositions: Three or four short statements explaining what makes the space worth joining.
About section copy: Two or three paragraphs on the space's mission, history, or team.
Service or plan descriptions: For each membership tier, a name, a short description, and a price (even if approximate).
Calls to action: Decide on consistent wording early, such as "Book a Tour," "Get Started," "See Plans," or "Contact Us."
Contact information: Address, phone number, email, and hours.

The content doesn't need to be final, but it needs to exist in a usable form. Use placeholder text where you must and refine later.

Design inspiration

Browse five to ten websites in your industry or related ones and save examples of layouts or sections you like. Pay attention to homepage structure, navigation layout, spacing and whitespace, typography, and color usage. You're not copying; you're building a reference point that makes design decisions easier.