Portfolio Scroll Stack

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.

Widget Controls

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

1. General Section

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

2. Query Section

• Post per Page: Control number of posts to display per page.
• 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 scroll stack.
• Exclude Categories: Select categories that should not appear in the portfolio scroll stack.
• Include Posts: Manually select specific portfolio posts to display.
• Exclude Posts: Remove selected posts from the scroll stack.
• Order By: Sort portfolio items by ID, title, date, or other available options.
• Order: Choose ascending or descending order.

3. Layout Section

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

• Read More Text: Customize the label of 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

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

6. Scroll Stack Section

• Item Height: Set the height for each item in the scroll stack.
• Scroll Stack Top: Control the initial top position of the portfolio items in the scroll stack.

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.