Advanced Portfolio

The Advanced Portfolio Widget in Animation Addons for Elementor is a paid feature. To use this widget, ensure the plugin is installed and activated on your site. You can explore both free and pro widgets using the filtering options, but this specific widget is available only in the pro version.

Introduction

The Advanced Portfolio Widget in Animation Addons for Elementor lets you display your projects in a stylish, customizable layout to showcase your work effectively.

Key Use Cases for the Advanced Portfolio Widget:

• Showcase your projects in a visually appealing and organized layout.
• Customize the design to match your website’s style and branding.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Advanced Portfolio Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Advanced Portfolio Widget in the list.
• Toggle it on to enable the widget.
• Now, the Advanced Portfolio Widget is ready to use!

How to Add Advanced Portfolio Widget in Elementor:

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

How to Configure Advanced Portfolio Widget

• In the Elementor panel, search for the “Advanced Portfolio Widget.”
• Drag and drop the widget into your desired section.
• From the widget settings, upload your portfolio items, including images or videos, and configure the title, category, and description for each item.
• You can also adjust the layout style, enable filters, and define how many items to display per row.
• Use the Style tab to refine the design—adjust spacing, borders, hover effects, typography, and colors—to create a visually appealing and branded portfolio section.                                                                

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

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

Content Settings

The Content section of the Advanced Portfolio Widget offers comprehensive configuration options to help you display and manage your portfolio items with enhanced interactivity. This section is divided into four main parts: Layout, Slider, Query, and the newly introduced Cursor Hover Effect.

1. Layout

Customize the structure and appearance of your portfolio grid.

• Skin: Choose the visual style or template for displaying portfolio items.
• Posts Per Page: Set how many items should appear on a single page.
• Image Resolution: Select the resolution to ensure optimal image quality and loading speed.
• Post Title Tag: Define the HTML tag for portfolio titles (e.g., H1, H2, H3) to maintain SEO hierarchy.
• Icon: Display icons on items to enhance visual indication or action.

2. Slider

Convert your portfolio grid into a sleek slider with dynamic settings.

• Slides to Show: Set the number of slides visible at once.
• Autoplay: Enable automatic slide transitions.
• Allow Touch Move: Allow users to swipe through slides on touch devices.
• Loop: Enable continuous loop scrolling.
• Mousewheel Button: Let users navigate through slides using the mouse wheel.
• Animation Speed: Define the speed of slide transitions.
• Space Between: Set spacing between each slide.
• Effect: Choose slide transition effects like fade or slide.
• Navigation and Pagination Buttons: Enable/disable navigation arrows and pagination indicators.
• Direction: Select horizontal or vertical slide direction.

3. Query

Control what content gets pulled into the portfolio.

• Query Type: Choose between standard or custom queries.
• Source: Select post types (e.g., posts, pages, custom post types).
• Include By: Filter content by ID, term, or author.
• Post Format: Include only certain post formats such as video, gallery, etc.
• Date: Filter by post date.
• Order By: Choose how content is sorted (e.g., date, title, ID).
• Order: Ascending or descending.
• Ignore Sticky Posts: Option to exclude sticky posts from the query.

4. Cursor Hover Effect

A unique interactive feature to enhance user experience with custom hover visuals.

• Enable Button: Toggle to activate the cursor hover effect. Once enabled:
• Text: Define the text that appears when the cursor hovers over a portfolio item.
• Typography: Adjust the font size, style, weight, and spacing for hover text.
• Text Color: Set the color for the hover text.
• Background Type: Choose a solid color, gradient, or image for the background behind the cursor text.
• Width & Height: Define the dimensions of the hover area.
• Border Type: Multiple styles are available:
  • None: No border is applied.
  • Solid: A single, solid line.
  • Double: Two solid lines.
  • Dotted: Dotted line around the cursor effect.
  • Dashed: Dashed outline for a stylized look.
  • Groove: Adds a carved groove effect for depth.

• Border Radius: Round the edges of the hover element to achieve a circular or oval shape.

Style Settings

In the Style section, you will find customization options for Layout, Slider Navigation, Slider Pagination, Content, Date, Title, and Image.

These options allow you to fine-tune the design and style of each element, ensuring a personalized and visually appealing result – 

• Layout: Customize the overall layout to fit your design preferences, providing a clean and organized look.
  
• Slider Navigation: Adjust the navigation arrows or dots for smooth navigation through your content.
  
• Slider Pagination: Add pagination for easy content navigation and a more structured layout.
  
• Content: Customize the content’s typography, color, and alignment to match your site’s branding.
  
• Date: Style the date display to suit your design, offering more control over its appearance.
  
• Title: Modify the title’s style, such as font size, weight, and color, to make it stand out.
  
• Image: Style the images, including adjusting size, border, and hover effects, to give your content an engaging and visually appealing presentation.

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

Congratulations! You’ve now mastered the process of setting up the Advanced Portfolio Widget in Elementor to beautifully display your portfolio and elevate your website’s design. If you have any questions or need further assistance, don’t hesitate to reach out to our support team.