Divi Beginner Tutorial: Build Your First Website

What You'll Need Before You Start

Before you begin building with Divi, you need three things:

Most hosting providers offer one-click WordPress installation, so getting WordPress up and running takes just a few minutes. Once WordPress is installed, you're ready to add Divi.

Step 1: Install and Activate Divi

Once you've purchased your Divi membership, follow these steps:

1. Download Divi — Log into your Elegant Themes account and download the Divi.zip file from the Downloads section.
2. Upload to WordPress — In your WordPress dashboard, go to Appearance → Themes → Add New → Upload Theme. Select the Divi.zip file and click Install Now.
3. Activate the theme — Click Activate after installation completes.
4. Enter your API key — Go to Divi → Theme Options → Updates and enter your Elegant Themes username and API key. This enables automatic updates and access to the layout library.

Step 2: Configure Basic Theme Settings

Before you start building pages, set up a few essentials in Divi → Theme Options:

General Settings

• Upload your logo — Go to the General tab and upload your business logo. This appears in the navigation bar across your entire site.
• Set your favicon — Upload a small square icon (512×512px recommended) that appears in browser tabs. Go to Appearance → Customize → Site Identity to set this.

Navigation Settings

• Create your menu — Go to Appearance → Menus. Create a new menu called "Main Menu" and assign it to the Primary Menu location. Don't worry about adding pages yet — we'll do that as we build them.

Colour Palette

• Set your brand colours — In Divi → Theme Customizer → General Settings → Layout Settings, you can set a default colour palette. Add your brand colours here so they're always one click away when designing.

Step 3: Create Your Homepage

Now for the exciting part — building your first page with the Divi Visual Builder.

1. Create a new page — Go to Pages → Add New. Title it "Home".
2. Use the Divi Builder — Click the purple Use Divi Builder button that appears at the top of the editor.
3. Choose a starting point — You'll see three options:
   • Choose a Premade Layout — Browse Divi's library of 800+ layouts. Pick one that matches your industry and customise it. This is the fastest way to get started.
   • Build From Scratch — Start with a blank canvas and build your layout module by module.
   • Use Divi AI — Describe your business and let Divi AI generate a complete layout for you.

Step 4: Learn the Visual Builder Interface

The Divi Visual Builder is where all the magic happens. Here's what you need to know:

The Three Building Blocks

Every Divi page is made up of three nested elements:

Editing Content

Divi uses true inline editing. To change any text on your page:

1. Click directly on the text you want to change
2. Start typing — what you see is what your visitors will see
3. Use the floating toolbar to change fonts, sizes, colours, and formatting

The Settings Panel

Click the gear icon on any section, row, or module to open its settings panel. Every element has three tabs:

• Content — Text, images, links, and what the module displays
• Design — Fonts, colours, spacing, borders, shadows, animations
• Advanced — Custom CSS, visibility settings, HTML attributes

As a beginner, you'll spend most of your time in the Content and Design tabs. The Advanced tab is there when you're ready for more control.

Responsive Editing

At the bottom of the Visual Builder, you'll see device icons (desktop, tablet, phone). Click these to see how your page looks on different screen sizes. You can adjust any setting per device — so if your heading looks too big on mobile, you can reduce the font size for phones only.

Step 5: Build Your Essential Pages

Most small business websites need these core pages. Build them one at a time using the same process as your homepage:

For each page, either load a premade layout and customise it, or build from scratch using sections, rows, and modules. Save your work frequently — Divi includes revision history so you can undo changes if needed.

Step 6: Set Up Your Navigation Menu

Now that you have pages built, add them to your menu:

1. Go to Appearance → Menus
2. Select your "Main Menu"
3. Under Pages, check the boxes for the pages you've created
4. Click Add to Menu
5. Drag to reorder the items as you'd like them to appear
6. Click Save Menu

Your navigation will now appear in the Divi header across your entire site.

Step 7: Design Your Header and Footer

The Divi Theme Builder lets you create custom headers and footers that appear across your entire site.

1. Go to Divi → Theme Builder
2. Click Add Global Header to design a header that appears on every page
3. Click Add Global Footer for your site-wide footer
4. Design these using the same Visual Builder interface you've already learned

For beginners, Divi's default header (which displays your logo and menu automatically) works perfectly well. You can always create a custom header later as you become more confident with the builder.

Step 8: Add Essential Plugins

