In Phase 1 of our Mastering Flexbox in Divi 5 collection, we explored the core settings within the Structure possibility crew when the usage of Flex because the Structure Taste. Now it’s time to position the ones controls to paintings on one of the vital not unusual structure demanding situations in internet design: construction card sections the place playing cards proportion a constant top and buttons keep aligned, even if content material lengths range.
This hands-on information will display you tips on how to create balanced card layouts the usage of local Divi 5 Flexbox controls. By means of the tip, you’ll know how to mix parent-level stretching, inner card spacing, and Develop to Fill sizing to construct characteristic playing cards, testimonials, pricing tables, weblog playing cards, gallery playing cards, and extra.
Let’s dive in.
Contents
- 1 Why Equivalent Top Playing cards Topic
- 2 Core Flexbox Tactics For Equivalent Top Playing cards
- 3 Actual-Global Examples
- 4 Complete Step-By means of-Step Card Construct Walkthrough
- 5 Responsive Conduct & Best possible Practices
- 6 Obtain The Layouts
- 7 Obtain For Unfastened
- 8 You’ve gotten effectively subscribed. Please take a look at your e-mail deal with to verify your subscription and get get entry to to unfastened weekly Divi structure packs!
- 9 Grasp Equivalent Top Playing cards With Flexbox In Divi 5
Why Equivalent Top Playing cards Topic
Playing cards are one of the vital not unusual design patterns on trendy web pages. You’ll to find them in characteristic sections, testimonial rows, pricing tables, weblog grids, product showcases, carrier lists, and lots of different layouts.
The problem begins when content material lengths range. One card could have a brief headline and two strains of textual content, whilst some other has an extended heading, an extended description, or a bigger characteristic checklist. With out the correct structure construction, some playing cards develop into taller than others, buttons sit down at other heights, and the entire phase feels asymmetric.
Key Advantages Of Equivalent Top Playing cards
- Visible Unity: Playing cards really feel polished, intentional, and more straightforward to check.
- Higher Clarity & UX: Constant heights and aligned CTAs make sections more straightforward to scan.
- Clearer Calls To Motion: When buttons proportion the similar visible baseline, guests can evaluate choices and act extra temporarily.
- Responsive-Pleasant Construction: The similar Flexbox trend can also be adjusted throughout desktop, pill, and cellular breakpoints.
Mastering this method will enhance nearly each and every multi-column phase you construct in Divi 5.
Core Flexbox Tactics For Equivalent Top Playing cards
Developing equal-height playing cards with aligned buttons in Divi 5 is simple as soon as you know the parent-child dating. Generally, you’ll use two core Flexbox settings and one supporting Sizing environment.
1. Dad or mum Container: Equivalent Heights With Align Pieces > Stretch
On the mother or father point, generally a Row or Module Team, set Align Pieces > Stretch.
This tells Divi to stretch direct little one pieces around the move axis when their sizing permits it. In a horizontal row, that implies the playing cards can stretch vertically to check the row top. In a vertical column, Stretch impacts the horizontal axis as a substitute.
2. Inside of Every Card: Push Buttons To The Backside
Inside of every card, generally a Column or Module Team, set the cardboard’s Structure Course to Column, then observe Justify Content material > Area Between.
Justify Content material distributes little one pieces alongside the primary axis. When the cardboard makes use of a Column course, the primary axis runs vertically. With Area Between, the highest content material remains close to the highest whilst the button or CTA can sit down on the backside of the cardboard.
3. Supporting Atmosphere: Sizing > Measurement > Develop To Fill
In lots of genuine layouts, Justify Content material > Area Between will get you shut, nevertheless it would possibly not remedy each and every alignment factor on its own. Lengthy quotes, asymmetric characteristic lists, variable excerpts, and nested content material teams can nonetheless create awkward spacing within the card.
That is the place Sizing > Measurement > Develop To Fill turns into helpful.
Within the instance underneath, Develop To Fill is implemented to the Textual content module within every column. The chosen part expands into the to be had area, which is helping push the content material underneath it towards the ground of the cardboard whilst maintaining the textual content aligned from the highest.
When those 3 gear paintings in combination, you’ll be able to construct skilled card layouts visually and keep away from customized CSS for many equal-height card patterns.
Actual-Global Examples
Let’s take a look at 5 sensible examples that display how the core ways paintings throughout several types of content material. Every instance features a before-and-after view and the precise settings used.
Instance 1: Function Playing cards
Sooner than: The playing cards proportion the similar general top, however the buttons sit down at other positions as a result of every card has a distinct quantity of textual content.
After: The button sits on the backside of each and every card, even if the cardboard replica varies. That is completed via environment the mother or father row’s Align Pieces strategy to Stretch and every column’s Justify Content material strategy to Area Between. The Module Team containing the icon, heading, and textual content remains on the peak, whilst the Button module out of doors that crew is driven to the ground.
Key Settings:
- Dad or mum Row: Align Pieces > Stretch
- Every Column: Structure Course > Column + Justify Content material > Area Between
- Module Team: Wraps the Icon, Heading, and Textual content modules
Instance 2: Testimonial Playing cards
Sooner than: The mother or father row has Align Pieces > Stretch implemented, so the playing cards proportion a constant top. On the other hand, with out Justify Content material > Area Between within every card, the writer blocks sit down anyplace the quote ends. Longer quotes push the writer knowledge into other positions, growing visual misalignment around the row.
Intermediate Step: After environment every column to Justify Content material > Area Between, the superstar rankings keep on the peak and the writer blocks transfer to the ground. On the other hand, the quote textual content would possibly nonetheless sit down awkwardly in the remainder area.
After: Quotes range in period, however the writer block remains anchored on the backside of each and every card. The row makes use of Align Pieces > Stretch so all columns proportion the similar row top. Every column makes use of Justify Content material > Area Between to split the highest score from the ground writer block. To mend the quote spacing, allow Sizing > Measurement > Develop To Fill at the quote Textual content module. This permits the quote space to soak up to be had area from the highest, pushing the writer block down whilst maintaining the score pinned above.
Key Settings:
- Dad or mum Row: Align Pieces > Stretch
- Every Column: Justify Content material > Area Between
- Quote Textual content Module: Measurement > Develop To Fill
Instance 3: Pricing Playing cards
Sooner than: The mother or father row has Align Pieces > Stretch implemented, which provides the pricing playing cards a constant outer top. Every column additionally makes use of Justify Content material > Area Between. On the other hand, since the characteristic lists range in period, the pricing knowledge and buttons nonetheless don’t align constantly throughout each and every plan.
After: The mother or father row’s Align Pieces > Stretch environment assists in keeping the cardboard heights constant. Every column makes use of Justify Content material > Area Between so the CTA buttons proportion the similar baseline. To unravel the remainder unevenness led to via other characteristic checklist lengths, allow Sizing > Measurement > Develop To Fill at the Module Team that accommodates the pricing knowledge, such because the “$X/mo” phase. This shall we the pricing space take in more space and pushes the decrease content material right into a extra constant vertical rhythm.
Key Settings:
- Dad or mum Row: Align Pieces > Stretch
- Every Column: Justify Content material > Area Between
- Pricing Module Team: Measurement > Develop To Fill
Instance 4: Weblog Put up Playing cards
Sooner than: The playing cards have equivalent outer top due to Align Pieces > Stretch at the mother or father row, however the titles and excerpts range in period. This reasons the metadata and Learn Extra hyperlinks to take a seat at inconsistent positions around the playing cards.
After: Despite the fact that the item titles and excerpts range, the Learn Extra hyperlink seems on the similar point throughout all 3 playing cards. The mother or father row makes use of Align Pieces > Stretch. Inside of every column, the coloured header icon is wrapped in a single Module Team, whilst the primary content material, together with the class label, heading, excerpt, metadata, and button, is wrapped in a 2d Module Team.
The second one Module Team makes use of Justify Content material > Area Between, and the column-level Vertical Hole is lowered to 0. In the end, Develop To Fill is enabled at the excerpt Textual content module. This permits the excerpt space to soak up to be had area and push the metadata and Learn Extra hyperlink to the ground of every card.
Key Settings:
- Dad or mum Row: Align Pieces > Stretch
- Every Column: Vertical Hole > 0
- 2nd Module Team: Justify Content material > Area Between
- Excerpt Textual content Module: Measurement > Develop To Fill
Instance 5: Gallery Playing cards
Sooner than: Every symbol has a distinct local facet ratio, akin to panorama, portrait, or sq.. Divi 5’s Side Ratio and Symbol Framing options assist you standardize symbol framing, however the content material underneath every symbol nonetheless wishes a powerful Flexbox construction to align constantly.
Every symbol is about to a constant 4:3 facet ratio within the Sizing possibility crew.
Then, the Framing settings are adjusted to regulate how the picture sits within that body.
After: For the general end result, the heading, textual content, and button modules are wrapped in a Module Team, and Develop To Fill is enabled on that crew. This permits the content material space underneath every symbol to amplify into the to be had area, pushing the button to the ground and growing constant vertical alignment around the playing cards.
Key Settings:
- Dad or mum Row: Align Pieces > Stretch
- Symbol Module: Side Ratio > 4:3 + Framing changes within the Sizing possibility crew
- Module Team: Wraps the heading, textual content, and button modules + Measurement > Develop To Fill
Complete Step-By means of-Step Card Construct Walkthrough
Right here’s tips on how to construct a three-column characteristic card structure the usage of the ways coated above.
Upload a brand new three-column Row to a web page within the Visible Builder. On this workflow, Flex is chosen because the Structure Taste.
Within the row’s Structure possibility crew, set the Horizontal Hole to 3%. This decreases the horizontal area between columns and provides the playing cards a cleaner structure rhythm.
Subsequent, edit the primary column. Use the Design tab so as to add your Spacing and Border kinds. With the primary column decided on, open the Structure possibility crew and set Justify Content material to Area Between.
Go back to the row point, then right-click the primary column within the Parts possibility crew and make a choice Replica Merchandise Kinds. This provides you with a handy guide a rough method to reuse the similar column styling and structure settings.
Proper-click the second one and 3rd columns and make a choice Paste Merchandise Taste.
Upload Module Teams And Content material To The Column
Get started via including a Module Team to the primary column. Inside of it, position 3 further Module Teams to your content material. At the primary crew, set the Vertical Hole to 0px, Justify Content material to Area Between, and Align Pieces to Stretch.
Upload a Heading module to the primary Team, an Icon module to the second one Team, and some other Heading module to the 3rd Team. Taste them as wanted.
With the nested Module Team decided on within the Layers panel, right-click to open the short movements menu. Make a selection Upload Component > Upload Component Underneath. This allows you to position some other part into the column underneath the nested crew construction.
Make a selection a Module Team, then upload a Textual content Module within it.
Upload padding to the brand new Team, akin to 25px on either side. Then upload a Button, Heading, and two Textual content modules, and magnificence them as wanted. As soon as the content material is added, regulate the Vertical Hole to create the correct amount of spacing between modules.
Upload content material to the remainder columns, copying and pasting content material and kinds as wanted. As soon as all content material is added, you might realize that shorter columns depart the ground textual content or CTA misaligned. To proper this, use Develop To Fill at the part that are supposed to take in the to be had area. For reusable card designs, observe this constantly to the similar part kind throughout every card.
Make a selection the matching 2d Team within the card columns, amplify the Sizing possibility crew, and allow Measurement > Develop To Fill.
Subsequent, observe Develop To Fill to the Textual content modules that want to take in more space within the second one and 3rd columns.
As soon as implemented, the decrease textual content and button content material align extra constantly around the columns.
Responsive Conduct & Best possible Practices
Keep an eye on Responsive Layouts With Structure Wrapping
Divi 5 provides you with breakpoint-level regulate over how Flex layouts behave. For card rows, Structure Wrapping > Wrap is particularly helpful as it permits playing cards to transport onto further strains when there isn’t sufficient horizontal area.
As soon as wrapping is energetic, playing cards can stack or wrap extra naturally on smaller monitors. Mix this with per-breakpoint changes the usage of the Responsive Editor when you want tighter regulate over pill and cellular layouts.
Use Show Order For Higher Cell Drift
The visible order that works neatly on desktop would possibly not all the time be ultimate on smaller monitors. Use the Show Order environment within the Content material tab of columns or modules to reorder components at explicit breakpoints. That is particularly helpful for alternating textual content/symbol layouts or when you wish to have sure playing cards to look first on cellular with out duplicating content material or writing customized media queries.
Save And Reuse Your Card Layouts
Whenever you’ve constructed a card design you prefer, right-click the mother or father Row or Module Team and put it aside to the Divi Library. You’ll be able to additionally save layouts to Divi Cloud for get entry to throughout more than one websites. This turns the whole Flexbox card construction, together with nested teams and structure settings, right into a reusable element you’ll be able to insert into long term pages.
Take a look at With Actual Content material Permutations
At all times take a look at card layouts with brief, medium, and lengthy content material. The actual take a look at of a powerful equal-height card machine is the way it behaves when content material lengths vary dramatically. Use placeholder content material of various lengths all the way through construction to ensure your Develop To Fill, Area Between, and Stretch settings stay dependable throughout real-world situations.
Obtain The Layouts
That will help you get began, we’ve created a JSON report containing the instance layouts from this put up. To make use of them, navigate to Divi > Divi Library and click on the Import & Export button.
Make a selection the Import tab, load the Equivalent Top Playing cards in Divi 5.JSON report, and click on Import Divi Builder Layouts.
As soon as the information are imported, create a brand new web page or open an present one within the Visible Builder. Click on so as to add a brand new phase.
Make a selection Upload From Library and make a choice a structure phase.
In the end, make a choice Use This Phase to load it onto the web page.
Grasp Equivalent Top Playing cards With Flexbox In Divi 5
With 3 core gear, Align Pieces > Stretch at the mother or father, Justify Content material > Area Between within every card, and Develop To Fill the place wanted, you’ll be able to create blank, constant equal-height card layouts in Divi 5 with out customized CSS.
The examples on this put up display how versatile Divi 5‘s Flexbox Structure Machine can also be while you mix parent-level alignment with inner card construction. As soon as you know this trend, you’ll be able to use it on characteristic rows, testimonials, pricing tables, weblog playing cards, galleries, and different multi-column sections.
In Phase 3 of our Mastering Flexbox collection, we’ll discover complicated Structure Wrapping methods, together with when to make use of Wrap vs. No Wrap, how Align Content material impacts multi-line layouts, and tips on how to observe those controls to extra advanced responsive constructions.
Now it’s your flip. Obtain the instance layouts, experiment within the Visible Builder, and take a look at construction your individual card sections. Tell us what you suppose within the feedback underneath.
The put up Phase 2 Of Mastering Flexbox: Developing Equivalent-Top Playing cards With Aligned Buttons gave the impression first on Chic Issues Weblog.
WordPress Web Design