In this guide, we will show you a step-by-step guide on how to setup DIVI and the basic way on how to use it.
But before we start, let’s talk about what is DIVI.
DIVI is a theme created by Elegant Themes. This theme is self-hosted so it is not, in any way, tied as a WordPress.com theme. With thousands of download online, it is considered as the most popular WordPress theme of all time.
Of course, this is not just because of its design and economical price, but also because of ease-of-use. DIVI is very easy to use that can practically create a complete and great site even with no coding knowledge. That’s how easy it is.
Now, this is great and all, but how do you actually setup DIVI and how to get started with it?
How to Setup DIVI?
Step 1 – The first step on how to setup Divi is you, of course, have to install DIVI to your WordPress site. This can be done by going to going to the official site of Elegant themes and downloading DIVI from their site.
Step 2 – Make sure first that you have enabled the auto-updates for DIVI theme.
If you have installed DIVI to your WordPress site, head over to DIVI > Theme Options > Updates.
Then you will arrive on the Updates page where you will see two boxes. One with Username and one with API Key.
Both Username and API Key can be found on your account for Elegant Themes where you downloaded DIVI.
NOTE: If by any chance that a certain DIVI update has caused an error on your site, you can click the Rollback to the previous version button to revert to the previous working version of WordPress.
Step 3 – The third step to setup Divi is to calibrate your colors. Now, this step is optional, you can choose to ignore this step but we recommend doing this.
Setting up the color scheme for you palette first is better because you don’t have to return to this step and set up the color palette every time you want to add the color.
You can easily do this by heading back to step 2 but instead of clicking the Update button, go the General instead.
Here you will see the default color palette that you can choose or change.
If you click on a color, you will see a little drop-down area where you can select your desired color.
Selecting your preferred color can be somewhat difficult since you have to adjust the sliders perfectly to get the color you desire. Luckily, there is a site called Coolors. Here you choose from a bunch of preselected colors that you want for your brand or background, etc.
When you see your desired color, you simply have to hover on it, then click on code that displays and it will automatically be copied.
Once the code is copied, go back to the color palettes and paste the said code on the box starting with #.
NOTE: When pasting the code, make sure that you always start with a hashtag (#) as this will not work otherwise.
After pasting the code, you will notice that your desired color is automatically selected.
After that, just simply scroll down and click “Save Changes.”
Step 4 – Now to create an actual page. For this step, head over to Pages > Add New.
Here, just simply add the desired title for your page, and then click on “Use DIVI Builder”
After that, you will be taken to the front-end builder of DIVI where you can see your changes in real-time.
On the front-end, you will be shown 3 choices that you can choose from.
1. Build from scratch – As the name suggest, using this feature, you can build your page from scratch. Completely clean and no other content inside.
2. Choose from Premade Layouts – Here you can choose from different premade layouts of DIVI and use that layout as a base design for your site.
3. Clone Existing Page – This choice offers you to copy the exact content and design of another page from your site. But since you don’t have other pages on your website, since your just starting, this will show a blank page instead.
For this example, we will choose the first option, which is “Build from scratch.” On the editing part of the DIVI Builder, they have 3 “boxes.”
First one is the Section (shown as a blue box). Sections separate your content from the rest of the content. Let’s say you have a slider image in the first section and you want to separate your services on another section, this can be done with the section box.
Do note that each section can be edited separately. Meaning that when you edit one section, it won’t affect the other sections of the same page.
Second is the Row (shown as a green box). This box defines how many rows you want for your section. You can choose from 1 row to 2 equal rows or 3 equal rows, up to 2/3 – 1/3 row. It’s up to you. Again each row can be edited separately.
Third is the Module box (shown as a grey box). Here you can put your desired module for your content. Again, this can be edited separately.
Step 5 – Now we can put our contents in. After selecting “Build from scratch,” you will automatically be given a set of rows you can select for your page which looks like the screenshot below.
After selecting the row, you will then be shown the different modules that you can choose to put on your site.
And then simply click on your desired module, and enter your desired content.
Step 6 – Now that you have inserted your content, we have to design it. Don’t worry, it’s really easy.
After selecting the module you want, and adding in your content, you can easily design that opened module by heading to the design button on the upper part of the module.
Here you will see a bunch of different areas to edit, like the body text styles, the heading text style, the spacing, borders, and more.
This is where step 3 comes in. Remember that we had recommended that you calibrate your desired colors first? That is cause when designing your site, that calibrated colors will display and you can select it where possible.
Step 7 – Now add the remaining content. If you wish to add a new section simply click on the blue + button that shows when you hover (in some cases, you need to click on the white space on that section to display the button) on the front-end, and then select regular section. Then redo step 5 for that new section.
Don’t forget to save your work. If it a published page, click on Update. If it is a draft page, click on Save Draft. This buttons can be seen when you click the 3 horizontal buttons on the bottom of the builder.
Like so.
If you are done adding your content, simply click on Publish and then click Exit Builder on the topmost part of the screen.
Step 8 – Let’s say that you want to use an existing layout of DIVI as basis for your new site. It’s relatively easy.
Go back to step 4, but instead of clicking “Build from Scratch,” click on “Choose a Premade Layout.”
As you can see there are a lot of premade layouts to choose from (total of 1296) as of this moment.
If you are having trouble selecting the layout you want, simply head over to the right side of the screen where a list of categories is present. Simply click on your desired category and the list of layouts will be sorted according to the category you clicked.
After selecting a layout you will then be prompted to select what type of page you want to insert on your site. If it is an about us page or contact us page and others.
After selecting, click on “Use this Layout” and that design will be automatically applied on your page.
If you don’t like the layout’s color combination, or you want to change the text of the module, you can easily click on the gear icon of the module or section you want to edit, and proceed to edit as usual.
A few words
And that is how to setup DIVI for your WordPress site along with the basic ways to edit it. We hope that you find this article helpful and informative. We are looking forward to seeing your site soon!
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
If you need help on your site on page maintenance or anything relating to WordPress Talk to Us and let’s make it happen!