Portfolio List Slider

Estimated reading: 4 minutes 172 views

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.

General Overview


The Portfolio List Slider widget helps you showcase portfolio items with full control over:
  • Portfolio post queries and filtering
  • List-style slider layout
  • Number of portfolio items displayed per slide
  • Portfolio elements displayed within each list item
  • Metadata placement
  • Slider navigation and autoplay behavior
  • Read more button customization
  • Image hover overlays and animations

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. Slider Settings Section

null
  • Slides To Show: Define the number of portfolio items displayed at once in the slider.
  • Slides To Scroll: Define how many slides move when the slider navigates.
  • Autoplay: Enable or disable automatic sliding.
  • Autoplay Speed: Set the delay between automatic slide transitions.
  • Navigation Arrows: Enable or disable previous and next navigation arrows.
  • Dots Navigation: Enable pagination dots below the slider.
  • Infinite Loop: Enable continuous looping of slider items.
  • Pause on Hover: Pause autoplay when the user hovers over the slider.

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

6. Image Section

null
  • 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.

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.

Leave a Reply

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

Share this Doc

Portfolio List Slider

Or copy link

CONTENTS

Powered By EazyDocs