Introduction to Divi

---

Divi is a theme package for WordPress. Divi is a pretty full-featured and flexible theme package that allows users to craft highly customisable websites that runs on WordPress. It includes visual tools, the Divi Builder and Divi Visual builder, that allows users without technical (HTML and/or CSS) background to easily customise and build their own website. This guide serves as a ‘getting started’ guide to using Divi to build your own website.

 

We recommend using Divi to build websites because it is flexible, and has built-in visual tools.

 

 

Switching to Divi Theme on WordPress

Step 1: From your dashboard, hover over ‘appearance’, then click on ‘Themes’.

 

 

Step 2: Search for ‘Divi’ from the top right corner of the section and then click ‘Activate’ on the ‘Divi’ theme.

 

 

Using ‘Divi’ Theme editor to create a page.

 

Introduction

Step 1: Create a new ‘project’

 

 



Step 2: Click on the ‘Use The Divi Builder’ button.

 

 



Step 3: There are 2 builders to use, Divi Builder and the Visual Builder. For this guide, we are using the Divi Builder.

By default, you would have a ‘standard’ section (blue) with a single column (green) inside. For now, we shall add a single column by clicking the ‘Insert columns’ button.

 

 

Step 3: Decide how you want your row content to look. For demonstration purposes, we shall use the 2nd layout.

 

 

Step 4: The 2nd layout splits the row into 2 columns. Each column supports a single module. Clicking on each column would show different modules available.

 

 

Step 4: Different modules are available and different content can be added, structured and displayed depending on the module you choose. We shall use the ‘text’ module.

 

 

Step 5: The ‘text’ module is a simple component that simply displays text content. You can customize the fonts, headings, etc. within the module, just like a post. After adding some texts, click ‘Save & Exit’ and the component will be added.

 

 

Step 6: You can edit any added module by clicking on it. Double-clicking on the section or rows will also open up a window which allows you to customize the various options. Do play around with it.

We shall add another module. Click on the ‘Insert module’ button. Add a ‘tab’ module this time.

 

 

Step 7: Tab module organizes content into tabs. Each tab has its own header and body. Add a tab by clicking the ‘add new tab’ button. Each tab is like a mini-post that you can format.

 

 

Step 8: Add a few tabs and save.

 

 

Step 9: Give this project a title and then click ‘publish’ to publish the project.

 

 

Step 10: Navigating to the project page and you can see the content as we have built.

 

 

This diagram shows how the different elements are organized and displayed.

 

 

More Information

Each project is a single webpage. The building blocks for each page are sections. Each page can have as many sections. Scroll down and select the ‘text’ module. This module allows you to add texts.

 

 

Sections

There are 3 types of sections: Standard section, full-width section, and specialty section. The difference between the sections is how the sections are displayed and how elements within each section can be laid out.

Specialty sections have unique layout options, which you can play around with.

 

 

Rows

For ‘standard’ section, you can add rows within each section. Rows affect how your content is laid out horizontally.

 

 

Columns

Each row can have different column layout. Columns would be how your content is laid out in a row-wise fashion. Within each column, you can have different types of content.

 

 

Module

Modules are where the actual content resides. The content can be simple texts, images, or sophiscated modules, like, accordion, tabs, etc. You can experiment with adding different modules to see how content are displayed.