Posts

How To Create A Typography System With Variable Fonts In Divi 5

Image
A strong typography system is more than choosing a heading font and a body font. It defines how type scales, how different text roles relate to each other, and which decisions stay consistent as the website grows. Variable fonts make that system much more flexible. Instead of choosing only from fixed stops such as Regular, Medium, and Bold, a variable font can give you continuous control over supported axes such as weight, width, slant, optical size, Grade, and other font-specific characteristics. Divi 5 brings those controls directly into the Visual Builder and connects them to the rest of its design system. Pair Variable Fonts with Font Variables, the Variable Generator , Number Variables, and Presets, and you can turn individual typography choices into a reusable sitewide framework. In this tutorial, we’ll build that framework from the ground up. Think of it as a blueprint: choose the right variable font, establish the font family globally, generate a responsive type scale,...
Post a Comment
Read more

How To Customize The Divi 5 Builder Interface With Workspaces

Image
The Divi 5 Visual Builder is highly customizable. Panels can be opened, closed, docked, floated, resized, and combined into tabs. You can also choose which top bar icons appear, change the interface mode and color scheme, set a default view, and control other builder preferences. That flexibility becomes even more useful with Workspaces . A workspace saves a particular Visual Builder setup so you can return to it later. Instead of using the same interface for every stage of a project, you can create one setup for working on your design system, another for assembling pages, and a cleaner one for editing content. In this post, we’ll first walk through the interface options that Workspaces can save. Then we’ll use them to create three practical workspaces for different stages of a Divi 5 project. What A Workspace Controls A workspace is a saved configuration of the Divi 5 Visual Builder. You arrange the interface the way you want, save that setup under a name, and switch back to it w...
Post a Comment
Read more

Divi Product Highlight: Divi Essential

Image
Clear, well-organized navigation helps visitors understand a website and move through it with confidence. That becomes especially important on content-heavy sites, where documentation, categories, account pages, products, or other nested content need a structure that remains easy to scan. Divi Essential by Divi Next expands the Divi toolkit with a large collection of specialized modules, extensions, and layouts built directly into the Visual Builder. One of its modules, Divi Vertical Menu,  gives you a dedicated way to create vertical menus, accordion navigation, collapsible sidebars, flyouts, and mobile drawers while keeping the entire workflow visual. The module is compatible with both Divi 4 and Divi 5 , making it useful for existing websites as well as new Divi 5 builds. In this product highlight, we’ll take a closer look at Divi Essential, explore the Vertical Menu module’s key features, and build an expandable vertical navigation menu from start to finish. Overview Of Divi E...
Post a Comment
Read more