Portfolio Marquee

Estimated reading: 3 minutes 153 views

The Portfolio Marquee widget allows you to display portfolio projects in a continuously scrolling horizontal layout. This marquee-style presentation creates a modern and dynamic visual effect that is commonly used in creative portfolios, agency websites, and design showcases.

Instead of displaying portfolio items in a traditional grid, the marquee layout moves portfolio items across the screen automatically, creating an engaging animation effect while still allowing full control over portfolio queries, layout elements, and styling.

General Overview


The Portfolio Marquee widget provides controls to manage:
  • Portfolio post queries and filtering
  • Scrolling marquee direction and animation behavior
  • Displayed portfolio elements such as images, titles, and metadata
  • Overlay content and hover interactions
  • Read more button customization
  • Media content including images and videos

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. Marquee Settings

null
  • Marquee Speed: Control the animation speed of the scrolling portfolio items.
  • Marquee Direction: Choose whether the marquee scrolls left or right.
  • Pause on Hover: Pause the marquee animation when the user hovers over the portfolio items.
  • Duplicate Items: Duplicate portfolio items to ensure smooth continuous scrolling.

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.

Styling Options


All visual elements of the Portfolio Marquee widget can be customized through Elementor’s Style tab.
  • Typography for portfolio titles and metadata
  • Image borders, padding, and spacing
  • Overlay background colors and hover effects
  • Button styles including background, border, and typography
  • Spacing and alignment controls
  • Overlay icon styles and animations

Summary


The Portfolio Marquee widget provides a unique animated layout for displaying portfolio items in a continuous horizontal scrolling presentation. It supports:
  • Dynamic portfolio queries
  • Animated marquee scrolling effects
  • Drag-and-drop layout configuration
  • Media-rich portfolio items including images and videos
  • Hover overlays and interactive elements
  • Full styling customization through Elementor

This widget is ideal for creative portfolios, agency websites, landing pages, and interactive project showcases where movement and animation help highlight portfolio work.

Leave a Reply

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

Share this Doc

Portfolio Marquee

Or copy link

CONTENTS

Powered By EazyDocs