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 #
Warunek wstępny:
- 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:
- Typ tła: Allows you to toggle between a solid color or a gradient for the card background.
- Typ zawartości: 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 – Treść - Tytuł: 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: Wybierać an icon, image or set nothing .
- Choose Icon: A preview box where you click to select and change the specific vector icon.
- Opis: A text area to write the detailed body text or summary for the card.
Typ zawartości: Głoska bezdźwięczna
- Choose Type (Media): You can set an image or icon for the card or set nothing.
- Kierunek: Select the direction of the image or icon, Left or Right.
Choose Icon/Image: Pick one from the library or upload SVG.
- Pokaż przycisk: A toggle switch to Włącz lub wyłącz the visibility of the button on the card.
- Przycisk tekstowy: 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.
- Kolor tekstu: A color picker to define the font color tekstu przycisku.
- Typ tła: 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.
Ustawienia #
- Card Style: Dropdown to choose between Pionowy Lub Poziomy układy.
- Transform: Applies movement effects: Nic, Obracać się (with a slider to adjust degrees), or Tłumaczyć (with a slider to adjust position).
- Nieprzezroczystość: A slider to adjust the transparency level of the card.
- Filter: A dropdown to apply visual filters like Blur, Opacity, Grayscale, Lub 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 Domyślny or a Zwyczaj 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 #
Obwoluta #
- Wysokość: 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 #
- Wyrównaj elementy: Controls how the content inside each stacked card is aligned (left, center, right, etc.).
- Typ tła: Lets you choose the background style, such as solid color or gradient.
- Kolor: Sets the background color of the stacked card.
- Obraz: Allows you to add an image as the card background.
- Wysokość: Defines the vertical size of the stacked card.
- Szerokość: Adjusts the horizontal size of the stacked card.
- Typ obramowania: Selects the border style (solid, dashed, dotted, etc.).
- Szerokość granicy: Controls how thick the border appears.
- Promień granicy: Rounds the corners of the card for a softer look.
- Cień pudełka: Adds shadow around the card to create depth and layered effect.
- Wyściółka: Controls the inner spacing between the card content and its border.
Icon / Image Settings #
- Rozmiar ikony: Adjusts the dimensions of the icon in pixels (currently 70px).
- Kolor ikony: 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).
- Margines: Controls the outer spacing around the icon/image to separate it from other elements
Tytuł #
- Kolor: Changes the text color of the card title (currently pink).
- Typografia: Opens settings for font family, weight, size, and line height.
- Wyrównanie: Positions the title text to the left, center, or right.
- Margines: Adjusts the space around the title to control its distance from the icon or description.
Opis #
w Opis settings, you will find the exact same design controls as the Tytuł Sekcja.
Przycisk #
NOTE: First, enable Show Button w Treść tab’s Cards section. Once activated, you can customize the Przycisk settings under the Styl patka.
- Typografia: 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.
- Kolor tekstu: Sets the color of the text inside the button.
- Typ tła: Allows for a solid color or gradient background behind the text.
- Wyściółka: Controls the inner space between the button text and its border.
- Margines: 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.
- Kolor ramki: Sets the color of the button’s border.
- Promień granicy: Rounds the corners of the button.
Ikona -
- Kierunek: Places the icon to the left or right of the button text.
- Kolor: 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.
Głoska bezdźwięczna #
- Kierunek: 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.
- Wyściółka: Sets inner spacing for the media container.
- Margines: Sets outer spacing around the media section.
- Rozmiar ikony: Adjusts the scale of the icon.
- Kolor ikony: Sets the color of the icon.
- Wypełnienie ikon: Specifically controls the padding around the icon itself.
- Icon Alignment: Positions the icon to the left, center, or right.
