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 #

Nödvändig förutsättning:

• 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:

• Bakgrundstyp: Allows you to toggle between a solid color or a lutning for the card background.

• Innehållstyp: 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 – Innehåll
• Titel: 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: Välj an icon, image or set nothing .
• Choose Icon: A preview box where you click to select and change the specific vector icon.
• Beskrivning: A text area to write the detailed body text or summary for the card.

Innehållstyp: Media

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

• Visa knapp: A toggle switch to aktivera eller inaktivera the visibility of the button on the card.
• Knapp-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 färg: A color picker to define the font color av knapptexten.
• Bakgrundstyp: 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.

inställningar #

• Card Style: Dropdown to choose between Vertikal eller Horisontell layouter.
• Transform: Applies movement effects: Ingen, Rotera (with a slider to adjust degrees), or Översätt (with a slider to adjust position).

• Opacitet: A slider to adjust the transparency level of the card.
• Filter: A dropdown to apply visual filters like Blur, Opacity, Grayscale, eller 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 Standard or a Beställnings 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 #

Omslag #

• Höjd: 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 #

• Justera objekt: Controls how the content inside each stacked card is aligned (left, center, right, etc.).
• Bakgrundstyp: Lets you choose the background style, such as solid color or gradient.
• Färg: Sets the background color of the stacked card.
• Bild: Allows you to add an image as the card background.
• Höjd: Defines the vertical size of the stacked card.
• Bredd: Adjusts the horizontal size of the stacked card.
• Kanttyp: Selects the border style (solid, dashed, dotted, etc.).
• Gränsbredd: Controls how thick the border appears.
• Kantradie: Rounds the corners of the card for a softer look.
• Box Shadow: Adds shadow around the card to create depth and layered effect.
• Stoppning: Controls the inner spacing between the card content and its border.

Icon / Image Settings #

• Ikonstorlek: Adjusts the dimensions of the icon in pixels (currently 70px).
• Ikonfärg: 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).
• Marginal: Controls the outer spacing around the icon/image to separate it from other elements

Titel #

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

Beskrivning #

I den Beskrivning settings, you will find the exact same design controls as the Titel sektion.

Knapp #

NOTE: First, enable Show Button i Innehåll tab’s Cards section. Once activated, you can customize the Knapp settings under the Stil flik.

• Typografi: 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 färg: Sets the color of the text inside the button.
• Bakgrundstyp: Allows for a solid color or gradient background behind the text.
• Stoppning: Controls the inner space between the button text and its border.
• Marginal: 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.
• Gräns färg: Sets the color of the button’s border.
• Kantradie: Rounds the corners of the button.

Ikon –

• Riktning: Places the icon to the left or right of the button text.
• Färg: 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 #

• Riktning: 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.
• Stoppning: Sets inner spacing for the media container.
• Marginal: Sets outer spacing around the media section.
• Ikonstorlek: Adjusts the scale of the icon.
• Ikonfärg: Sets the color of the icon.
• Ikonutfyllnad: Specifically controls the padding around the icon itself.
• Icon Alignment: Positions the icon to the left, center, or right.

#