A UI design pattern where multiple cards are layered or stacked on top of each other, usually with slight offsets, is the stacked cards layout. As users scroll or interact, the cards move, flip, or slide to reveal the next one. ElementsKit has brought a widget that lets you create this stunning layout directly in Elementor.

ElementsKit Stacked Cards #

Prerequisite:

• Elementor Builder Plugin (Free Version is enough)
• ElementsKit Pro Version

Open the page/post where you want to use stacked cards and edit with Elementor .

Step 1: Get the Stacked Cards Widget #

Search for Stacked Cards and drag and drop it.

Step 2: Customize the Widget #

Cards #

Here you can add the cards and edit content.

Card Item Controls: If you expand a card, you’ll see these functions:

• Background Type: Allows you to toggle between a solid color or a gradient for the card background.

• Content Type: A dropdown to select the specific category or format of the content being displayed. The options are Content and Media. The options are Content and Media.
  Content Type – Content
• Title: A text field to enter the main heading of the card (with an “Edit with AI” option).
• Title Tag: A dropdown to select the HTML hierarchy (H1, H2, H3, etc.) for SEO and formatting.
• Choose Type: Select an icon, image or set nothing .
• Choose Icon: A preview box where you click to select and change the specific vector icon.
• Description: A text area to write the detailed body text or summary for the card.

Content Type: Media

• Choose Type (Media): You can set an image or icon for the card or set nothing.
• Direction: Select the direction of the image or icon, Left or Right.
  Choose Icon/Image: Pick one from the library or upload SVG.

• Show Button: A toggle switch to enable or disable the visibility of the button on the card.
• Button Text: A text field to input the label or call-to-action (e.g., “Read More”) for the button.
• Button Link: A field to enter the URL or destination where the user will be redirected upon clicking.
• Text Color: A color picker to define the font color of the button text.
• Background Type: A toggle to choose between a solid color or gradient for the button’s background.
• Hover Text Color: A color picker to set the text color specifically when a user hovers over the button.
• Background Type (Hover): A secondary toggle to set the background style (solid or gradient) for the button’s hover state.
• Choose Button Icon Type: Options to select whether the button includes no icon or a colored/styled icon.
• Choose Button Icon: A selection area where you can pick and preview the specific vector icon for the button.
• Button Icon Color: A color picker to customize the specific color of the chosen button icon.

Settings #

• Card Style: Dropdown to choose between Vertical or Horizontal layouts.
• Transform: Applies movement effects: None, Rotate (with a slider to adjust degrees), or Translate (with a slider to adjust position).

• Opacity: A slider to adjust the transparency level of the card.
• Filter: A dropdown to apply visual filters like Blur, Opacity, Grayscale, or Sepia.
• Filter Intensity (e.g., Sepia): A slider to control the strength of the selected filter.
• Card Direction From (Top/Bottom): A slider to set the vertical starting position; positive values move bottom-to-top, negative move top-to-bottom.
• Card Direction From (Left/Right): A slider to set the horizontal starting position; positive values move left-to-right, negative move right-to-left.
• Card Start From: Specifies the pixel value where the stacked card animation begins.
• Card End From: Sets the animation end point to Default or a Custom pixel value via a slider.
• Show Marker: A toggle to display visual markers during development to see where animations start and end.

Step 3: Style The Stacked Cards #

Wrapper #

• Height: This setting defines the vertical space for the card container, with 100vh making it fill the entire screen. This ensures enough room for the cards to stack smoothly as the user scrolls.

Cards #

• Align Items: Controls how the content inside each stacked card is aligned (left, center, right, etc.).
• Background Type: Lets you choose the background style, such as solid color or gradient.
• Color: Sets the background color of the stacked card.
• Image: Allows you to add an image as the card background.
• Height: Defines the vertical size of the stacked card.
• Width: Adjusts the horizontal size of the stacked card.
• Border Type: Selects the border style (solid, dashed, dotted, etc.).
• Border Width: Controls how thick the border appears.
• Border Radius: Rounds the corners of the card for a softer look.
• Box Shadow: Adds shadow around the card to create depth and layered effect.
• Padding: Controls the inner spacing between the card content and its border.

Icon / Image Settings #

• Icon Size: Adjusts the dimensions of the icon in pixels (currently 70px).
• Icon Color: Sets the specific color for the icon element (currently orange).
• Image Resolution: Selects the quality and size of the loaded image (currently 300 * 300).
• Image Height: Sets the vertical scale of the image in pixels (currently 70px).
• Image Width: Sets the horizontal scale of the image in pixels (currently 65px).
• Margin: Controls the outer spacing around the icon/image to separate it from other elements

Title #

• Color: Changes the text color of the card title (currently pink).
• Typography: Opens settings for font family, weight, size, and line height.
• Alignment: Positions the title text to the left, center, or right.
• Margin: Adjusts the space around the title to control its distance from the icon or description.

Description #

In the Description settings, you will find the exact same design controls as the Title section.

Button #

NOTE: First, enable Show Button in the Content tab’s Cards section. Once activated, you can customize the Button settings under the Style tab.

• Typography: Customizes the font for the button text.
• Normal / Hover Tabs: Switches between styling the button’s default state and its appearance when a user points at it.
• Text Color: Sets the color of the text inside the button.
• Background Type: Allows for a solid color or gradient background behind the text.
• Padding: Controls the inner space between the button text and its border.
• Margin: Sets outer spacing to separate the button from other card elements.
• Border Type & Width: Defines the style (e.g., Solid) and thickness of the button’s outline.
• Border Color: Sets the color of the button’s border.
• Border Radius: Rounds the corners of the button.

Icon –

• Direction: Places the icon to the left or right of the button text.
• Color: Sets a specific color for the icon within the button.
• Size (px): Adjusts how large the icon appears.
• Gap Between (px): Controls the distance between the icon and the button text.

Media #

• Direction: Switches which side the media appears on.
• Image Resolution: Sets the quality of the image.
• Section Width: Adjusts the width of the media area.
• Gap: Controls the space between the media and the text.
• Padding: Sets inner spacing for the media container.
• Margin: Sets outer spacing around the media section.
• Icon Size: Adjusts the scale of the icon.
• Icon Color: Sets the color of the icon.
• Icon Padding: Specifically controls the padding around the icon itself.
• Icon Alignment: Positions the icon to the left, center, or right.

#