Posts

Exploring Slots For Components In Divi 5

Image
Sometimes a reusable section needs more than a different heading or button label. One page might need a workshop schedule, while another needs a booking form. You still want the surrounding design to look consistent and update from one place. Slots in Divi 5 provide an area for those different layouts inside the same Component. Keep the shared structure and design connected, then build the content each instance needs inside its Slot. We’ll turn a workshop section into a Component, add a Slot to its right column, and use that area for a schedule in one instance and a booking form in another. What Are Slots In Divi 5? A Slot is a container inside a Component that holds content belonging to an individual instance. The Component defines where the Slot goes in the shared layout. Each instance defines the modules placed inside it. An instance is a use of the Component on a page. Its source is the saved version that controls the shared structure and settings. A Slot can contai...
Post a Comment
Read more

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...
Post a Comment
Read more

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...
Post a Comment
Read more