Portfolio Accordion

Estimated reading: 3 minutes 326 views

The Portfolio Accordion widget allows you to display portfolio items in an interactive accordion layout using Elementor. Each portfolio item expands on hover or interaction, revealing additional information such as the project title, excerpt, categories, and other metadata.

This widget is ideal for creating modern portfolio sections where projects are displayed in a visually engaging accordion format, allowing visitors to explore content dynamically.

General Overview


The Portfolio Accordion widget helps you showcase portfolio items with full control over:
  • Portfolio post queries and filtering
  • Accordion layout orientation
  • Number of visible portfolio items
  • Content elements displayed inside each accordion item
  • Hover overlays and metadata placement
  • Read more button customization
  • Accordion interaction behavior

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 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. Image Accordion Section

null
  • Number of Images: Defines how many portfolio items appear in the accordion layout.
  • Layout Style: Choose between horizontal or vertical accordion layouts.
  • Breakpoint: Set the screen width where the accordion switches to vertical layout for responsive design.
  • Image Extend Click: Define the action when clicking an accordion item, such as redirecting to the portfolio single page or opening content in a popup.

5. Read More Section

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

Styling Options


All elements of the Portfolio Accordion widget can be styled using Elementor’s Style tab.
  • Typography and colors for titles and excerpts
  • Accordion spacing and layout styling
  • Image borders, radius, and hover effects
  • Overlay background and animations
  • Metadata styling for categories, tags, and author
  • Read more button styling including hover effects and typography

Summary


The Portfolio Accordion widget provides an interactive way to showcase portfolio projects using Elementor. It supports:
  • Dynamic portfolio queries
  • Horizontal or vertical accordion layouts
  • Drag-and-drop portfolio element control
  • Hover overlays and metadata display
  • Customizable read more buttons
  • Full design customization using Elementor styling options

This widget is ideal for creating creative portfolio sections, agency showcases, and interactive project presentations.

Leave a Reply

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

Share this Doc

Portfolio Accordion

Or copy link

CONTENTS

Powered By EazyDocs