{"id":2035,"date":"2026-10-14T04:30:27","date_gmt":"2026-10-14T04:30:27","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2035"},"modified":"2026-10-14T10:21:06","modified_gmt":"2026-10-14T10:21:06","password":"","slug":"sticky-stack","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/sticky-stack\/","title":{"rendered":"\u00a0Sticky Stack"},"content":{"rendered":"\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

How to Add a Sticky Stack Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Sticky Stack Block in the Gutenberg editor.<\/p>\n\n\n\n

Step 1: Add the Sticky Stack Block<\/h3>\n\n\n\n
    \n
  1. Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n
  2. Click the +<\/strong> button to open the block inserter.<\/li>\n\n\n\n
  3. Search for Sticky Stack<\/strong> under ShapeBlock.<\/li>\n\n\n\n
  4. Insert the Sticky Stack Block into your page.<\/li>\n\n\n\n
  5. Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n
  6. Add or edit cards using the Cards panel.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Sticky Stack Block<\/h3>\n\n\n\n

    Select the Sticky Stack Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n

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

      The block toolbar also provides content alignment and a Title HTML Tag selector.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      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.<\/p>\n\n\n\n

      1. Cards<\/h3>\n\n\n\n

      Use the Cards panel to create and manage the individual cards displayed in the Sticky Stack.<\/p>\n\n\n\n

      Click Add Card<\/strong> to add a new card. Expand a card to edit its content and options.<\/p>\n\n\n\n

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

          Use these actions to organize the cards in the order you want them to appear.<\/p>\n\n\n