WordPress News and Tips
best wordpress website design examples, award winning websites reviews
How To Build Your Own Design System With Nested + Stacked Presets In Divi 5
Design systems fail either because they don’t account for every possibility or because they become too complicated to manage. A standard website needs styles for headings, body text, buttons, and containers (to name a few). Multiply those across light and dark backgrounds, different sizes, and other use cases, and you end up managing hundreds of CSS classes/presets that overlap, conflict, and become impossible to maintain.
Stacked and Nested Presets in Divi 5 help solve this problem by separating concerns. Instead of creating a preset for every possible combination (H1 Dark Bold, H1 Light Bold, H1 Dark Normal, H1 Light Normal, and so on), you create modular styles that stack together.
This tutorial builds a complete design system from scratch, then applies it to a homepage with four unique sections. You will create Design Variables for spacing, typography, and colors, build Option Group Presets for layouts and styling, and nest those Option Group Presets inside Element Presets for fast deployment. The best part of this is that you can export and import all these presets and variables to use and modify on every new website build.
The first five parts of this tutorial create around 40 Design Variables and dozens of Presets. In part six, we will add modules to the page and build out a real design. To fully follow this tutorial, you will need between one and three hours,...
Stacked and Nested Presets in Divi 5 help solve this problem by separating concerns. Instead of creating a preset for every possible combination (H1 Dark Bold, H1 Light Bold, H1 Dark Normal, H1 Light Normal, and so on), you create modular styles that stack together.
This tutorial builds a complete design system from scratch, then applies it to a homepage with four unique sections. You will create Design Variables for spacing, typography, and colors, build Option Group Presets for layouts and styling, and nest those Option Group Presets inside Element Presets for fast deployment. The best part of this is that you can export and import all these presets and variables to use and modify on every new website build.
The first five parts of this tutorial create around 40 Design Variables and dozens of Presets. In part six, we will add modules to the page and build out a real design. To fully follow this tutorial, you will need between one and three hours,...
https://www.elegantthemes.com/blog/div
How To Efficiently Manage Your Pages Inside The Divi 5 Builder Itself
Most of the time you spend in Divi 5, you’re deep inside one page. But site builds rarely involve just one page, and going back to the WordPress dashboard every time you need to manage another one pulls you away from what you were doing.
That’s why we built the Page Manager as a practical addition that slots cleanly into how you already work without leaving the builder. If you’re creating full sites and haven’t tried it yet, let’s break it down.
What Is Divi 5’s Page Manager?
The Page Manager is a panel built right into the Divi 5 Visual Builder. You’ll find your site’s content in a single searchable list in the builder sidebar: pages, posts, and custom post types are all here.
Each item appears by name, and a search bar at the top lets you filter through everything fast. Even on large sites with dozens of entries, finding a specific page or post takes seconds. You can access the panel alongside your other builder tools, like the Layers panel, presets, and design variables.
What sets it apart is location. The WordPress dashboard already has a page list and a post list, but those are outside the builder. The Page Manager provides the same kind of access directly in your design workspace. You never need to close what you’re working on or load a new screen just to check on another piece of content.
Why Use Page Manager Anyway...
That’s why we built the Page Manager as a practical addition that slots cleanly into how you already work without leaving the builder. If you’re creating full sites and haven’t tried it yet, let’s break it down.
What Is Divi 5’s Page Manager?
The Page Manager is a panel built right into the Divi 5 Visual Builder. You’ll find your site’s content in a single searchable list in the builder sidebar: pages, posts, and custom post types are all here.
Each item appears by name, and a search bar at the top lets you filter through everything fast. Even on large sites with dozens of entries, finding a specific page or post takes seconds. You can access the panel alongside your other builder tools, like the Layers panel, presets, and design variables.
What sets it apart is location. The WordPress dashboard already has a page list and a post list, but those are outside the builder. The Page Manager provides the same kind of access directly in your design workspace. You never need to close what you’re working on or load a new screen just to check on another piece of content.
Why Use Page Manager Anyway...
https://www.elegantthemes.com/blog/div
7 Large List Sections For Divi 5 (Free Download!)
Divi 5 makes it easy to display information in a way that is clean, scannable, and easy to compare. In this free pack, you will find 7 Styled Large List Sections, designed for services, feature breakdowns, step-by-step processes, schedules, specs, and other data-heavy content. Drop one onto any page, swap the text, and you are ready to go. No extra setup required.
Preview
Here’s a quick look at all 7 Styled Large List Sections included in the pack. The download is further down the post.
Download 7 Styled Large List Sections For Divi 5
Get all 7 sections 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 .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge....
Preview
Here’s a quick look at all 7 Styled Large List Sections included in the pack. The download is further down the post.
Download 7 Styled Large List Sections For Divi 5
Get all 7 sections 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 .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge....
https://www.elegantthemes.com/blog/div
WordPress Studio: New Debugging Tools for Local Development
Tracking down bugs in WordPress development often feels like looking for a needle in a haystack. Especially when you’re relying on var_dump() calls and manually scanning error logs.
WordPress Studio has two new debugging capabilities that make this process faster and more intuitive: Xdebug support and debug log access.
Try WordPress Studio for free
Step-through debugging with Xdebug
Xdebug is the gold-standard PHP debugging extension. Instead of scattering debug output throughout your code, you can set breakpoints, step through execution line-by-line, and inspect variables in real time — all from your editor.
This is now available for all Studio users and is powered by WordPress Playground’s WebAssembly version of PHP, which means there’s nothing extra to install or configure at the system level.
Enabling Xdebug
Select the site you want to debug in Studio.
Navigate to the Settings tab.
Click Edit site.
Navigate to the Debugging tab.
Check the Enable Xdebug checkbox.
Click Save.
Studio will restart the site automatically with Xdebug active.
A couple of things worth keeping in mind:
Xdebug can only be active for a single site: To use Xdebug on a different site, disable it on the currently active one first. The site with Xdebug enabled will display a bug icon in the left sidebar.
Enabling Xdebug will...
WordPress Studio has two new debugging capabilities that make this process faster and more intuitive: Xdebug support and debug log access.
Try WordPress Studio for free
Step-through debugging with Xdebug
Xdebug is the gold-standard PHP debugging extension. Instead of scattering debug output throughout your code, you can set breakpoints, step through execution line-by-line, and inspect variables in real time — all from your editor.
This is now available for all Studio users and is powered by WordPress Playground’s WebAssembly version of PHP, which means there’s nothing extra to install or configure at the system level.
Enabling Xdebug
Select the site you want to debug in Studio.
Navigate to the Settings tab.
Click Edit site.
Navigate to the Debugging tab.
Check the Enable Xdebug checkbox.
Click Save.
Studio will restart the site automatically with Xdebug active.
A couple of things worth keeping in mind:
Xdebug can only be active for a single site: To use Xdebug on a different site, disable it on the currently active one first. The site with Xdebug enabled will display a bug icon in the left sidebar.
Enabling Xdebug will...
https://wordpress.com/blog/2026/03/11/
Everything You Need To Know About The Page Manager In Divi 5
Divi 5 keeps getting better at keeping you on task when you are in the builder. The new Page Manager lets you navigate to any page on your site, create new ones, and manage existing ones — all without touching the WordPress dashboard. It’s a small addition with a noticeable impact on how smoothly a typical editing session flows.
What Is The Divi 5 Page Manager?
Subscribe To Our Youtube Channel
Divi 5 is designed to be a complete working environment — not just a tool you dip into to tweak a layout and then leave. The Page Manager is a good example of that philosophy in practice. It lives in the persistent left sidebar as a dedicated icon, and clicking it opens a panel listing every page and custom post type on your site where Divi is the active editor.
Pages built in the WordPress block editor are excluded. The list stays focused on what you can actually edit in Divi, so there’s nothing listed that isn’t worth sorting through.
From the Page Manager, you can open any page directly in the Visual Builder, or create, duplicate, and delete pages without leaving the builder at all. For anyone building or maintaining multi-page sites in Divi, this eliminates the need to visit the WordPress dashboard for these routine tasks. And that is a welcome change because we all know how slow some client dashboards can get.
Navigating Between Pages
Before the Page Manager,...
What Is The Divi 5 Page Manager?
Subscribe To Our Youtube Channel
Divi 5 is designed to be a complete working environment — not just a tool you dip into to tweak a layout and then leave. The Page Manager is a good example of that philosophy in practice. It lives in the persistent left sidebar as a dedicated icon, and clicking it opens a panel listing every page and custom post type on your site where Divi is the active editor.
Pages built in the WordPress block editor are excluded. The list stays focused on what you can actually edit in Divi, so there’s nothing listed that isn’t worth sorting through.
From the Page Manager, you can open any page directly in the Visual Builder, or create, duplicate, and delete pages without leaving the builder at all. For anyone building or maintaining multi-page sites in Divi, this eliminates the need to visit the WordPress dashboard for these routine tasks. And that is a welcome change because we all know how slow some client dashboards can get.
Navigating Between Pages
Before the Page Manager,...
https://www.elegantthemes.com/blog/div
Monikka Spruyt Left Corporate to Help People Reconnect With Themselves. Her New Website Scales That Mission.
Monikka Spruyt spent years in corporate. Then, the training organization she worked for was being merged into another. She’d also just had her third baby.
She saw it as a sign. Starting over in another corporate role wasn’t what she wanted. This was her moment to build something of her own.
So she backed herself instead.
She trained as a life coach, an EFT (Emotional Freedom Technique) practitioner, and a Reiki healer. She opened Connect Holistic Health — a business built around helping people untangle the noise in their minds and get more out of their lives.
I get to do it on my own terms. My number one hat is mom. And then I run this business in and around that.
Why WordPress.com
Monikka had a website on another platform before. When challenges in the back end of her business gave her reason to pause and reassess, she decided to switch — and go through a full brand refresh at the same time.
WordPress was already familiar. She’d used it extensively in her last corporate role. When it came to choosing a platform for her own business, that hands-on experience made the decision easy.
WordPress was my go-to from my corporate days. I already knew it, I already trusted it.
She could have built the new site herself. But as a sole trader juggling clients, a family, and a growing business, handing the build off just made more sense....
She saw it as a sign. Starting over in another corporate role wasn’t what she wanted. This was her moment to build something of her own.
So she backed herself instead.
She trained as a life coach, an EFT (Emotional Freedom Technique) practitioner, and a Reiki healer. She opened Connect Holistic Health — a business built around helping people untangle the noise in their minds and get more out of their lives.
I get to do it on my own terms. My number one hat is mom. And then I run this business in and around that.
Why WordPress.com
Monikka had a website on another platform before. When challenges in the back end of her business gave her reason to pause and reassess, she decided to switch — and go through a full brand refresh at the same time.
WordPress was already familiar. She’d used it extensively in her last corporate role. When it came to choosing a platform for her own business, that hands-on experience made the decision easy.
WordPress was my go-to from my corporate days. I already knew it, I already trusted it.
She could have built the new site herself. But as a sole trader juggling clients, a family, and a growing business, handing the build off just made more sense....
https://wordpress.com/blog/2026/03/10/
Mastering Global Colors In Divi 5
Divi 5 improves color management for WordPress websites by introducing a variable-based color system designed for modern, scalable workflows. At its core is a redesigned Color Picker integrated with Design Variables, leveraging HSL (Hue, Saturation, and Lightness) and Relative Colors to create dynamic, interconnected palettes that update seamlessly across your entire site.
In this post, you’ll learn how to build, manage, and optimize scalable color systems in Divi 5. From understanding HSL basics and setting up global variables to creating nested relative colors and following best practices, we’ll guide you step-by-step to mastering this new feature and elevating your designs to a professional level.
Let’s get started.
Understanding The Basics: HSL Color Model
Before diving into Divi 5’s Global Colors and Relative Colors features, it’s important to understand the HSL color model, which forms the backbone of this dynamic system. HSL provides an intuitive way to define and manipulate colors, making it perfect for scalable, harmonious palettes.
Subscribe To Our Youtube Channel
What Is HSL?
HSL stands for Hue, Saturation, and Lightness. It’s a cylindrical color model that represents color more closely to how people tend to think about color adjustments.
Hue: This is the base color itself, measured in degrees on a color wheel from 0° to 360°. For...
In this post, you’ll learn how to build, manage, and optimize scalable color systems in Divi 5. From understanding HSL basics and setting up global variables to creating nested relative colors and following best practices, we’ll guide you step-by-step to mastering this new feature and elevating your designs to a professional level.
Let’s get started.
Understanding The Basics: HSL Color Model
Before diving into Divi 5’s Global Colors and Relative Colors features, it’s important to understand the HSL color model, which forms the backbone of this dynamic system. HSL provides an intuitive way to define and manipulate colors, making it perfect for scalable, harmonious palettes.
Subscribe To Our Youtube Channel
What Is HSL?
HSL stands for Hue, Saturation, and Lightness. It’s a cylindrical color model that represents color more closely to how people tend to think about color adjustments.
Hue: This is the base color itself, measured in degrees on a color wheel from 0° to 360°. For...
https://www.elegantthemes.com/blog/div
WooCommerce And Divi 5: The Complete Ecommerce Guide
Building an online store used to mean balancing design and functionality. You wanted a store that looked polished, felt on-brand, and worked smoothly at checkout, but achieving all three often took extra effort.
Divi and WooCommerce have long been a strong combination for building online stores, and Divi 5 takes that further. With a rebuilt foundation, modern layout systems, a stronger design workflow, and native WooCommerce modules, you have much more control over how your store looks and works across product, cart, checkout, and archive templates.
That means the design decisions you make early, like your colors, typography, and product card styling, can carry through your store more easily and more consistently. Instead of rebuilding the same patterns over and over, you create the foundation once and reuse it as your store grows.
In this post, we’ll walk you through the whole process, from setting up your store’s visual foundation to building your shop, product, cart, and checkout pages, all the way to going live.
Why Divi 5 And WooCommerce
WooCommerce is the engine. It reliably handles your products, payments, shipping, and inventory. What it doesn’t do on its own is give you much visual control over how your store looks and feels. The default templates are functional, but they can feel rigid, and customizing them the traditional way often means working...
Divi and WooCommerce have long been a strong combination for building online stores, and Divi 5 takes that further. With a rebuilt foundation, modern layout systems, a stronger design workflow, and native WooCommerce modules, you have much more control over how your store looks and works across product, cart, checkout, and archive templates.
That means the design decisions you make early, like your colors, typography, and product card styling, can carry through your store more easily and more consistently. Instead of rebuilding the same patterns over and over, you create the foundation once and reuse it as your store grows.
In this post, we’ll walk you through the whole process, from setting up your store’s visual foundation to building your shop, product, cart, and checkout pages, all the way to going live.
Why Divi 5 And WooCommerce
WooCommerce is the engine. It reliably handles your products, payments, shipping, and inventory. What it doesn’t do on its own is give you much visual control over how your store looks and feels. The default templates are functional, but they can feel rigid, and customizing them the traditional way often means working...
https://www.elegantthemes.com/blog/div
