Portfolio List Slider

The Portfolio List Slider widget allows you to display portfolio items in a list-style slider layout using Elementor. Each portfolio item is arranged in a structured list format while users can navigate through projects using slider controls.

This widget combines the clarity of a list layout with the interactivity of a slider, making it ideal for highlighting featured projects or presenting portfolio items in a compact, scrollable section.

Widget Controls

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

1. Query Section

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

2. 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).

3. 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.

4. Image Section

• Thumbnail: Choose the image size used for portfolio thumbnails.
• Image Behavior: Control how the portfolio image behaves when hovered.
• Overlay Options: Configure overlay effects and hover behavior for portfolio images.

5. Slider Section

• Slides per View: Define the number of portfolio items displayed at once in the slider.
• Enable Scroll: Enable or disable the scroll effect.
• Enable Loop: Enable continuous looping of slider items.
• Space Between Slides: Set the space between slides.
• Center Slides: Enable or disable centering of slides.
• Autoplay: Enable or disable automatic sliding.
• Autoplay Speed: Set the delay between automatic slide transitions.
• Enable Navigation Arrows: Enable or disable previous and next navigation arrows.
• Enable Pagination: Enable pagination dots below the slider.

Styling Options​

All elements of the Portfolio List Slider widget can be styled using Elementor’s Style tab.

• Typography and color controls for titles and excerpts
• Slider navigation arrow styling
• Pagination dot styling
• List item spacing and alignment
• Image borders, radius, and hover effects
• Overlay backgrounds and animations
• Metadata styling for categories, tags, and author
• Read more button styling including hover effects and typography

Summary

The Portfolio List Slider widget provides a compact and interactive way to display portfolio projects. It supports:

• Dynamic portfolio queries
• List-style slider layouts
• Autoplay and navigation controls
• Drag-and-drop control of portfolio elements
• Image overlays and hover animations
• Complete styling customization through Elementor

This widget is ideal for highlighting featured projects, showcasing portfolios in smaller sections, or creating scrollable project lists on landing pages.