Atomic Element · Free

Elementor Portfolio Widget: a "selected work" section that fills itself

Publish a project once and it appears in your portfolio grid under a big section title. Free on Elementor Free; with Animation Addons Pro the title pins and swells while cards swing upright on scroll.

Download free See the demos

Native Elementor 4 Atomic Element
Free grid from any post type
Scroll animation with Pro
Animation off below a breakpoint you choose

Animation Addons 4.3Updated October 2026

Advanced PortfolioAnimation Addons · Atomic

Query

Section Title

Selected work

Section Title Tag

Source

Projects

Order By

Date

Order

Descending

Layout

Posts Per Page

Advanced Portfolio

Selected workView all

View projectView projectView project

Live preview

The short answer

What is the Elementor portfolio widget?

The Elementor portfolio widget from Animation Addons, called Advanced Portfolio, is an Elementor 4 Atomic Element that lists projects from any post type under a large section title. Each project card repeats from one design you build with atomic elements. With Animation Addons Pro, the title pins and scales while cards tilt into place on scroll.

Unlike classic v3 widgets running inside Elementor 4, the Advanced Portfolio is a real Atomic Element: title, grid and card parts all take Elementor 4 Classes and Variables.

Key factsAnimation Addons 4.3

Advanced Portfolio key facts
Plan	Free The scroll animation needs Animation Addons Pro (it loads GSAP and ScrollTrigger)
Free output	A two-column grid of project cards under a centred section title, no motion
Element type	Native Elementor 4 Atomic Element (composite container)
Works with	Elementor Free and Elementor Pro, Atomic Editor on
Child elements	Section Title, Posts List, Portfolio Item (repeats per project; seeded with a Thumbnail, accepts any element)
Query	Any public post type; Order By Date, Title, Menu Order or Random; Order; Offset; Posts Per Page
Animations (Pro)	Pinned section title that scales 1x to 3x and back; cards rotate from flat to upright as they arrive
Limits	No visitor filter bar or pagination in this element (use Loop Grid for those); the scroll animation needs Pro
Plugin version	Animation Addons for Elementor 4.3 · Last updated October 2026

Demo variations

Six ways to use the Advanced Portfolio.

Ideas you can build today with the Advanced Portfolio and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.

01Design studios and creative agencies that want one unforgettable home-page section

Studio "WORK" scroll showcase

Black page, white type. "WORK" pins and swells to three times its size and back as two columns of project images rise from flat beneath it.

Built with: Section Title "WORK", Section Title Tag H2; Animations > Enable; Title Pin Area Start top top, Title Pin Area End bottom bottom; Breakpoint Tablet so phones get the static grid; Enable Editor Mode while tuning.
Motion: The widget's own scroll animation.
Needs Pro: the scroll animation (a "Get Animation Addons Pro" button sits under this demo).

02Freelance designers and consultants who want a calm, readable portfolio and no paid add-ons

Freelancer case-study grid (Free only)

Off-white page, a small left-aligned heading, two columns of 4:3 images with a name and one-line summary under each.

Built with: Section Title "Selected projects", Section Title Tag H2; Portfolio Item with the Thumbnail (Aspect Ratio 4:3), Post Title (H3) and Post Excerpt (Limit By Line Clamp, 2 lines); Order By Date; Posts Per Page 6.
Motion: None. Everything on this demo is free.

03Photographers and illustrators who sequence their work themselves

Photographer's hand-ordered wall

A dense three-column grid of square, image-only tiles with 8px gaps, in the photographer's own order.

Built with: Portfolio Item with Thumbnail only (Aspect Ratio 1:1 (Square), Object Fit Cover); Source set to a gallery custom post type; Order By Menu Order, Order Ascending; Posts Per Page 12; Posts List columns and gap changed in its Style tab.
Motion: Each Thumbnail tilts toward the cursor with Tilt on the Post Image (Pro extension).
Needs Pro: Tilt.

04Architecture, interiors and construction portfolios

Architecture firm project index

One wide column of 16:9 images, each with name, location and a "View project" button; the newest project is skipped because the hero features it.

Built with: Offset 1; Portfolio Item with Thumbnail, Post Title, Post Excerpt (Limit By Word Count) and a Button; Posts List set to one column; Posts Per Page 5.
Motion: Each Thumbnail drifts slightly slower than the page with Parallax on the Post Image (Pro extension).
Needs Pro: Parallax.

05Illustration and product-design portfolios with many equal pieces

Illustrator's shuffled discovery grid (Free only)

A pastel section; six different pieces on every visit, each on a rounded white card.

Built with: Order By Random; Posts Per Page 6; Section Title "Have a look around"; Portfolio Item with Thumbnail and Post Title; card background and radius set on a Class.
Motion: None.

06Digital agencies that want a short, high-impact proof section on a services page

Agency "recent launches" strip

Three portrait cards on a dark navy band, the client name over a bottom gradient; the section fades up as it enters.

Built with: Posts Per Page 3; Posts List set to three columns; Portfolio Item with Thumbnail and Post Title, the title positioned over the image from its Style tab (Position absolute, bottom 0) on a gradient background; Section Title "Recent launches".
Motion: The Advanced Portfolio sits inside a Flexbox that fades up with Regular Animation "Classic Fade Up" (Pro extension).
Needs Pro: Regular Animation.

Features

What you get with the Advanced Portfolio.

Every option below is a real control in the Advanced Portfolio panel or part of how the element renders. Nothing here needs custom code.

A portfolio section, not just a grid

Section Title and Section Title Tag (H1–H6) sit in the same panel as the query, so the heading and the work always travel together. The title renders once; only the card repeats.

Fills itself from any post type

