Portfolio Inertia

Estimated reading: 3 minutes 138 views

The Portfolio Inertia widget allows you to display portfolio projects in an interactive grid layout enhanced with smooth inertia-based hover animations. When users move their cursor over portfolio items, the images react with motion and subtle rotation effects, creating a dynamic and engaging browsing experience.

This widget is ideal for modern portfolios and creative showcases where interactive motion helps highlight projects while maintaining full control over portfolio queries, layout elements, and styling options.

General Overview


The Portfolio Inertia widget provides controls to manage:
  • Portfolio post queries and filtering
  • Portfolio layout and column structure
  • Drag-and-drop portfolio content elements
  • Overlay content and hover interactions
  • Inertia motion effects and animation behavior
  • Read more button customization
  • Image and media display settings

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

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

6. Inertia Effects Section

null
  • Motion Intensity: Controls how far the portfolio image moves when hovering over the item.
  • Max Rotation: Defines the maximum rotation angle applied during the hover wobble effect.
  • Animation Speed: Adjust the speed multiplier for the inertia animation.
  • Wobble Duration: Controls the duration of the rotation wobble animation.
  • Disable Inertia Effect in Mobile: Disable the inertia animation for mobile devices (below 768px screen width).

Styling Options


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

Summary


The Portfolio Inertia widget adds a modern interactive effect to portfolio grids by introducing motion-based hover animations.
  • Dynamic portfolio queries
  • Grid-based portfolio layout
  • Drag-and-drop layout configuration
  • Smooth inertia hover animations
  • Support for images and video media
  • Full styling customization through Elementor

This widget is ideal for creative portfolios, agency websites, and modern project showcases where subtle motion enhances the visual presentation of portfolio items.

Leave a Reply

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

Share this Doc

Portfolio Inertia

Or copy link

CONTENTS

Powered By EazyDocs