WordPress News and Tips
best wordpress website design examples, award winning websites reviews
7 Knockout Grids For Divi 5 (Free Download!)
Divi 5 makes it easy to create structured layouts with strong visual rhythm and bold image placement. In this free pack, you’ll get 7 Knockout Grids for Divi 5 that are perfect for landing pages, hero sections, portfolio layouts, real estate websites, service pages, design studios, travel sections, editorial layouts, and more.
Each design uses grid-based composition, image blocks, text panels, color contrast, and intentional negative space to create polished sections that feel modern, layered, and easy to customize. Import a section, replace the content, update the images, and you’re ready to go.
Preview
Here’s a quick look at the 7 Knockout Grids included in the pack. The download is further down the post.
Download 7 Knockout Grids 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 ....
Each design uses grid-based composition, image blocks, text panels, color contrast, and intentional negative space to create polished sections that feel modern, layered, and easy to customize. Import a section, replace the content, update the images, and you’re ready to go.
Preview
Here’s a quick look at the 7 Knockout Grids included in the pack. The download is further down the post.
Download 7 Knockout Grids 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 ....
https://www.elegantthemes.com/blog/div
How To Build Better Blog, Portfolio, And Product Grids With Aspect Ratio In Divi 5
Upload a dozen images from different sources, and your grid can start to lose its shape fast. One blog post has a wide featured image. Another uses a square crop. A product image comes from a supplier. A portfolio image is vertical because the work itself was vertical. The result is a grid shaped by the uploads, not by your design.
Aspect Ratio in Divi 5 gives the layout a rule to follow. Instead of letting every image decide the height of its own card, you can define the shape once and keep blog, portfolio, and product grids visually consistent. In this post, we’ll look at why grids need consistent image shapes, how Aspect Ratio and Image Framing work together, and how to apply them to blog loops, portfolio grids, and WooCommerce product grids in Divi 5.
Why Grids Need A Consistent Shape
A grid makes a visual promise: every card belongs to the same system. When cards sit at different heights, that promise breaks. Visitors may not stop and describe the issue, but they feel it. The layout starts to look unfinished, even when the content itself is strong.
The browser usually follows the content. A tall image makes a tall card. A short image makes a short card. A wide crop behaves differently from a portrait crop. The columns may still line up, but the rows drift, and the grid stops feeling intentional.
That drift affects different grids differently. A blog grid can start to...
Aspect Ratio in Divi 5 gives the layout a rule to follow. Instead of letting every image decide the height of its own card, you can define the shape once and keep blog, portfolio, and product grids visually consistent. In this post, we’ll look at why grids need consistent image shapes, how Aspect Ratio and Image Framing work together, and how to apply them to blog loops, portfolio grids, and WooCommerce product grids in Divi 5.
Why Grids Need A Consistent Shape
A grid makes a visual promise: every card belongs to the same system. When cards sit at different heights, that promise breaks. Visitors may not stop and describe the issue, but they feel it. The layout starts to look unfinished, even when the content itself is strong.
The browser usually follows the content. A tall image makes a tall card. A short image makes a short card. A wide crop behaves differently from a portrait crop. The columns may still line up, but the rows drift, and the grid stops feeling intentional.
That drift affects different grids differently. A blog grid can start to...
https://www.elegantthemes.com/blog/div
The Beauty Of Divi 5’s Gradient Variables
Good design tools do more than add new settings. They change how you think about the decisions you make. Gradients are a perfect example. In older workflows, a gradient often lived wherever you built it: one section background, one button, one hero heading, one CTA. If the brand direction changed later, you had to remember where that gradient was used and update each instance by hand.
Gradient Variables in Divi 5 change that. Instead of treating a gradient as a one-off value, you can save it as part of your site’s design system and reuse it wherever gradients are supported. That is where the beauty of the feature becomes clear. A gradient can start as one reusable source, show up across backgrounds, buttons, and text fills, and still remain connected to the same value inside the Variable Manager.
In this post, we’ll look at what Gradient Variables are, how they fit into Divi 5’s design system, how to create them, and how to use them across a site without rebuilding the same visual treatment over and over.
What Are Gradient Variables In Divi 5?
Design Variables are Divi 5’s system for managing reusable values across a website. Instead of setting a color, font, number, image, link, text value, or gradient directly on every element, you define the value once in the Variable Manager and apply it wherever it is needed.
Every element using that variable stays connected to the...
Gradient Variables in Divi 5 change that. Instead of treating a gradient as a one-off value, you can save it as part of your site’s design system and reuse it wherever gradients are supported. That is where the beauty of the feature becomes clear. A gradient can start as one reusable source, show up across backgrounds, buttons, and text fills, and still remain connected to the same value inside the Variable Manager.
In this post, we’ll look at what Gradient Variables are, how they fit into Divi 5’s design system, how to create them, and how to use them across a site without rebuilding the same visual treatment over and over.
What Are Gradient Variables In Divi 5?
Design Variables are Divi 5’s system for managing reusable values across a website. Instead of setting a color, font, number, image, link, text value, or gradient directly on every element, you define the value once in the Variable Manager and apply it wherever it is needed.
Every element using that variable stays connected to the...
https://www.elegantthemes.com/blog/div
10 Best Variable Fonts For Web Design (Now In Divi 5)
Have you ever used a variable font before? A traditional font family gives you a fixed set of styles: maybe Light, Regular, Medium, and Bold. If you want something between Regular and Bold, you usually need another font file, and if that exact weight does not exist, you compromise.
Variable font support in Divi 5 changes that. A single variable font can contain a range of adjustable design axes, such as weight, width, slant, optical size, and sometimes more experimental controls like casualness, softness, grade, or monospace.
That gives you much more control over how typography feels across a website. Instead of forcing an H2 into 400 or 700, you can use a value like 535 if that balances better with your body text. Instead of swapping fonts for a compressed headline, you can adjust width. Instead of using the same display detail at every size, you can adjust optical size.
Below are ten strong variable fonts you can use in Divi 5, what each one lets you adjust, and where each one fits best in real web design projects.
1. Inter
Inter is one of the most practical variable fonts for modern web design. It was designed for screens, which makes it a strong choice for interfaces, dashboards, SaaS sites, product pages, documentation, and any layout where readability matters at several sizes.
Two axes are especially useful:
Weight: 100–900
Slant: A controlled slant axis that lets you...
Variable font support in Divi 5 changes that. A single variable font can contain a range of adjustable design axes, such as weight, width, slant, optical size, and sometimes more experimental controls like casualness, softness, grade, or monospace.
That gives you much more control over how typography feels across a website. Instead of forcing an H2 into 400 or 700, you can use a value like 535 if that balances better with your body text. Instead of swapping fonts for a compressed headline, you can adjust width. Instead of using the same display detail at every size, you can adjust optical size.
Below are ten strong variable fonts you can use in Divi 5, what each one lets you adjust, and where each one fits best in real web design projects.
1. Inter
Inter is one of the most practical variable fonts for modern web design. It was designed for screens, which makes it a strong choice for interfaces, dashboards, SaaS sites, product pages, documentation, and any layout where readability matters at several sizes.
Two axes are especially useful:
Weight: 100–900
Slant: A controlled slant axis that lets you...
https://www.elegantthemes.com/blog/div
Everything You Need To Know About Workspaces In Divi 5
The Divi 5 Visual Builder is highly customizable. You can open and close panels, dock them to either side of the screen, float them over the canvas, resize them, group them into tabs, choose which top-bar icons appear, and switch between light and dark modes.
That flexibility is useful, but it also creates a small problem: the setup that works best for one task is not always the setup you want for another. A layout-heavy build might need the Layers and Inspector panels open. A writing session might need a cleaner canvas. A smaller screen might need fewer panels competing for space.
Divi 5 Workspaces solve that by letting you save complete builder setups and switch between them whenever you need. Instead of rearranging the interface by hand every time your task changes, you can save one workspace for your default build flow, another for content editing, another for responsive checks, and another for focused work.
In this post, we’ll look at what Workspaces save, how they’re organized, how to create and manage your own, how to switch between them with the Command Center, and which workspace setups are worth trying on a real Divi 5 project.
What Are Workspaces In Divi 5?
A workspace is a saved version of your Visual Builder setup. It remembers how your builder interface is arranged and which preferences shape the way it behaves. Once you save that setup, you can return to it...
That flexibility is useful, but it also creates a small problem: the setup that works best for one task is not always the setup you want for another. A layout-heavy build might need the Layers and Inspector panels open. A writing session might need a cleaner canvas. A smaller screen might need fewer panels competing for space.
Divi 5 Workspaces solve that by letting you save complete builder setups and switch between them whenever you need. Instead of rearranging the interface by hand every time your task changes, you can save one workspace for your default build flow, another for content editing, another for responsive checks, and another for focused work.
In this post, we’ll look at what Workspaces save, how they’re organized, how to create and manage your own, how to switch between them with the Command Center, and which workspace setups are worth trying on a real Divi 5 project.
What Are Workspaces In Divi 5?
A workspace is a saved version of your Visual Builder setup. It remembers how your builder interface is arranged and which preferences shape the way it behaves. Once you save that setup, you can return to it...
https://www.elegantthemes.com/blog/div
Discover Your Local WordPress Community
WordPress powers around 43% of the web, and behind all those sites is an even bigger community of people who use, teach, and improve it, meeting up all the time to swap ideas and lend a hand.
This vibrant community has global IRL touch points as well as virtual ones that include local meetups, WordCamps, and opportunities surfaced using the WordPress Events and News widget in WP Admin.
Start with a local WordPress meetup
A local meetup is the lowest-commitment way to start. Meetups are smaller and more informal than conferences and typically last only a few hours.
At a WordPress meetup, you’ll find a gathering of like-minded people who get together to share their WordPress experiences.
There’s no required format, so in practice, that might be a talk at a coworking space, a hands-on workshop, a help desk where you can get one-on-one help with your site, or a table in a coffee shop.
Groups commonly meet about once a month, and where an event charges for attendance, the fee only covers costs.
Expect a wide mix of people, including bloggers, freelancers, ecommerce shop owners, agency developers, and at least one person still partway through building their first site. Everybody’s welcome, and nobody checks credentials at the door.
The official WordPress events directory is the place to look for a local event: it lists upcoming meetups and...
This vibrant community has global IRL touch points as well as virtual ones that include local meetups, WordCamps, and opportunities surfaced using the WordPress Events and News widget in WP Admin.
Start with a local WordPress meetup
A local meetup is the lowest-commitment way to start. Meetups are smaller and more informal than conferences and typically last only a few hours.
At a WordPress meetup, you’ll find a gathering of like-minded people who get together to share their WordPress experiences.
There’s no required format, so in practice, that might be a talk at a coworking space, a hands-on workshop, a help desk where you can get one-on-one help with your site, or a table in a coffee shop.
Groups commonly meet about once a month, and where an event charges for attendance, the fee only covers costs.
Expect a wide mix of people, including bloggers, freelancers, ecommerce shop owners, agency developers, and at least one person still partway through building their first site. Everybody’s welcome, and nobody checks credentials at the door.
The official WordPress events directory is the place to look for a local event: it lists upcoming meetups and...
https://wordpress.com/blog/2026/07/24/
5 Hover Effects You Can Create With Aspect Ratio And Framing In Divi 5
Hover effects make a page feel more intentional. A card shifts, an image reveals more detail, or a button stretches slightly, and the layout starts to feel designed instead of simply assembled.
In Divi 5, you can create many of these interactions with the same Aspect Ratio and Image Framing controls you already use to crop and position images. Add hover states and transitions, and those layout controls become motion tools.
In this post, we’ll build five hover effects in Divi 5, from a subtle image pan to a button morph and a team-card spotlight effect. Along the way, you’ll see how Aspect Ratio, Object Fit, Object Position, Filters, Transform, and Image Presets work together.
The Controls Behind These Effects
Before we build the effects, it helps to understand the three main controls doing the work.
1. Aspect Ratio
Aspect Ratio is found in Design > Sizing. It sets a proportional relationship between an element’s width and height. A 1:1 ratio creates a square. A 16:9 ratio creates a widescreen frame. A 4:5 ratio creates a taller portrait frame.
The important part is that the ratio stays proportional as the element scales. When the parent container gets wider or narrower, the element’s height adjusts to keep the same shape.
That makes Aspect Ratio useful for more than neat image crops. It can define the resting shape of an image, card, Group, or button, and that shape can...
In Divi 5, you can create many of these interactions with the same Aspect Ratio and Image Framing controls you already use to crop and position images. Add hover states and transitions, and those layout controls become motion tools.
In this post, we’ll build five hover effects in Divi 5, from a subtle image pan to a button morph and a team-card spotlight effect. Along the way, you’ll see how Aspect Ratio, Object Fit, Object Position, Filters, Transform, and Image Presets work together.
The Controls Behind These Effects
Before we build the effects, it helps to understand the three main controls doing the work.
1. Aspect Ratio
Aspect Ratio is found in Design > Sizing. It sets a proportional relationship between an element’s width and height. A 1:1 ratio creates a square. A 16:9 ratio creates a widescreen frame. A 4:5 ratio creates a taller portrait frame.
The important part is that the ratio stays proportional as the element scales. When the parent container gets wider or narrower, the element’s height adjusts to keep the same shape.
That makes Aspect Ratio useful for more than neat image crops. It can define the resting shape of an image, card, Group, or button, and that shape can...
https://www.elegantthemes.com/blog/div
WordCamp US 2026: 7 Reasons to Connect with Your WordPress Community
If you love building on WordPress, it’s time you were in a room full of other people who do too.
WordCamp US lands in Phoenix on August 16–19, and this is your chance to connect with the WordPress community. If you’ve never heard of WordCamp, here’s the TLDR: it’s a conference built entirely around WordPress, run by the same open-source community that builds the platform you’re using right now.
And at the WordPress.com booth, we’re championing the theme: WordPress for the future. This year, we’re offering a sponsor code WordPress.com-friend20 for 20% off general admission.Take a look at the full WordCamp US 2026 schedule to see what’s on the horizon this year.
Get 20% off WordCamp US tickets
Showcase Day: See how far WordPress can go
Get unstuck, on the spot, for free
Turn your WordPress experience into your next job opportunity
Figure out what AI actually means for your site, beyond the hype
Learn WordPress without feeling like the only beginner in the room
Contribute to WordPress itself, no experience required
Make Phoenix worth the trip
What is WordCamp US?
WordCamp is four days of practical sessions, workshops, and conversations with people who build, use, and improve WordPress
The two main conference days run across four tracks: AI, Technical WordPress, Honing Your Skills, and Beginner...
WordCamp US lands in Phoenix on August 16–19, and this is your chance to connect with the WordPress community. If you’ve never heard of WordCamp, here’s the TLDR: it’s a conference built entirely around WordPress, run by the same open-source community that builds the platform you’re using right now.
And at the WordPress.com booth, we’re championing the theme: WordPress for the future. This year, we’re offering a sponsor code WordPress.com-friend20 for 20% off general admission.Take a look at the full WordCamp US 2026 schedule to see what’s on the horizon this year.
Get 20% off WordCamp US tickets
Showcase Day: See how far WordPress can go
Get unstuck, on the spot, for free
Turn your WordPress experience into your next job opportunity
Figure out what AI actually means for your site, beyond the hype
Learn WordPress without feeling like the only beginner in the room
Contribute to WordPress itself, no experience required
Make Phoenix worth the trip
What is WordCamp US?
WordCamp is four days of practical sessions, workshops, and conversations with people who build, use, and improve WordPress
The two main conference days run across four tracks: AI, Technical WordPress, Honing Your Skills, and Beginner...
https://wordpress.com/blog/2026/07/21/
