Divi 5 simply shipped its all‑new Flexbox‑based totally format machine. It replaces Divi 4’s outdated block format engine and unlocks robust new controls proper within the Visible Builder. Each and every new row now defaults to Flex format. Except you’ve already used CSS Flexbox, this variation calls for a brand new design mindset as a result of Flex works another way. In the event you don’t alter your behavior, you’ll get caught.
This replace will give you visible controls for wrapping, path, spacing, ordering, and alignment — all inbuilt. No hacky customized CSS. It additionally comes with pre-configured row shortcuts to construct complicated row buildings with minimum tweaking of Show settings. Some block‑based totally options, like strong point and full-width sections, are deprecated as a result of Flex now covers these kind of use instances.
This put up is going into the 5 greatest pitfalls you’ll hit when switching your psychological style from Block to Flex in Divi 5.
Pitfall #1: Forcing Flex Into A Block Mindset
→ Flex calls for a brand new psychological style, no longer simply new controls.
No one likes alternate until they know they’re hitting very actual obstacles. For plenty of, the outdated format machine is what they knew and had been pleased with. Nevertheless it did have its obstacles. Those that knew sufficient about CSS knew that the outdated machine used to be lacking issues that Flexbox used to be designed to treatment. Warding off the primary pitfall calls for working out that Flexbox isn’t only a block format with further choices.
In Divi 4, modules stacked vertically by way of default — each part sat under the only earlier than it. You should stack issues horizontally with columns, however at that time, you might paintings with a couple of rows + columns inside of a bit to construct a format. That used to be predictable and relaxed for plenty of, nevertheless it additionally ended in the irritating truth of no longer having the ability to have two buttons side-by-side and different design demanding situations.
Divi 5 works another way now as a result of new boxes (i.e., Sections, Rows, Columns, and teams) are set to “Flex” by way of default. You get extra particular choices on the container degree for arranging kid parts. Flexbox is strong as it permits for versatile layouts the place parts are situated according to to be had house and the content material inside them. Extra on that within the subsequent pitfall. This permits layouts to evolve to various display screen sizes and content material with out depending on fastened or absolute positioning. Right here’s however one instance to check Flex with Block.
Block format stacks modules vertically alongside the block axis. Flexbox allows you to make a choice from row and column as the principle axis.
Every environment and choice within the UI corresponds immediately with the real CSS homes added to each and every container.
Pitfall #2: No longer Realizing How Flex Shrink & Develop Have compatibility Into Kid Component Sizing
→ With out Shrink and Develop, your layouts received’t behave as anticipated.
With Flex in Divi 5, kid modules may have a suite width or peak. As well as, they may be able to shrink or fill (their width or peak) relying at the room within the container. On this instance, Textual content Modules are set to 45% width, which means that two modules would have compatibility horizontally as though in the similar row. But when we upload an unusual choice of Textual content Modules, we don’t need there to be empty house. We will set those modules to have Flex Develop, after which when there’s to be had house in a row, those modules will develop to fill.
Divi exposes controls like “Develop to Fill”, “Shrink to Have compatibility”, and customized settings on Kid Parts inside any Flex container (Kid Component > Design > Sizing > Develop to Fill, Shrink to Have compatibility, or Customized).
Surroundings peak and width on kid parts feels acquainted in case you’re used to dam layouts. However with Flexbox, Develop and Shrink settings mean you can mix fastened sizing with responsive habits — adapting to the to be had house in each and every container. It provides complexity, but in addition unlocks way more flexibility.
Shrink to Have compatibility and Develop to Fill (along with flex-basis) also are very to hand at serving to you create responsive layouts. For block layouts to be responsive continuously, you would have to arrange a couple of breakpoints and widths/heights at each and every of the ones breakpoints. Flexbox can take pleasure in distinctive settings at quite a lot of breakpoints, however because the title suggests, it’s very a lot versatile. That is particularly the case when the usage of clamp() for typography. The use of either one of the ones in combination, together with different relative CSS gadgets, will destroy your consistent want for breakpoints.
Let’s have a look at any other instance constructed with Flexbox.
The Column Container (dad or mum) is about to flex with those settings:
- Horizontal and Vertical Hole: 30px (this may use calc or clamp to be a little bit higher, even)
- Structure Path: Row Opposite (cause of this determination in pitfall #4)
- Justify Content material: Heart
- Align Pieces: Heart
- Flex Wrap: Wrap Opposite (cause of this determination in pitfall #4)
I then positioned 3 kid parts within the Column. A Heading Module, Divider Module, and a Textual content Module. Listed here are the related settings for each and every:
- Heading Module
- Textual content Dimension: clamp(2rem, 1.5rem + 2vw, 3rem)
- Width: Auto
- Flex Dimension: Shrink to Have compatibility
- Divider Module
- Width: Auto
- Flex Dimension: Shrink to Have compatibility and Develop to Fill
- Textual content Module
- Textual content Dimension: clamp(0.9375rem, 0.75rem + 0.4vw, 1rem)
- Width: Auto
- Flex Dimension: Shrink to Have compatibility
With a Row Flex Path, kid parts line up horizontally every time there’s room. The Textual content Module is the widest, so it fills its personal row. The Divider Module then grows or shrinks because it has auto-width and each flex-grow and flex-shrink enabled. The Header Module makes use of solely its intrinsic width and remains compact. This setup yields a completely responsive format with none breakpoints.
Pitfall #3: No longer Breaking The Margin Dependancy
→ Use Hole as a substitute — it’s smarter, cleaner, and made for Flex.
In Divi 4, visible gaps between modules and different parts required margins (vertical gaps by means of the ground margin, horizontal gaps by means of the left/proper margin). When the distance used to be implemented to column spacing, Divi 4 had a Gutter environment, nevertheless it didn’t take same old CSS values, and it in truth used margin to the edges of columns to create the distance. This is similar method that Block Layouts nonetheless paintings. However there’s now a cleaner, more practical method.
Divi 5’s Flexbox machine introduces row and vertical hole controls beneath Design > Structure > Horizontal and Vertical Hole. Those map to CSS hole and row-gap. Vertical gaps practice routinely to each and every “Flex Row” when pieces wrap onto a brand new line. The similar is correct for Horizontal Gaps: every time there are kid parts subsequent to one another, the distance shall be provide. Those Hole settings additionally settle for any certain CSS unit, so you’ll use clamp() or calc() to create responsive Hole spacings.
This reduces the want to practice margin values to every kid part. The Hole environment adapts routinely according to Flex Path and the choice of kids within the container to use any gaps routinely. Margins nonetheless have their position, however their want for spacing parts inside of a container is lowered.
Pitfall #4: Underusing Opposite Waft & Ordering Controls
→ Visible order and semantic order don’t have to check.
By way of default, kid parts in a Flex container will show of their supply order. Flexbox and Divi 5 provide the skill to specify opposite flex instructions and order controls to modify the visible float of parts with out converting the HTML ordering of parts.
The Opposite path toggle beneath Structure Path allows you to opposite the order of parts in both the row or column path. To take a look at the format instance from pitfall #2 once more, we will see why we’d need this. You’ll see within the Layers view that the order of kid parts is the Heading, then the divider, and in spite of everything the Textual content Module. Semantically, having the Heading (an H2 on this case) on the most sensible of the stack is sensible for display screen readers. Then again, the heading is plain sufficient visually, whether or not first or remaining, since we’re the usage of a visible hierarchy with its textual content measurement.
The use of Row Opposite because the Flex Path and Wrap Opposite keeps the HTML ordering (vital for accessibility) whilst additionally permitting me to design issues how we envision them.
You’ll reach the similar the usage of Kid Component Ordering, which is located in Divi when clicking on a Kid Component’s Settings > Content material tab > Order. We will alternate the order wherein solely this part will seem. On this instance, we reach the similar finish consequence, however with a unique environment — one who would possibly make extra sense to a couple.
Pitfall #5: Forgetting To Set Wrap
→ Flex received’t destroy to new rows until you inform it to.
We discussed wrapping previous, nevertheless it merits its personal segment. New flex boxes default to no wrap. This may have sudden penalties. As an example, in case you upload 4 kid modules, each and every at 50% width, you’d be expecting them to turn on two Flex Rows. Your downside is solely that it’s important to permit your container to wrap.
Divi features a toggle referred to as Structure Wrapping, which has 3 states: no-wrap, wrap, and wrap-reverse. You should permit wrap if you wish to have modules to wreck to new traces at a threshold. That’s how Divi helps multi-row buildings inside of a unmarried container (Nested or A couple of Rows aren’t the one method to try this now).
Take Your Time To Grasp Flexbox
Flex in Divi 5 is extra robust than Divi’s earlier block-only format machine. Then again, it calls for some finding out to know. Flexbox isn’t a Divi-specific environment, so it’s vital that you realize the fundamentals of ways this CSS device works. Divi makes it simple to put into effect since the entire settings you’ll practice in CSS are to be had immediately within the editor. However the concept that may be very other from Block.
On account of the ones variations, we extremely counsel you spend an hour the usage of an interactive instructing device to know Flexbox. One this is simple to make use of and in point of fact does the trick is FlexboxFroggy.com. It takes you via 24 steadily complicated demanding situations, instructing you the entire fundamentals. It’s method higher than doomscrolling for an hour.
Use Flex With Divi 5 Lately
Flexbox in Divi 5 is fair. It doesn’t wager what you wish to have. It asks you to come to a decision. However as soon as you make a decision, flexibility follows. You’ll construct each format construction responsibly, responsively, and reliably — even infinitely nested — with out customized CSS or hacks.
The put up 5 Pitfalls To Keep away from When Switching To Divi 5’s Flexbox Structure Device gave the impression first on Sublime Topics Weblog.
WordPress Web Design