Posts

How To Create A Responsive Image Mosaic With Divi 5’s CSS Grid Editor

Image
An image mosaic combines photographs of different sizes in one connected grid. Larger tiles highlight selected images, while smaller tiles fill the spaces around them. With Divi 5’s CSS Grid Editor , you can build this arrangement visually, resizing and positioning tiles directly on the grid canvas. In this tutorial, we’ll build a twelve-image mosaic across four columns, create four larger feature tiles, and coordinate the image styling with a preset. Then we’ll adapt the layout for tablet and phone. Why Image Mosaics Need Responsive Adjustments A mosaic gets its shape from spans. A tile can stretch across two columns, two rows, or both, creating an arrangement of larger and smaller images. Those spans need attention when the screen narrows. A tile spanning two columns cannot fit within a single-column grid without an adjustment. An inherited starting position can also place an item outside the intended columns. These settings can create extra grid tracks, gaps, ...
Post a Comment
Read more

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