Designing Divi layouts for people who aren’t designers
For nine years I designed for Divi, a WordPress website builder used by nearly a million web designers and business owners. Most of them are not designers. The work moved in three steps, from the layouts people start from, to the Figma source of truth those layouts come from, to the templates Divi AI now builds pages with.
The work in numbers
- 200+layout packs I designed and shipped
- 300+section templates Divi AI builds from
- 12niches covered, with 40+ categories inside them
Layouts for people who aren’t designers
Most of my time at Elegant Themes went into layout packs. A layout pack is a full set of pages for one kind of business that anyone can import into Divi and make their own. I designed more than 200 of them, plus campaign templates for Black Friday and other promotions.
The people using them are small business owners and freelancers. They replace every photo and most of the copy, so a pack is a starting point, not a finished site. I designed for the version they would end up with, not the one in the preview.
Two rules held for every pack, whoever ended up editing it.
Readable on any phone
Body text never drops below a set minimum size on mobile.
Contrast checked
Every layout runs through a contrast check before it ships.
One Figma source of truth for every Divi module
Divi’s modules were designed by another team. My job was to rebuild every existing module, and each new one as it came, as a Figma component that matches what the builder can actually produce. Sections, templates and full layouts are then assembled from those components instead of drawn from scratch.
Matching meant the component carries the same settings as the module, so a designer can’t make something a Divi user can’t rebuild.
I also wrote the Divi Build Guidelines, which became part of the internal design system.
Getting the templates ready for Divi AI
When Elegant Themes built Divi AI, the section templates it generates pages from came out of this library. I structured them so they could be built back into Divi and extended to new topics without breaking what already worked.
I didn’t build the AI or design its interface. I built what it builds from.
My part of the testing was simple to describe and slow to do. I gave the AI real requests and checked whether it understood the components and used them the way they were meant to be used.
Artisanal Coffee Shop & Cafe
What I carried forward
- 1Design for the person who edits it last.A layout is judged after a non-designer has changed it, not in the preview.
- 2A design only counts if the product can build it.Matching Figma to the builder removed a whole class of “looks right, can’t be made” work.
- 3Generated output is only as good as the system under it.The quality of Divi AI’s pages depends on the templates and components it draws from.
