WordPress News and Tips
best wordpress website design examples, award winning websites reviews
How To Migrate From Divi 4 To Divi 5 (Complete Guide)
Divi 5 is officially here. If you have an existing Divi website, migrating to Divi 5 is the single most impactful upgrade you can make. The new framework delivers faster page loads, a redesigned Visual Builder, and features that fundamentally change what’s possible. This guide walks you through every step of the Divi 4 to Divi 5 migration, so you can step into the future of Divi with confidence.
What Changes When You Migrate To Divi 5
Before getting into the how, it helps to understand what the migration actually does under the hood. Divi 4 stores all layout data as shortcodes, such as [et_pb_section] and [et_pb_row], embedded directly in your post content. This format served Divi well for years, but over time, it led to performance constraints and slowed the pace of new feature development.
Divi 5 replaces shortcode-based layout storage with a new, more stable storage format behind the scenes. When you run the migration, the Divi 5 Migrator converts every supported module on your site from the old shortcode format to this new structure. Your content, design settings, and configurations are preserved. The front end of your site looks and functions the same after migration. The difference is entirely in how Divi processes and renders that data, which is where the performance gains come from.
Modules that aren’t yet supported by Divi 5 (primarily third-party...
What Changes When You Migrate To Divi 5
Before getting into the how, it helps to understand what the migration actually does under the hood. Divi 4 stores all layout data as shortcodes, such as [et_pb_section] and [et_pb_row], embedded directly in your post content. This format served Divi well for years, but over time, it led to performance constraints and slowed the pace of new feature development.
Divi 5 replaces shortcode-based layout storage with a new, more stable storage format behind the scenes. When you run the migration, the Divi 5 Migrator converts every supported module on your site from the old shortcode format to this new structure. Your content, design settings, and configurations are preserved. The front end of your site looks and functions the same after migration. The difference is entirely in how Divi processes and renders that data, which is where the performance gains come from.
Modules that aren’t yet supported by Divi 5 (primarily third-party...
https://www.elegantthemes.com/blog/div
Getting Started With Divi 5 (Everything You Need To Know)
Divi 5 represents a shift from a traditional page builder to a modern design system built for long-term scalability. It combines the familiar drag-and-drop Visual Builder with new features like Flexbox and CSS Grid support, infinite nesting for complex layouts, global Design Variables for effortless consistency, and dynamic features like the Loop Builder and Interactions, all within one cohesive system. It enables lighter page output, smarter page rendering, fast builder performance, and a scalable foundation ready for tomorrow’s web standards.
In this post, we’ll cover everything you need to know about Divi 5, including how to get started, a full tour of the revamped Visual Builder, and insights into the new features that set it apart from other page builders.
What you’ll learn in this post:
How Divi 5 works and what changed under the hood
A tour of the Visual Builder and where the core tools live
How to build modern layouts with Flexbox and CSS Grid
How to stay consistent using Design Variables and Presets
How dynamic features like Loop Builder and Interactions work
How migration and backward compatibility work if you’re upgrading
Before You Begin
If you’re starting from scratch, the steps below will get you from a fresh WordPress install to your first Divi 5 page in minutes.
Install WordPress on your domain and hosting.
In WordPress, go to Appearance...
In this post, we’ll cover everything you need to know about Divi 5, including how to get started, a full tour of the revamped Visual Builder, and insights into the new features that set it apart from other page builders.
What you’ll learn in this post:
How Divi 5 works and what changed under the hood
A tour of the Visual Builder and where the core tools live
How to build modern layouts with Flexbox and CSS Grid
How to stay consistent using Design Variables and Presets
How dynamic features like Loop Builder and Interactions work
How migration and backward compatibility work if you’re upgrading
Before You Begin
If you’re starting from scratch, the steps below will get you from a fresh WordPress install to your first Divi 5 page in minutes.
Install WordPress on your domain and hosting.
In WordPress, go to Appearance...
https://www.elegantthemes.com/blog/div
12 WordPress SEO Plugins to Try in 2026 (Manually Tested)
SEO in 2026 means optimizing for both traditional search engines and AI discovery tools — and WordPress gives you the plugin ecosystem to handle both.
The challenge? Figuring out which SEO plugins actually move the needle versus which ones just clutter your dashboard.
We looked at WordPress.com usage data and user ratings, then I tested the top contenders myself. Here are the 12 SEO plugins worth installing, what each one does best, and which ones to skip:
Yoast SEO Premium — Best for step-by-step SEO guidance as you write
All in One SEO (AIOSEO) — Best for broad coverage with AI-era features
The SEO Framework — Best for fast sites that need simple SEO
Rank Math — Best all-in-one for new sites
Google Site Kit — Best for tracking how your site performs in Google
Jetpack Boost — Best for one-click performance improvements
SureRank — Best for a simple setup with guided assistance
Xagio SEO — Best for AI-driven management and multi-site keyword research
Schema & Structured Data for WP & AMP — Best for detailed schema and rich snippets
Smush — Best for image compression and lazy loading
Better Robots.txt — Best for controlling crawler access
Redirection — Best for managing redirects and 404 errors
1. Yoast SEO Premium: Best for step-by-step SEO guidance as you write
Who should use it: Bloggers and small site...
The challenge? Figuring out which SEO plugins actually move the needle versus which ones just clutter your dashboard.
We looked at WordPress.com usage data and user ratings, then I tested the top contenders myself. Here are the 12 SEO plugins worth installing, what each one does best, and which ones to skip:
Yoast SEO Premium — Best for step-by-step SEO guidance as you write
All in One SEO (AIOSEO) — Best for broad coverage with AI-era features
The SEO Framework — Best for fast sites that need simple SEO
Rank Math — Best all-in-one for new sites
Google Site Kit — Best for tracking how your site performs in Google
Jetpack Boost — Best for one-click performance improvements
SureRank — Best for a simple setup with guided assistance
Xagio SEO — Best for AI-driven management and multi-site keyword research
Schema & Structured Data for WP & AMP — Best for detailed schema and rich snippets
Smush — Best for image compression and lazy loading
Better Robots.txt — Best for controlling crawler access
Redirection — Best for managing redirects and 404 errors
1. Yoast SEO Premium: Best for step-by-step SEO guidance as you write
Who should use it: Bloggers and small site...
https://wordpress.com/blog/2026/02/25/
Configuring Optimal Semantic Tags In Divi 5’s Default Presets
Skipping the process of assigning semantic wrappers can feel tempting. It often means building the page first, then going back to configure tags for each element, and repeating that work on every new section or page.
Divi 5 removes this friction by using presets. You can define semantic tags once at the default level, and every element you add afterward will automatically follow the correct HTML structure.
In this post, you will learn which preset settings to configure so your builds are semantically sound from the start, even before you begin creating pages. Have a look!
What Are Semantic Tags?
Every element on a webpage is wrapped in a tag. Some tags describe the type of content they contain. These are semantic tags. The word semantic means “relating to meaning,” so semantic tags add meaning to your markup.
Tags like header, nav, main, section, article, aside, and footer fall into this category. A header tag tells browsers this content functions as a header. A nav tag indicates navigation. An article tag marks content that stands alone, like a blog post. Each tag describes what is inside it, not just that something exists there.
Other tags serve as neutral wrappers that do not describe the content type. These generic containers hold elements together for styling or layout, but convey nothing to browsers about the page’s function or purpose.
And Why They...
Divi 5 removes this friction by using presets. You can define semantic tags once at the default level, and every element you add afterward will automatically follow the correct HTML structure.
In this post, you will learn which preset settings to configure so your builds are semantically sound from the start, even before you begin creating pages. Have a look!
What Are Semantic Tags?
Every element on a webpage is wrapped in a tag. Some tags describe the type of content they contain. These are semantic tags. The word semantic means “relating to meaning,” so semantic tags add meaning to your markup.
Tags like header, nav, main, section, article, aside, and footer fall into this category. A header tag tells browsers this content functions as a header. A nav tag indicates navigation. An article tag marks content that stands alone, like a blog post. Each tag describes what is inside it, not just that something exists there.
Other tags serve as neutral wrappers that do not describe the content type. These generic containers hold elements together for styling or layout, but convey nothing to browsers about the page’s function or purpose.
And Why They...
https://www.elegantthemes.com/blog/div
How To Create Browser-Native Toggles Using Divi 5’s Semantic Tags
Accordions and toggle content have traditionally required JavaScript to handle the interaction correctly. Modern HTML includes native elements that get you closer to a non-JavaScript version of that.
<details> and <summary> elements create functional disclosure widgets using nothing but a couple of simple elements. These elements handle expand/collapse behavior automatically, support keyboard interaction out of the box, and work without any extra JavaScript.
Divi 5’s Semantic Elements allow users to work with these native HTML elements (and many others) directly within the Visual Builder. You can construct toggles using Divi’s layout elements while outputting clean, semantic HTML that browsers understand natively. This post covers how to build a custom toggle using Divi 5’s Element Type settings, Divi design settings, and some simple CSS to make it all really smooth.
Understanding The Details And Summary Elements
The <details> element creates a disclosure widget that users can open and close. The <summary> element provides the clickable label that toggles visibility of the content enclosed within <details>. Everything inside <details> that isn’t the <summary> remains hidden until the user clicks to expand it.
Browsers render a small disclosure triangle next to the summary text. Clicking anywhere on the summary...
<details> and <summary> elements create functional disclosure widgets using nothing but a couple of simple elements. These elements handle expand/collapse behavior automatically, support keyboard interaction out of the box, and work without any extra JavaScript.
Divi 5’s Semantic Elements allow users to work with these native HTML elements (and many others) directly within the Visual Builder. You can construct toggles using Divi’s layout elements while outputting clean, semantic HTML that browsers understand natively. This post covers how to build a custom toggle using Divi 5’s Element Type settings, Divi design settings, and some simple CSS to make it all really smooth.
Understanding The Details And Summary Elements
The <details> element creates a disclosure widget that users can open and close. The <summary> element provides the clickable label that toggles visibility of the content enclosed within <details>. Everything inside <details> that isn’t the <summary> remains hidden until the user clicks to expand it.
Browsers render a small disclosure triangle next to the summary text. Clicking anywhere on the summary...
https://www.elegantthemes.com/blog/div
14 Unique Ways WordPress.com Makes Site Ownership Easier
On WordPress.com, you can manage the entire lifecycle of your website — setup, development, launch, day-to-day management, and potential adjustments — on a single platform that grows with you.
When I first learned to build WordPress sites, I had to stitch them together from different tools and vendors. Think of connecting your domain registrar to a hosting provider, installing backup, security, and performance plugins — that sort of thing.
When I switched to WordPress.com, the experience became entirely different. Here are 14 ways it makes site ownership easier.
1. Launch your site in a single, ready-to-run environment
On WordPress.com, getting a domain, hosting, security, backups, and performance are already configured.
Your site runs on WordPress-first infrastructure, built to handle updates, plugins, traffic spikes, and security without you having to tune the stack yourself.
Here’s what you get:
Hosting optimized specifically for WordPress.
Your domain automatically connects to your site (if you purchase it through WordPress.com).
Automatic real-time backups and one-click restore (on Business and higher).
Ready-to-use, top-notch security features.
Performance optimization out of the box.
In short, instead of spending time setting up your site’s infrastructure, you can get online — and stay online — while focusing on growing your...
When I first learned to build WordPress sites, I had to stitch them together from different tools and vendors. Think of connecting your domain registrar to a hosting provider, installing backup, security, and performance plugins — that sort of thing.
When I switched to WordPress.com, the experience became entirely different. Here are 14 ways it makes site ownership easier.
1. Launch your site in a single, ready-to-run environment
On WordPress.com, getting a domain, hosting, security, backups, and performance are already configured.
Your site runs on WordPress-first infrastructure, built to handle updates, plugins, traffic spikes, and security without you having to tune the stack yourself.
Here’s what you get:
Hosting optimized specifically for WordPress.
Your domain automatically connects to your site (if you purchase it through WordPress.com).
Automatic real-time backups and one-click restore (on Business and higher).
Ready-to-use, top-notch security features.
Performance optimization out of the box.
In short, instead of spending time setting up your site’s infrastructure, you can get online — and stay online — while focusing on growing your...
https://wordpress.com/blog/2026/02/24/
How To Use Interactions, Canvases, And Portals Together (The Complete Workflow)
Canvases were recently introduced in Divi 5, providing detached workspaces for building off-canvas menus, staging areas, modal popups, and more.
Combine these Canvases with Interactions, and you have a complete system for controlling exactly how information flows while making your website interactive. That includes click triggers, scroll reveals, hover effects, and more.
Working together, these features give you a high level of control, and the setup is simpler than you might expect. In this post, we’ll show you how to wire everything together in Divi 5.
What Are Canvases In Divi 5?
Building modern websites means managing layers of content. Your main page layout, sure. But also popups, slide-out menus, modal windows, and other elements that appear on demand. Things get messy.
Canvases can give you separate workspaces for different parts of your design. Your page starts with a Main Canvas where your primary content lives. Then you can create additional Detached Canvases for slide-out menus, modal popups, sidebars, and newsletter forms. Each canvas can exist independently, keeping your builder interface clean.
These Detached Canvases can stay hidden in the Visual Builder. On the front end, canvas content is displayed once it’s appended to the Main Canvas (or when Divi automatically appends it when needed). No clutter. When someone visits your live site, the elements can...
Combine these Canvases with Interactions, and you have a complete system for controlling exactly how information flows while making your website interactive. That includes click triggers, scroll reveals, hover effects, and more.
Working together, these features give you a high level of control, and the setup is simpler than you might expect. In this post, we’ll show you how to wire everything together in Divi 5.
What Are Canvases In Divi 5?
Building modern websites means managing layers of content. Your main page layout, sure. But also popups, slide-out menus, modal windows, and other elements that appear on demand. Things get messy.
Canvases can give you separate workspaces for different parts of your design. Your page starts with a Main Canvas where your primary content lives. Then you can create additional Detached Canvases for slide-out menus, modal popups, sidebars, and newsletter forms. Each canvas can exist independently, keeping your builder interface clean.
These Detached Canvases can stay hidden in the Visual Builder. On the front end, canvas content is displayed once it’s appended to the Main Canvas (or when Divi automatically appends it when needed). No clutter. When someone visits your live site, the elements can...
https://www.elegantthemes.com/blog/div
How Import & Export Presets In Divi 5
Presets are how you stop rebuilding the same design choices over and over in Divi 5. Once you’ve defined your buttons, text styles, or card layouts, the real advantage is being able to move those decisions into new projects instead of starting from zero.
Divi 5 lets you export presets and import them into another site, so your preset library can travel with you. In this post, we’ll export a set of presets, import them into a new project, and look at what transfers cleanly, and what still depends on the setup of the receiving site.
What Are Presets In Divi 5?
Presets in Divi 5 are saved style settings you can reuse on multiple elements. You create a preset once and apply it multiple times, so you don’t have to style the same thing from scratch again. When you update a preset, every module using it updates too. And since presets are organized by module and option group, a Button preset affects only Button Modules, and a text-related preset affects text-based styling options.
Divi 5 also supports Option Group Presets for things like typography, spacing, and borders. Together with Design Variables, presets help you build a consistent design system across your entire site. Learn everything about presets in this ultimate guide.
Managing Presets With The Preset Manager
Once your preset library starts growing, keeping track of everything becomes tricky. The Preset Manager is Divi 5’s...
Divi 5 lets you export presets and import them into another site, so your preset library can travel with you. In this post, we’ll export a set of presets, import them into a new project, and look at what transfers cleanly, and what still depends on the setup of the receiving site.
What Are Presets In Divi 5?
Presets in Divi 5 are saved style settings you can reuse on multiple elements. You create a preset once and apply it multiple times, so you don’t have to style the same thing from scratch again. When you update a preset, every module using it updates too. And since presets are organized by module and option group, a Button preset affects only Button Modules, and a text-related preset affects text-based styling options.
Divi 5 also supports Option Group Presets for things like typography, spacing, and borders. Together with Design Variables, presets help you build a consistent design system across your entire site. Learn everything about presets in this ultimate guide.
Managing Presets With The Preset Manager
Once your preset library starts growing, keeping track of everything becomes tricky. The Preset Manager is Divi 5’s...
https://www.elegantthemes.com/blog/div
