Posts

7 Variable Font Combinations (New Feature)

Image
Picking a font used to be a short decision. You chose the font, picked a weight, adjusted the size, and moved on. Variable fonts change that workflow. One font can include a range of adjustable axes, and each axis changes something about how the letters are drawn. Inside Divi 5 , those axes become visual controls. Depending on the font you choose, you can stretch letters wider, squeeze them narrower, lean them forward, round their corners, adjust stroke density, or fine-tune a weight that sits between two traditional font styles. The real value appears when you combine settings instead of moving one slider at a time. A plain sans can become sharper and more editorial. The same font can become softer and friendlier. A serif can use its expressive axis for headlines, then turn that personality down for body text. In this post, we’ll walk through 7 variable font combinations you can try in Divi 5. Each example uses a specific font, a specific set of axis values, and a practical design ...
Post a Comment
Read more

How To Stack, Nest, Mix, And Match Presets In Divi 5

Most Divi 5 users start with presets by saving one complete style at a time. That works for simple reuse, but it can quickly turn into a long list of similar presets: one card preset for a light version, another for a dark version, another with a different border, another with different spacing, and so on. Divi 5 lets you build presets in a more connected way. Instead of saving every finished variation as a separate preset, you can break styles into smaller pieces, stack those pieces on the same element, nest them inside larger presets, and reuse compatible presets across different parts of a site. That is where the system becomes powerful. A border preset can be used inside a button preset. That button preset can live inside a full Call To Action preset. A background preset can be shared across a button, a testimonial, a footer, a row, and a column. Change the shared preset once, and every connected element updates with it. In this tutorial, we’ll explain how stacked presets, nest...
Post a Comment
Read more

Divi 5.11 Release Notes

Image
It’s official; the beta phases have ended, and Divi 5 has arrived. This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5 , you’ll see a version 5.11  update notification today. If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us! What’s New In Divi 5.11? This is a quick follow-up to Divi 5.10 . We implemented 18 bug fixes and improvements , along with four new modules ! Four New Modules We released four new modules  in Divi 5.11! The charts module lets you build interactive charts in nine different formats and manage data using a brand new tabular data editor. The Gravity Forms and Imagely modules add native modules for two of the most popular plugins in the WordPress ecosystem, making it easy to add and style custom forms and galleries inside the builder. Finally, the payment button provides a simple ...
Post a Comment
Read more

Part 9 Of Mastering Flexbox: Creating Responsive Columns Without CSS Grid

Image
In Part 8 of our Mastering Flexbox series, we focused on controlling spacing with Gap instead of relying on margin for repeated spacing patterns. We saw how Horizontal Gap and Vertical Gap help create cleaner, more consistent spacing across rows, columns, and Module Groups. Now, in Part 9, we’re focusing on another common responsive layout question: how do you create flexible multi-column sections without reaching for CSS Grid every time? CSS Grid is still the right tool for true two-dimensional layouts, especially when you need precise row and column placement, overlapping items, or highly irregular grid patterns. But for many everyday layouts, such as card grids, split content sections, sidebar layouts, feature rows, and mixed-width columns, Divi 5’s Flexbox system gives you a faster, more visual workflow. By combining Column Class , Layout Wrapping , Gap , Justify Content , Align Items , and Display Order , you can build responsive, grid-like column layouts directl...
Post a Comment
Read more