WordPress News and Tips
best wordpress website design examples, award winning websites reviews
How to Choose a Web Host: 7 Steps to Make the Right Decision
Choosing a web host is one of the most fundamental decisions you will make for your website. It affects everything from performance and security to how much maintenance you’ll do.
A great hosting provider helps your site thrive, so you can spend less time troubleshooting and more time building.
When you’re weighing what to consider when choosing a web host, start by matching your site’s needs with the performance, maintenance, support, and cost you’re comfortable managing. A personal blog, a growing business site, and an online store need different things — and the right host should give you room to grow without making you pay for complexity you do not need.
1. Determine your needs as a website owner
The first step in how to choose web hosting is getting clear on what you’re looking for:
What kind of website are you building?
Get clear on your website’s category — is it a portfolio, blog, or online store?
Your choice of website builder or content management system (CMS) also shapes your hosting needs. If you’re still deciding between the two, see web hosting vs. website builder. Some hosts are general-purpose, while others are tailored to a specific CMS like WordPress. A specialized host can give you support that understands your platform, plus automated updates and CMS-specific security.
How much website traffic do you expect?
It’s important...
A great hosting provider helps your site thrive, so you can spend less time troubleshooting and more time building.
When you’re weighing what to consider when choosing a web host, start by matching your site’s needs with the performance, maintenance, support, and cost you’re comfortable managing. A personal blog, a growing business site, and an online store need different things — and the right host should give you room to grow without making you pay for complexity you do not need.
1. Determine your needs as a website owner
The first step in how to choose web hosting is getting clear on what you’re looking for:
What kind of website are you building?
Get clear on your website’s category — is it a portfolio, blog, or online store?
Your choice of website builder or content management system (CMS) also shapes your hosting needs. If you’re still deciding between the two, see web hosting vs. website builder. Some hosts are general-purpose, while others are tailored to a specific CMS like WordPress. A specialized host can give you support that understands your platform, plus automated updates and CMS-specific security.
How much website traffic do you expect?
It’s important...
https://wordpress.com/blog/2026/07/09/
Exploring Divi 5’s New Tooltip Module
Divi 5 keeps turning common custom-code workflows into native builder features, and the new Tooltip module is a good example. It lets you add a floating popup panel beside another element and control its content, trigger, position, movement, arrow, timing, and styling visually.
Instead of wiring up a tooltip library by hand, you can place a Tooltip module inside the element it describes, add text or nested modules, and decide whether the tooltip appears on hover, on click, or always.
That makes it useful for short hints, feature explanations, product details, icon labels, mini promo cards, looped content, and contextual callouts that need more flexibility than a basic browser tooltip.
In this post, we’ll look at what the Tooltip module is, how to add it, how its settings work, and where it can improve a Divi 5 layout without adding clutter.
What Is The Tooltip Module In Divi 5?
The Tooltip module is a nestable content container that appears beside a parent element. The parent element becomes the tooltip’s anchor, and the Tooltip module holds the popup content.
In practical terms, you add the Tooltip module as a child of the element it should describe. That parent element might be a button, icon, image, text module, pricing feature, product card, or any other element that needs extra context.
By default, the tooltip shows on hover, appears near the top center of its anchor,...
Instead of wiring up a tooltip library by hand, you can place a Tooltip module inside the element it describes, add text or nested modules, and decide whether the tooltip appears on hover, on click, or always.
That makes it useful for short hints, feature explanations, product details, icon labels, mini promo cards, looped content, and contextual callouts that need more flexibility than a basic browser tooltip.
In this post, we’ll look at what the Tooltip module is, how to add it, how its settings work, and where it can improve a Divi 5 layout without adding clutter.
What Is The Tooltip Module In Divi 5?
The Tooltip module is a nestable content container that appears beside a parent element. The parent element becomes the tooltip’s anchor, and the Tooltip module holds the popup content.
In practical terms, you add the Tooltip module as a child of the element it should describe. That parent element might be a button, icon, image, text module, pricing feature, product card, or any other element that needs extra context.
By default, the tooltip shows on hover, appears near the top center of its anchor,...
https://www.elegantthemes.com/blog/div
7 Chopped Text Designs For Divi 5 (Free Download!)
Divi 5 makes it easy to create bold, editorial-style sections that use typography as the main visual element. In this free pack, you’ll get 7 Chopped Text Designs that are perfect for hero sections, landing pages, portfolio intros, product launches, architecture websites, creative agencies, editorial layouts, event pages, and more.
Each design uses oversized text, cropped letterforms, layered imagery, strong contrast, grid-based spacing, and modern type treatments to create striking sections that feel custom and high-impact. Import a section, replace the content, update the imagery, and you’re ready to go.
Preview
Here’s a quick look at the 7 Chopped Text Designs included in the pack. The download is further down the post.
Download 7 Chopped Text 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 .carrot_edge....
Each design uses oversized text, cropped letterforms, layered imagery, strong contrast, grid-based spacing, and modern type treatments to create striking sections that feel custom and high-impact. Import a section, replace the content, update the imagery, and you’re ready to go.
Preview
Here’s a quick look at the 7 Chopped Text Designs included in the pack. The download is further down the post.
Download 7 Chopped Text 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 .carrot_edge....
https://www.elegantthemes.com/blog/div
5 Useful Things You Can Do With Aspect Ratio in Divi 5
A layout can be carefully designed and still feel inconsistent once real content is added. Images arrive in different shapes. Team headshots come from different sources. Blog thumbnails, embeds, and dynamic content do not always reserve the space your layout expects.
That is where aspect ratio becomes useful. Instead of setting a fixed height, you define a relationship between width and height. The element can still resize across devices, but its proportions stay consistent.
Divi 5 gives you Aspect Ratio and Image Framing controls that make this easier to manage visually. You can use them on images, modules, containers, and sub-elements that expose the Sizing option group.
In this post, we’ll look at five practical ways to use Aspect Ratio in Divi 5 to create cleaner grids, better crops, steadier layouts, reusable shapes, and more consistent social feeds.
What Is The Aspect Ratio Setting In Divi 5?
The Aspect Ratio field lives in the Sizing option group inside the Design tab. You enter a ratio in width-to-height format, such as 16:9, 1:1, 4:5, or 21:9.
Divi then calculates the element’s height from its rendered width. As the container becomes narrower or wider across screen sizes, the height adjusts automatically to keep the same proportion.
That distinction matters. You are not locking an element to one fixed height. You are defining a proportion.
For example, a 16:9 element...
That is where aspect ratio becomes useful. Instead of setting a fixed height, you define a relationship between width and height. The element can still resize across devices, but its proportions stay consistent.
Divi 5 gives you Aspect Ratio and Image Framing controls that make this easier to manage visually. You can use them on images, modules, containers, and sub-elements that expose the Sizing option group.
In this post, we’ll look at five practical ways to use Aspect Ratio in Divi 5 to create cleaner grids, better crops, steadier layouts, reusable shapes, and more consistent social feeds.
What Is The Aspect Ratio Setting In Divi 5?
The Aspect Ratio field lives in the Sizing option group inside the Design tab. You enter a ratio in width-to-height format, such as 16:9, 1:1, 4:5, or 21:9.
Divi then calculates the element’s height from its rendered width. As the container becomes narrower or wider across screen sizes, the height adjusts automatically to keep the same proportion.
That distinction matters. You are not locking an element to one fixed height. You are defining a proportion.
For example, a 16:9 element...
https://www.elegantthemes.com/blog/div
Exploring Divi 5’s New Breadcrumbs Module
Divi 5 now includes a native Breadcrumbs module, giving you a built-in way to add breadcrumb navigation to pages, posts, archive templates, and Theme Builder layouts.
Breadcrumbs help visitors understand where they are on your site and give them a quick path back to higher-level pages or categories. They are especially useful on blogs, documentation sites, knowledge bases, course sites, and any website with layered content.
In this post, we’ll look at how Divi 5’s Breadcrumbs module works, what you can control, where it makes the most sense, and how to add it to a Theme Builder post template.
What Is Divi 5’s Breadcrumbs Module?
The Breadcrumbs module is part of Divi 5’s core module library. It displays a clickable navigation trail that shows where the current page or post sits within your site structure.
A typical breadcrumb trail might look like this:
Home / Blog / Category / Post Title
Home / Services / Web Design
Home / Documentation / Getting Started / Setup Guide
Before this module, Divi users often relied on third-party breadcrumb plugins or custom shortcode workflows. Those options can still be useful in some cases, but Divi 5 now gives you a native module that works directly inside the Visual Builder and Theme Builder.
This module is different from Divi 5’s Woo Breadcrumbs module. Woo Breadcrumbs is built for WooCommerce product navigation. The Breadcrumbs module...
Breadcrumbs help visitors understand where they are on your site and give them a quick path back to higher-level pages or categories. They are especially useful on blogs, documentation sites, knowledge bases, course sites, and any website with layered content.
In this post, we’ll look at how Divi 5’s Breadcrumbs module works, what you can control, where it makes the most sense, and how to add it to a Theme Builder post template.
What Is Divi 5’s Breadcrumbs Module?
The Breadcrumbs module is part of Divi 5’s core module library. It displays a clickable navigation trail that shows where the current page or post sits within your site structure.
A typical breadcrumb trail might look like this:
Home / Blog / Category / Post Title
Home / Services / Web Design
Home / Documentation / Getting Started / Setup Guide
Before this module, Divi users often relied on third-party breadcrumb plugins or custom shortcode workflows. Those options can still be useful in some cases, but Divi 5 now gives you a native module that works directly inside the Visual Builder and Theme Builder.
This module is different from Divi 5’s Woo Breadcrumbs module. Woo Breadcrumbs is built for WooCommerce product navigation. The Breadcrumbs module...
https://www.elegantthemes.com/blog/div
Part 3 Of Mastering Flexbox: Wrap vs No-Wrap Structure Templates
In Part 2 of our Mastering Flexbox series, we showed you how to create equal-height cards with aligned buttons using Align Items > Stretch, Justify Content > Space Between, and Grow To Fill. In this third installment, we’ll focus on one of the most important structure decisions in Divi 5: Layout Wrapping.
Layout Wrapping controls whether flex items stay on one line or move onto additional lines when there isn’t enough room. Choosing between No Wrap, Wrap, and Wrap Reverse affects how many rows you need, how your layout responds across breakpoints, and how much manual structure you have to manage.
In this post, we’ll compare No Wrap and Wrap structure templates, explain when each option makes sense, and show how supporting controls like Column Class, Align Content, and Display Order help you build cleaner responsive layouts without custom CSS.
Let’s dive in.
Understanding Layout Wrapping In Divi 5
In Divi 5, Layout Wrapping controls whether direct child elements inside a Flex container stay on a single line or wrap onto additional lines when they run out of space.
This is important because wrapping only affects the direct children of the container you’re editing. For example, if you’re editing a Row, wrapping affects its Columns. If you’re editing a Module Group, wrapping affects the modules or groups inside it.
The Three Layout...
Layout Wrapping controls whether flex items stay on one line or move onto additional lines when there isn’t enough room. Choosing between No Wrap, Wrap, and Wrap Reverse affects how many rows you need, how your layout responds across breakpoints, and how much manual structure you have to manage.
In this post, we’ll compare No Wrap and Wrap structure templates, explain when each option makes sense, and show how supporting controls like Column Class, Align Content, and Display Order help you build cleaner responsive layouts without custom CSS.
Let’s dive in.
Understanding Layout Wrapping In Divi 5
In Divi 5, Layout Wrapping controls whether direct child elements inside a Flex container stay on a single line or wrap onto additional lines when they run out of space.
This is important because wrapping only affects the direct children of the container you’re editing. For example, if you’re editing a Row, wrapping affects its Columns. If you’re editing a Module Group, wrapping affects the modules or groups inside it.
The Three Layout...
https://www.elegantthemes.com/blog/div
Creating A Fluid Responsive Sizing System With Divi 5’s Variable Generator
Most designers do not size things once. A heading that looks balanced at 56px on desktop can feel oversized on a phone, so you create a smaller mobile value, then a tablet value between the two. Then you repeat that work for font sizes, section padding, margins, gaps, border radius, widths, and other numeric values across the site.
Fluid sizing with CSS clamp() solves the problem at the math level. One value can scale smoothly between a minimum and maximum as the viewport changes. The challenge is that writing good clamp() expressions by hand takes time, and external generators still leave you copying values into your design system one by one.
Divi 5’s Variable Generator removes that friction. It creates complete sizing scales and adds them directly to your Design Variables. You can generate fluid values for typography, spacing, gaps, radius, border width, width, and more, then reuse those variables in numeric fields across the Visual Builder.
This is the numeric companion to a color-variable workflow. Instead of turning one brand color into a full palette, you turn a few base values into a responsive sizing system.
Where To Find The Numeric Variable Generator
The Variable Generator lives inside the Variable Manager.
Open any page in the Visual Builder.
Click the Variable Manager icon in the left sidebar.
Open or hover over the Numbers group.
Click the generator icon for the...
Fluid sizing with CSS clamp() solves the problem at the math level. One value can scale smoothly between a minimum and maximum as the viewport changes. The challenge is that writing good clamp() expressions by hand takes time, and external generators still leave you copying values into your design system one by one.
Divi 5’s Variable Generator removes that friction. It creates complete sizing scales and adds them directly to your Design Variables. You can generate fluid values for typography, spacing, gaps, radius, border width, width, and more, then reuse those variables in numeric fields across the Visual Builder.
This is the numeric companion to a color-variable workflow. Instead of turning one brand color into a full palette, you turn a few base values into a responsive sizing system.
Where To Find The Numeric Variable Generator
The Variable Generator lives inside the Variable Manager.
Open any page in the Visual Builder.
Click the Variable Manager icon in the left sidebar.
Open or hover over the Numbers group.
Click the generator icon for the...
https://www.elegantthemes.com/blog/div
WordPress.com Changelog: Shape Your Newsletter Signup and Get Domain Help in Chat
June 19 – July 2, 2026
Welcome back to the WordPress.com changelog! During the last two weeks, we focused on giving you more control: a subscription signup you can tailor to your readers, a support assistant that can now sort out your domain settings right in the chat, and more.
Create and publish
Customize your newsletter signup
Your subscription form no longer has to be one-size-fits-all. You can now add a welcome message to the signup box to tell readers why they should join, write descriptions for your free and paid tiers so people know what they’re getting, and optionally hide the free tier to point readers straight to your paid plans.
Available now for any newsletter, on any plan — including free. Look under Newsletter Settings to set it up.
For stores
Faster product discovery in your WooCommerce store
Search on WordPress.com Commerce stores got a big upgrade.
Shoppers can now filter products by size, color or other product options, plus price range, rating, availability, category, tag, and brand — and see rich product cards with images, prices, ratings, and review counts right in the results. They can sort by price or rating and see active filter chips as they refine.
It’s all included on our Commerce plan, with nothing extra to install or connect.
Support
The...
Welcome back to the WordPress.com changelog! During the last two weeks, we focused on giving you more control: a subscription signup you can tailor to your readers, a support assistant that can now sort out your domain settings right in the chat, and more.
Create and publish
Customize your newsletter signup
Your subscription form no longer has to be one-size-fits-all. You can now add a welcome message to the signup box to tell readers why they should join, write descriptions for your free and paid tiers so people know what they’re getting, and optionally hide the free tier to point readers straight to your paid plans.
Available now for any newsletter, on any plan — including free. Look under Newsletter Settings to set it up.
For stores
Faster product discovery in your WooCommerce store
Search on WordPress.com Commerce stores got a big upgrade.
Shoppers can now filter products by size, color or other product options, plus price range, rating, availability, category, tag, and brand — and see rich product cards with images, prices, ratings, and review counts right in the results. They can sort by price or rating and see active filter chips as they refine.
It’s all included on our Commerce plan, with nothing extra to install or connect.
Support
The...
https://wordpress.com/blog/2026/07/03/
