How to Use the Divi Theme for WordPress Websites Guide

Categories
Web Design

Did you know that you can create a fully functional and beautiful website without having to code it from scratch?

If you’ve been on the hunt for a new website design without having to spend a huge amount of money or waste countless hours, then look no further than the Divi Theme

According to W3 Techs, 43.2% of websites use WordPress, and over 4 million sites currently use the Divi Theme. 

In this article, we’ll walk through the basics of what the Divi theme has to offer and show you some of the main features you can expect to see. Now, let’s jump in! 

What is the Divi Theme Website Builder?

Created by ElegantThemes, the Divi Theme is a highly customizable and beginner-friendly theme with a visual editor and an expansive library of templates and blocks to set you up for success. 

Building your website on WordPress with DIVI is much less daunting than other alternatives, and you can get your site up and running in no time without touching a single line of code!

There are 2 options to choose from: 

  • Divi Theme: DIVI theme comes bundled with the DIVI visual builder, so you won’t need to install any other themes or builder plugins. 
  • Divi Builder Plugin: You can use the visual editor portion of Divi with a different theme of your choice. 

How to Get Started with Divi Theme

This is a quick and basic overview to help you get started. 

  1. Get an ElegantThemes license 
  2. Log into your ElegantThemes Account and go to the member’s area to download the Divi Theme zip file to your computer. 
  3. Log into your WordPress website and hover over “Appearance” and click on “Themes”
wordpress home page in the backend
  1. Click on the “Add New” button to upload the Divi theme zip file
installing the divi theme zip file to wordpress
  1. You will see a “Choose File” button to upload the file. Once that is done, click the “Install Now” button.
wordpress backend to upload the the divi theme
  1. Once the Divi theme file has been uploaded, you can click on “Activate” to activate the theme.
installing the divi theme notification in wordpress
  1. You’re done! Now, you can pat yourself on the back. 

What is Pricing Like?

Pricing is quite competitive compared to other alternatives out on the market. There are two options to choose from:

  • Regular Divi:
    • Divi theme no-code visual builder with hundreds of website packs
    • 24/7 support
    • $89/year
  • Divi Pro:
    • Advanced Divi theme with powerful AI tools and cloud storage
    • 24/7 VIP support
    • $569/year

ElegantThemes usually runs promotions on their Divi themes, so make sure to continuously check back for big discounts. 

Divi Theme Main Features

After you’ve downloaded Divi on your WordPress website, go to “Pages” to add your very first page. 

hovering over pages on the wordpress home page backend

You’ll be asked to name your page and then a popup will appear giving you 3 options:

  • Build from Scratch
  • Choose a Premade Layout
  • Clone Existing Page
divi theme option to build from scratch, clone an existing page, or choose a premade layout

Basic Building Blocks

Before we dive a little further into the 3 different options, there are some basic building blocks to familiarize yourself so you know how to build your page.

These include sections, rows, columns, and modules. Simply put, sections are the biggest portion of the page and they contain rows, which contain columns, which contain modules. 

The basic building blocks are also color-coded.

Sections = Blue

Rows/Columns = Green

Modules = Gray

divi theme visual representation of sections, rows, columns, and modules

Sections come in three types: 

  • Standard: The most common and contains rows that are set to 80% width.
  • Specialty: This section allows for more advanced column structures
divi theme sections
  • Full width: These take up the entire width of the browser, making this a great option for hero sections and images.  

To start building a page, you have to first decide how many columns you want to include in your first row. With several different column options to choose from such as: 50/50, 25/75, 30/60, the options are pretty limitless. 

Within each column, you will find a gray (+) button to add a module of your choice. It includes an extensive list of basic and more advanced items like:

  • Text
  • Images
  • Call to action buttons
  • Divider
  • Testimonial
  • Blurbs
  • Sidebar
  • Contact Form
  • Pricing Table
  • & More

A handy tip to note about the Divi builder is that any module is moveable, so you can quickly drag and move it into another row.

divi theme modules

After each row, you can continue building your page by adding more sections, rows, and modules, making it super functional and intuitive.  

Building from Scratch

divi theme editing a page and adding a new row

When you choose the build from scratch option, you will be given a blank page. You can create rows with different numbers of columns to create your desired look. 

Choose a Premade Layout

Choose from one of your saved layouts or a premade layout pack from the Divi library. This option will instantly pull the sections, rows, columns, and modules for the page in a matter of seconds, saving you time. 

Clone an Existing Page

If you have an existing page on your site that you want to duplicate the format of, you can use the “Clone an Existing Page” feature. 

Building on the Front End

divi theme build on the front end button

