Introduction
Divi is the king of WordPress themes and our theme of choice for virtually all of our online endeavors, both professional and personal.
Because Divi is fundamentally different from the default WordPress blogging interface—not to mention, more powerful and flexible—it requires a slightly different approach to blog with it effectively. In this blog post I’ll be sharing this approach with you.
The upside of powering through this little learning curve is that you will get way more control over the look and feel of your blog posts. In other words, you’ll be able to blog like a boss with Divi. 🙂
Why should you care?
Most people nowadays have the attention span of a crack-smoking gold fish.
So if your blog posts are boring in either style or substance you can expect people to click off and go waste their lives on cat videos instead. One way you can fight reader boredom is by writing cool, useful content. Yet another way is to make your content visually appealing. Ideally you’ll do both.
One of my favorite examples of somebody who “gets it” are the AuthorityHacker.com guys (who also happen to be one of our MemberFix Pro customers). They write epic content that’s useful and thorough—yet digestible!—and which is also visually interesting.
For instance, here’s a GIF of me scrolling through their Elementor review post:
While this is technically a blog post, it feels more like a well-crafted landing page. And in a sense—because AuthorityHacker.com’s business model revolves around affiliate products and selling their own courses—they do treat it like a landing page, and take into account best practices around conversion optimization.
This post uses roomy formatting, well-placed “featured elements” (more on this topic in a minute), call to action (CTA) buttons, plenty of images, and great copy (the blog post itself).
See this cool colored box you’re reading these words in? This is what I call a “featured element”.
The AuthorityHacker guys use the Astra WordPress theme plus the Elementor page builder plugin. Whereas when you use Divi, it’s both the theme AND the page builder, in one. So you don’t need any additional plugins and you reduce the risk of potential conflicts. (However, you could also download the Divi Builder as a plugin, although we prefer the theme version).
As I’ve said many times before, Divi has been our rock here at MemberFix for years.
Divi always impresses me with its versatility and the aggressive pace of innovation that their team keeps. While many shiny new themes and page builders come and go, we’ve never found a compelling reason to switch away from our beloved Divi.
With Divi you’re not limited to the default WordPress editor. In fact, when you blog with Divi you don’t even use the default WordPress editor; you use the Divi Builder. This leaves you free to arrange and style your posts however you please, use all of the different row and module types that Divi offers—including ALL of the modules available in your Divi library AND any additional modules you add to Divi via various extensions like Divi Booster.
You don’t merely “blog” with Divi, you BUILD your posts visually.
- Access To All Themes
- Access To All Plugins
- Theme Updates
- Premium Support
- Unlimited Website Usage
Risk-Free Guarantee
Preparing your content in TextEditor
The first step to blogging with Divi is to prepare your content.
Back to basics: TextEdit
I personally prefer to write all of my content in TextEdit on my laptop in plain (unformatted) text. I don’t even load Chrome or WordPress until my post is pretty much finished.
In this minimalistic environment there is no temptation from YouTube or Facebook or Instagram. There is no possibility of losing your work in WordPress or Divi because the WordPress autosave didn’t work for some reason; or your session timed out, or whatever the case may be.
Writing in a plain text editor also encourages you to craft a compelling, useful post BEFORE dressing it up with media. You can put lipstick on a pig but…
So step one is to open your favorite text editor (I use TextEdit for Mac and then zoom in a few times using the View => Zoom menu function, so that the text is large and easy to read).
Annotating your text post
Now you need a simple system to block out the various elements of your post to prepare it for “Divi-fication”. You know: headings, formatting, images, feature boxes, videos; that kind of stuff.
Important: You may want to watch this quick video from the Divi folks that explains how to create your own custom divi modules and rows, save them to your Divi Library, and grab them to use later in your posts and pages. This is how we create our “featured elements”.
Not only will using an annotation process help to organize your content for both yourself and your readers, it will also make it supremely easy to put into the Divi Builder in neat modules.
Divi Featured Elements
Here’s how I annotate content when working in my text editor. Note that you will probably come up with your own featured elements and you own annotation system that will probably be better than mine. 🙂 This is just what works for me:
***
<h2>This is for the biggest headings in my article. They denote big, meaty sections</h2>
And this is what the h2 tag looks like. It’s basically just bigger, bolder text.
<h3>These are smaller headings under the h2 headings. They denote sub-sections within a larger h2 section.</h3>
And this is how the h3 tag looks like. It’s slightly smaller text than an h2.
<PROSCONS>Pros and Cons bullet points</PROSCONS>
PROS
This is what
The pros
And cons
Featured element
Looks like
CONSAll work
And no play
Makes Jack
A dull
Boy
<FEATUREBOX>This is text that goes into a feature box. It’s used to highlight important points.</FEATUREBOX>
This is a feature box. It’s basically just a 1/3 – 2/3 row with a beige background, an icon in the left column, and some text in the right column. It’s easy to create your own featured elements in Divi!
<QUESTION>Question mark featured element</QUESTION>
And this is what the question box thingo looks like.
And this is what the question mark featured element looks like. If you need to adjust the design for a featured element you can do it “on the fly” for each individual element!
<EXCLAMATION>Exclamation point featured element element</EXCLAMATION>
You can adjust the color of the background in the first column to whatever color you prefer. You can also change the icon (there are dozens available in Divi). And you can change the border color (or remove the border entirely!)
<CHECKMARK>Exclamation point featured element element</CHECKMARK>
The idea is to create a small set of “featured elements” that match your brand and are versatile enough to be useful in most of your blog posts. They can be any kind of elements that you like. I just chose these because our Divi Designer made them for me. 🙂
This way you only need create and tweak a small set of featured elements once, and then you can deploy them over and over again at a moment’s notice.
<TEXTBANNER>This is a nice text banner with a prominent colored background</TEXTBANNER>How It Works
<grid>This is a nice 2-column grid perfect for creating neat lists</grid>
Listlist
list
list
list
list
List
list
list
list
list
list
Petty Formatting
I don’t bother about petty formatting like bold, underline or italic text because:
A) I tend to over-rely on them to convey emotion when my writing should do that on its own and…
B) I’ll do that during my final edit directly inside the Divi builder, if need be.
Besides, if you have a fastidious personality type, you might find yourself spending an inordinate amount of time getting your text formatting JUST SO. I truly empathize with my fellow neurotics but let’s be honest: getting hung up on small visual details at the expense of your bigger-picture writing is a bad use of energy.
The only exception to this rule is that I annotate links by using the <a href=”https://urlofthelink” target=”_blank”>anchor text</a> convention.
I use this default HTML convention because it automatically renders your links when you move them to Divi (make sure to select the text editor and not the visual editor when you open the text module and paste your content in), and thus saves you a bit of work.
Once you get your annotation system down—and once you get the hang of the Divi Builder—you’ll be writing your content in your text editor and visually composing it in Divi IN YOUR MIND with the elements and modules you want to use.
When you find yourself “thinking in Divi” you’re rapidly approaching Jedi mode. 😉
Vic says…
I reiterate that this is just my personal approach and I can only provide my reasoning for why I do it this way. If you prefer to blog directly in the Divi Builder, go for it.
If you want to invent your own annotation language, do it. If it works for you and enables you to consistently create great content, then that’s important thing.
You only need to create a few featured elements that you really like and place them in your Divi library. Then you can just reuse these same elements over and over.
Case Study: Membership site hosting article
Let’s look at a quick example of an article I wrote where I used this exact system. It’s called, “How to set up hosting for your WordPress membership site”.
Let’s start with a screenshot:
As you can see in the image above, I start the article with the tentative title. This is automatically set as the h1 heading in WordPress.
I then generally open with an <h2> introduction section. This is an overview of what the article will be about, what materials or apps you may need, etc. Here at MemberFix we use the following general format—especially for our “how to” type articles, which happen to make up the bulk of our content:
1. Problem – Present the problem you’re solving.
2. Solution – Present the solution you came up with including any relevant details.
3. Result – Demonstrate (visually and otherwise) the result of implementing your solution and explain any salient points.
We don’t dogmatically stick to this format but it’s a simple rule of thumb that keeps articles focused—especially when it’s a tutorial article. More importantly, in this case, it provides at least three distinct h2 sections we can use to format the article (four if you count the introduction section as well).
Next you can see that in each section there are paragraphs full of content. These don’t get any special annotation. it’s just text.
Images, however, DO receive an <img> tag. I basically copy the same syntax used in HTML and wrap my image link in an opening <img> and closing </img> tag.
What app do we use for screenshots and GIFs?
We use CloudApp. It allows us to take screenshots, create animated GIFs and videos, and then copy the direct link to the clipboard for easy insertion into a post like so:
At the very bottom of the screenshot you can see that there’s an opening tag for a <FEATUREBOX> element. There’s no such tag in the HTML language; it’s simply something I made up as a convenient shorthand. It represents the beige box with a lightbulb you saw earlier:
This isn’t the most gorgeous feature box in the world. I could probably tweak it to make it “just so”. And I’m sure you can create your own version that’s even better than this one! The point is to have a convenient set of re-usable elements to add visual spice to your posts!
Consider other devices
One thing you have to consider now that you’re introducing visual elements into your blog content is that what looks great on a desktop device may not look all that great on a mobile device. Luckily, Divi gives you the option to design the look and feel for each individual device. You’ll definitely want to make sure you’ve tweaked your featured elements so that they look good on desktop, tablet and mobile before saving them to your library and deploying them in your posts.
Here’s an excellent tutorial of how exactly you can do that:
Conclusion
Continue writing your article in this manner until it’s more or less finished. Don’t rush to transpose your content into Divi because the Divi composition phase is a distinctly different gear for your brain than the writing phase. I find it’s best to keep those two tasks separate lest I incur a switching penalty.
After you work this system on a blog post or two you’ll understand how it works and you’ll have a much better feel for the Divi builder as well.
In the meantime, I’m working on a dedicated post on how to create your own Divi featured elements (coming soon!)
If you have any questions or comments, leave your thoughts below!
