WordPress News and Tips
best wordpress website design examples, award winning websites reviews
Exploring Divi 5’s New Gradient Options & Variables
Gradients can do more than add decoration. Used well, they create depth, guide attention, connect brand colors, and make backgrounds, buttons, overlays, and text feel more intentional.
Divi 5 makes gradients easier to create and manage with its new Gradient Editor, Gradient Variables, and Text Effect settings. Gradients now live inside a unified field, open in a cleaner Gradient Picker, and can be saved as reusable variables.
In this post, we’ll walk through what changed, how the new Gradient Picker works, how to create Gradient Variables, and how to use gradient fills, image fills, and text strokes on text elements.
What Changed With Gradients In Divi 5?
Divi 5’s gradient update focuses on three connected improvements.
Unified Gradient Field: Gradient settings are stored together as one complete design value, making gradients easier to copy, paste, extend, inspect, and replace.
Gradient Picker Panel: Gradient controls now live in a single panel with a live preview, color stops, gradient type, direction, position, and variable access.
Gradient Variables: Gradients can be saved in the Variable Manager and reused across your site.
Text Effects: Text option groups now support gradient fills, image fills, and text strokes.
Together, these updates turn gradients into reusable design-system values instead of one-off background styles.
Understanding The New Gradient Field Type
Divi...
Divi 5 makes gradients easier to create and manage with its new Gradient Editor, Gradient Variables, and Text Effect settings. Gradients now live inside a unified field, open in a cleaner Gradient Picker, and can be saved as reusable variables.
In this post, we’ll walk through what changed, how the new Gradient Picker works, how to create Gradient Variables, and how to use gradient fills, image fills, and text strokes on text elements.
What Changed With Gradients In Divi 5?
Divi 5’s gradient update focuses on three connected improvements.
Unified Gradient Field: Gradient settings are stored together as one complete design value, making gradients easier to copy, paste, extend, inspect, and replace.
Gradient Picker Panel: Gradient controls now live in a single panel with a live preview, color stops, gradient type, direction, position, and variable access.
Gradient Variables: Gradients can be saved in the Variable Manager and reused across your site.
Text Effects: Text option groups now support gradient fills, image fills, and text strokes.
Together, these updates turn gradients into reusable design-system values instead of one-off background styles.
Understanding The New Gradient Field Type
Divi...
https://www.elegantthemes.com/blog/div
Your WordPress Site, Built by Conversation: Studio Code Now on Desktop
Remember Studio Code, your agentic WordPress expert in the terminal?
It’s now available in the WordPress Studio desktop app on macOS, Windows, and Linux.
And it’s still free to use while in beta.
Download WordPress Studio
Goodbye, AI assistant; hello, Studio Code
Studio Code replaces the V1 of the AI assistant in the desktop app.
The assistant was a good first step towards AI-supported coding. It helped you run WP-CLI commands inline, could generate code, and made suggestions based on your local site specs.
If the assistant was a reliable sedan, Studio Code is a brand-new, bright-red Ferrari.
Studio Code is much more powerful and flexible, letting you build by talking to the agent:
Spin up new sites
Run performance audits
Add new pages, content, and images
Install and deactivate plugins and themes
Make specific bulk updates by annotating your site
Generate preview sites and sync local to production or staging
And people are already doing exactly that. We had so many conversations about Studio Code at WordCamp Europe just a few weeks ago, including one with an agency about how a specific Studio Code feature would speed up feedback loops with their clients.
The power of local agentic coding
What’s great about working locally like this is that your site files live only on your computer; you...
It’s now available in the WordPress Studio desktop app on macOS, Windows, and Linux.
And it’s still free to use while in beta.
Download WordPress Studio
Goodbye, AI assistant; hello, Studio Code
Studio Code replaces the V1 of the AI assistant in the desktop app.
The assistant was a good first step towards AI-supported coding. It helped you run WP-CLI commands inline, could generate code, and made suggestions based on your local site specs.
If the assistant was a reliable sedan, Studio Code is a brand-new, bright-red Ferrari.
Studio Code is much more powerful and flexible, letting you build by talking to the agent:
Spin up new sites
Run performance audits
Add new pages, content, and images
Install and deactivate plugins and themes
Make specific bulk updates by annotating your site
Generate preview sites and sync local to production or staging
And people are already doing exactly that. We had so many conversations about Studio Code at WordCamp Europe just a few weeks ago, including one with an agency about how a specific Studio Code feature would speed up feedback loops with their clients.
The power of local agentic coding
What’s great about working locally like this is that your site files live only on your computer; you...
https://wordpress.com/blog/2026/06/25/
Jetpack Search 7.0: Find Products Faster in WooCommerce
A growing product catalog is a good problem to have. But the more you sell, the more important it becomes to help shoppers quickly find what they’re looking for.
Jetpack Search 7.0 brings new features to WooCommerce, giving store owners better ways to help shoppers search, filter, sort, and discover products.
It’s smarter product discovery, built into the all-in-one WordPress.com Commerce plan.
Try WordPress.com Commerce for free
Search that understands customers
A shopper may not know the exact product name, but they’ll know their size, budget, preferred brand, and favorite color.
With the latest version of Jetpack Search, WooCommerce stores can add product-aware filters that help shoppers narrow results by:
Product attributes
Price range
Rating
Stock status
Product category
Product tag
Product brand
Store owners can add the filters they need individually, or start with a ready-made group of common product filters for a shop page.
For shoppers, that means fewer dead and a faster path from browsing to buying.
Product results that feel like shopping
Jetpack Search now adds a product layout for search results, so shoppers can see useful product details before they click.
Instead of generic search results, stores can show product cards with details like images, prices, ratings, and review counts. Shoppers can also...
Jetpack Search 7.0 brings new features to WooCommerce, giving store owners better ways to help shoppers search, filter, sort, and discover products.
It’s smarter product discovery, built into the all-in-one WordPress.com Commerce plan.
Try WordPress.com Commerce for free
Search that understands customers
A shopper may not know the exact product name, but they’ll know their size, budget, preferred brand, and favorite color.
With the latest version of Jetpack Search, WooCommerce stores can add product-aware filters that help shoppers narrow results by:
Product attributes
Price range
Rating
Stock status
Product category
Product tag
Product brand
Store owners can add the filters they need individually, or start with a ready-made group of common product filters for a shop page.
For shoppers, that means fewer dead and a faster path from browsing to buying.
Product results that feel like shopping
Jetpack Search now adds a product layout for search results, so shoppers can see useful product details before they click.
Instead of generic search results, stores can show product cards with details like images, prices, ratings, and review counts. Shoppers can also...
https://wordpress.com/blog/2026/06/24/
How To Crop Images In Divi 5
Image cropping sounds simple until the same image needs to work in different layouts. A portrait photo might look great in a team card but awkward in a wide banner. A landscape image might fit a blog grid but lose its subject on mobile. Cropping is less about cutting pixels and more about controlling what stays visible inside the frame.
Divi 5 makes that easier with Aspect Ratio and Image Framing controls built directly into the Visual Builder. You can set a consistent shape, choose how the image fills it, reposition the focal point, adjust the crop across breakpoints, and keep the original file untouched.
In this post, we’ll show you how to crop images in Divi 5 using Aspect Ratio, Object Fit, Object Position, responsive settings, Image Presets, and Loop Builder workflows.
Why Crop Images In Divi 5?
Images rarely arrive in the exact shape your layout needs. Stock photos may be 4:3, while phone photos are often vertical. Product images may be square. Team headshots might come from different photographers, devices, and distances.
When those images land in the same row, card grid, gallery, or loop, the layout can start to feel uneven.
Different image heights break the rhythm of a layout. Cards stop lining up. Text starts at different vertical positions. The page feels less polished even when the photos themselves are good.
Cropping solves that by giving every image the same...
Divi 5 makes that easier with Aspect Ratio and Image Framing controls built directly into the Visual Builder. You can set a consistent shape, choose how the image fills it, reposition the focal point, adjust the crop across breakpoints, and keep the original file untouched.
In this post, we’ll show you how to crop images in Divi 5 using Aspect Ratio, Object Fit, Object Position, responsive settings, Image Presets, and Loop Builder workflows.
Why Crop Images In Divi 5?
Images rarely arrive in the exact shape your layout needs. Stock photos may be 4:3, while phone photos are often vertical. Product images may be square. Team headshots might come from different photographers, devices, and distances.
When those images land in the same row, card grid, gallery, or loop, the layout can start to feel uneven.
Different image heights break the rhythm of a layout. Cards stop lining up. Text starts at different vertical positions. The page feels less polished even when the photos themselves are good.
Cropping solves that by giving every image the same...
https://www.elegantthemes.com/blog/div
4 Accordions & Toggles + Nested Elements Designs For Divi 5 (Free Download)
Divi 5 makes it easy to create organized, interactive sections that keep important content easy to explore. In this free pack, you’ll get 4 Accordions & Toggles + Nested Elements designs that are perfect for FAQs, service breakdowns, process sections, feature lists, about sections, client information, contact details, agency websites, landing pages, and more.
Each design uses accordions or toggles with nested content, imagery, typography, spacing, and structured layouts to create polished sections that reveal information in a clean, engaging way. Import a section, replace the content, update the styles, and you’re ready to go.
Preview
Here’s a quick look at the 4 Accordions & Toggles + Nested Elements designs included in the pack. The download is further down the post.
Download 4 Accordions & Toggles + Nested Elements Designs For Divi 5
Get all 4 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....
Each design uses accordions or toggles with nested content, imagery, typography, spacing, and structured layouts to create polished sections that reveal information in a clean, engaging way. Import a section, replace the content, update the styles, and you’re ready to go.
Preview
Here’s a quick look at the 4 Accordions & Toggles + Nested Elements designs included in the pack. The download is further down the post.
Download 4 Accordions & Toggles + Nested Elements Designs For Divi 5
Get all 4 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....
https://www.elegantthemes.com/blog/div
Exploring Divi 5’s New Timeline Module
Timelines make sequences easier to understand. A company history, product roadmap, project phase, resume, onboarding process, or case study can all become easier to scan when each step follows a clear visual path.
Divi 5’s Timeline module gives you a native way to build those layouts directly in the Visual Builder. You can add Timeline Items, choose a vertical or horizontal direction, style the track, markers, connectors, cards, and text, and use alternating layouts without custom CSS.
In this post, we’ll explore how the Timeline module works, where its most important settings live, and how to build a responsive timeline you can reuse across your Divi 5 site.
What Is The Timeline Module In Divi 5?
The Timeline module is a native Divi 5 module for displaying a sequence of events along a connecting track.
Each event lives inside its own Timeline Item child module. That means you can add, edit, duplicate, delete, reorder, and style individual items while still managing the overall timeline from one parent module.
Use it for:
Company or brand history pages.
Product roadmaps and release plans.
Project timelines and case studies.
Resume, CV, education, and certification sections.
Step-by-step processes, onboarding flows, and service explainers.
Before this module, many timeline layouts required stacked modules, custom CSS, or third-party extensions. Now you can build...
Divi 5’s Timeline module gives you a native way to build those layouts directly in the Visual Builder. You can add Timeline Items, choose a vertical or horizontal direction, style the track, markers, connectors, cards, and text, and use alternating layouts without custom CSS.
In this post, we’ll explore how the Timeline module works, where its most important settings live, and how to build a responsive timeline you can reuse across your Divi 5 site.
What Is The Timeline Module In Divi 5?
The Timeline module is a native Divi 5 module for displaying a sequence of events along a connecting track.
Each event lives inside its own Timeline Item child module. That means you can add, edit, duplicate, delete, reorder, and style individual items while still managing the overall timeline from one parent module.
Use it for:
Company or brand history pages.
Product roadmaps and release plans.
Project timelines and case studies.
Resume, CV, education, and certification sections.
Step-by-step processes, onboarding flows, and service explainers.
Before this module, many timeline layouts required stacked modules, custom CSS, or third-party extensions. Now you can build...
https://www.elegantthemes.com/blog/div
How To Create Cross-Canvas Interactions In Divi 5
Canvases and Interactions are two of Divi 5‘s most useful tools for building dynamic layouts without custom code. Canvases keep off-page content organized in separate workspaces. Interactions control when that content appears, changes, or responds to a visitor.
Cross-Canvas Interactions bring those two features together. A trigger on your Main Canvas can show, hide, or change an element that lives on another Canvas. That lets you build cleaner pages, keep modals and panels out of the main layout, and still connect everything through the Visual Builder.
In this post, we’ll explain how Cross-Canvas Interactions work and build a practical example: a button on the Main Canvas that opens a feature breakdown modal stored on a separate Canvas.
What Are Divi 5 Interactions?
Divi 5 Interactions let you add behavior to modules, rows, columns, and sections from the Advanced tab. Every Interaction has three main parts:
Trigger: The event that starts the Interaction, such as a click, hover, viewport enter, viewport exit, page load, or breakpoint change.
Effect: The action Divi performs, such as showing an element, hiding an element, toggling visibility, applying a preset, changing an attribute, setting a cookie, scrolling to an element, or mirroring mouse movement.
Target: The element that receives the effect, such as the current element, a parent, a child, another module, a...
Cross-Canvas Interactions bring those two features together. A trigger on your Main Canvas can show, hide, or change an element that lives on another Canvas. That lets you build cleaner pages, keep modals and panels out of the main layout, and still connect everything through the Visual Builder.
In this post, we’ll explain how Cross-Canvas Interactions work and build a practical example: a button on the Main Canvas that opens a feature breakdown modal stored on a separate Canvas.
What Are Divi 5 Interactions?
Divi 5 Interactions let you add behavior to modules, rows, columns, and sections from the Advanced tab. Every Interaction has three main parts:
Trigger: The event that starts the Interaction, such as a click, hover, viewport enter, viewport exit, page load, or breakpoint change.
Effect: The action Divi performs, such as showing an element, hiding an element, toggling visibility, applying a preset, changing an attribute, setting a cookie, scrolling to an element, or mirroring mouse movement.
Target: The element that receives the effect, such as the current element, a parent, a child, another module, a...
https://www.elegantthemes.com/blog/div
Divi Product Highlight: Divi Icon Library & Divi Mask Library
Divi 5 already gives you useful ways to work with icons, SVGs, masks, and background design. The native SVG module lets you add SVG markup and style it with Divi controls, while Divi’s mask and background tools give you more ways to shape images and sections.
But some projects need more variety than the default tools provide. Client sites, brand-heavy landing pages, 404 templates, service cards, feature grids, and editorial layouts often need icons and shapes that feel more specific.
That is where two Divi Marketplace extensions from Divi Den can help: Divi Icon Library and Divi Mask Library.
Divi Icon Library adds a searchable library of 14,000+ SVG icons directly inside the Visual Builder. Divi Mask Library adds 4,500+ hand-drawn SVG shapes you can save and apply as masks. Both are built for Divi 5, and both are designed to give you more visual options without leaving the builder.
In this Product Highlight, we will look at what each extension does, how they work, and a few practical ways to use them in real Divi 5 layouts.
Divi Icon Library: 14,000+ SVG Icons Inside The Visual Builder
Divi Icon Library adds a custom Icon Library module to Divi 5. Once the extension is active, the module appears in the Visual Builder alongside Divi’s native modules.
Think of it as a faster way to find and use custom SVG icons. Divi’s native SVG module is useful when you...
But some projects need more variety than the default tools provide. Client sites, brand-heavy landing pages, 404 templates, service cards, feature grids, and editorial layouts often need icons and shapes that feel more specific.
That is where two Divi Marketplace extensions from Divi Den can help: Divi Icon Library and Divi Mask Library.
Divi Icon Library adds a searchable library of 14,000+ SVG icons directly inside the Visual Builder. Divi Mask Library adds 4,500+ hand-drawn SVG shapes you can save and apply as masks. Both are built for Divi 5, and both are designed to give you more visual options without leaving the builder.
In this Product Highlight, we will look at what each extension does, how they work, and a few practical ways to use them in real Divi 5 layouts.
Divi Icon Library: 14,000+ SVG Icons Inside The Visual Builder
Divi Icon Library adds a custom Icon Library module to Divi 5. Once the extension is active, the module appears in the Visual Builder alongside Divi’s native modules.
Think of it as a faster way to find and use custom SVG icons. Divi’s native SVG module is useful when you...
https://www.elegantthemes.com/blog/div