Divi’s visual editor can be accessed via the “Build on the Front End” button. The visual editor allows you to make edits to the page and see how page elements like headings, body paragraphs, images and calls to action will be formatted. That way, you don’t have to constantly save and preview the page every time you make changes. 

Element Settings Window Pop-Up

divi theme in wordpress element window pop-up to edit the text

Another cool feature with the visual editor, as well as the standard editor, is that whenever you open an element’s setting, a purple window will appear. It is adjustable so you can increase or decrease it to the size of your choosing. 

Within the pop-up window, all of the content, design & advanced settings are available to you. 

Name

In the top left corner of the window, you’ll find the name of the builder element you’re working on. In the screenshot above, it is an example of the Text box. If you ever forget what element you’re working on, just look at the top left corner.  

Presets

Right underneath the name is where you’ll find the presets. Presets are saved settings for a section, row, or column. An example of a preset would be picking the font, size, background color, and text color of a call-to-action button. So, when you create a new button on a page, you can simply select the already-designed preset and apply it to your button. 

preset button settings wordpress

More Settings

In the top right corner, you’ll find a button with 3 vertical dots to give you even more settings for that element. 

more settings divi theme module

These extra settings include:

  • Save to Library: Saves this element to your Divi library for future use
  • Save to Divi Cloud: Saves to your Divi cloud, in addition to your Divi library
  • Split Test: With split testing, Divi will track the variations that you selected and track conversion rates so you can choose the “winner” of the two.
  • Disable: You can quickly disable the element on your devices.
  • Lock: Locks the element so no design changes can be accidentally changed or deleted. This is good if another user makes edits to the sites and you don’t want them to accidentally make edits to certain elements. 
  • Copy Module: Copies the module so you can easily paste it anywhere on the page.
  • Reset Module Styles: Resets the design to the default settings.
  • Paste Module: You can use this button to paste the module 
  • View Modified Styles: When you’re deep in the woods of editing your design, you might forget what changes you made. This feature allows you to view changes that were made to the module. 
  • Go to Layer: This feature will open up all of the layers on the page. From this section, you can edit each element easily and rearrange them, if necessary. 
extra settings option in divi theme editor

Search Options Bar

Need to find something quickly? Simply type what you’re looking for and it’ll pop up instantly. 

Content vs Design vs Advanced

All windows have three main tabs towards the top:

Content: This is where you can add and edit your text. Choose from headings, body text, formatting options (bullet points, underline, adding links and more.  

Design: The design section allows you to pick text sizes, text color, alignment, font weight, text spacing, text shadow, and more. 

Advanced: You can add custom CSS and design elements, scroll effects, and conditions via this box. 

Bottom Buttons

bottom buttons in divi theme

Divi Theme Key Highlights

  1. Front-End Visual Editing

We cannot highlight how beneficial this feature is. With the click of your mouse, you can drag and move elements around, adjust sizing, format text, and add design features without a single line of code. 

As a marketer or professional, you can make changes to your site without having to wait days or weeks for a web developer to do them. 

  1. Powerful Presets

Instead of having to build pages from scratch every single time, you can save your page designs to your library and duplicate them. 

Additionally, you can choose from over 100 pre-made templates from Divi if you need help creating your first page or want ideas for a new design. Whether you need to create a service page, 404 page, blog page, contact page, or category page, Divi has them all. 

  1. Ease in Resizing Element

Do you find the task of resizing elements to be somewhat daunting? Well, you don’t have to worry with this theme. You can move the tops, bottoms, and sides of each element to adjust height, width, and margins. When doing this, it will show you the exact size so you don’t have to guess. 

  1. Advanced Code Editing

Although no coding is necessary, if you have some coding skills or have a developer on your team, there are numerous ways for you to edit the code in the backend. There is a complete code editor that features

  • Error reporting
  • Multi-line select
  • Find & Replace
  • CSS editing
  1. Device Views

You have the option to view how your pages look on desktop, tablet, and mobile so you can see how your page conforms to different screen sizes. This will ensure a seamless and error free user experience for your visitors.

You can also easily switch between the backend and frontend views. 

Elevate Your Brand With a New Website

Whether you’re looking to build a new website or rebuild your existing site, Divi is a solid choice. 

Like with any new tool, there is a learning curve and it can take some to get used to, but the highly customizable platform with easy-to-use features is a huge plus.

If you need help with building a Divi Theme website or a custom WordPress site, we can help. Get in touch with us at 503-206-4988 or send us a message here

About the Author

Jess Chang

Jess is an SEO Digital Strategist who enjoys helping businesses crush their goals by increasing their online presence and boosting total number of conversions. During non-work hours, she enjoys going to the gym, traveling the world, and trying new foods!

Leave a Reply

Your email address will not be published. Required fields are marked *

Receive expert marketing tips