How To Make A Beautiful WordPress Website With Divi Theme

The Divi theme is one of the most popular themes for WordPress. It’s one of the most installed themes for WordPress and it can be used to create beautiful and elegant websites. From small business websites to eCommerce stores, Divi has some pretty cool features that make it a very flexible theme.

In this post, I’ll show you how to create a stunning website with the Divi theme. In this step by step tutorial, I’ll walk you through buying a hosting plan, installing WordPress and Divi, and creating all the pages for your site from scratch.

Website Preparation Steps with Divi Theme

Before we get into the actual website building tutorial, there are a few steps you’ll need to complete:

Getting a domain name and hosting

Installing WordPress

Install Divi theme

Here’s a quick look at the website we’ll be creating:

With that out of the way, let’s walk through these steps one by one.

Step 1: Get Domain and Hosting

If you want to create a website, you’ll need a domain name and hosting plan. I use and recommend Siteground as they are one of the best web hosting services with the best uptime and fastest loading times.

Start by visiting Siteground. As you can see, they offer three hosting plans but I recommend you choose the Grow Big plan as you can host an unlimited number of websites on the Grow Big plan.

Select the plan and then follow the steps to complete the purchase. First, you’ll need to choose your desired domain name and then enter your billing and payment details.

As soon as you submit the payment, your hosting account will be created. You can login to your customer area and continue with WordPress and Divi installation.

Step 2: Install WordPress

As you login to your customer area, you’ll notice an orange button at the top that says Set Up Website. Click that button and then select Start a new website > WordPress.

You will then need to enter another username and password. You’ll use this to login to your WordPress dashboard so make sure it’s different that your hosting login information.

When you’re happy with your username and password, click Continue. Siteground will install WordPress for you and you’ll see a notification in your account area. Click on the Manage Site button to see a login button next to the site you want to work with. This will take you immediately to your WordPress dashboard.

Now, before we move on with the theme installation, there are a few things we need to take care of first in our WordPress admin area. For starters, uninstall the Starter plugin Siteground installed as you don’t need it. Head to Plugins > Installed Plugins, select Starter plugin, deactivate and then delete the plugin.

Then, go to Plugins > Add New and search for Really Simple SSL plugin. This will fix the error with the browser telling us our site is not secure. Simply install and activate the plugin then click on Enable SSL.

The last step is to go to Settings > Permalinks and change them to Post name. This structure will make your pages and posts more user friendly for the search engines.

Step 3: Download Divi Theme

Now that we took care of these steps, it’s time to download and install the Divi theme. Open up a new browser tab and go to Elegant Themes. Elegant Themes currently offers two plans: yearly membership and lifetime plan. The lifetime plan is more expensive but keep in mind that you’ll never have to pay for Divi theme again so I’d definitely recommend you sign up for the lifetime plan.

Once you’re done with selecting your plan and creating your Elegant Themes account, download the Divi theme.

In your WordPress dashboard, go to Appearance > Themes > Add new. Locate the zip folder with the Divi theme and upload it to your site, then press the Install button.

Once the theme has been installed, activate it so that it’s live on your site.

Congratulations, you’re now a proud member of the Divi community and you can move on to the next step of setting up your awesome new WordPress website with the Divi theme.

Create Your Website With The Divi Theme

In this part of the tutorial, we’ll go through the process of creating your website. Here are the steps we’ll take:

Creating basic pages and menus

Creating page layouts

Importing premade page layouts

Customizing the website

Mobile Settings

Divi Posts and Dynamic Content

Divi Themes and Plugins

Let’s walk through these steps.

Step 1: Creating basic pages and menus

Let’s start by making the basic pages and menus for our site. We’ll create the Home, About, Services, Blog, and Contact us page. Go to your WordPress dashboard and then click Pages > Add new.

Type in the name of your page, such as Home, and then click Publish. You can then repeat this process to create the About, Services, Contact, and the Blog page.

