The Tech Zone

I have a few new features to show you, all of which are available for Divi 5 today. The biggest new addition is the Page Manager, which lets you create, edit, duplicate, and delete pages without leaving the builder. Additionally, we added a new in-app Preview Mode. Now, previewing how your website will look on the front end is one click away. You’ll also find a new consolidated page menu in the top bar, new save options, and a new content drill-down menu for easy access to child elements. Check out the following video to see the new feature in action. 👇 Page Manager First, we added a new Page Manager in the builder, allowing you to add, duplicate, delete, and edit any page on your website. If you are a Divi power user, you no longer have to leave the builder to work on your entire site. You can stay in the zone rather than navigating through the dashboard. It’s really convenient!    Preview Mode Next, we added a new in-app preview mode. Clicking preview will hide all...

Fixed spacing values have become second nature in web design. Your website looks great on your laptop, but when someone views it on a larger monitor, everything falls apart. You adjust spacing for various breakpoints, but you are still guessing. There’s a better way: fluid spacing ramps. These scales proportionally across every screen size, keeping your design balanced without manual tweaking. In this guide, we’ll show you how to build such a fluid spacing ramp in Divi 5 . Here’s what you need to know. What Is A Fluid Spacing Ramp And What Does It Do? A fluid spacing ramp is a systematic set of spacing values that scale proportionally across screen sizes. Most designers use fixed values: 16px padding on mobile, 24px on tablet, 32px on desktop. These create visible jumps when the viewport hits each breakpoint. It also doesn’t account for device sizes between these breakpoints, such as a smaller tablet or phones in landscape, which results in awkward gaps. Fluid spacing ramps elimin...

Divi 5 makes it easy to create eye-catching image compositions without custom code. In this free pack, you will find 6 Styled Image Maskings, designed to help you turn ordinary photos into polished hero visuals, collages, galleries, and featured sections. Drop one onto any page, swap the images, and you are ready to go. No extra setup required. Preview Here’s a quick look at all 6 Styled Image Maskings included in the pack. The download is further down the post. Download 6 Styled Image Maskings For Divi 5 Get all 6 designs for free. Import them into your Divi Library and add them to any page in the Visual Builder. Download the Files Download For Free Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to acc...

The majority of website visitors browse on mobile devices, so ensuring the hero section is responsive is crucial to your success. With Divi 5’s Flexbox layout system, reordering hero content for varying screen sizes is quick to do. The integration of Flexbox and Customizable Responsive Breakpoints makes it easy to adjust content, letting you fine-tune layouts with a few clicks. In this post, we’ll dive into building and reordering a hero section with Flexbox, so you’ll better understand the system and how to use it. What Is Flexbox? Flexbox , short for Flexible Box Layout, is a CSS layout model designed for arranging elements in rows or columns. It allows items to dynamically expand, shrink, or wrap to fit the available space. This makes it ideal for creating flexible and responsive designs with precise control over alignment, spacing, and ordering. In Divi 5, Flexbox has been fully integrated as the core layout system, marking an evolution from previous versions. It replaces old...

Advanced customizable sliders used to require third-party plugins or custom CSS, but with Divi 5 , the game has changed. Using Nested Modules and the Slider Module together allows designers to create these experiences, all without writing code or installing plugins that can slow down your site. The result is cleaner code, fast performance, and complete design freedom. In this post, we’ll guide you through a step-by-step process for creating a stunning nested slider. Everything you’re about to learn is available right now in the Divi 5 Public Beta. Grab it , open the Visual Builder, and let’s build it together. Understanding The Building Blocks Creating nested sliders in Divi 5 boils down to mastering two native tools: Nested Modules and the native Slider Module. Once you understand how they work together, you’ll never look at a plain carousel the same way again. Subscribe To Our Youtube Channel Nested Modules In Divi 5 Nested Modules is one of the best new features in Divi 5. ...