Getting started with DIVI

That’s it! Our website is configured, we can finally start working with the DIVI Builder. For this tutorial, we will create a page from scratch using a template available with DIVI. Are you ready? Let’s go!

Getting started with DIVI

DIVI: FIRST TIME USER

Creating a page

In the previous episode, we created a homepage called Eating Healthy: The Best Recipes for Cooking. So we go to the Page menu and open our home page.

Differences between a page and a post on WordPress

Before going further, let’s explain the fundamental difference between a page and an article.

An article is dynamic. It is linked to other articles via categories that can be defined at will. It is part of a library that can be sorted by date, by author, by category,…

A page is static. It is displayed below a menu or via an internal link on your site. You can update it as you wish but it is not supposed to be linked to other pages by categories.

It should be noted that apart from these fundamental differences, the editing of articles and pages is done in exactly the same way.

Activating the Divi Builder

The editing menu of the page allows us to define some basic parameters which we will come back to later. To activate the divi builder on your page, just click on Use Divi Builder.

Once this is done, we notice that the standard WordPress text editor has been replaced. The DIVI generator is presented in a structural form where each element is described in a table. At first glance, one can understand that DIVI works by interlocking sections in blue, lines in green and modules in grey.

Importing a template in DIVI

The first time we launch DIVI, it offers us a tutorial that you can follow if you want to get familiar with the interface. For our part, we choose to start building directly.

As we get ready to edit a page for the first time, DIVI gives us three options: Build from scratch to start on a blank page, Choose a premade layout to import a template or Clone existing page which allows us to duplicate a page of the site and use it as a starting point. We choose to install a template and we click on Browse Layouts

Using a template, isn’t that a bit unoriginal?

The question is legitimate and there is a risk that one of your competitors will use the same site layout as you. However, the world is vast and the probability remains low, especially since the principle is to use the template to customize it and adapt it to your style.

Installation of your template and first preview of the DIVI Builder

To date, DIVI offers more than 50 templates grouped in Packs. We go to a template for cooking recipes called Food Recipes and click on it.

Divi then offers us to choose the page template we want to import and we choose ‘Landing Page’. We click on ‘Use this layout’.

After a short loading time, our homepage is finally installed. We immediately see that we can edit the text directly on the page. This is one of the advantages of DIVI, although it is often better to edit the text via the built-in editor.

When you edit the text, a dialog box appears with all the necessary text tools. At the bottom left of the page, you can set the display mode of DIVI: structural view, desktop view, tablet or smartphone. The save button allows you to save your work, while the icons in the center of the page offer various options such as saving or importing a layout, deleting the article, adjusting the general parameters of the article or browsing the history of modifications.

We have just learned how to create a page and import a template. In the next episode, we will analyze in more depth all the possibilities offered by the Divi Builder.