Portfolio Slider

Estimated reading: 3 minutes 143 views

The Portfolio Slider widget allows you to showcase portfolio items in an interactive slider layout using Elementor. Projects are displayed inside a carousel that users can navigate using arrows, dots, or swipe gestures.

This widget is perfect for highlighting featured projects, showcasing selected works, or creating visually engaging portfolio sections with smooth sliding animations.

General Overview


The Portfolio Slider widget helps you showcase portfolio items with full control over:
  • Portfolio post queries and filtering
  • Slider layout and number of visible items
  • Portfolio elements displayed inside each slide
  • 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 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
  • 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 Slider widget provides an engaging way to present portfolio projects using a carousel layout. It supports:
  • Dynamic portfolio queries
  • Customizable slider layouts
  • Autoplay and navigation controls
  • Drag-and-drop control of portfolio elements
  • Image overlays and hover animations
  • Full styling customization through Elementor

This widget is ideal for highlighting featured projects, homepage portfolio showcases, and interactive project galleries.

Leave a Reply

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

Share this Doc

Portfolio Slider

Or copy link

CONTENTS

Powered By EazyDocs