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 any type of website. 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.
Before we get into the actual website building tutorial, there are a few steps you’ll need to complete:
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.
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.
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 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 changing them to Post name. This structure will make your pages and posts more user friendly for the search engines.
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.
In this part of the tutorial, we’ll go through the process of creating your website. Here are the steps we’ll take:
Let’s walk through these steps.
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.
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.
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:
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.
The Divi theme has a few useful features that set it apart from other similar themes. This include:
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.
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:
It also comes with built-in layouts that you can use to speed up the web design process.
If you want to follow along with this tutorial or prefer to watch the video, I’ve included the entire video tutorial below.
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.