The Group Module is Divi 5’s new, lightweight container. It lives inside a column and can wrap any number of modules. You can style the whole block, drag it around, duplicate it, or make it global without touching its children.
Add The Divi Group Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Locate the Group module and click on it to load. Alternatively, you can use the Search option to find it.
Pro Tip: You can also multi-select different modules and press the CMD/CTRL + G shortcut key to create a Group module from the selected modules.
The Divi Group Module Use Cases
Reusable call-to-action block: Wrap a headline, supporting text, and a button in a Group. Style the container once (background, padding, border-radius), save it as a global item, then drop the same CTA anywhere on the site without restyling or re-aligning individual pieces.
Side-by-side buttons or mixed media layouts: Put two Button modules - or an Image next to a Text module - inside a Group. Upcoming flexbox controls let you flip their order, control wrapping, and fine-tune alignment directly on the Group, rather than each module. No extra CSS, no hidden rows.
Card that loops with dynamic content: Build a “card” (image, title, excerpt, price, etc.) as a Group. When Divi’s query loop builder lands, you’ll be able to repeat that Group automatically for every post, product, or listing - one design, endless items.
Group Module Settings Breakdown
Once you've added the Group module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab allows you to add a link to the entire Group, customize the Background desking option, and/or change the default Admin label.
Link - Make the entire Group module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Group module's background styles.
Admin Label - Choose the Group module's label text to help you keep things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Group module are in this tab.
Sizing - Choose the desired sizing for the Group module.
Spacing - Choose the spacing for the Group module.
Border - Choose the border styles for the Group module.
Box Shadow - Choose the Group module's Box Shadow styles.
Filters - Choose the Group module's filters, including hue shifts, saturation adjustments, and blending modes.
Transform - Choose the Group module's advanced design effects, including scaling, rotating, skewing, and translating.
Animation - Choose the Group module's animation styles to add personality and interactivity while maintaining a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Group module, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Group's module visibility based on different devices.
Transitions - Choose how long the Group's module animation takes, adding subtle and impactful animations that enhance the user experience and make your modules stand out.
Position - Choose precise control of the Group's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Group module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
