The Divi Stack Module helps you create visually engaging stack layouts with interactive hover animations and custom tooltips.
Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains all essential settings to add, configure, and manage your stack items.
Add New Item
Click the gray plus (+) icon to add a new stack item. This opens the Stack Item Settings, where you can choose content types. By default, 5 stack items are added, which you can delete or customize. To learn more about adding content to the stack item, click here.
Stack Settings
- Stack Spacing: Adjust spacing between stack items in both default and hover states.
Stack Animation
Item Hover
- Enable Translate: Reposition the item horizontally or vertically.
- Enable Rotate: Rotate the item along X, Y, or Z axes.
- Enable Scaling: Resize horizontally or vertically.
- Enable Skew: Skew the item along X or Y axes (degrees).
- Enable Transition: Control duration, delay, and easing.
Stack Hover
- Enable Translate: Move the entire stack element on hover.
- Enable Rotate: Rotate the stack element on hover.
Tooltip Settings
- Tooltip: Add additional info as a tooltip.
- Arrow: Include an arrow pointing to the element that triggers the tooltip.
- Placement: Decide the tooltip placement.
- Animation: Set animation for tooltip.
- Trigger: Set the tooltip to trigger on hover, click, or both.
- Hover Over Tooltip: Determines if the tooltip remains visible when the mouse moves over the tooltip itself.
- Tooltip Hover Area: Sets the size of the area that responds to hover to activate the tooltip.
- Tooltip Content Delay (Ms): Delay in milliseconds before the tooltip appears after the trigger action.
- Tooltip Content Hide Delay: Delay in milliseconds before the tooltip hides after the mouse leaves the trigger area.
- Follow Cursor: Enable the tooltip to move with the mouse cursor.
- Max Width: Set the maximum width of the tooltip.
- Tooltip Distance: Controls the distance (gap) between the tooltip and the target element.
- Tooltip Horizontal Position: Adjusts the tooltip’s horizontal alignment relative to the target element.
- Tooltip Vertical Position: Adjusts the tooltip’s vertical alignment relative to the target element.
Link: Use this default Divi setting to add a link to the entire module.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Use this tab to customize the visual appearance of the module and its elements.
Icon
- Color: Set a custom color to the icon.
- Size: Adjust the icon width.
- Icon Container Width: Set a custom width for the container that holds the icon.
- Icon Container Height: Set a custom height for the container that holds the icon.
There you will also find background and border settings options for icons.
Image: Customize border, box shadow, and container size for the image, similar to the icon.
Text (Title & Subtitle): Customize the text’s heading level, font, font style, alignment, color, size, and more.
Text Container: Customize background color, corners, border style, box shadow, and container size for the text container.
Rating
- Position: Set the rating position
- Alignment: Set the rating alignment.
- Icon Size: Adjust the rating icon size.
- Color: Set the default, blank, and background colors for the rating.
- Label Customization: Customize typography, text style, and color.
- Rating Container: Set custom width and height for the rating container.
Tooltip
- Tooltip Arrow Color: Set the tooltip arrow color.
- Background: Choose background colors for the tooltip.
Tooltip Text: Customize typography for the tooltip text along with style and color.
Tooltip Heading Text: Customize typography for the tooltip heading text along with alignment and color.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Add custom margin and padding to the module’s container.
Border: Customize the border style, width, and color. And style each border separately or apply the same style to all sides.
Box Shadow: Add shadow effects to the module.
Transform: Scale, rotate, move, or skew the module.
Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Stack Item Settings
From here, you can add and customize your stack items. Keep in mind that the settings you apply here will control the content and layout for the entire module.
Content Tab
Content Type
Choose from 4 different stack content types.
If you choose “Icon”
- Icon: Choose an Icon to display with the stack.
If you choose “Image”
- Image: Upload an image you would like to display.
If you choose “Rating”
- Rating Number: Choose the rating number from 1 to 5.
- Rating Label: Define the rating label text.
- Rating Position: Set the rating position.
If you choose “Text”
- Title Text: Define the title text for the content type.
- Sub-Title Text: Define the sub-title text for the content type.
- Text Position: Adjust the text position.
Tooltip Content
Add images, text, embedded video, shortcodes, and more as tooltip content using the WordPress text editor.
Link: Use this setting to add a link to the individual stack item.
Background: Set a background for the stack item. You can choose a color, gradient, image, video, or pattern specifically for this item.
Design Tab
Icon: Set icon color and determine its size
Rating: Change the label font, font style, alignment, color, text size, and more.
Text: Customize typography, text style, and color for Title and Subtitle text.
Sizing: Adjust the width and height of the content type.
Spacing: Add custom margins and padding to the content type.
Border: Add a custom border to the content type.
Box Shadow: Apply a shadow effect to the content type.
Advanced Tab
Add custom CSS, visibility conditions, or other advanced controls for individual stack items.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]