Portfolio Scroll Stack

Estimated reading: 3 minutes 143 views

The Portfolio Scroll Stack widget displays portfolio items in a vertical stack layout where each item appears layered on top of the previous one while scrolling. As users scroll down the page, portfolio cards animate in a stacked sequence, creating a smooth storytelling-style portfolio presentation.

This layout is ideal for creative portfolios, product showcases, and case studies where projects are meant to be explored one after another in a visually engaging scrolling experience.

General Overview


The Portfolio Scroll Stack widget provides controls to manage:
  • Portfolio query and filtering options
  • Stack-based scroll animation layout
  • Drag-and-drop portfolio content elements
  • Overlay display and interactive icons
  • Customizable item height and scroll positioning
  • Portfolio media support including images and videos

Widget Controls


The widget settings are divided into several sections inside the Content tab in Elementor.

1. General Section

null
  • Extra Class: Add a custom CSS class for additional styling or advanced customization.

2. Query Section

null
  • Excerpt Length: Controls how many words are displayed in the portfolio excerpt.
  • Author: Filter portfolio items by selecting specific authors.
  • Categories: Select categories to include in the portfolio grid.
  • Exclude Categories: Select categories that should not appear in the portfolio grid.
  • Include Posts: Manually select specific portfolio posts to display.
  • Exclude Posts: Remove selected posts from the grid.
  • Order By: Sort portfolio items by ID, title, date, or other available options.
  • Order: Choose ascending or descending order.

3. Layout Section

null
  • Post Items: Drag-and-drop layout builder to enable or disable portfolio elements such as feature image, title, excerpt, read more button, categories, tags, and author.
  • Post Overlay Items Options: Enable or disable elements that appear in the overlay when hovering over an accordion item.
  • Post Overlay Items: Configure which elements appear inside the overlay.
  • Top Meta: Configure metadata displayed above the portfolio content such as categories, author, or date.
  • Bottom Meta: Configure metadata displayed below the portfolio content.
  • Post Heading Tag: Choose the HTML heading tag used for portfolio titles (H1–H6).

4. Read More Section

null
  • Read More Text: Customize the label for the read more button.
  • Icon: Add an icon to the read more button.
  • Icon Position: Choose whether the icon appears before or after the text.
  • Icon Spacing: Adjust the spacing between the icon and the button text.

5. Image Section

null
  • Thumbnail: Choose the image size used for portfolio thumbnails.

6. Scroll Stack Section

null
  • Item Height: Defines the height of each stacked portfolio card.
  • Scroll Stack Top: Sets the vertical offset where the stack animation begins during scrolling.

Styling Options


You can fully customize the appearance of the widget using the Style tab in Elementor.
  • Grid spacing and content alignment
  • Typography settings for titles, categories, and content
  • Portfolio card background and shadow effects
  • Image size, spacing, borders, and radius
  • Overlay styling with blur effects
  • Read more button styling including hover effects
  • Category, author, and tag styling

Summary


The Portfolio Scroll Stack widget creates an immersive scrolling experience by stacking portfolio cards in a layered layout.
  • Dynamic portfolio queries
  • Stacked scroll animation layout
  • Drag-and-drop content builder
  • Overlay icons and interactive elements
  • Support for images, videos, and 360° media
  • Full design customization through Elementor

This widget is ideal for modern creative portfolios where projects are presented sequentially with visually engaging scroll-based interactions.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Portfolio Scroll Stack

Or copy link

CONTENTS

Powered By EazyDocs