View Categories

Stack Overview

3 min read

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

Submit a Comment

Your email address will not be published. Required fields are marked *