In this tutorial, we’ll create a clean card, save it to your Divi library, and import it onto any page. We will also link it to the Loop Builder to automatically generate grids for posts or products.
How module groups work
A module group in Divi 5 is a container that holds multiple modules together as one packaged unit. Think of it as creating a custom building block. Instead of working with individual modules (an image here, a heading there, a button somewhere else), you group them into a single entity that moves, stores, and functions as one.
The advantage becomes apparent the moment you need the same design pattern in multiple places. You build the map once, drop it where you need it and the entire structure remains intact, including the style and spacing.
Subscribe to our YouTube channel
This is most important when you are designing to scale. Building a team page with twelve employee cards or a product grid with thirty items means repeatedly duplicating modules (and updating them later) or reconstructing the same layout from memory each time. Module groups eliminate both problems. Design the card once, save it to your library and pull it to any page in seconds.
Module groups also work with the Loop Builder, which automatically generates repeating layouts by pulling data from your posts, products, or custom post types. Link a Module Group to the Loop Builder and you can design the card template once, while Divi automatically populates it with dynamic content. One card design can fill fifty product listings without any manual work.
Learn all about Divi 5’s module groups
Build your card design
Before we start building, this is the map we’re aiming for.
It features a clean image area, a bold title, supporting text, and a button, all packed into a module group. Once saved to your library, you can place this card on any page and swap the contents. If you want, you can also adjust the structure and style to your liking. Let’s build it step by step.
1. Build map structure
Open a new page or section and add a single column row (grid). One column keeps the map centered and allows the content to flow vertically, which is perfect for this layout.
If your row has multiple columns, remove the extras. Then adjust the Row Width to 55% (only during design time, so that the elements fit neatly).
In the column enter one Module group. This acts as a container for each element of the map, keeping them bundled together as one piece.
Now that the Module Group is in place, start adding modules into it. (Use the black plus button to add modules within the group. The gray plus button ends the group.)
Add an image module that can serve as the visual header of the map. Insert a header module below that and set it to H2. Add another header module, this time styled as H4. You can use it as a category label, slogan or small subtitle. Insert a text module for a short description. Finish with a button module that links to a page, post, product, or any URL.
Within the Module Group, these modules function as one whole. Change the row structure to two columns and drag the group between them, and everything moves intact. You can still freely rearrange modules within the group itself.
2. Style the card
Right now the card consists of just a stack of modules. Customize your header, text, and button modules to match your design.
Because the group contains everything, it becomes the ideal place to add background, spacing, border, or shadow. Any effects applied wrap around the entire card.
Click Group Settings Module > Content > Background. Add a subtle color as a background.
Then navigate to Design > Border. Add 25px border radius to soften the edges.
We also add a subtle Box shadow to give it a lifting effect.
You can also adjust the vertical distance between indoor modules by going to Layout (make sure the Format type is set to Bow) > Vertical opening.
3. Save your card to the Divi library
Once the map looks the way you want, you can make it a reusable piece by saving the entire module group directly to your library.
Hover over the Module group, click on the three dots and choose Save to library. Give your card a clear name. You can also add categories or tags to keep everything organized, especially on larger sites.
Once saved, the card becomes part of your Divi library and you can place it on any page. If you work in multiple locations, save this map Divi cloud to make it available everywhere you design.
4. Place it anywhere
To reuse the card on a new page, open Divi Builder and add a row. Switch to the Add from library tab.
In the next window, choose your saved card design.
The entire card will arrive with the same structure, style, and spacing that you’ve already set. Replace the image, update the text, or change the button link.
Bonus: Automatically generate map grids with the Loop Builder
Now that you have saved a module group, you can link it to the Loop Builder to automatically generate entire grids. The Loop Builder automatically pulls content from your posts, products, or custom post types and populates repeating layouts. Design the map once as a module group, connect it to the Loop Builder and watch it fill with dynamic content.
The same card structure you built can now display blog posts, WooCommerce products, team members, portfolio items, or any other content type. Let’s look at two common examples.
1. Blog Post Loop
Let’s say you want to display your latest blog posts in a grid. Add your card layout from the library and go to the rows column settings > Content > Loop. Turn it on, set the Message type Unpleasant To inform, select the number of messages you want to display and leave the other settings unchanged.
Hover over the content fields to find the Dynamic Content icon and choose relevant options. After you associate each field with dynamic content, the Loop Builder populates your card with the featured image, post title, snippet, and link for each post.
2. Product loop
The process is identical for WooCommerce products. Create a new Loop Builder Row, set the Message type Unpleasant Productsand choose a specific category (or leave it unchanged). You can add product images, titles, prices and ‘Add to Cart’ elements by adding the appropriate Woo modules and linking dynamic content.
The Module Group maintains visual consistency while the Loop Builder processes the data.
You can also customize what appears on each card. If your products don’t use categories or you prefer not to display the date, remove those modules from the Loop item. Want to add author names, reading time, or custom fields? Place those modules in the group, select the relevant options via Dynamic Content and the Builder will fill them in dynamically.
Because this map uses design variables, updating the design for each instance only takes a few seconds. Change the background color of the map by updating your primary color variable. To adjust the border radius, update a border radius design variable. Any map using these variables will be updated immediately.
This applies to spacing, typography, button styles, and any other properties controlled by a design variable. One change updates the entire system, from a handful of cards to hundreds generated through the Loop Builder.
Try module groups in Divi 5 today!
You now have a card design saved to your Divi 5 library that works on any page and automatically populates with dynamic content via the Loop Builder. More importantly, you have a workflow that is scalable.
Design the structure once, manage it globally with design variables, and let the Loop Builder handle the iteration. The same approach works for team grids, service cards, testimonial layouts, or any repeating pattern you need on a site.
#create #reusable #card #module #group #Divi