WordPress plugins extend your site's functionality. Here are the ones every Divi site needs:

Plugin	Purpose	Free?
Rank Math SEO	Search engine optimisation — meta titles, descriptions, sitemaps, schema markup	Yes (free tier is excellent)
WP Fastest Cache or LiteSpeed Cache	Page caching for faster load times	Yes
ShortPixel or Imagify	Automatic image compression for faster pages	Freemium
UpdraftPlus	Automated backups of your site files and database	Yes
Wordfence	Security — firewall, malware scanning, login protection	Yes
WPForms Lite	Advanced contact forms (if you need more than Divi's built-in form)	Yes

Install these from Plugins → Add New in your WordPress dashboard. Don't install too many plugins — each one adds weight to your site. Stick to what you actually need.

For a detailed SEO setup guide specific to Divi, see our Divi SEO guide.

Step 9: Optimise for Speed

A fast website is crucial for both user experience and Google rankings. Here are the key optimisation steps for your Divi site:

Divi 5's dramatically reduced JavaScript (from 276KB down to 45KB) means your site starts with a much lighter foundation than previous versions. With these optimisations, most Divi sites score 90+ on Google PageSpeed Insights.

Step 10: Launch Your Website

Before you make your site live, run through this pre-launch checklist:

• Check all pages on mobile — Use the responsive preview in Divi to verify everything looks good on phones and tablets
• Test your contact forms — Submit a test message and make sure you receive it
• Check all links — Make sure every link and button goes where it should
• Set up Google Analytics — Install the Site Kit by Google plugin to track your visitors
• Submit your sitemap — Rank Math generates an XML sitemap automatically. Submit it to Google Search Console
• Enable SSL — Make sure your site loads with https:// (most hosts provide free SSL certificates)
• Set your homepage — Go to Settings → Reading and set "Your homepage displays" to "A static page", then select your Home page

Using Divi AI to Speed Things Up

If you have Divi AI (available as an add-on for $24/month), it can dramatically speed up your workflow:

• Generate entire page layouts — Describe your page ("create a homepage for a Cheshire-based plumbing company with hero, services, testimonials, and contact sections") and Divi AI builds it for you
• Write copy — Click on any text module and ask Divi AI to write professional copy tailored to your business
• Create images — Generate custom images based on text descriptions, right within the builder
• Refine designs — Ask Divi AI to improve existing sections or suggest layout changes

For beginners, Divi AI is like having a designer and copywriter on call. It won't replace a professional, but it gets you 80% of the way there in a fraction of the time.

Common Beginner Mistakes to Avoid

When to Hire a Professional

Divi makes it possible for anyone to build a website. But "possible" and "optimal" aren't the same thing. Consider hiring a professional Divi designer if:

• You need a bespoke design that matches existing brand guidelines
• Your site needs complex functionality (memberships, bookings, multi-vendor shops)
• You want to rank competitively on Google and need proper SEO implementation
• Your time is better spent running your business than learning web design
• You've built a DIY site but it's not converting visitors into customers

At Nicada Digital, we build Divi websites for businesses across the UK. Whether you need a complete build or just help refining what you've started, get in touch for a free consultation.

Next Steps

FAQs

Is Divi easy to learn for beginners?

Yes. Divi uses a visual drag-and-drop builder where you click directly on your page to edit. Most beginners build their first page within an hour.

How long does it take to build a website with Divi?

A simple 5-10 page site can be built in a weekend using premade layouts. More complex sites with custom designs take 1-2 weeks.

Do I need WordPress experience?

Basic familiarity helps but isn't essential. You need to log into your dashboard and navigate to pages — Divi handles everything else visually.

Can I use Divi AI to build my first website?

Yes. Describe your business and Divi AI generates a complete, styled layout you can then customise. It's the fastest route to a professional site.

How do I install Divi?

Download the Divi.zip from your Elegant Themes account, upload it via Appearance → Themes → Add New → Upload Theme in WordPress, then activate and enter your API key.

What's the difference between Divi Theme and Divi Builder?

The Divi Theme is a complete WordPress theme that includes the builder. The Divi Builder plugin works with any theme. Both are included in your membership. Beginners should use the full Divi Theme.

What hosting do I need?

Any WordPress hosting works. For best results, choose a host with PHP 8.0+, 256MB+ memory, and SSD storage. SiteGround, Cloudways, and WP Engine are all solid choices.