Source lists every public post type, including a projects custom post type. Publish a project in WordPress and it joins the grid.

You decide what a card says

Portfolio Item starts as just a thumbnail and accepts any element: Post Title, Post Excerpt, a Button, a Flexbox. Each part keeps its own Style panel.

Hand-picked order or a fresh shuffle

Menu Order follows the order you set in WordPress; Random shows a new mix on every visit; Offset skips projects featured higher on the page.

Scroll motion you control (Pro)

Title Pin Area Start and End set where the pin begins and ends. Motion follows the scrollbar and stops when the visitor stops.

Calm on small screens

Breakpoint (None, Mobile, Tablet, Desktop) runs the animation only from that width up. Enable Editor Mode previews it on the canvas.

Built on the atomic base

How the Advanced Portfolio is built (atomic structure)

Why it mattersTitle, grid and card restyle separately, and the Pro animation still finds them.

StructureNavigator

Advanced Portfolioquery, layout, animations
- Section Title
- Posts Listtwo-column grid by default
  - Portfolio Itemrepeats once per project, renders as an <article>
    - ThumbnailPost Image
    - Any elements you addPost Title, Post Excerpt, Button, Flexbox
    - Portfolio Content and Portfolio Datepart elements used by presets; Date shows each project's publish date

Step by step

How to add a portfolio in Elementor 4

Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.

Download free

Install and activate Animation Addons for Elementor, then open a page in Elementor with the Atomic Editor on.
Drag Advanced Portfolio onto the canvas. It arrives with a "WORK" title and a grid of thumbnails.
In Query, pick the Source post type, then Order By, Order and Offset. Set Posts Per Page under Layout.
Edit Section Title and its tag. Select the Portfolio Item and add Post Title, Post Excerpt or a Button.
Optional: open Presets and choose a layout in Apply Preset.
With Animation Addons Pro active, open Animations, turn on Enable, choose a Breakpoint, preview with Enable Editor Mode, then publish.

Honest comparison

Elementor portfolio options compared

What each option has, side by side. We list where the other choice is the better fit, too.

Elementor portfolio options compared
Feature	Elementor Pro Portfolio (classic)	Elementor Pro Atomic Loop	Animation Addons Advanced Portfolio
Requires Elementor Pro	Yes	Yes	No
Native Elementor 4 Atomic Element	No	Yes	Yes
Card built from your own elements	No, fixed card with hover overlay	Yes, Loop Item	Yes, Portfolio Item
Category filter bar for visitors	Yes	Not documented	No (use Loop Grid + Loop Filters)
Pinned, scaling section title on scroll	No	No	Yes, with Animation Addons Pro
Pagination	Not documented	Yes	No

Compared with Elementor 4.3.3 (September 2026).

Which one to pick

Need a filter bar and already pay for Elementor Pro? Its classic Portfolio has one. Otherwise, the Advanced Portfolio wins on price, card freedom and the scroll showcase.

Who it's for

Who uses the Advanced Portfolio?

The people who get the most out of it, and what they use it for.

Design studios
That want the portfolio to be the memorable part of the site.
Freelancers
Showing case studies from a projects post type, on Elementor Free.

FAQ

Questions about the Advanced Portfolio

How do I make a portfolio page in Elementor 4 for free?

Install the free Animation Addons for Elementor plugin and drag the Advanced Portfolio onto a page. Pick your projects' post type under Source, set Posts Per Page, and add a title or button beside the thumbnail. The Advanced Portfolio works on Elementor Free; only the scroll animation needs Animation Addons Pro.

What does the Advanced Portfolio look like without Pro?

Without Animation Addons Pro, the Advanced Portfolio renders a static two-column grid of project cards under a centred section title. Query, card design, title and presets all work. The pinned, scaling title and the card tilt need Pro because they run on GSAP and ScrollTrigger, which the free plugin does not load.

Does the portfolio scroll animation slow down my site or hurt mobile?

The free Animation Addons Advanced Portfolio loads no animation library at all. With Pro, GSAP and ScrollTrigger load for the effect, and the Breakpoint setting skips the animation below Mobile, Tablet or Desktop width, so phones can get the plain grid. Pro also includes Lazy Animation and Reduced Motion controls in its performance tools.

Is the Elementor portfolio widget good for SEO and screen readers?

Yes. The Animation Addons Advanced Portfolio renders on the server: the section title is a real heading, each project is an article element, and titles and images are in the page HTML. Post Image reads each image's alt text from the Media Library. The scroll animation only moves elements that are already on the page.

Can I use a custom post type for my Elementor portfolio?

Yes. The Advanced Portfolio's Source setting lists every public post type, so a projects or case-study custom post type works like normal posts. Each project's featured image fills the Thumbnail, and Post Title or Post Excerpt can be added to the Animation Addons portfolio card.

Can visitors filter Elementor portfolio projects by category?

Not inside the Advanced Portfolio, which is built as a showcase section without a filter bar or pagination. For a portfolio visitors can filter, build the cards with the free Animation Addons Loop Grid and add Animation Addons Pro Loop Filters, which update the grid without reloading the page.

What is the difference between Advanced Portfolio and Loop Grid?

The Animation Addons Advanced Portfolio is a ready portfolio section: big title, project grid and an optional pinned scroll animation. The Animation Addons Loop Grid is a general loop builder with Query Filters, pagination and Related Posts. Both are free and share the same query engine.

More answers in the FAQ · Documentation · Free vs Pro

Pairs well with

Related Atomic Elements

Elements that work well with the Advanced Portfolio on the same page or template.

See all Atomic Elements

Give your work the section it deserves

Start free on Elementor Free. Add the pinned scroll animation with Animation Addons Pro when you want it.