Posts

Introducing Multi-Select And Bulk Editing For Divi 5

Image
Editing a website often means making the same change more than once. Adjust the spacing on several cards. Restyle a handful of buttons. Move a collection of modules into another column. Multi-Select and Bulk Editing bring those tasks together in Divi 5 . 🎉 Select individual elements with Cmd/Ctrl-click, select a range with Shift-click, and edit your selection from one settings panel. Selection also extends into the Layers panel, right-click actions, keyboard shortcuts, the Inspector, and the Divi AI Agent. You can choose the elements you want to work on, then carry that selection through your workflow. Let’s take a closer look. 👇 Select Exactly The Elements You Need Now you can work with multiple elements at once, no matter where they exist on the page. Pick Individual Elements Or A Range       Hold Cmd on Mac or Ctrl on Windows while clicking elements to add them individually to your selection . This is useful when the elements you want to edit are scattered througho...

How To Build A Bento Grid Hero With Divi 5’s CSS Grid Editor

Image
A bento grid brings images, headlines, supporting details, and calls to action into one arrangement of differently sized cards. Shared edges and consistent gaps hold the layout together, while the larger cards give important content more room. With Divi 5 ‘s CSS Grid Editor , you can build that arrangement visually. Drag items into position, adjust their spans, and refine the spacing without writing custom CSS. In this tutorial, we’ll build a four-card bento hero, add content to each card, style it with Design Variables, and adapt the layout for smaller screens. What Is A Bento Grid? The name comes from Japanese bento boxes, where different foods occupy separate compartments inside a shared container. Each compartment has its own space, but the arrangement works as a whole. A bento layout applies that idea to web design. Cards of different sizes hold images, text, statistics, or actions within a shared grid. Consistent spacing and alignment connect the cards without ma...

Exploring Components In Divi 5

Image
Components in Divi 5 let you reuse a design, update it from one saved source, and choose which content each use can change. We’ll build three service cards for Brand Identity, Web Design, and Creative Direction. They share their spacing, image frames, typography, and button design, while each card has its own photo, title, description, and link. We’ll save one card Group as a Component, then customize its connected copies. You’ll also learn how to reset local values, detach elements, and manage the saved source. What Are Components In Divi 5? A Component is a reusable element with a shared source stored in the Divi Library . It can be a single module or a larger element containing several modules, such as a Group, row, or section. Each use of that Component on a page is an instance . Think of the source as the design you maintain and the instances as its connected uses throughout your website. For our service cards, the source will control the card structure, p...