---
title:  Sticky Stack
description: The Sticky Stack Block lets you create a series of cards that stick to the top of the screen and stack on top of one another while visitors scroll down the page. Each card can contain a number or label,…
url: "https://shapekode.com/product/shapeblock/docs/sticky-stack/"
updated: "2026-10-14"
category: Layout Docs
---

#  Sticky Stack

The Sticky Stack Block lets you create a series of cards that stick to the top of the screen and stack on top of one another while visitors scroll down the page. Each card can contain a number or label, icon, title, description, points, image, and button.

Use the Sticky Stack Block to present services, features, project steps, product benefits, or other content in a scroll-based layout. You can control the stacking behavior, card layout, spacing, and styling to match your design.

## How to Add a Sticky Stack Block

Follow these steps to add and configure the Sticky Stack Block in the Gutenberg editor.

### Step 1: Add the Sticky Stack Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the **+** button to open the block inserter.
3. Search for **Sticky Stack** under ShapeBlock.
4. Insert the Sticky Stack Block into your page.
5. Select the block to access its settings in the right-hand sidebar.
6. Add or edit cards using the Cards panel.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-6.png)

### Step 2: Configure the Sticky Stack Block

Select the Sticky Stack Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Add and manage cards, configure stacking behavior, control the depth effect, and choose which card content to display.
- **Layout:** Configure image position, text width, alignment, card spacing, and image height.
- **Style:** Customize the appearance of cards, number badges, icons, titles, descriptions, points, buttons, and images.
- **Advanced:** Configure the shared advanced settings available for ShapeBlock blocks.

The block toolbar also provides content alignment and a Title HTML Tag selector.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-7.png)

## Settings Tab

The Settings tab contains the Cards, Stacking, Depth Effect, and Content panels. Use these settings to manage card content and control how the cards behave while scrolling.

### 1. Cards

Use the Cards panel to create and manage the individual cards displayed in the Sticky Stack.

Click **Add Card** to add a new card. Expand a card to edit its content and options.

- **Number / Label:** Enter the number or label displayed on the card. For example, use 01, 02, or a short label to identify each step.
- **Icon:** Choose an icon to display on the card. Its visibility can be controlled from the Content panel.
- **Title:** Enter the card heading. Use a short, descriptive title to introduce the card's content.
- **Description:** Add the main descriptive text for the card.
- **Points:** Enter supporting points, with one point per line. These points can be used to display a list of features, benefits, or key details.
- **Image:** Select an image from the WordPress Media Library. You can replace or remove the selected image.
- **Image Alt Text:** When an image is selected, the Image alt text field becomes available. Enter alternative text to describe the image for accessibility.
- **Button Text:** Enter the text displayed on the card's button.
- **Button Link:** Enter the destination URL for the button.
- **Open in a New Tab:** Enable this option to open the button link in a new browser tab.
- **Badge Background (This Card):** Customize the background of the number badge for the selected card. You can use a background color or gradient.
- **Card Management Actions:** Each card provides the following actions:
  - **Move Up:** Move the card one position up.
  - **Move Down:** Move the card one position down.
  - **Duplicate:** Create a copy of the card.
  - **Remove:** Delete the card.

Use these actions to organize the cards in the order you want them to appear.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-8.png)

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-9.png)

### 2. Stacking

The Stacking panel controls when the sticky stacking effect is enabled and how the cards are positioned during scrolling.

#### Stack On

Choose the devices on which the sticky stacking effect should work.

Available options:

- **Desktop, tablet and mobile:** Enable stacking on all three device types.
- **Desktop and tablet:** Enable stacking on desktop and tablet devices.
- **Desktop only:** Enable stacking on desktop devices.

On devices where stacking is disabled, the cards follow one another in the normal document flow.

#### Distance from Top (px)

Set the distance, in pixels, between the top of the viewport and the position where the cards stick.

Use this setting to leave space for a fixed header or other elements at the top of the screen.

#### Step Between Cards (px)

Set the vertical offset, in pixels, between stacked cards. Adjust this value to control how much of the cards underneath remains visible.

**Important:** Sticky stacking requires parent blocks to allow the sticky positioning behavior. If the cards do not stick while scrolling, check the overflow settings of the parent Row or Group blocks.

### 3. Depth Effect

Use the Depth Effect panel to create a layered appearance as cards stack during scrolling.

#### Shrink and Dim the Cards Underneath

Enable this option to reduce the size and brightness of the cards underneath the active card.

When enabled, the following settings become available:

- **Shrink (%):** Control how much the cards underneath shrink. A higher value creates a stronger size reduction.
- **Dim (%):** Control how much the cards underneath are dimmed. A higher value creates a stronger dimming effect.

Disable the option if you want the cards underneath to keep their normal size and brightness.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-10.png)

### 4. Content

Use the Content panel to choose which elements are displayed on the cards.

- **Show Number:** Enable or disable the number or label on each card.
- **Show Icon:** Enable or disable the card icons.
- **Show Points:** Enable or disable the list of points in each card.
- **Show Image:** Enable or disable the card images.
- **Show Button:** Enable or disable the card buttons.

#### Title HTML Tag

Choose the HTML element used for card titles.

Available options:

- `H1`
- `H2`
- `H3`
- `H4`
- `H5`
- `H6`
- `P`
- `DIV`
- `SPAN`

Choose a tag that matches the heading structure of your page. For example, use `H3` for a card heading beneath an `H2` section heading.

## Layout Tab

The Layout tab contains the Card Layout, Spacing, and Image Size panels. Use these settings to control the arrangement and dimensions of the card content.

### 1. Card Layout

Use the Card Layout panel to control the position of the image and the alignment of the card content.

