Time to Divi Up! A Guide to Divi Builder and Divi Cloud | Brandom.ca
Time to Divi Up!
Here's a broad to advanced guide to using Divi Builder and Divi Cloud the way working site builders do: to build fast, stay consistent, and reuse your best work across projects. I’ll start with Divi Builder fundamentals and workflow, then show how Divi Cloud slots into that workflow for storage, sharing, and scaling.
Brandom.ca uses Divi Builder and Divi Cloud extensively.
1) Divi Builder in a nutshell
Divi Builder is a visual, front-end page builder for WordPress. Its content hierarchy is simple: Sections → Rows → Columns → Modules. You place modules (text, images, buttons, forms, etc.) inside columns, arrange those within rows, and group rows into sections. That hierarchy governs spacing, responsive behavior, and design defaults, so it’s worth internalizing from the outset. (elegantthemes.com)
Divi lets you switch between a fully visual editing mode and Wireframe View, which shows a clean, block-based structure of your layout (handy for large or complex pages). Wireframe is built into the Visual Builder, so you can toggle back and forth without reloads. (elegantthemes.com)
Two more quality-of-life features you’ll use constantly:
Responsive Preview: preview and adjust styles per device (desktop/tablet/phone) from inside the builder. (elegantthemes.com)
History, undo/redo, and portability: Divi tracks your editing history and supports import/export of layouts and Theme Builder templates (via JSON) for backup and migration. (elegantthemes.com, Divi Extended, Mark Hendriksen)
2) Getting productive: presets, global elements, and display conditions
Global presets (your design system)
Rather than styling every module from scratch, create Global Presets—named style recipes you can apply to any instance of a module (e.g., “Button / Primary,” “Button / Ghost,” “H2 / Serif”). Update a preset once, and every instance using that preset updates site-wide. This is Divi’s evolution of “global defaults.” (elegantthemes.com, help.elegantthemes.com)
Practical pattern: build a “style guide” page containing one of each common module (headings, text, buttons, blurbs, forms). Dial in the look, save each as a preset, and you’ve created a reusable design system for the site. (This workflow is widely taught in Divi circles and formalized in many style-guide templates.) (Lollipop Creative Studio)
Global modules, rows, and sections
Beyond presets, you can make entire library items global—say, a newsletter signup block, a pricing table, or a footer strip. A global item stays in sync everywhere it’s used: edit it once to update all pages. Save an item to the Divi Library and check Save as Global when prompted. (elegantthemes.com)
Display Conditions (context-aware content)
Divi’s Condition Options let you show/hide any section, row, or module if certain rules are true: by user state (logged-in/out, role), device, date/time, WooCommerce status (cart contents or purchase history), page/post, taxonomy, and more. Typical uses include timed promos, member-only blocks, or device-specific CTAs. (elegantthemes.com, help.elegantthemes.com)
3) Building with the Theme Builder
The Divi Theme Builder creates templates for site-wide parts—headers, footers, posts, product pages, category archives, etc.—and assigns them at macro (e.g., “all posts”) or micro (e.g., “this one post”) levels. This is where you enforce consistency and reduce page-by-page work. (elegantthemes.com)
Two core moves:
Create a template (e.g., “All Posts”): define header, body, footer, and dynamic elements.
Assign it: choose macro/micro assignments so it automatically applies where intended. (elegantthemes.com)
Divi pairs this with a Theme Builder Library so templates (or whole template sets) can be saved, previewed, and imported/exported—which becomes even more powerful with Divi Cloud (next section). (help.elegantthemes.com)
4) The Divi Library—the bridge to Divi Cloud
The Divi Library stores your saved layouts, sections, rows, and modules. From the builder’s bottom toolbar, hit the + icon to open it. The sidebar lets you search, filter, and manage library items—and crucially, it also exposes your Divi Cloud when you’re signed in (so local and cloud items live side-by-side). (elegantthemes.com)
5) What Divi Cloud is (and why you’ll actually use it)
Think of Divi Cloud as “Dropbox for Divi.” You save layouts, sections, rows, modules, Theme Builder templates (and template sets), and even code snippets to your cloud account, and then load them on any site where you’re building with Divi—without exporting/importing files. Divi automatically generates thumbnail screenshots of items you save, so browsing becomes visual rather than file-name-based. (elegantthemes.com)
Access & limits: Any Elegant Themes member can use Divi Cloud free for up to 50 items; a paid Divi Cloud membership unlocks unlimited storage and usage, including for teams. (Pricing specials vary; the important bit is the free tier and unlimited paid tier.) (help.elegantthemes.com, elegantthemes.com)
6) Signing in and seeing your Cloud inside the Builder
Open any page and enable the Visual Builder.
Click the + at the bottom to open the Divi Library.
Hit Sign In To Divi Cloud (blue button, top-right of the library), log in with your Elegant Themes credentials, and your “My Divi Cloud” area appears alongside local items and premade layouts. (help.elegantthemes.com)
From here, search, filter, favorite, and load items directly onto the page, all without leaving the builder. (elegantthemes.com)
7) Saving to Divi Cloud (sections, rows, modules, full pages)
You can save content to the cloud while you work:
Save a Section to Cloud: hover the section, click “Save to Library,” give it a name, toggle Save to Divi Cloud, optionally add categories/tags, then Save. (Rows and modules work the same way.) (help.elegantthemes.com)
Save an entire page layout: open the Library, choose “Save Layout,” and toggle Save to Divi Cloud. Divi generates a screenshot thumbnail automatically. (elegantthemes.com)
You can also sync existing local library items to the cloud and bulk upload exported layouts to seed your cloud library. (Mark Hendriksen)
8) Organizing your cloud: categories, tags, favorites, and previews
Divi Cloud supports categories and tags, the same way the local library does. Use categories for broad buckets (“Headers,” “Footers,” “CTAs,” “Forms,” “Blog Modules”) and tags for specifics (“sticky,” “blue theme,” “two-column”). You can rename, recategorize, preview, duplicate, trash/restore, and favorite items—all from the in-builder library UI. (elegantthemes.com)
Those auto-generated screenshots make scanning your cloud much faster than digging through JSON files. (It’s a subtle quality-of-life boost you’ll feel every day.) (elegantthemes.com)
9) Theme Builder + Cloud: portable site structure
The Theme Builder Library is integrated with Divi Cloud, so once you’ve designed a great header/footer combo or a post template set, you can save it to the cloud and apply it to any new project with a click. That means you can maintain agency-wide standards for headers/footers/blog/product templates and roll them out across sites quickly. (help.elegantthemes.com)
A common agency move is to save a template set (e.g., headers, footers, posts, category archives, WooCommerce product layouts) to the cloud, then import the set on each new build so the site’s bones are instantly in place. (help.elegantthemes.com)
10) Teaming up: Divi Cloud Sharing + Divi Teams
If you work with others, Divi Cloud Sharing lets you share your cloud library with team members and set permissions (use-only vs. manage/add/delete). This is tied to Divi Teams, Elegant Themes’ role-based system for inviting colleagues/clients to inherit access to services like Divi Cloud under your account. Together, they enable true shared libraries and collaboration in the cloud. (elegantthemes.com)
Typical setup:
Invite teammates via the Teams tab of your Elegant Themes account.
Share your cloud library with selected members; choose per-member permissions.
Everyone builds from the same set of vetted layouts, templates, and snippets—no more Slack-zipped JSON files floating around. (elegantthemes.com)
11) A recommended build workflow (Divi Builder + Cloud)
Here’s a tight, repeatable sequence that many Divi pros use:
Kick off with a style guide page
On your dev site, add one of each core module you plan to use (Headings, Text, Buttons, Blurbs, Images, Gallery, Form, etc.). Design them; save Global Presets for each module. This becomes your site design system. (elegantthemes.com, help.elegantthemes.com)Build Theme Builder templates
Create your global Header and Footer. Then make a Post template (with dynamic featured image, title, meta, body) and any archive/product templates needed. Assign at macro/micro levels so they apply automatically. Save the set to Divi Cloud. (elegantthemes.com, help.elegantthemes.com)Create reusable content blocks
Design CTAs, pricing tables, testimonials, and opt-ins as Sections or Rows. Save them to the cloud with sensible categories/tags (e.g., “CTA / trial,” “Pricing / 3-tier,” “Testimonials / carousel”). (help.elegantthemes.com, elegantthemes.com)Lay out pages visually, toggle Wireframe when needed
Build pages in visual mode; switch to Wireframe View to restructure quickly. Apply presets instead of hand-styling. Use responsive previews for device tweaks. (elegantthemes.com)Add smart visibility with Conditions
Show a sale banner on Fridays only; hide a download until the user logs in; display a cart-related module only if the cart isn’t empty—these are all one-click Condition Options. (elegantthemes.com)Publish, then reuse
As you perfect a block or layout you’ll want again, save it to Divi Cloud (Divi takes a screenshot automatically). On the next project, sign into your cloud, drop in your best blocks, and you’re off to the races. (elegantthemes.com)
12) Practical examples you can implement today
A. Promo bars on a schedule
Create a narrow
section at the top of your header template with a promo message. Add
a Date & Time display condition so it appears
only during a defined window (e.g., launch week, holiday sale). No
more remembering to toggle it at midnight. (elegantthemes.com)
B. Member-only content teaser
In your Post
template, split the body area into two rows: a teaser (always
visible) and the full content row with a Logged-In
condition. Combine with a “Join now” CTA for logged-out users.
(elegantthemes.com)
C. Agency starter kit
Compile your favorite
headers, footers, opt-ins, FAQs, pricing tables, and blog designs
into a Theme Builder template set and a set of
Sections/Rows. Save all to Divi Cloud
and tag by purpose. On new projects, import the template set first,
then drop in blocks as needed. (help.elegantthemes.com)
D. Consistent buttons and headings
Define
Button and Text presets in your
style-guide page (primary, secondary, subtle). Apply those presets
everywhere; if branding changes, update the preset once and the
entire site updates. (elegantthemes.com)
13) Tips, tricks, and guardrails
Name things for future you: When saving to the cloud, use functional names (e.g., “CTA / hero / gradient / light-text”). Add tags like “dark-bg,” “A/B winner,” or the color scheme to improve search later. The cloud’s categories & tags are there to be used. (elegantthemes.com)
NOTE: Having a client extension (generally 3 or 4 characters) will help with organization, as a web design firm
Prefer presets over copy-paste styling: You can copy/paste styles and even extend them, but presets give you long-term control. Treat presets as your design source of truth. (elegantthemes.com)
Lean on Wireframe for structure: If a page starts feeling heavy, toggle Wireframe to move blocks swiftly; return to visual to fine-tune aesthetics. (elegantthemes.com)
Use History and Portability as safety nets: Before big refactors, export your template or layout; you can always roll back via History or import the prior JSON. (elegantthemes.com, Divi Extended)
Team libraries beat file chaos: If you collaborate, enable Divi Cloud Sharing via Divi Teams. Give juniors “use-only” access so they can insert but not modify shared assets; grant editors manage rights. (elegantthemes.com)
14) Troubleshooting realities
Most Divi hiccups trace to plugin conflicts, caching, or server quirks. If your library won’t load (spinner forever), a known class of issues has been reported by users; the general playbook is to clear caches, disable conflicting plugins temporarily, and test again. If module settings buttons won’t open, the same conflict/caching suspects are likely. When stuck, Elegant Themes support is responsive, and community forums often surface fixes. (Divi Help)
For Divi Cloud specifically, if you don’t see My Divi Cloud in the library, double-check you’re signed in via the library’s top-right button, and that items you saved were toggled Save to Divi Cloud (not just saved locally). (help.elegantthemes.com)
15) Security and access notes
Divi Cloud authenticates in your browser with your Elegant Themes login; you can use it on client sites without exposing their WordPress credentials, which makes it safer than moving files over email or granting your ET account to clients. (elegantthemes.com)
When collaborating, Divi Teams grants team members their own ET logins with role-scoped permissions. That’s cleaner than sharing a single account and helps you revoke access cleanly when contractors roll off. (elegantthemes.com)
16) A quick “first day” checklist
Create a style guide page; define Global Presets for headings, body text, and buttons. (elegantthemes.com)
Build Header/Footer and an All Posts template in the Theme Builder; assign them. (elegantthemes.com)
Save your templates and key Sections/Rows to Divi Cloud with categories/tags. (help.elegantthemes.com)
Sign in to Divi Cloud on your staging site; verify your items appear under My Divi Cloud and show screenshot thumbnails. (help.elegantthemes.com, elegantthemes.com)
Add at least one Condition to a real block (e.g., Logged-In or Date/Time) so you’re comfortable with context-aware content. (elegantthemes.com)
Bottom line
Divi Builder gives you a fast, visual way to structure content (wireframe when you need speed) and a design-system layer via Global Presets and Global library items, so your site stays coherent as it grows. (elegantthemes.com)
Divi Cloud is the multiplier: it turns your best layouts, blocks, and templates into a personal (or team) library you can reach from any project—with visual screenshots, categories, and tags for speed. The free tier covers 50 items; the paid tier unlocks unlimited storage and team use. (help.elegantthemes.com, elegantthemes.com)
Together with the Theme Builder and Condition Options, you can standardize site structure, personalize content, and deploy proven components across clients with minimal friction. (elegantthemes.com)
If you want an elegant website design, built with structure and easy-to-manage assets, look no further than all of us here at Brandom.ca. We can help you Divi Up!
Comments
Post a Comment