The next step is to assign all these pages to a menu so they can be visible in our navigation. Go to Appearance > Menus. Enter a name for your menu and click Create. On the left-hand side under pages, click on the All tab, check all the pages, and click Add to menu button. Then, assign this menu to Primary menu and click Save.

Lastly, go to Appearance > Theme Customizer > Homepage settings. Set your homepage to display a static page and then choose the Home page you’ve just created from the drop down menu. Click Publish to save the changes.

Step 2: Creating Page Layouts

We can now start designing the actual layout for the pages we’ve created. In your dashboard, hover over your website name and then click Visit site. You’ll be taken straight to your homepage so in the admin bar, click on the Enable Visual Editor.

You’ll have three options: Start from scratch, Choose a premade layout, and Clone existing page. Select Start from scratch. You’ll now have the option to choose how many columns you want your row to have.

Once you’ve chosen the column structure, you can start adding modules to it. Modules include: text module, a button module, image module, accordions, blurbs, call to action, and more.

You can customize each of these modules to use fonts you like as well as colors. You can add background images or gradients, add transformations, and more.

Step 3: Importing Premade Page Layouts

Using the Divi builder is easy since everything is drag and drop. However, if you want to save some time designing your site, you can import premade layouts. In fact, I have prepared a free Divi layout for this tutorial and you can download it from my website. You can then import it into your site by following these steps:

In your dashboard go to Pages > All Pages and hover over a page you want to work with. Click on Edit with Divi

Select Build from scratch and press the Start Building button

Close out of the row builder and instead press the purple dots in the middle of your screen

Click the up and down arrow icons and then select Import

Drag the Divi layout for the page you want to create and drop it onto the Importer

Press the Import Divi Builder Layout and wait for the process to finish

Click the Save button or customize the page to your liking.

Step 4: Working With Theme Customizer

The Divi Theme Customizer allows you to customize the visual styles and settings for your entire site. You can set global colors and fonts that will be applied to various Divi modules and sections.

However, you can also style each module and section individually and override the styles set in the Customizer.

Step 5: Divi Theme Features

The Divi theme has a few useful features that set it apart from other similar themes. This include:

Split-testing – with the Divi theme you can easily split-test various pages and sections on your website. This essentially means that the Divi theme will create two versions of a page or a section so you can see which version your visitors prefer and which one brings you more conversions.

Theme Builder – the theme builder is rather unique as it allows you to create custom layouts for your page body, footer and header so you can apply to them on other parts of your website. For example, you can create custom blog layouts, blog post layouts, shop pages, and more.

Shape dividers – shape dividers add extra visual appeal to your site. Instead of a straight line, you can create curves, slanted edges, zig zag lines, and more.

Bulk editing – another cool feature of the Divi theme is that you can easily edit images or sections in bulk. This is a huge time-saving feature.

Extend styles – you can copy and paste styles between the same elements.

Find and replace – similarly, you can find certain styles on various elements and quickly replace them with different styles.

Step 6: Mobile Settings

Given that more and more users are using their tablets and mobile phones to browse the Internet, having a mobile-friendly website is crucial. In addition, Google ranks your website better if it’s mobile-friendly.

One of the great things about the Divi theme is that it allows you to fine-tune your design for mobile devices. You can also remove certain sections on mobile devices.

Each module in the Divi theme allows you to tweak the settings for desktop, tablet, and mobile devices so be sure to go through these settings and optimize your site.

Step 7: Divi Themes and Plugins

Finally, the Divi theme has a lot of third-party child themes, plugins, and addons that will add even more features to your Divi-powered website. This includes text gradients, extra animations, and more. A few popular resources include:

Divi Supreme Plugin

Divi Toolbox

Divi Child Themes

It also comes with built-in layouts that you can use to speed up the web design process.

Final Thoughts

With a theme like Divi and its drag and drop page builder, you can create an amazing WordPress website in a matter of hours. In addition to that, there are plenty of pre-made themes and plugins made specifically for Divi so you can save even more time when building a website with the Divi theme. Use this tutorial to create an amazing WordPress website with Divi theme today.