Posts

When To Use Option Group, Stacked, Nested & Element Presets In Divi 5

Image
We first introduced two preset types: Element Presets and Option Group Presets . Then we added two additional and specific preset types: Stacked and Nested Presets . Each one focuses on different tasks during your build. When you match the right preset type and method to the job, your workflow gets faster, and your design stays consistent. In this post, we cover all four types of presets in Divi 5 . You’ll learn what each preset type does, how stacking and nesting work, when to use each one, and how they all work together to speed up your builds. Let’s break it down. Understanding Each Preset Type Let’s go over the different preset types and explore what you can expect from each. What Are Option Group Presets Option Group Presets are presets that zero in on individual design properties rather than complete elements. They are reusable settings that you can apply wherever those properties appear. Anything from typography settings, box shadows, borders, spacing values, to scroll effe...

7 Table Designs For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to display information in a way that is clean, scannable, and easy to compare. In this free pack, you will find 7 Styled Tables, designed for pricing comparisons, feature lists, schedules, specs, and other data-heavy content. Drop one onto any page, swap the text, and you are ready to go. No extra setup required. Preview Here’s a quick look at all 7 Styled Tables included in the pack. The download is further down the post. Download 7 Styled Tables For Divi 5 Get all 7 tables 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 access the layout pack. ...

How To Create ‘The Holy Grail’ Grid Page Layout With Divi 5

Image
The Holy Grail layout earned its name because it used to be frustrating to build. Designers wanted a clean header and footer with two sidebars flanking a main content column, but making those columns behave, especially responsively, often required hacks and workarounds. That’s exactly the kind of problem Divi 5 ‘s Grid System is meant to solve. CSS Grid has always been one of the best tools for this layout, and Divi 5 brings Grid controls directly into the Visual Builder so you can set column ratios, spacing, and responsive behavior without leaving your workflow. In this post, we’ll build the Holy Grail layout step by step and fine-tune it for every device. Let’s get started! What Is The Holy Grail Layout? The Holy Grail layout features a header at the top, a footer at the bottom, and three columns in the middle. Your main content is positioned in the center column, which is typically the widest, while the left and right columns contain elements such as navigation or advertisements...

Preset Manager, Preset Preview + Preset/Variable Export!

Image
I am excited to introduce the new Preset Manager, Preset Preview, and Preset and Variable Import & Export for Divi 5 . Now, you can manage all your presets from one location, edit them, and view changes in a new preset previewer without disrupting your page content and design flow. We also added the ability to import and export all your website’s presets and variables, making it easy to jumpstart new websites with a specific set of each. Check out the following video to see the new feature in action. 👇 The New Preset Manager You’ll find a new preset manager icon in the sidebar. Click it to open the preset manager, where you will find a list of all modules and groups. You can edit, duplicate, delete, or set any existing preset as the default. Furthermore, you can quickly add new presets of any type. The preset list is searchable and filterable, making it easier to manage an extensive library.    Preset Preview Panel When you add or edit a preset using the Preset Mana...