Black Friday Up to 50% off every Pro plan. Annual from $24.50, Lifetime from $51.Up to 50% off ProAgency Bundle $499 Agency Bundle$999 $499 Ends in Getthe deal
Get up to 50% off
Classic Elementor widget · Pro

Portfolio Widget for Elementor A portfolio grid with filters, built from your projects

Build an Elementor portfolio grid from your own projects. Pick a grid, card or masonry layout, set the columns, and let visitors sort the work with a category filter bar. Images zoom or drift on hover, and Load More brings in the next projects without a page reload.

Get Pro from $24.50 See the live demos
  • Grid, card and masonry styles
  • Category filter bar
  • Load More pagination
  • Image hover effects

Classic widget · Elementor 3 and 4 · ProUpdated

Live demos

Six portfolio layouts, live

Six portfolio pages and a Load More archive, each on a small site. Hover a project, use the filter and load the next projects.

Maison FormeProjectsStudioJournal
Selected work

Homes we finished this year

A bright living room with a yellow sofa and an oak stair

Atelier Sablon

A long linen sofa and a low wooden table in a sunlit room

Villa Ocre

A woven armchair beside a white sofa and a side table

Casa Brisa

A bedroom with a wooden bench and soft linen bedding

Rue Pastel

Interior studio projects

Elementor portfolio grid with rounded photos

The projects page of an interior studio. Two wide columns of rounded photos, each with the project name and date centred below. Hover a project and its photo zooms in slowly.

Hover a project

Set Layout Styles to Style 1, Columns to 2, Hover Effect to Zoom In and Alignment to Center.

ShallyLookbookShopStories
Autumn edit

Four stories from the new collection

A dancer in a pink dress turning on a rooftop

Coral Pleats

A woman with braids holding a make-up brush

Night Glow

A woman in a linen shirt standing in tall reeds

Reed Linen

A woman in white looking out to sea

Salt Air

Fashion lookbook

Photos that show the title on hover

The autumn lookbook of a fashion label. Square photos with no text until you hover. Then the date and the name fade in as two dark labels while the photo grows.

Hover a photo

Set Layout Styles to Style 2, Columns to 2 and Hover Effect to Zoom In.

Halden & CoWorkPracticeContact
Workplaces and homes

Spaces that people enjoy using

A hotel lobby with wooden walls and low chairs

Oakroom Hotel

A design team working together at their desks

Kestrel Offices

A calm bedroom with a wooden bench

Linden Residence

Three colleagues talking over laptops

Brightwork HQ

A team around a table in a bright office

Studio Vale

Design studio work

Elementor masonry portfolio with large items

The work page of a design studio. Two featured projects run the full width and the others sit in pairs, filling every gap in the grid.

Hover a project

Set Layout Styles to Style 3, turn on Masonry and set Columns to 2. The first and third projects span both columns.

NorthlightCasesServicesAbout
Case studies

Products we designed and shipped

A tablet showing a platform home page

Quill Platform

A phone mockup lying on dark pebbles

Pebble Phone

A wine brand website on a tablet and a phone

Malepère Website

A man in a blue head wrap beside a camel

Desert Road

Product studio cases

Cards with the name below the image

The case studies of a product studio. Each image keeps its own proportions, with a bold name and the date left-aligned below it.

Hover a card

Set Layout Styles to Style 4, Columns to 2 and Image Resolution to Full. Keep Meta on to show the date.

Sahara FilmsFilmsPressAbout
Feature films

Three stories, one frame each

A man in a blue head wrap beside a camel

Desert Road

A curved oak staircase, a set from Salt and Sea

Salt and Sea

A hotel lobby with wooden walls

The Long Lobby

Film studio titles

One full-width project per row

The films page of a production company. One project per row at full width, so every film still gets the whole stage.

Hover a film still

Set Layout Styles to Style 3 and turn on Masonry. Every project is a large item, so each one takes a full row.

Arolax®WorkStudioContact
Our work

Brands and sites we built

A café interior with wooden slats and green chairs

Fern Branding

A living room with a yellow sofa and an oak stair

Lumen Shop

A model with red sunglasses and a pleated red collar

Rouge Identity

A calm living room with a round oak panel

Stone and Oak

Wooden shelves with books and a reading chair

Arc Books

A reading corner with a lamp and a woven stool

Nook Store

Agency work archive

Elementor filterable portfolio with counts

The work page of an agency with many projects. A filter bar shows a count over each category. Pick one and the other projects hide while the rest glide into place. The whole grid fades up as it scrolls into view.

Pick Branding or Web

