In Part 3 of our Mastering Flexbox sequence, we explored Format Wrapping, the diversities between Wrap and No Wrap, how Align Content material impacts wrapped multi-line layouts, and the way Wrap Opposite and Show Order can beef up responsive waft.
On this fourth installment, we’ll center of attention on one of the crucial not unusual format demanding situations in internet design: aligning content material with out depending on hidden spacers, handbook spacing hacks, or customized CSS.
Prior to Divi 5, designers steadily used empty Divider modules, handbook padding, margins, or customized CSS to push content material into position, create visible stability, or power parts to align within equal-height boxes. The ones strategies labored, however they added additional construction, required extra breakpoint-specific cleanup, and made layouts tougher to take care of.
Divi 5 will provide you with a cleaner visible workflow. With Flexbox controls similar to Justify Content material, Align Pieces, Align Content material, and Hole, plus supporting gear like Develop To Fill, Module Groups, and Nested Modules, you’ll be able to align content material at once within the Visible Builder with a long way much less customized code.
Let’s dive in.
Why Conventional Alignment Strategies Fall Brief
Prior to Divi 5, actual vertical or horizontal alignment steadily required workarounds. One of the most maximum not unusual tactics incorporated:
- The use of hidden Divider modules to push content material down or create synthetic area.
- Including customized CSS to vertically middle or bottom-align content material within equal-height columns.
- Depending on handbook padding and margin values that wanted consistent adjustment throughout breakpoints.
The ones approaches may remedy the speedy visible drawback, however in addition they made layouts extra fragile. If a headline modified, a button label wrapped, or a piece switched to a smaller breakpoint, the format steadily wanted any other spherical of spacing changes.
With Divi 5’s local Flexbox Layout System, alignment may also be treated on the container degree. Gear like Justify Content material, Align Pieces, Hole, and Develop To Fill allow you to create balanced layouts that reply extra naturally to actual content material.
Core Alignment Gear You’ll Use Maximum
Maximum Flexbox alignment controls are living within the Format possibility workforce. Crucial ones to grasp are Justify Content material, Align Pieces, Align Content material, and Hole.
Justify Content material distributes kid parts alongside the primary axis. In a Row path, that most often way horizontal distribution. In a Column path, that most often way vertical distribution. Its choices, together with Get started, Heart, Finish, House Between, House Round, and House Lightly, allow you to keep watch over how content material is located within its mother or father container.
Align Pieces controls alignment alongside the pass axis. In a Row format, this most often impacts vertical alignment. In a Column format, it most often impacts horizontal alignment. The to be had choices, Get started, Heart, Finish, and Stretch, are helpful for centering pieces, aligning edges, or stretching pieces when their sizing lets in it.
When Format Wrapping is enabled and content material flows onto more than one strains, Align Content material controls how the ones wrapped strains are allotted alongside the pass axis. This surroundings most effective has a visual impact when there are more than one flex strains and the mother or father container has more room to distribute, similar to an outlined or minimal peak.
Those alignment gear change into much more tough when mixed with Horizontal Hole and Vertical Hole for constant spacing, Develop To Fill within the Sizing possibility workforce for versatile merchandise expansion, Module Groups for grouping similar modules, and Nested Modules for growing impartial alignment contexts within modules.
Alignment Examples Constructed With Divi 5
To turn how those gear paintings in combination, let’s stroll via a couple of sensible alignment examples and the settings utilized in every one.
Function: Construct a header navigation the place the brand and menu hyperlinks sit down at the left, the CTA buttons sit down at the correct, and the whole thing remains vertically targeted.
Settings Used: The format makes use of a single-column row. On the column degree, Justify Content material is ready to House Between, Align Pieces is ready to Heart, and the Horizontal Hole is ready to 20px. The primary Module Team, containing the brand and navigation hyperlinks, makes use of Justify Content material > House Between and Align Pieces > Heart. The second one Module Team, containing the 2 buttons, makes use of Justify Content material > Finish, Align Pieces > Heart, and a 10px Horizontal Hole so the buttons sit down smartly side-by-side.
This mix creates a balanced navigation header with out hidden spacing modules or handbook margin changes between each and every part.
2. Hero Segment
Function: Create a blank hero phase the place the content material stacks vertically, spacing remains constant, and the 2 CTA buttons sit down side-by-side.
Settings Used: The mother or father row makes use of Align Pieces > Stretch. On the column degree, Align Pieces and Justify Content material are each set to Get started, with a 20px Vertical Hole carried out between kid parts. A Module Team wraps the 2 buttons the use of Format Course > Row and a 15px Horizontal Hole, maintaining them aligned horizontally with constant area between them.
This way will provide you with predictable spacing from the mother or father container as an alternative of depending on additional Divider modules or one-off padding values.
3. Statistics Grid
Function: Show 4 key metrics in a responsive grid the place every stat card feels targeted, balanced, and simple to scan.
Settings Used: This phase makes use of a four-column row with Format Wrapping > Wrap and Column Magnificence > 1/2 on every column, making a two-by-two grid. The row makes use of 20px Horizontal Hole and 20px Vertical Hole to keep watch over spacing between the playing cards. On the column degree, Justify Content material and Align Pieces are each set to Heart. Each and every column additionally makes use of 20px Padding on all 4 aspects within the Spacing possibility workforce to create respiring room within every card.
Hole handles spacing between playing cards, whilst padding handles spacing within every card. Retaining the ones two roles separate makes the format more uncomplicated to regulate throughout breakpoints.
4. Provider Playing cards
Function: Create a provider phase the place the headline row aligns cleanly and every provider card assists in keeping its button located constantly, even if textual content lengths range.
Settings Used: The highest row makes use of two columns with Column Magnificence > 1/2 and Align Pieces > Finish on the row degree to align the content material towards the ground edge. Each and every column additionally makes use of Align Pieces > Stretch so its inside parts can fill the to be had width.
The second one row incorporates six columns with Format Wrapping > Wrap and Column Magnificence > 1/2. The row makes use of Align Pieces > Get started. Inside of every provider card, the Heading module makes use of a Nested Module for the supporting textual content, paired with a 10px Horizontal Hole for spacing. Develop To Fill is enabled the place the content material house wishes to take in more room, serving to the button keep aligned close to the ground of every card.
This system turns out to be useful for card layouts the place textual content lengths range however the CTA place wishes to stay constant.
5. Combined-Width Spotlight Segment
Function: Construct a spotlight house that mixes a big featured content material block, a statistic card, and smaller supporting containers whilst maintaining the format visually balanced.
Settings Used: This phase makes use of a row with combined column spans and Format Wrapping. The row has each Horizontal Hole and Vertical Hole set to 30px. On the mother or father degree, Align Pieces > Stretch is helping columns percentage a constant row peak when their sizing lets in it. One column makes use of Justify Content material > House Between to distribute its inside content material from height to backside, whilst the opposite columns use Get started. A 15px Vertical Hole on every column controls spacing between modules, and every column additionally applies 20px Padding on all 4 aspects for inside respiring room.
This mix creates a extra dynamic format whilst maintaining spacing, alignment, and inside construction more uncomplicated to regulate.
6. Procedure Steps
Function: Construct a four-step How It Works procedure format the place icons, step numbers, headings, and supporting textual content keep structured and aligned throughout columns.
Settings Used: This phase makes use of a two-column row with Column Magnificence > 1/2 and Format Wrapping > Wrap enabled. Each and every column has 10px Padding on all 4 aspects for inside spacing. On the column degree, Align Pieces > Stretch and Justify Content material > Get started are carried out.
Inside of every column, a Module Team wraps the icon and step quantity. This workforce makes use of Format Course > Row, Justify Content material > House Between, and Align Pieces > Heart, maintaining the icon and massive quantity aligned at the similar horizontal line.
This setup creates a structured procedure phase with out additional spacer modules.
Step-Through-Step Construct Walkthrough
Let’s stroll via the right way to construct a three-column crew member card phase the use of local Flexbox alignment gear, with Spacing used most effective the place it helps inside padding or visible respiring room.
Step 1: Create The Guardian Row
Upload a brand new three-column row. Choose Flex because the Format Taste if it isn’t already decided on. Set the row to Format Wrapping > Wrap should you plan so as to add greater than 3 crew participants later. This permits further columns to transport onto new flex strains as an alternative of requiring additional rows.
Subsequent, set the Horizontal Hole and Vertical Hole to 20px for constant spacing between columns.
Open the primary column’s settings. Within the Content material tab, assign a Background Colour.
Within the Format possibility workforce, set the Vertical Hole to 0px. This gets rid of computerized spacing between the column’s direct kid parts so the cardboard construction may also be managed extra deliberately with inside Module Teams.
Use the Border possibility workforce so as to add a Border Radius, Border Taste, Border Width, and Border Colour to the column.
Go back to the row and make a choice the Content material tab. Within the Components possibility workforce, right-click the primary column, replica its merchandise types, and paste the ones types onto the rest columns.
Step 2: Upload The Content material
Upload an Symbol module to the primary column. Within the Design tab, enlarge the Sizing possibility workforce and set the Aspect Ratio to 1:1. This frames the picture as a sq..
Subsequent, enlarge the Framing possibility workforce. Alternate Object Are compatible from the default Are compatible technique to Duvet. Use the Object Place picker to make a choice which a part of the picture must stay visual within the sq. body.
Subsequent, upload a Module Team and a Heading module to the primary column.
Within the Team’s Design tab, open the Format possibility workforce and set a 15px Vertical Hole. Then open the Spacing possibility workforce and upload 20px Padding to all 4 aspects.
Upload a Textual content module as a nested part within the primary Heading module.
Nested Modules mean you can position modules within different modules, turning the mother or father module right into a format container. This will provide you with any other degree of keep watch over over alignment, spacing, and inside construction.
Subsequent, upload a brand new Module Team with 3 Textual content modules underneath the opposite modules within the column. Taste them as wanted, then regulate the Team’s Flexbox settings. Within the Format possibility workforce, set the Horizontal Hole and Vertical Hole to 8px. Use Row for the Format Course and allow Format Wrapping so the tags can waft onto further strains when wanted.
To complete the column, upload any other Module Team. Use the Layers panel to verify it’s nested throughout the Major Team.
Within the remaining Team, upload a Social Media Observe module and a Textual content module, then taste them. Set the Team’s Format Course to Row and Justify Content material to House Between.
Alignment may also be managed on the module degree, too. Within the Textual content module’s Format possibility workforce, set each Justify Content material and Align Pieces to Heart.
Fill the rest two columns with content material to complete the preliminary design.
Step 3: Make Alignment Changes
Relying at the period of your content material, such because the bio textual content or the collection of talent tags, it’s possible you’ll understand small alignment shifts.
To stay the format balanced as content material adjustments, make a couple of focused Flexbox and Sizing changes with Justify Content material and Develop To Fill.
Even though it may well be tempting to set Justify Content material > House Between most effective on the column degree, that doesn’t remedy each and every inside alignment factor. It separates the primary and remaining direct kid parts, however center content material similar to bios and tags might nonetheless shift relying on its period.
A extra dependable way is to set every Column and major Module Team to Justify Content material > House Between, then use Develop To Fill at the content material house that are meant to take in the rest area.
Subsequent, make a choice the major Module Team. Open the Sizing possibility workforce and allow Develop To Fill.
This permits the primary content material workforce to enlarge within the card, serving to the ground Social Icons workforce keep aligned close to the tip of the cardboard throughout other content material lengths.
To stay the Tag Team aligned above the Social Team, allow Develop To Fill at the Heading module as smartly.
This we could the heading and bio house take in more room, maintaining the tag workforce and social row in a extra constant place as content material adjustments.
Step 4: Use Divi 5’s Responsive Gear
Flexbox is helping layouts adapt throughout breakpoints, however you must nonetheless evaluate pill and make contact with perspectives. Use Divi’s Customizable Responsive Breakpoints to preview the format on smaller displays. Transfer between breakpoints to identify alignment or spacing problems, then practice focused changes with per-breakpoint Flexbox settings, Column Magnificence values, or Construction Templates when wanted.
Step 5: Edit, Replica, Or Delete Columns
As soon as your crew member card works throughout breakpoints, including extra crew participants is discreet. Open the row settings, then cross to the Components possibility workforce. From right here, you’ll be able to edit, replica, or delete any column.
Duplicating a column copies the column styling, Flexbox settings, padding, borders, and nested modules. Replace the content material within the new column, then evaluate the format at every breakpoint. As a result of Format Wrapping is enabled at the row, further playing cards can waft onto new strains as an alternative of requiring new rows.
Best possible Practices And Professional Pointers
Now that you simply’ve noticed Flexbox alignment in motion, listed below are a couple of sensible pointers that will help you construct cleaner, extra maintainable layouts.
Regulate Alignment Consistent with Breakpoint
You don’t have to make use of the similar alignment settings throughout each and every software. For instance, you may use Heart alignment on cell for higher visible stability whilst maintaining Get started alignment on desktop. Divi 5’s Responsive Editor and Customizable Responsive Breakpoints make those adjustments more uncomplicated to regulate.
Mix Alignment With Format Course
Switching between Row and Column path at other breakpoints adjustments how Justify Content material and Align Pieces behave. Use this deliberately when a horizontal desktop format must change into a stacked or targeted cell format.
Use Peak When Operating With Align Content material
Align Content material most effective has a visual impact when wrapping creates more than one flex strains and the mother or father container has additional cross-axis area. Including a peak or minimal peak, similar to 600px, offers Align Content material room to distribute the ones wrapped strains.
All the time Take a look at With Actual Content material
Placeholder content material can conceal alignment problems. Take a look at with brief, medium, and lengthy replica, other button labels, various tag counts, and actual photographs early within the procedure so you’ll be able to catch format problems sooner than publishing.
Obtain The Layouts
That can assist you follow the whole thing lined on this submit, we’ve ready a zipped record known as Flexbox Alignment. It comprises the instance layouts proven above, constructed with Flexbox alignment patterns you’ll be able to check out and reuse. You’ll be able to import any format in my opinion or add the Flexbox Alignment – ALL.json record to import them abruptly.
To import them, cross in your WordPress dashboard and navigate to Divi > Divi Library. Click on the Import & Export button on the height.
Transfer to the Import tab, make a choice a JSON record, and click on Import Divi Builder Layouts.
As soon as imported, open a web page within the Visible Builder or create a brand new one. When the Builder quite a bit, click on so as to add a new phase to the web page.
Choose the Upload From Library tab, make a selection a format, and click on Use This Segment to load it onto the web page.
Grasp Alignment With Flexbox In Divi 5
For lots of not unusual alignment patterns, you now not want hidden Divider modules, spacing hacks, or customized CSS. Divi 5‘s Flexbox gear provide you with visible, content-aware controls for positioning, spacing, and aligning parts throughout responsive layouts.
In Phase 5 Of Mastering Flexbox: Reordering Content material For Higher Cell Layouts, we’ll display the right way to mix Show Order, Flexbox path adjustments, and Wrap Opposite to create higher cell flows with out duplicating content material.
Obtain the instance layouts, experiment within the Visible Builder, and get started construction cleaner, extra maintainable pages. Drop a remark underneath and tell us which alignment method you’re maximum excited to take a look at.
The submit Part 4 Of Mastering Flexbox: Aligning Content Without Spacers Or Custom CSS gave the impression first on Elegant Themes Blog.
0 Comments