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 #

Prerequisito:

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

• Tipo di sfondo: Allows you to toggle between a solid color or a pendenza for the card background.

• Tipo di contenuto: 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 – Contenuto
• Titolo: 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: Selezionare an icon, image or set nothing .
• Choose Icon: A preview box where you click to select and change the specific vector icon.
• Descrizione: A text area to write the detailed body text or summary for the card.

Tipo di contenuto: Media

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

• Mostra pulsante: A toggle switch to abilitare o disabilitare the visibility of the button on the card.
• Testo del pulsante: 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.
• Colore del testo: A color picker to define the font color del testo del pulsante.
• Tipo di sfondo: 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.

Impostazioni #

• Card Style: Dropdown to choose between Verticale O Orizzontale layout.
• Transform: Applies movement effects: Nessuno, Ruotare (with a slider to adjust degrees), or Tradurre (with a slider to adjust position).

• Opacità: A slider to adjust the transparency level of the card.
• Filter: A dropdown to apply visual filters like Blur, Opacity, Grayscale, O 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 Predefinito or a Costume 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 #

Involucro #

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

• Allinea elementi: Controls how the content inside each stacked card is aligned (left, center, right, etc.).
• Tipo di sfondo: Lets you choose the background style, such as solid color or gradient.
• Colore: Sets the background color of the stacked card.
• Immagine: Allows you to add an image as the card background.
• Altezza: Defines the vertical size of the stacked card.
• Larghezza: Adjusts the horizontal size of the stacked card.
• Tipo di bordo: Selects the border style (solid, dashed, dotted, etc.).
• Larghezza del bordo: Controls how thick the border appears.
• Raggio del confine: Rounds the corners of the card for a softer look.
• Ombra della scatola: Adds shadow around the card to create depth and layered effect.
• Imbottitura: Controls the inner spacing between the card content and its border.

Icon / Image Settings #

• Dimensione dell'icona: Adjusts the dimensions of the icon in pixels (currently 70px).
• Colore icona: 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).
• Margine: Controls the outer spacing around the icon/image to separate it from other elements

Titolo #

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

Descrizione #

Nel Descrizione settings, you will find the exact same design controls as the Titolo sezione.

Pulsante #

NOTE: First, enable Show Button nel Contenuto tab’s Cards section. Once activated, you can customize the Pulsante settings under the Stile scheda.

• Tipografia: 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.
• Colore del testo: Sets the color of the text inside the button.
• Tipo di sfondo: Allows for a solid color or gradient background behind the text.
• Imbottitura: Controls the inner space between the button text and its border.
• Margine: 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.
• Colore del bordo: Sets the color of the button’s border.
• Raggio del confine: Rounds the corners of the button.

Icona -

• Direzione: Places the icon to the left or right of the button text.
• Colore: 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 #

• Direzione: 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.
• Imbottitura: Sets inner spacing for the media container.
• Margine: Sets outer spacing around the media section.
• Dimensione dell'icona: Adjusts the scale of the icon.
• Colore icona: Sets the color of the icon.
• Imbottitura delle icone: Specifically controls the padding around the icon itself.
• Icon Alignment: Positions the icon to the left, center, or right.

#