Set Layout Styles to Style 2 and Columns to 3, and turn on the filter in Filter Bar. The fade-up entrance comes from the Animation tab, a Pro extension.

Arolax®WorkStudioContact
Archive

Everything we made this year

A woman with braids holding a make-up brush

Mira Skin

A bright room with a yellow sofa and an oak stair

Haus Kitchen

A woman in white looking out to sea

Tide Studio

A sunlit room with a long linen sofa

Pine Lodge

A café with wooden slats and green chairs

Copper Lane

A team around a table in a bright office

Field Notes

Project archive

Elementor portfolio Load More button

The archive page of the same agency. It starts with three projects and a Load More button. The next projects lean in from below and settle one after another, and the button goes when nothing is left.

Press Load More

Set Layout Styles to Style 4, Posts Per Page to 3 and Pagination to Load More.

Features

Features of the Portfolio widget

The seven features from the original page, with the panel settings behind them.

Pre-designed layout styles

Pick one of the Layout Styles: a centred grid, hover labels, cards or a masonry layout. Each one is a starting point you can restyle.

Display and columns

Set up to six Columns, the Posts Per Page, the Image Resolution and a fixed Item Height, then trim titles with Title Length.

Image hover effects

Choose a Hover Effect for an Elementor portfolio hover effect: the image can zoom in, zoom out, or drift left or right inside its frame when a visitor points at a project.

Pagination and Load More

Elementor portfolio pagination comes as a Load More button or numbered pages with previous and next. New projects load in place, without a page reload.

Dynamic filter bar

Turn on the Filter Bar to build an Elementor portfolio with filter buttons, an Elementor portfolio category filter that sorts projects by category or tag. Each button can show how many projects it holds.

Advanced query settings

Choose the Source, then Include or Exclude terms and posts, set Order By and Order, and filter by Post Format.

Masonry layout

Switch on Masonry and featured projects span two columns while the others fill the gaps around them.

Responsive design and style

Set Columns Gap, Rows Gap and Alignment, and the colour, typography and margin of the title and meta, per screen size.

Step by step

How to create a portfolio in Elementor

Five steps. The bold names are the labels in the Elementor panel, as the docs list them.

  1. Install Animation Addons Pro, then turn on Portfolio in Animation Addons → Elements.

  2. In Elementor, search the panel for Portfolio and drag the widget onto the page.

  3. In Layout, pick a style, the Columns and the Posts Per Page, and switch on Masonry if you want it.

  4. In Query, set the Source that holds your projects, then turn on the Filter Bar and choose a Pagination type.

  5. In the Style tab, choose a Hover Effect, set the gaps and the title and meta styles, check the page on mobile and publish.

Get Pro from $24.50 Part of Animation Addons Pro · Works with Elementor Free
FAQ

Questions about the Portfolio widget

How do I create a portfolio in Elementor?

Add the Portfolio widget from Animation Addons Pro, pick a layout style and the columns, and set the Query Source to the post type that holds your projects. The grid fills itself from your posts.

Is the Portfolio widget free?

No. It is part of Animation Addons Pro: its code and styles ship with the Pro plugin. It works with the free version of Elementor.

Can I use a custom post type for the portfolio?

Yes. In Query, set the Source to the post type that holds your projects, such as a Projects type. Its categories or tags become the buttons of the filter bar.

Can visitors filter projects by category?

Yes. Turn on the Filter Bar and it lists your categories, tags or formats as buttons, with a count on each. Projects outside the chosen category hide and the rest move into place.

Does it support a masonry layout?

Yes. Switch on Masonry and the grid packs items densely, so featured projects can span two columns while smaller ones fill the gaps.

Can I add Load More to the portfolio?

Yes. In Pagination choose Load More, or numbers with previous and next. The next projects load in place, without reloading the page.

Which hover effects are included?

Four image effects: zoom in, zoom out, left move and right move. One layout style also reveals the date and title on hover.

How is it different from Advanced Portfolio?

Portfolio is a grid with columns, masonry, a filter bar and pagination. Advanced Portfolio has nine animated skins with sliders, scroll effects and a cursor hover, but no filter bar or Load More.

Do I need another portfolio plugin?

No. The widget is part of Animation Addons Pro and reads your own posts, so no separate portfolio plugin is needed. It runs on Elementor Free.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets, and it does not need Elementor Pro.

Animation Addons Pro · Elementor 4

Show your work, sorted and ready

A portfolio grid for Elementor with masonry, a category filter bar, hover effects and Load More.

Get Pro from $24.50 Try it free

Black Friday dealup to 50% off every Pro planEnds 5 Dec

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license