Getting Started with Divi
Divi editor

At Digiphore we typically build your WordPress with a framework called Divi from ElegantThemes.  There are some good reasons for this!

  • with its drag-and-drop interface it reduces the need for us to write code, saving you money and delivering your site quicker
  • its one of the world’s leading WordPress frameworks, if not the number one
  • its very flexible and you can create a wide variety of fantastic looks and layouts for your site
  • we can easily demonstrate designs to you and quickly rework with your feedback
  • Its easy and straightforward to use – allowing website owners themselves to make changes

So, if you are thinking about rolling up your sleeves and having a go yourself here’s how you can get started.

The Basics

When you build a page with Divi think grids, grids, grids!  In fact, that really applies to all websites. Take a look at your favourites and I can pretty well guarantee you’ll see they’re based on a grid pattern of some sort. Divi is no exception and works like this too.

It allows you to create sections (these are highlighted in blue in the editor), populate them with rows (these are highlighted in green) which in turn can have 1 or more columns.  A bit like a spreadsheet but with a stack of neat features like organising the page for display on tablets and mobile (typically stacking those cell columns).  In these columns you add individual module(s) (these are highlighted in grey) such as a Text control or an Image.  Divi has lots of these, over 40 in fact so most things are covered.  I recommend taking a look at either Divi Cake or the Divi Module page to see what’s available and learn more.  When you add a control (or module as it is called in Divi) you configure its content, look and feel and behaviour (eg. it should be hidden on a mobile device).  Once you’ve made your changes, you simply publish them. That’s pretty well it in its most basic form.  The best way to learn is to roll up your sleeves and have a go.  I recommend doing this with a non-published page called a draft. Just follow these steps:

  1. Sign into your website – you will have details of this but contact me if you are not sure
  2. From your WordPress dashboard menu choose PagesAdd New
  3. Add a Title and choose Use Divi Builder.
Adding a new page in WordPress

You’ll see this screen next – I recommend selecting Clone Existing Page if you are practising and chose an existing webpage to practice on. Just study the sections, rows and modules then perhaps add your own section or modify some of the existing content. As you move your mouse around the page the different page elements will be highlighted.

You have a choice - create a new page, use a pre-made layout or clone an existing page

Then you will see the page you are going to edit and are good to go – remember to save as Draft so it doesn’t appear live on your website.

Edit your page using Divi

Once you’e honed your skills, create a page or edit an exisitng page and publish your changes!

Online Guides and Course

There’s a stack of them out there to help you get started with Divi.  Elegant Themes guide is good, though remember you already have Divi installed so head straight to the Visual Builder Basic section.

If you are a video learner then this is probably the best free resource to get you started

I have also found Mak helpful and you can find a variety of Divi videos on YouTube covering all aspects of creating content for your site using Divi. There are respected resource such as Divi Cake and Quiroz as well to help. This guide will help you select the right course for you:

Ask us!

Getting started with Divi couldn’t be easier. Don’t forget you have an hour’s Guru time each month which is included in your subscription. We would be happy to demonstrate how you can make changes to your site yourself or run through anything you are stuck on or need further guidance about. And of course, we are happy to create new content for you if you would prefer. Just contact us and we will be happy to help!