WordPress News and Tips
best wordpress website design examples, award winning websites reviews
Part 4 Of Mastering Flexbox: Aligning Content Without Spacers Or Custom CSS
In Part 3 of our Mastering Flexbox series, we explored Layout Wrapping, the differences between Wrap and No Wrap, how Align Content affects wrapped multi-line layouts, and how Wrap Reverse and Display Order can improve responsive flow.
In this fourth installment, we’ll focus on one of the most common layout challenges in web design: aligning content without relying on hidden spacers, manual spacing hacks, or custom CSS.
Before Divi 5, designers often used empty Divider modules, manual padding, margins, or custom CSS to push content into place, create visual balance, or force elements to align inside equal-height containers. Those methods worked, but they added extra structure, required more breakpoint-specific cleanup, and made layouts harder to maintain.
Divi 5 gives you a cleaner visual workflow. With Flexbox controls such as Justify Content, Align Items, Align Content, and Gap, plus supporting tools like Grow To Fill, Module Groups, and Nested Modules, you can align content directly in the Visual Builder with far less custom code.
Let’s dive in.
Why Traditional Alignment Methods Fall Short
Before Divi 5, precise vertical or horizontal alignment often required workarounds. Some of the most common techniques included:
Using hidden Divider modules to push content down or create artificial space.
Adding custom CSS to vertically center or bottom-align content inside...
In this fourth installment, we’ll focus on one of the most common layout challenges in web design: aligning content without relying on hidden spacers, manual spacing hacks, or custom CSS.
Before Divi 5, designers often used empty Divider modules, manual padding, margins, or custom CSS to push content into place, create visual balance, or force elements to align inside equal-height containers. Those methods worked, but they added extra structure, required more breakpoint-specific cleanup, and made layouts harder to maintain.
Divi 5 gives you a cleaner visual workflow. With Flexbox controls such as Justify Content, Align Items, Align Content, and Gap, plus supporting tools like Grow To Fill, Module Groups, and Nested Modules, you can align content directly in the Visual Builder with far less custom code.
Let’s dive in.
Why Traditional Alignment Methods Fall Short
Before Divi 5, precise vertical or horizontal alignment often required workarounds. Some of the most common techniques included:
Using hidden Divider modules to push content down or create artificial space.
Adding custom CSS to vertically center or bottom-align content inside...
https://www.elegantthemes.com/blog/div
5 Tetris Designs For Divi 5 (Free Download!)
Divi 5 makes it easy to create structured layouts with strong visual rhythm. In this free pack, you’ll get 5 Tetris Designs that are perfect for landing pages, service sections, feature highlights, portfolio sections, product pages, agency websites, content blocks, call-to-action areas, and more.
Each design uses modular blocks, offset cards, bold spacing, layered content areas, typography, imagery, buttons, and clean grid relationships to create polished sections with a dynamic, puzzle-like layout style. Import a section, replace the content, update the visuals, and you’re ready to go.
Preview
Here’s a quick look at the 5 Tetris Designs included in the pack. The download is further down the post.
Download 5 Tetris Designs For Divi 5
Get all 5 designs for free. Import them into your Divi Library and add them to any page in the Visual Builder.
Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left ....
Each design uses modular blocks, offset cards, bold spacing, layered content areas, typography, imagery, buttons, and clean grid relationships to create polished sections with a dynamic, puzzle-like layout style. Import a section, replace the content, update the visuals, and you’re ready to go.
Preview
Here’s a quick look at the 5 Tetris Designs included in the pack. The download is further down the post.
Download 5 Tetris Designs For Divi 5
Get all 5 designs for free. Import them into your Divi Library and add them to any page in the Visual Builder.
Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left ....
https://www.elegantthemes.com/blog/div
WordPress Studio Just Got Faster, the CLI is Now Dependency-Free, and Sonnet 5 is Supported
Good news for WordPress developers working on building plugins, themes, blocks, or full sites locally:
Every WordPress Studio site is faster. Just open the Studio app to feel the difference.
If you’ve been curious about the Studio CLI but didn’t want to install Node.js just to try it, you’re in luck. We’ve updated the install command to one dependency-free line. Run it in your terminal, and you’re in.
Studio Code is now running Anthropic’s most agentic Sonnet model by default.
As a reminder, WordPress Studio is our agentic local development tool for WordPress. It’s free, open source, and improving every month.
Download WordPress Studio
A faster building experience
Page loads are now 30–50% faster, and your local Studio sites use less than a third of the memory than they did before. You’ll notice it most on sites carrying a lot of plugins, exactly where things used to feel slower.
That speed comes from a new default Native PHP runtime that runs your site with fewer abstractions.
If you’d rather keep a site’s code strictly contained — say, you’re testing an untrusted third-party plugin or theme — you can switch that site to the Sandbox runtime option anytime under Site Settings → Edit site → PHP runtime. Sandbox, which is powered by WordPress Playground, keeps a site’s code from running...
Every WordPress Studio site is faster. Just open the Studio app to feel the difference.
If you’ve been curious about the Studio CLI but didn’t want to install Node.js just to try it, you’re in luck. We’ve updated the install command to one dependency-free line. Run it in your terminal, and you’re in.
Studio Code is now running Anthropic’s most agentic Sonnet model by default.
As a reminder, WordPress Studio is our agentic local development tool for WordPress. It’s free, open source, and improving every month.
Download WordPress Studio
A faster building experience
Page loads are now 30–50% faster, and your local Studio sites use less than a third of the memory than they did before. You’ll notice it most on sites carrying a lot of plugins, exactly where things used to feel slower.
That speed comes from a new default Native PHP runtime that runs your site with fewer abstractions.
If you’d rather keep a site’s code strictly contained — say, you’re testing an untrusted third-party plugin or theme — you can switch that site to the Sandbox runtime option anytime under Site Settings → Edit site → PHP runtime. Sandbox, which is powered by WordPress Playground, keeps a site’s code from running...
https://wordpress.com/blog/2026/07/13/
5 Best WordPress Page Builders in 2026 (Expert Picks)
Page builders changed what’s possible for non-developers in WordPress. Before they existed, customizing page layouts meant editing PHP templates and writing pages of CSS. Now, drag-and-drop interfaces let anyone build professional pages without touching code.
I have used page builders across dozens of client projects over the years. The difference between a good page builder and a mediocre one shows up in build speed, long-term maintainability, and how often you hit walls that require workarounds. The wrong choice means fighting your tools instead of building.
The builders below represent the best options based on my experience. Each serves a distinct workflow, and I have noted where each excels so you can match your needs to the right tool.
Best WordPress Page Builders
There are certainly many options out there for you to consider. Here, I offer a few opinions, along with videos and images for each page builder, to help you decide.
1. Divi 5
Divi is a complete website building system for WordPress and is one of the best page building experiences. Newly improved, Divi 5 is a ground-up rebuild of the entire theme and visual builder. It is one of the most modern editing environments you could hope to have in a WordPress page builder.
Divi includes dozens of modules to build any page, including forms, carousels, Instagram galleries, pricing tables, SVGs, countdown timers,...
I have used page builders across dozens of client projects over the years. The difference between a good page builder and a mediocre one shows up in build speed, long-term maintainability, and how often you hit walls that require workarounds. The wrong choice means fighting your tools instead of building.
The builders below represent the best options based on my experience. Each serves a distinct workflow, and I have noted where each excels so you can match your needs to the right tool.
Best WordPress Page Builders
There are certainly many options out there for you to consider. Here, I offer a few opinions, along with videos and images for each page builder, to help you decide.
1. Divi 5
Divi is a complete website building system for WordPress and is one of the best page building experiences. Newly improved, Divi 5 is a ground-up rebuild of the entire theme and visual builder. It is one of the most modern editing environments you could hope to have in a WordPress page builder.
Divi includes dozens of modules to build any page, including forms, carousels, Instagram galleries, pricing tables, SVGs, countdown timers,...
https://www.elegantthemes.com/blog/wor
How To Build A Flexbox Footer In Divi 5
Footers often get built after the rest of the page is done, and that usually shows. Columns stop lining up, spacing feels inconsistent, and the layout starts to fall apart as soon as you check it on smaller screens.
Divi 5 gives you a better way to build footer layouts with its Flexbox controls. Instead of fixing alignment with one-off margins and padding, you can decide how footer sections stretch, stack, align, and reflow directly inside the builder.
In this tutorial, we’ll build a responsive footer with a CTA block, newsletter signup, navigation links, social links, and a copyright bar. We’ll use Design Variables for reusable styling and Flexbox for the structure, so the footer stays easier to adjust across desktop, tablet, and mobile.
Why Build A Flexbox Footer In Divi 5?
A footer might look simple, but it usually contains several different content types: calls to action, menus, signup forms, social icons, legal text, and sometimes contact details.
That mix can get messy fast. One column has more content than another. A form needs more space than the link list beside it. Social icons need to sit close together, but the whole group still needs to align with the rest of the footer. In older workflows, the fix often involved stacking manual margin and padding values until the footer looked right in one viewport. Then you checked tablet or mobile, and the layout needed another...
Divi 5 gives you a better way to build footer layouts with its Flexbox controls. Instead of fixing alignment with one-off margins and padding, you can decide how footer sections stretch, stack, align, and reflow directly inside the builder.
In this tutorial, we’ll build a responsive footer with a CTA block, newsletter signup, navigation links, social links, and a copyright bar. We’ll use Design Variables for reusable styling and Flexbox for the structure, so the footer stays easier to adjust across desktop, tablet, and mobile.
Why Build A Flexbox Footer In Divi 5?
A footer might look simple, but it usually contains several different content types: calls to action, menus, signup forms, social icons, legal text, and sometimes contact details.
That mix can get messy fast. One column has more content than another. A form needs more space than the link list beside it. Social icons need to sit close together, but the whole group still needs to align with the rest of the footer. In older workflows, the fix often involved stacking manual margin and padding values until the footer looked right in one viewport. Then you checked tablet or mobile, and the layout needed another...
https://www.elegantthemes.com/blog/div
How To Build A Multi-Level Preset System In Divi 5
Presets are useful on their own. You save a style, apply it to an element, and avoid rebuilding the same design by hand. But once a site grows, isolated presets are not enough. A button preset, a border preset, a spacing preset, and a color value may all be related, but if they are not connected, every design change still creates extra work.
That is where Divi 5’s multi-level preset system becomes important. Design Variables, Option Group Presets, Element Presets, Composable Settings, and Nested Option Presets can work together as connected layers.
Instead of saving disconnected styles, you can build a system where variables feed presets, smaller presets sit inside larger presets, and Element Presets bring those decisions together into reusable components. Stacking then lets you layer contextual variations without creating a separate preset for every possible use case.
In this guide, we’ll walk through how the system works, where Nested Option Presets fit, why Composable Settings matters, and how to build a preset structure that becomes easier to maintain as your site grows.
How Divi 5’s Multi-Level Preset System Works
Divi 5 presets started as a way to save and reuse styles. Now they can work more like a connected design system. The idea is simple: each layer should reference the layer below it.
A color, font, spacing value, or radius starts as a Design Variable. That...
That is where Divi 5’s multi-level preset system becomes important. Design Variables, Option Group Presets, Element Presets, Composable Settings, and Nested Option Presets can work together as connected layers.
Instead of saving disconnected styles, you can build a system where variables feed presets, smaller presets sit inside larger presets, and Element Presets bring those decisions together into reusable components. Stacking then lets you layer contextual variations without creating a separate preset for every possible use case.
In this guide, we’ll walk through how the system works, where Nested Option Presets fit, why Composable Settings matters, and how to build a preset structure that becomes easier to maintain as your site grows.
How Divi 5’s Multi-Level Preset System Works
Divi 5 presets started as a way to save and reuse styles. Now they can work more like a connected design system. The idea is simple: each layer should reference the layer below it.
A color, font, spacing value, or radius starts as a Design Variable. That...
https://www.elegantthemes.com/blog/div
Agentic Commerce Is Here: What Does It Mean for Your Store?
AI agents are increasingly shopping for people, not just suggesting what to buy.
Ask your AI helper to “find a coffee grinder that fits a 14-inch counter,” and it can pull up options, compare them against that constraint, and send you to the store to finish the purchase.
If your product details are vague, difficult to find, or missing, the agent may never include your store in the comparison.
Shoppers are already moving this way. Reuters, citing May 2026 Adobe Analytics data, reported that US shoppers referred from LLMs generated 53% more revenue per visit than non-AI traffic.
Earlier Adobe holiday data also showed a sharp rise in traffic from AI-powered shopping assistants and chatbots. So this isn’t a far-off ecommerce trend. It’s already changing.
Whether you’re launching a new site, growing an audience, or optimizing for AI search, we’ll run through it all in this guide.
TLDR: Agentic commerce is when an AI assistant finds, compares, and buys products on a shopper’s behalf, and it can only do that for stores it can reach and read.
What is agentic commerce?
Agentic commerce is online shopping where an AI agent does the work for the buyer.
The shopper gives the agent a goal, a budget, a few must-haves, maybe a deadline. The agent finds products, compares options, and either starts the checkout process or sends them to the...
Ask your AI helper to “find a coffee grinder that fits a 14-inch counter,” and it can pull up options, compare them against that constraint, and send you to the store to finish the purchase.
If your product details are vague, difficult to find, or missing, the agent may never include your store in the comparison.
Shoppers are already moving this way. Reuters, citing May 2026 Adobe Analytics data, reported that US shoppers referred from LLMs generated 53% more revenue per visit than non-AI traffic.
Earlier Adobe holiday data also showed a sharp rise in traffic from AI-powered shopping assistants and chatbots. So this isn’t a far-off ecommerce trend. It’s already changing.
Whether you’re launching a new site, growing an audience, or optimizing for AI search, we’ll run through it all in this guide.
TLDR: Agentic commerce is when an AI assistant finds, compares, and buys products on a shopper’s behalf, and it can only do that for stores it can reach and read.
What is agentic commerce?
Agentic commerce is online shopping where an AI agent does the work for the buyer.
The shopper gives the agent a goal, a budget, a few must-haves, maybe a deadline. The agent finds products, compares options, and either starts the checkout process or sends them to the...
https://wordpress.com/blog/2026/07/10/
Leveraging Divi 5’s New Image Group Presets (No Need For Photoshop!)
Every web designer has done this at some point. You add an image to a layout, notice the crop is wrong, open Photoshop, adjust the file, export it, upload it again, and move on. Then the client replaces the image. The crop breaks again, the visual rhythm disappears, and the same manual fix starts over.
Divi 5 gives you a better way to handle this with Image Group Presets. Instead of editing the image file itself, you save the way an image should behave in the layout. That includes its aspect ratio, how it fills the frame, where the focal point sits, and any other image styling you want to reuse. Apply that preset across your site, and every image follows the same visual rules while the original upload stays untouched.
In this post, we’ll show you how Image Group Presets work, why they reduce the need for external image editing, and how to use them in carousels, product loops, and team sections.
What Are Image Group Presets In Divi 5?
Divi 5’s design system is built around reusable decisions. Colors can be stored as Design Variables. Spacing values can become reusable presets. Borders, shadows, text styles, and other option groups can be saved and applied across different elements. Image Group Presets bring that same idea to images.
Before these image updates, you could style images in Divi, but the reusable system did not fully cover how an image should crop, frame, and behave...
Divi 5 gives you a better way to handle this with Image Group Presets. Instead of editing the image file itself, you save the way an image should behave in the layout. That includes its aspect ratio, how it fills the frame, where the focal point sits, and any other image styling you want to reuse. Apply that preset across your site, and every image follows the same visual rules while the original upload stays untouched.
In this post, we’ll show you how Image Group Presets work, why they reduce the need for external image editing, and how to use them in carousels, product loops, and team sections.
What Are Image Group Presets In Divi 5?
Divi 5’s design system is built around reusable decisions. Colors can be stored as Design Variables. Spacing values can become reusable presets. Borders, shadows, text styles, and other option groups can be saved and applied across different elements. Image Group Presets bring that same idea to images.
Before these image updates, you could style images in Divi, but the reusable system did not fully cover how an image should crop, frame, and behave...
https://www.elegantthemes.com/blog/div
