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 #

前提条件:

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

• 背景の種類: Allows you to toggle between a solid color or a 勾配 for the card background.

• コンテンツタイプ: 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 – コンテンツ
• タイトル： 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: 選択する an icon, image or set nothing .
• Choose Icon: A preview box where you click to select and change the specific vector icon.
• 説明： A text area to write the detailed body text or summary for the card.

コンテンツタイプ: メディア

• Choose Type (Media): You can set an image or icon for the card or set nothing.
• 方向： 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 有効または無効にする the visibility of the button on the card.
• ボタンテキスト: 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.
• テキストの色： A color picker to define the font color ボタンのテキスト。
• 背景の種類: 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.

設定 #

• Card Style: Dropdown to choose between 垂直 または 水平 レイアウト。
• Transform: Applies movement effects: なし, 回転 (with a slider to adjust degrees), or 翻訳する (with a slider to adjust position).

• 不透明度: A slider to adjust the transparency level of the card.
• Filter: A dropdown to apply visual filters like Blur, Opacity, Grayscale, または 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 デフォルト or a カスタム 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 #

ラッパー #

• 身長： 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 #

• アイテムを揃える: Controls how the content inside each stacked card is aligned (left, center, right, etc.).
• 背景の種類: Lets you choose the background style, such as solid color or gradient.
• 色： Sets the background color of the stacked card.
• 画像： Allows you to add an image as the card background.
• 身長： Defines the vertical size of the stacked card.
• 幅： Adjusts the horizontal size of the stacked card.
• 枠線の種類: Selects the border style (solid, dashed, dotted, etc.).
• 枠線の幅: Controls how thick the border appears.
• 境界線の半径: Rounds the corners of the card for a softer look.
• ボックスシャドウ: Adds shadow around the card to create depth and layered effect.
• パディング: Controls the inner spacing between the card content and its border.

Icon / Image Settings #

• アイコンサイズ: Adjusts the dimensions of the icon in pixels (currently 70px).
• アイコンの色: 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).
• マージン： Controls the outer spacing around the icon/image to separate it from other elements

タイトル #

• 色： Changes the text color of the card title (currently pink).
• タイポグラフィ： Opens settings for font family, weight, size, and line height.
• 配置: Positions the title text to the left, center, or right.
• マージン： Adjusts the space around the title to control its distance from the icon or description.

説明 #

の中に 説明 settings, you will find the exact same design controls as the タイトル セクション。

ボタン #

NOTE: First, enable Show Button の中に コンテンツ tab’s Cards section. Once activated, you can customize the ボタン settings under the スタイル タブ。

• タイポグラフィ： 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.
• テキストの色： Sets the color of the text inside the button.
• 背景の種類: Allows for a solid color or gradient background behind the text.
• パディング: Controls the inner space between the button text and its border.
• マージン： 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.
• ボーダの色： Sets the color of the button’s border.
• 境界線の半径: Rounds the corners of the button.

アイコン –

• 方向： Places the icon to the left or right of the button text.
• 色： 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.

メディア #

• 方向： 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.
• パディング: Sets inner spacing for the media container.
• マージン： Sets outer spacing around the media section.
• アイコンサイズ: Adjusts the scale of the icon.
• アイコンの色: Sets the color of the icon.
• アイコンのパディング: Specifically controls the padding around the icon itself.
• Icon Alignment: Positions the icon to the left, center, or right.

#