Portfolio

Before setting up the Portfolio Widget , make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Portfolio Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Portfolio Widget in Elementor displays your projects in a customizable grid, perfect for freelancers and creatives to showcase their work.

Key Use Cases for the Portfolio Widget in Elementor:

• Showcase your projects in a stylish grid.
• Customize layout and hover effects for a personalized presentation.
• Perfect for freelancers and creatives to highlight their work.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Portfolio Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Portfolio widget in the list.
• Toggle it on to enable the widget.

How to Add Portfolio Widget in Elementor

• Open the page where you want to add the Portfolio Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Portfolio Widget.”
• Drag the widget to your desired section.
• The Portfolio Widget is now ready for customization.

How to Configure Archive Title Widget

• Enable the Widget from your plugin or theme settings.
• Create a New Page → Set a title → Choose Elementor Full Width template → Publish.
• Open with Elementor, search for “Portfolio Widget”, and drag it into your section.
• The widget will auto-display portfolio items based on your settings.
• Customize layout, filters, and style as needed.

ConfiguringPortfolio Widget : A Step-by-Step Guide

Once the Portfolio Widget is added to your page, you can configure its settings under three main tabs: Content, Style and Advanced.

Configuring the Portfolio Widget : A Step-by-Step Guide

Once the Portfolio Widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

The Content section provides control over the structure, query, filtering, and pagination of the portfolio display. Below is a breakdown of each setting and its function:

1. Layout

Customize how portfolio items appear on the page-

• Layout Styles: Choose from 5 different layout styles to match your design preference.
• Columns: Select up to 6 columns to define how many items appear in each row.
• Posts Per Page: Set the number of portfolio items displayed per page.
• Image Resolution: Choose from various image quality options for better performance and clarity.
• Masonry Toggle: Enable/disable masonry layout for dynamic item arrangement based on height.
• Item Height: Manually set a fixed height for uniform item display.

• Show Title Toggle: Turn the item title on or off.
• Title Length: Limit the number of words or characters in the title for consistency.
• Title HTML Tag: Define the semantic HTML tag (H1–H6, div, span) for SEO and accessibility.
• Meta Toggle: Show or hide metadata like post date or category.
• Taxonomy

• Control how portfolio categories are displayed.
• Supports three taxonomy types (categories, tags,formats).
• Enable or disable taxonomy visibility.
• Option to display publish date alongside taxonomy labels.

2. Query

This section defines which portfolio items are displayed. You can choose from 12 different query types. The Query option allows you to control which portfolio items are displayed.

• Source: Choose the content source (posts, pages, or custom post types like portfolios or projects).
• Include/Exclude: Select specific categories, tags, or individual items to include or exclude.
• Order By: Sort items by date, title, menu order, or random.
• Order: Set ascending or descending order.
• Sticky Toggle: Decide whether sticky posts are included or ignored.
• Post Format: Filter content by format (standard, video, gallery).

This feature gives you fine-tuned control over what content appears in the portfolio, making the widget highly flexible for custom portfolio displays.

3. Filter Bar

Display a filter bar to allow users to sort items by taxonomy (category/tag).

• Customizable appearance and behavior.
• Enhances user experience by making content navigation easier.

4. Pagination

Set how users navigate through multiple pages of portfolio items.

• Choose from options like numbers, arrows, or load more buttons.
• Improves content organization and site performance.

Style Settings

You will get two options: Layout and Content. I also made slight changes in the Style section, just like in the Content section!

1. Layout

• Columns Gap: Adjust the spacing between portfolio item columns to improve layout clarity and alignment.
• Rows Gap: Set vertical spacing between portfolio rows for better content separation.

• Hover Effect: Apply visual effects on item hover (e.g., zoom, fade) to enhance interactivity.
• Alignment: Align content within each portfolio item (left, center, or right).

2. Content

• Title
  
  • Color: Define the title text color.
  • Typography: Customize font family, size, weight, transform, and style.
  • Margin: Adjust spacing around the title for proper positioning.
    
• Meta
  
  • Color: Set the text color for metadata (date, taxonomy, etc.).
  • Typography: Adjust font styles for meta details.
  • Margin: Manage spacing around the metadata area for visual balance.

But you can explore all customization options yourself to see the changes.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make

Final Outcome

That’s it! You’ve successfully learned how to configure the Portfolio Widget in Elementor to showcase your projects in a stylish and customizable layout.

For any further assistance or inquiries, feel free to contact our support team!