WordPress News and Tips
best wordpress website design examples, award winning websites reviews
Master SEO & AIO: Get Your Site Found in Search and AI Answers
For years, SEO meant one main thing: showing up on Google.
But search has changed. Today, when someone has a question, they might ask ChatGPT, Perplexity, or Claude. They might also get a summarized answer from Google’s AI Overview before deciding whether to click through to a website.
But your site still needs to be visible in traditional search. And the same qualities that have always mattered – like clear, useful, and trustworthy content – also determine whether AI tools will reference you.
Our free text-based course, Master SEO & AIO, teaches you how to do both. The beginner-friendly course combines proven SEO fundamentals with practical ways to make your content easier for AI tools to find, understand, and reference.This self-guided course is text-based and includes 15 lessons, taking about 90 minutes to complete.
Start The Course, Free
Search engines and AI, in one strategy
AI-powered tools now answer many questions directly, often by summarizing information from websites. Optimizing your content so those tools can find, understand, and reference it is called AI Optimization, or AIO.
The good news is that AIO does not require a completely separate strategy.
It builds on the same foundations as good search optimization: clear writing, helpful answers, strong structure, relevant links, and trust signals that show who is behind your content...
But search has changed. Today, when someone has a question, they might ask ChatGPT, Perplexity, or Claude. They might also get a summarized answer from Google’s AI Overview before deciding whether to click through to a website.
But your site still needs to be visible in traditional search. And the same qualities that have always mattered – like clear, useful, and trustworthy content – also determine whether AI tools will reference you.
Our free text-based course, Master SEO & AIO, teaches you how to do both. The beginner-friendly course combines proven SEO fundamentals with practical ways to make your content easier for AI tools to find, understand, and reference.This self-guided course is text-based and includes 15 lessons, taking about 90 minutes to complete.
Start The Course, Free
Search engines and AI, in one strategy
AI-powered tools now answer many questions directly, often by summarizing information from websites. Optimizing your content so those tools can find, understand, and reference it is called AI Optimization, or AIO.
The good news is that AIO does not require a completely separate strategy.
It builds on the same foundations as good search optimization: clear writing, helpful answers, strong structure, relevant links, and trust signals that show who is behind your content...
https://wordpress.com/blog/2026/07/21/
5 Best WordPress Theme Builders in 2026 (Compared)
Theme builders give you visual control over the parts of your site that themes normally lock down: headers, footers, blog archives, product pages, 404s, and everything in between. Instead of editing PHP files, you control it all through drag-and-drop editing.
Though I’ve never built a custom theme with PHP, I have extensively used a variety of theme builders across dozens of client projects. The state of theme builders today is impressive, as I can now do with visual builders in a drag-and-drop canvas what only developers could do a decade ago.
Every builder here taps into the same WordPress template system developers use, just without the code. Some are standalone themes, others are packaged as plugins. The best ones integrate deeply with custom fields and custom post types, which is where theme building gets powerful.
Here’s what I’ve found works best after testing the major options.
Best WordPress Theme Builders
1. Divi 5
Divi 5 is a standalone theme with a fully integrated theme builder, meaning you install one product and get everything: page building, theme building, and global design controls, all without needing a plugin or add-on. If you want a single ecosystem that handles both individual page design and sitewide template control, Divi eliminates the plugin-plus-theme juggling act that other solutions force you into.
Divi’s Template...
Though I’ve never built a custom theme with PHP, I have extensively used a variety of theme builders across dozens of client projects. The state of theme builders today is impressive, as I can now do with visual builders in a drag-and-drop canvas what only developers could do a decade ago.
Every builder here taps into the same WordPress template system developers use, just without the code. Some are standalone themes, others are packaged as plugins. The best ones integrate deeply with custom fields and custom post types, which is where theme building gets powerful.
Here’s what I’ve found works best after testing the major options.
Best WordPress Theme Builders
1. Divi 5
Divi 5 is a standalone theme with a fully integrated theme builder, meaning you install one product and get everything: page building, theme building, and global design controls, all without needing a plugin or add-on. If you want a single ecosystem that handles both individual page design and sitewide template control, Divi eliminates the plugin-plus-theme juggling act that other solutions force you into.
Divi’s Template...
https://www.elegantthemes.com/blog/wor
7 Text Overlapping Image Designs For Divi 5 (Free Download!)
Divi 5 makes it easy to create bold visual sections where typography and imagery work together. In this free pack, you’ll get 7 Text Overlapping Image Designs that are perfect for hero sections, portfolio intros, photography websites, creative agencies, service pages, editorial layouts, event pages, product showcases, and more.
Each design uses layered text, overlapping image placement, strong contrast, typography, spacing, and structured visual hierarchy to create polished sections with a dynamic editorial feel. Import a section, replace the content, update the images, and you’re ready to go.
Preview
Here’s a quick look at the 7 Text Overlapping Image Designs included in the pack. The download is further down the post.
Download 7 Text Overlapping Image Designs For Divi 5
Get all 7 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 ....
Each design uses layered text, overlapping image placement, strong contrast, typography, spacing, and structured visual hierarchy to create polished sections with a dynamic editorial feel. Import a section, replace the content, update the images, and you’re ready to go.
Preview
Here’s a quick look at the 7 Text Overlapping Image Designs included in the pack. The download is further down the post.
Download 7 Text Overlapping Image Designs For Divi 5
Get all 7 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 ....
https://www.elegantthemes.com/blog/div
Part 7 Of Mastering Flexbox: Building Flexible Button, Menu, And Link Rows
In Part 6 of our Mastering Flexbox course, we shared key tips for building responsive layouts in Divi 5 with cleaner structure, smarter breakpoint decisions, and real-content testing.
Now, in Part 7, we’ll focus on smaller layout patterns that appear on almost every website: button groups, navigation menus, breadcrumbs, footer links, and tag rows. These elements look simple, but they can be tricky to make responsive because they often need to stay horizontal on Desktop, wrap cleanly on Tablet, and stack or expand on Phone without feeling cramped.
With Divi 5’s Flexbox Layout System, you can build flexible button groups, menu rows, and link sections directly in the Visual Builder. By combining Layout Direction, Gap, Layout Wrapping, Column Class, Module Groups, and responsive sizing, you can create interaction-heavy rows that adapt across screen sizes without duplicating structures or writing custom CSS for common layout patterns.
Let’s dive in.
Why Button, Menu, And Link Rows Need Special Attention
Buttons, menus, and link rows are some of the most important interactive elements on a website. They guide users to key pages, actions, categories, and conversion points, so they need to remain clear and easy to use across screen sizes.
The challenge is that these rows often have competing layout needs. On Desktop, they usually look best as compact horizontal...
Now, in Part 7, we’ll focus on smaller layout patterns that appear on almost every website: button groups, navigation menus, breadcrumbs, footer links, and tag rows. These elements look simple, but they can be tricky to make responsive because they often need to stay horizontal on Desktop, wrap cleanly on Tablet, and stack or expand on Phone without feeling cramped.
With Divi 5’s Flexbox Layout System, you can build flexible button groups, menu rows, and link sections directly in the Visual Builder. By combining Layout Direction, Gap, Layout Wrapping, Column Class, Module Groups, and responsive sizing, you can create interaction-heavy rows that adapt across screen sizes without duplicating structures or writing custom CSS for common layout patterns.
Let’s dive in.
Why Button, Menu, And Link Rows Need Special Attention
Buttons, menus, and link rows are some of the most important interactive elements on a website. They guide users to key pages, actions, categories, and conversion points, so they need to remain clear and easy to use across screen sizes.
The challenge is that these rows often have competing layout needs. On Desktop, they usually look best as compact horizontal...
https://www.elegantthemes.com/blog/div
How To Create Reusable Border And Shadow Presets In Divi 5
Styling one border or shadow is quick. Keeping that same border or shadow consistent across an entire site is harder.
A card gets one border. A column gets a slightly different one. A button shadow is copied from another page. Then the design direction changes, and you have to track down the same small style decision across multiple modules.
Divi 5 gives you a better workflow with Option Group Presets. Instead of saving an entire module design, you can save one reusable group of settings, such as Border or Box Shadow, and apply it wherever that option group is available.
In this post, we’ll show you how to create reusable border and shadow presets, organize them into a practical preset library, use Design Variables inside them, and update those styles globally from one place.
Why Create A Border And Shadow Preset Library?
Borders and shadows often look like minor styling details, but they shape how polished a site feels. If cards, images, sections, forms, and callouts all use slightly different radius values, border colors, or shadow strengths, the design starts to feel inconsistent.
A preset library gives those repeated decisions a clear structure.
Clear names make presets easier to reuse: Labels such as Border: Card, Border: Divider, Shadow: Subtle, and Shadow: Floating tell you what each preset is for.
Shared presets reduce guesswork: Instead of rebuilding the same border...
A card gets one border. A column gets a slightly different one. A button shadow is copied from another page. Then the design direction changes, and you have to track down the same small style decision across multiple modules.
Divi 5 gives you a better workflow with Option Group Presets. Instead of saving an entire module design, you can save one reusable group of settings, such as Border or Box Shadow, and apply it wherever that option group is available.
In this post, we’ll show you how to create reusable border and shadow presets, organize them into a practical preset library, use Design Variables inside them, and update those styles globally from one place.
Why Create A Border And Shadow Preset Library?
Borders and shadows often look like minor styling details, but they shape how polished a site feels. If cards, images, sections, forms, and callouts all use slightly different radius values, border colors, or shadow strengths, the design starts to feel inconsistent.
A preset library gives those repeated decisions a clear structure.
Clear names make presets easier to reuse: Labels such as Border: Card, Border: Divider, Shadow: Subtle, and Shadow: Floating tell you what each preset is for.
Shared presets reduce guesswork: Instead of rebuilding the same border...
https://www.elegantthemes.com/blog/div
Part 6 Of Mastering Flexbox: Key Tips For Building Responsive Layouts
In Part 5 of our Mastering Flexbox series, we showed you how to use Display Order and Wrap Reverse in Divi 5 to create more intentional mobile stacking flows without duplicating sections or writing custom CSS for common reordering patterns.
Now, in Part 6, we’re bringing the workflow together. You’ve already learned the individual Flexbox controls and layout patterns that make Divi 5 more flexible across breakpoints. In this post, we’ll cover key tips for combining those tools into cleaner, more maintainable responsive layouts that adapt well across screen sizes.
Let’s dive in.
Why Responsive Design Feels Different In Divi 5
Divi 5’s Flexbox Layout System changes how you can approach responsive design. Instead of relying on duplicate rows, hidden spacers, or custom CSS for every breakpoint issue, you can start with a clean desktop structure and apply targeted adjustments where the layout actually needs to change.
That means fewer duplicate sections, more predictable responsive behavior, and less maintenance over time. Customizable Responsive Breakpoints and the Responsive Editor also make it easier to preview and adjust layouts across different screen sizes, so you can make decisions based on the actual layout instead of guessing.
The result is a workflow that feels more intentional: build the cleanest structure first, then use Flexbox and...
Now, in Part 6, we’re bringing the workflow together. You’ve already learned the individual Flexbox controls and layout patterns that make Divi 5 more flexible across breakpoints. In this post, we’ll cover key tips for combining those tools into cleaner, more maintainable responsive layouts that adapt well across screen sizes.
Let’s dive in.
Why Responsive Design Feels Different In Divi 5
Divi 5’s Flexbox Layout System changes how you can approach responsive design. Instead of relying on duplicate rows, hidden spacers, or custom CSS for every breakpoint issue, you can start with a clean desktop structure and apply targeted adjustments where the layout actually needs to change.
That means fewer duplicate sections, more predictable responsive behavior, and less maintenance over time. Customizable Responsive Breakpoints and the Responsive Editor also make it easier to preview and adjust layouts across different screen sizes, so you can make decisions based on the actual layout instead of guessing.
The result is a workflow that feels more intentional: build the cleanest structure first, then use Flexbox and...
https://www.elegantthemes.com/blog/div
Part 5 Of Mastering Flexbox: Reordering Content For Better Mobile Layouts
In Part 4 of our Mastering Flexbox series, we showed you how to align content without hidden spacers or custom CSS by using Justify Content, Align Items, Grow To Fill, Module Groups, and Nested Modules.
Now it’s time to solve another common responsive layout challenge: mobile stacking order. On desktop, a complex layout can look polished and intentional. But when that same layout stacks on mobile, the default order may not create the best reading flow. Images can stack above the wrong text, key CTAs can appear too low, featured cards can lose priority, and the overall rhythm can feel off.
Divi 5’s Flexbox Layout System gives you visual controls for reordering content across breakpoints. With Display Order, and in some cases Wrap Reverse, you can improve the mobile experience inside the Visual Builder without duplicating sections or writing custom CSS for common reordering patterns.
In this part, you’ll learn how to fix common mobile stacking problems, create more intentional mobile-first flows, and maintain stronger visual hierarchy across breakpoints.
Let’s dive in.
Why Mobile Reordering Matters
On desktop, carefully designed layouts often rely on side-by-side relationships. Images and text alternate, supporting content sits beside key messages, and featured elements are positioned for visual balance.
On mobile, those same elements usually stack...
Now it’s time to solve another common responsive layout challenge: mobile stacking order. On desktop, a complex layout can look polished and intentional. But when that same layout stacks on mobile, the default order may not create the best reading flow. Images can stack above the wrong text, key CTAs can appear too low, featured cards can lose priority, and the overall rhythm can feel off.
Divi 5’s Flexbox Layout System gives you visual controls for reordering content across breakpoints. With Display Order, and in some cases Wrap Reverse, you can improve the mobile experience inside the Visual Builder without duplicating sections or writing custom CSS for common reordering patterns.
In this part, you’ll learn how to fix common mobile stacking problems, create more intentional mobile-first flows, and maintain stronger visual hierarchy across breakpoints.
Let’s dive in.
Why Mobile Reordering Matters
On desktop, carefully designed layouts often rely on side-by-side relationships. Images and text alternate, supporting content sits beside key messages, and featured elements are positioned for visual balance.
On mobile, those same elements usually stack...
https://www.elegantthemes.com/blog/div
WordPress.com Changelog: A Resizable Editor and Sharper Image Cropping
July 3 – 16, 2026
Welcome back to the WordPress.com changelog! You’ll find some helpful updates to the editing experience in this stretch: you can now size the editor to any screen width, crop images more precisely, and flip and rotate icons — plus the usual round of reliability fixes.
Create and publish
Size your editor to any screen, not just three presets
When you’re working on a post or a page on your site, it’s helpful to see how the content looks at different screen sizes. The latest WordPress editor update helps you do exactly that.
Video from Make WordPress
Drag the edge of the editor to any width and watch your page adjust as you go — so you can see exactly how your content will look on a phone, a tablet, or anything in between before you publish.
More precise image cropping — now in the Cover block too
Cropping an image is now more precise. A zoomed-in view lets you line up your crop just right, and it works on those big full-width banner images in a Cover block too.
Video from Make WordPress
Flip and rotate icons
The Icon block (which allows you to quickly add icons to your content from a built-in icon library) now has flip-horizontal, flip-vertical, and rotate controls right in the toolbar, so you can more easily orient an icon exactly how you want.
Fixes and...
Welcome back to the WordPress.com changelog! You’ll find some helpful updates to the editing experience in this stretch: you can now size the editor to any screen width, crop images more precisely, and flip and rotate icons — plus the usual round of reliability fixes.
Create and publish
Size your editor to any screen, not just three presets
When you’re working on a post or a page on your site, it’s helpful to see how the content looks at different screen sizes. The latest WordPress editor update helps you do exactly that.
Video from Make WordPress
Drag the edge of the editor to any width and watch your page adjust as you go — so you can see exactly how your content will look on a phone, a tablet, or anything in between before you publish.
More precise image cropping — now in the Cover block too
Cropping an image is now more precise. A zoomed-in view lets you line up your crop just right, and it works on those big full-width banner images in a Cover block too.
Video from Make WordPress
Flip and rotate icons
The Icon block (which allows you to quickly add icons to your content from a built-in icon library) now has flip-horizontal, flip-vertical, and rotate controls right in the toolbar, so you can more easily orient an icon exactly how you want.
Fixes and...
https://wordpress.com/blog/2026/07/17/
