Disclosure: This post may contain affiliate links, if you purchase any products or services through our affiliate links, we may receive a commission at no additional cost to you.
Divi by Elegant Themes is a versatile and powerful WordPress theme that allows users to create stunning websites easily, thanks to its intuitive drag-and-drop builder. In this step-by-step tutorial, we’ll guide you through building and customizing your WordPress site into a visually appealing and functional masterpiece with the Divi theme.
For this tutorial, we are building a service-based ‘Home Remodelling’ website using the Divi pre-made layout. The website will contain a Menu with three pages: a Home page, an About us page, and a Contact page.
If you haven’t installed the Divi Theme on your website, refer to this tutorial on how to do that.
Step 1: Create Page and Menu:
First, let’s structure our website by creating a menu with three pages.
Create Pages:
Go to “Pages” and then “Add New” in your WordPress dashboard.
Name and publish your page.
Repeat the same process for the other pages.
Create Menu:
Navigate to “Appearance” and then “Menu”. Name your menu and select the ‘display location’ “Primary Menu” then click the “Create Menu” button.
After creating your menu, on the ‘add menu items’ section, switch to “View all” and select all the pages (either individually or by checking the “Select All” checkbox) you want to add to the menu and click “Add to Menu.” After that, click “Save Menu”.
You can rearrange your page by right-clicking and dragging.
Step 2: Select a static page:
Next, we want to make our “Home” page a static page, which is the first page visitors to our website see.
To do that, navigate to “Settings” and then “Reading” click the “Static page” checkbox, and select the page you want to make static from the “Homepage” dropbox. After that, click “Save changes”.
And here, We have our home, About Us, and Contact pages.
Step 3: Build your pages using Divi Visual Builder:
Let’s build our “Home” page.
Select your Home page or the page you want to build and click the “Enable Visual Builder” at the top of the page.
Next, click “Start Building”.
After that, select “Browse Layout” to choose from premade layouts.
This is where we can choose the layout we want for our website. We can search for the type of layout we want or select from the categories based on the kind of website we want to build.
If you are building a service-based website like in this tutorial, navigate to “Services” and browse the available layouts.
Find and select the layout pack you want to use.
Each pack comes with different layouts from which you can choose.
Select the “Home” page layout, “Replace Existing Content,” and click “Use This Layout.”
You can also “View live Demo” to see if the layout is to your liking before using it.
Step 4: Authentication:
Before downloading your layout, you must authenticate your Elegant Themes membership by inserting your Username and API key.
To do that, hover over the “API key” word with your cursor, and a sentence will appear under it. Click “here,” and you will be redirected to your Elegant Themes Members Area.
In your Members Area, navigate to your account center and select “API keys.” There you will find your username.
To get your API key, click the “GENERATE NEW API KEY” button and a new API key will be generated in the text area.
Copy and paste the required information and click “Submit”.
Step 5: Customize and Save your layout:
You can customize and personalize any part of your layout which are; sections, rows, and modules.
Sections: Sections are the largest containers, allowing you to organize your content.
Rows: Rows divide sections into columns, providing structure for your content.
Modules: Modules are content elements like text, images, buttons, etc., that you can add within rows.
Once satisfied with your changes, click the “Save” button at the bottom right corner and then “Exit Visual Builder” at the top of the page.
You can also save your layout to the Divi library for future use
Repeat the same process for other pages.
Congratulations! You’ve successfully learned how to use the Divi theme on WordPress. Experiment, explore, and enjoy the process of building a website that reflects your unique vision and goals.
Related post:
Divi Review 2024: Most powerful WordPress theme
How to Install Divi Theme on WordPress step-by-step tutorial
