The Slot Module is a container you place inside a component. Everything else in the component stays in sync across your site, but whatever you put inside a Slot belongs to that page only. It lets you build one shared frame, such as a styled card, a hero section, or a call-to-action band, and fill it with different content on every page.
A Slot works and looks just like a Group module. It can hold modules, rows, and Groups, and it has the same layout and design settings. The difference is who owns its content: the page, not the component.
Check the Components in Divi 5 article for more information.
Add The Divi Slot Module
The Slot module is only available inside a component. It doesn't appear in the module list anywhere else on the page.
Hover over a component on your page, or open one from the Components Manager.
Click the Gray Plus icon
inside one of the component's columns or Group modules, which will show the list of available Divi modules.Find the Slot module at the top of the list, next to the Group module, and click on it to load it.
Note: Adding a Slot changes the structure of the component, so the empty Slot appears in every copy of the component across your site. Only the content you place inside it is unique to each page.
A Slot can't be added inside another Slot, inside a Group Carousel module, or inside a list of items that each copy already controls on its own.
How the Slot Module Works
Add the Slot to the component once. It becomes part of the shared component, in the same position on every page.
Fill it on each page. On each page that uses the component, click the Gray Plus icon inside the Slot and add the modules you need. That content is saved with the page, not with the component.
Keep editing the component as usual. When you edit and save the component, the content inside each page's Slot is left alone. Every page keeps its own.
Keep these points in mind:
Empty Slots are invisible to visitors. If you don't add anything to a Slot on a page, it outputs nothing on the front end.
Content can move into a Slot, but not out to the component. You can drag content from the page into a Slot, or from a Slot out to the page. You can't drag Slot content into the shared part of the component.
Duplicating a Slot gives you an empty one. When you duplicate a Slot while editing the component, the copy starts empty.
Components inside a Slot stay components. If you add a component inside a Slot, it stays linked to its own original.
Removing a Slot from the component removes its content everywhere. If you delete a Slot from the component, the content that pages had placed in it stops showing.
The Divi Slot Module Use Cases
Shared card, different content - Build a card component with a border, background, and padding, and put a Slot inside it. Each page fills the card with its own image, text, and buttons, while the card's style stays consistent everywhere.
Hero section with a page-specific message - Save a hero section as a component with the background and layout you want, and add a Slot where the headline and buttons go. Each page gets its own message inside the same hero.
Sidebar or call-to-action band - Keep the heading of a band in sync across the site, and use a Slot below it for content that changes from page to page, such as a signup form on one page and a contact button on another.
Slot Module Settings Breakdown
Once you've added the Slot 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:
Content
Design
Advanced
The Content tab
The Content tab lets you manage the Slot's elements, add a link to the entire Slot, customize the Background design option, and change the default Admin label.
Component Settings - Change the component's title.
Elements - See and manage the elements placed inside the Slot.
Link - Make the entire Slot clickable, linking it to another page, section, or external site.
Background - Choose the Slot module's background styles.
Loop - Enables the loop builder.
Order - Choose the order in which the Slot module appears inside a Flexbox and Grid layout.
Meta - Choose the Slot module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Slot module are in this tab.
Layout - Choose the Layout Style. It allows you to change how the modules inside the Slot are displayed.
Block
Flex (default)
Grid
Sizing - Choose the desired sizing for the Slot module.
Spacing - Choose the spacing for the Slot module.
Border - Choose the border styles for the Slot module.
Box Shadow - Choose the Slot module's Box Shadow styles.
Filters - Choose the Slot module's filters, including hue shifts, saturation adjustments, and blending modes.
Transform - Choose the Slot module's advanced design effects, including scaling, rotating, skewing, and translating.
Animation - Choose the Slot module's animation styles.
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.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Add custom CSS code to fine-tune your Slot module.
HTML - Choose the semantic HTML tag for the Slot module.
Conditions - Show or hide the Slot based on conditions, so the right content reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the Slot.
Visibility - Choose the Slot module's visibility on different devices.
Transitions - Choose how long the Slot module's animations take.
Position - Control exactly where the Slot module is placed.
Scroll Effects - Control how the Slot 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.
