Posts

Divi 5 Sneak Peek: Components and Slots

Image
We’re back with another Divi 5 sneak peek, and this one introduces two upcoming features that will fundamentally improve the way you build reusable designs in Divi: Components and Slots . Components are a complete reimagining of Divi’s existing Global Modules. They retain the power of globally synchronized elements while introducing a much more flexible system for controlling what stays global and what can be customized on each instance. Instead of choosing between a completely global element and a completely independent one, Components let you build reusable elements with carefully defined areas of flexibility. You can detach individual settings from modules nested inside a Component, making those settings editable at the instance level while everything else remains globally synchronized. You can also add Slots, which create free-form areas inside Components where unique content can be built for each instance. We’re also giving Components a much more prominent place in the builde...
Post a Comment
Read more

5 Creative CSS Grid Editor Layouts & How To Create Them In Divi 5

Image
Perfectly even Grids are useful, but they are not always memorable. Stretch one card, deepen another, or build a diagonal that climbs across the page, and the layout begins to guide the eye with purpose. A few deliberate placement choices can change the entire composition. Divi 5 ‘s Grid Editor makes those choices easy to explore. You can resize and reposition items directly on a visual canvas, then see how each change affects the layout before you move on. In this guide, we will build five creative Grid layouts, each designed to direct attention in a different way. How CSS Grid Works Before CSS Grid, designers commonly built page layouts with tables, floats, positioning, and, later, Flexbox. Those methods still have valid uses, but complex two-dimensional layouts often required extra markup or careful workarounds. CSS Grid provides a layout system built around columns and rows . Their intersections form cells, and child items can be placed automatically or assigned to spec...
Post a Comment
Read more

How To Build A Filterable Real Estate Listings With Divi 5

Image
Real estate websites live or die by their search experience. Visitors expect to enter an address or city, choose a property type, select the number of bedrooms and bathrooms, pick an amenity, and see matching listings without leaving the page or wrestling with a clunky filtering plugin. In this post, we’ll build that kind of filterable listings page using Divi 5 and Advanced Custom Fields (ACF) . We’ll combine two Divi 5 features, the Loop Builder and the Post Filter module introduced with the Loop Filter Modules , to create a fully custom property grid that visitors can search and filter on the front end. ACF will handle the custom fields, including price, city, bedrooms, bathrooms, square footage, amenities, and agent name, that power the loop cards and filter form. By the end, you’ll have a polished real estate layout you can use on your next project, along with a downloadable JSON file of the completed design. Let’s get started. What Is The Loop Builder...
Post a Comment
Read more