What is Divi?
Divi is a WordPress Theme and page builder. It allows you to build graphically beautiful pages on the front or back end of WordPress.
With Divi you can create Columns, Buttons and Images with ease and style.
The purpose of this training is to help you use Divi with authority. You can ignore this training and continue to use the standard WordPress editor if you like.
Do You Want to Use Divi or Just WordPress?
You can choose to use the standard WordPress editor if you like. It’s certainly easier – at first. It does have a few weaknesses.
Layout is the biggest weakness of the standard editor: You might design a beautiful page on your computer but when viewed on a mobile phone or tablet the layout ‘breaks’ and looks wrong.
You can think of the WordPress standard editor being like Microsoft word; a word processor. You can think of Divi like a page layout tool like Adobe InDesign. That statement may not make things clearer, don’t worry about it.
WordPress Blocks. Recently WordPress has replaced the standard editor with their own version of a page builder they call “Blocks”. Blocks are much like Divi but much simpler. Blocks have been disabled on BiodiversityWorks.
Getting Started
I think it’s important that you get a general idea of how WordPress works and how Divi works inside of WordPress; I created this video as a primer. Just watch it to get an overview; it’s not training so don’t take notes. Pencil’s down. OK?
Blog Post or Web Page?
Now we’ll get a bit closer to the elements of Divi. Understand that we’re working in Divi but will also be interacting with WordPress itself. It’s almost seamless, almost. Here will will learn:
- Templates
- Sections
- Rows
- Modules
- Adjusting Spacing
- What NOT to Adjust!
Navigating Around in Divi
We’re getting more specific now and talking about how Divi works within WordPress.
- Choosing Divi rather than the standard editor.
- Sections.
- Rows and columns.
- Modules
- The Divi Library
- Review pages already built with Divi.
Build in Backend or Frontend?
Before we actually build a post let’s understand the ‘backend’ vs. the ‘frontend’. A video is the easiest way to explain. In general, I tend to prefer the frontend. However some things are easier on the backend.
So, I usually start on the backend to title, select categories and add a featured image. Then, I switch to the frontend to start page content.
Let’s Build a Blog Post
Note that WordPress is not a ‘writing’ tool; it’s a publishing tool. Therefore, have all your content and images ready-to-go and approved before you start publishing. You might choose Microsoft Word or Google Docs to write your post ahead of time.
Save Often!
In WordPress, and every software for that matter, it’s important to save often so you don’t lose your work in case of freezing or crashing. It happens.
Saving in WordPress
In WordPress ‘save’ is called ‘Publish’. Another option is ‘Save as Draft’. Use save as draft! When a post is Published an email is sent to subscribers telling them a new post has been published. You don’t want that until you’re ready. So, save as draft, often and only Publish when you’re ready for the email to go out to subscribers.
Writing Tips!
Whichever writing tool you use, don’t get detailed on designing your post in MS Word or Google Docs. That will slow you down. Just write your copy and separate headlines, paragraphs and lists. When you paste your contend into WordPress all your formatting will get wiped out (ignored), if you paste it correctly.
- Add headlines but don’t format them. Just keep them on their own line.
- Choose images ahead of time but don’t add them to your document. Just add a reference like [insert pic of otters playing water polo here].
- Bullet/number lists and bold are OK.
The Divi Library
The Divi Library is a way to save and reuse layout templates. Here’s an overview of how they work.
Insert Library Starter(s)
I’ve tried to make it easier to build posts by creating Divi Library Starters. In this video I’ll show you how to use them.
Headlines and Other Types of Text Formatting
Divi and WordPress offer dozens of editing tools to change fonts, colors, sizes, etc. DON’T USE THEM. Most formatting styles have already been determined and presets exist. The training video will show you how to use them.
Columns
Columns are a handy way to get elements side-by-side. Plus they will reformat nicely for computer, phone and tablet screens. Use the premade Library items for easy columns.
Images
Images can be a challenge and they can make or break the impact of your post. Besides the composition of the photo itself you must be concerned with image size. When we discuss image size we don’t just mean dimensions. We also refer to its resolution because dimensions and resolution increase the killobyte size. Images with large killobytes slow down web pages.
Fortunately, the Divi Library photo layouts can help you with your cropping and there are tools in place to keep your file sizes down. So, try to have fun!