The Divi Stack Module creates eye-catching stack layouts with custom tooltips and interactive animations that reveal on hover. Lets see what are the features this module has-
Content
Add New Item
To Add a New Stack Item, click the gray plus icon. This opens the “Stack Item Settings” where you can decide on content types such as image, text, icon, rating, and stack item details.
To learn more about adding content to the stack item, click here.
Stack Settings
- Stack Spacing: Adjust the spacing between stack items on hover and default stage.
Stack Animation
Item Hover
- Enable Translate: Reposition element on hover in horizontal/vertical directions.
- Enable Rotate: Rotate the element on hover in the x-axis (horizontal), y-axis (vertical), and z-axis (center).
- Enable Scaling: Resize the element on hover in the x-axis (horizontally), and y-axis (vertically).
- Enable Skew: Skews the element on hover in the x-axis (horizontally), and y-axis (vertically). The measurement unit is degree.
- Enable Transition: Set the transition duration, delay, and easing.
Stack Hover
- Enable Translate and Rotate effects for the entire stack, similar to item hover effects.
Tooltip Settings
- Tooltip: Add additional info as a tooltip.
- Arrow: Add an arrow with 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: Adjust the tooltip hover area and content hide delay time in milliseconds when the cursor moves away.
- Follow Cursor: Enable the tooltip to move with the mouse cursor.
- Max Width: Set the maximum width of the tooltip.
- Tooltip Distance: Set the horizontal and vertical distance from the element to the tooltip.
Link
Add a hyperlink to the entire module. Clicking it will take users to the URL.
Background
Add a background color, gradient, image, and more to the entire stack area.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Icon
- Color: Set a custom color to the icon.
- Size: Adjust the icon width.
- Background color: Set a background color to the icon.
- Rounded Corner: Adjust the icon’s corner radius.
- Border Style: Decide the border style and adjust the width, color, and shape of the border.
- Box Shadow: Apply box shadow to the icon along with position and strength.
- Icon Container: Set custom width and height for the icon container.
Image
Customize corners, border style, 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 entire module.
Spacing
Add custom margins and padding to the whole module.
Border
Add a border to the entire stack section.
Box Shadow
Apply a box shadow effect to the stack.
Advanced Settings
The advanced tab offers options for custom CSS, conditions, visibility settings, and more.
Stack Item Settings
Customize each stack item and appearance individually, overriding global settings if necessary.
Content
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
Add a hyperlink to the stack item. Clicking it will take users to the URL.
Background
Add a background color and gradient to the stack item.
Design
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.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com