#### Image Position

Choose where the image appears in relation to the text.

Available options:

- **Right:** Display the image on the right side of the text.
- **Left:** Display the image on the left side of the text.
- **Top:** Display the image above the text.
- **Bottom:** Display the image below the text.

The image position can be configured separately for desktop, tablet, and mobile devices. On tablet and mobile, choose **Default** to inherit the configured fallback behavior rather than setting a separate position.

#### Text Column Width (%)

Set the width of the text column as a percentage. This helps control the space allocated to text when the image and text are displayed side by side.

The available range is **20% to 80%**.

#### Content Alignment

Choose how the card's text content is aligned horizontally.

Available options:

- **Left:** Align the content to the left.
- **Center:** Align the content to the center.
- **Right:** Align the content to the right.

Content alignment supports separate values for desktop, tablet, and mobile devices.

#### Vertical Alignment

Choose how the card content is aligned vertically within its layout.

Available options:

- **Top:** Align the content to the top.
- **Middle:** Align the content to the middle.
- **Bottom:** Align the content to the bottom.

Use vertical alignment to position text consistently when cards contain images or different amounts of content.

### 2. Spacing

Use the Spacing panel to control the distance between cards and between elements inside each card.

- **Gap Inside the Text (px):** Set the spacing between text elements inside the card. Use this setting to control the visual separation between the title, description, points, and other text content.
- **Space Between Cards (px):** Set the vertical spacing between cards. Adjust this value to create more or less separation between consecutive cards.
- **Card Minimum Height (px):** Set the minimum height of each card. This helps maintain a consistent card size when the content varies.
- **Gap Between Text and Image (px):** Set the distance between the text column and the image when they appear side by side.

### 3. Image Size

Use the Image Size panel to control the height of card images.

#### Image Height (px)

Set the image height in pixels. Adjust this value to create a consistent image area across the cards.

The image height supports separate values for desktop, tablet, and mobile devices.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-11.png)

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-12.png)

## Style Tab

The Style tab contains the Card, Number Badge, Icon, Title, Description, Points, Button, and Image panels. Use these controls to customize the appearance of each card element.

### 1. Card

Use the Card panel to customize the main card container.

- **Background:** Set a background color or gradient for the cards.
- **Border:** Customize the card border.
- **Box Shadow:** Add a shadow around the cards to create depth and separation from the page background.
- **Border Radius:** Adjust the rounding of the card corners.
- **Card Padding:** Control the inner spacing between the card edges and its content. Separate padding values can be configured for desktop, tablet, and mobile devices.

### 2. Number Badge

Use the Number Badge panel to customize the appearance of the number or label displayed on each card.

- **Text Color:** Choose the color of the number or label.
- **Background:** Set a background color or gradient for the number badge.
- **Size (px):** Set the size of the number badge in pixels.
- **Border Radius:** Adjust the rounding of the badge corners.
- **Typography:** Customize the typography of the number or label, including the available font settings.

### 3. Icon

Use the Icon panel to customize the appearance of the card icons.

- **Color:** Choose the icon color.
- **Icon Size (px):** Set the icon size in pixels.

### 4. Title

Use the Title panel to customize the card headings.

- **Color:** Choose the title text color.
- **Typography:** Customize the title typography, including the available font settings. Responsive typography values can be configured for desktop, tablet, and mobile devices.

### 5. Description

Use the Description panel to customize the descriptive text inside each card.

- **Typography:** Customize the description typography, including the available font settings. Responsive typography values can be configured for desktop, tablet, and mobile devices.
- **Color:** Choose the description text color.

### 6. Points

Use the Points panel to style the list of points displayed on each card.

- **Text Color:** Choose the color of the point text.
- **Tick Color:** Choose the color of the tick or bullet marker displayed beside each point.
- **Space Between Points (px):** Set the vertical spacing between individual points.
- **Typography:** Customize the point text typography, with responsive settings for desktop, tablet, and mobile devices.

### 7. Button

Use the Button panel to customize the card button’s typography, colors, background, border, padding, and corner radius.

- **Typography:** Customize button typography for desktop, tablet, and mobile devices.
- **Normal and Hover States:** Customize button styles for both normal and hover states.
  - **Normal:** Set the default text color, background color or gradient, and border.
  - **Hover:** Set the text color, background color or gradient, and border color when visitors hover over the button.
- **Padding**: Adjust the space inside the button around its text for desktop, tablet, and mobile devices.
- **Border Radius:** Adjust the rounding of the button corners.

### 8. Image

Use the Image panel to customize the appearance of the card images.

- **Image Fit:** Choose how the image fits inside its image area.
  - **Cover:** Fill the image area while maintaining its aspect ratio. Some parts of the image may be cropped.
  - **Contain:** Display the entire image inside the image area while maintaining its aspect ratio. Empty space may remain around the image.
- **Border Radius:** Adjust the rounding of the image corners.
- **Box Shadow:** Add a shadow around the image to create visual depth.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-13.png)

## Advanced Tab

The Advanced tab provides additional spacing and background controls for the Sticky Stack Block. These settings apply to the entire block, not to individual cards.

### 1. Spacing

- **Padding:** Set the inner spacing around the content of the entire Sticky Stack Block. Configure the top, right, bottom, and left values separately.
- **Margin:** Set the outer spacing around the entire Sticky Stack Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

**Note:** These spacing controls apply to the entire block and are separate from the spacing settings available in the Style tab.

### 2. Background

- **Background:** Customize the background of the entire Sticky Stack Block using a background color or gradient.

**Note:** This background applies to the block container, not to individual cards. To customize individual card backgrounds, use the **Style → Card** panel.