How to use Elementor Portfolio Widget

What Is the Elementor Portfolio Widget?

The Elementor Portfolio Widget is a dedicated display widget that lets you show your posts, pages, or custom post types in an attractive, filterable grid directly on any page of your WordPress website. Think of it as a smart image grid that is connected to your actual WordPress content — not just a static gallery. Instead of manually uploading images and arranging them one by one, the widget pulls content dynamically from your WordPress posts or custom post types. Visitors can hover over each item to see the title, and if you enable filters, they can sort your work by category with a single click — making it much easier for them to find what they are looking for. A few important things to know upfront: – The Portfolio Widget is a Elementor Pro exclusive — you will not find it in the free version of Elementor. – It works with posts, pages, and custom post types only. It does NOT work with media gallery images. – Featured images must be set on each post for the images to appear in the grid. This is the most common mistake beginners make.

Requirements: What You Need Before You Start

Before you open Elementor and start dragging widgets around, make sure you have the following in place: – WordPress installed and running on your hosting account. – Elementor Pro plugin installed and activated. The Portfolio Widget is a Pro-only feature, so the free version of Elementor will not give you access to it. – A set of posts (or a custom post type) that will serve as your portfolio items. Each post needs a featured image — this is the image that actually appears in the grid. – Your portfolio posts should be organised into WordPress categories or tags if you want to use the filter bar feature (which I highly recommend). If you are not sure whether you have Elementor Pro active, go to your WordPress dashboard, click on Elementor in the left menu, and check your licence status. If you only have the free version, the Portfolio Widget will simply not appear in your widget panel.

Step 1 — Prepare Your Portfolio Posts in WordPress

This step happens before you even open Elementor, and it is the one most people skip — then wonder why their grid looks empty. Here is what to do: – Go to Posts → Add New in your WordPress dashboard. – Give each post a title (e.g. the project name, client name, or category of work). – Write a brief description in the post body if you want — this is optional, but useful for SEO. – Set a Featured Image for each post. This is critical. The Portfolio Widget pulls the featured image to display in the grid. If there is no featured image, nothing will show. – Assign each post to a Category. For example, if you are a photographer, your categories might be Weddings, Portraits, and Commercial. These categories become the filter buttons visitors use to sort your work. – Publish the post. Repeat this for every piece of work you want to display. Once your posts are ready, head into Elementor to build the portfolio page.

Step 2 — Add the Portfolio Widget to Your Page

Now that your content is ready, let’s get the widget onto the page. – Go to Pages → Add New (or open an existing page you want to add the portfolio to). – Click Edit with Elementor to open the page builder. – In the left-hand widget panel, use the search bar and type ‘Portfolio’. – The Portfolio widget will appear — drag and drop it onto your page in the section where you want it to appear. As soon as you drop the widget onto the page, Elementor will automatically pull in your latest posts and display them in the grid. At this point it may look a bit random or show the wrong content — that is completely normal. The next few steps will sort all of that out.

Step 3 — Configure the Layout Settings

With the widget selected, look at the left-hand settings panel. You will see three tabs: Content, Style, and Advanced. Start with Content, and look for the Layout section at the top. Here are the key layout settings you will want to adjust: – Columns: Set how many columns appear in your grid. For most local business sites, 3 columns is a clean and readable choice. On mobile, Elementor automatically adjusts this to fewer columns. – Posts Count: Set the total number of portfolio items to display. If you have 12 projects, set it to 12 (or more, if you want to show everything). – Image Resolution: Set the image size. ‘Medium Large’ or ‘Large’ usually works well for portfolio grids without slowing down the page too much. – Item Ratio: This controls the height-to-width ratio of each grid item. A 0.66 ratio gives a nice landscape-style card. Adjust this to suit your images. – Masonry: Toggle this on if you want a Pinterest-style masonry layout where items are different heights. For most clean, professional sites I work on, I leave this off and keep uniform card heights — it just looks tidier. – Show Title: Set this to Yes if you want the project title to appear when a visitor hovers over the image. I always recommend enabling this — it gives visitors context about what they are looking at.

Step 4 — Set Up the Query (Choose What Content to Display)

The Query section is where you tell the widget exactly which posts to pull in. This is one of the most important settings to get right. Under the Content tab, scroll down to the Query section. Here are the main options: – Source: This is where you choose what type of content to display. Options include Posts, Pages, Custom Post Types (if you have any set up), Manual Selection, and Current Query. For most portfolio setups, you will select Posts. – Include By: If you choose Posts as your source, you can then filter further by Term (category or tag) or Author. For example, if you only want to show posts from your ‘Web Design’ category, you would set Include By to Term and then select that category. – Date: Filter by date range — All, Past Week, Past Month, and so on. For a portfolio, leave this on All. – Order By: Choose how items are sorted. Date (newest first) is the most common choice. You can also sort by Title or set a custom Menu Order if you want manual control over which projects appear first. – Avoid Duplicates: If you have the Portfolio Widget appearing more than once on a page, turn this on to prevent the same post showing twice. Take a moment to configure this section carefully. Getting the query right means your portfolio automatically updates every time you publish a new project post — no manual editing of the page required.

Step 5 — Enable the Filter Bar

This is one of my favourite features of the Portfolio Widget, and it makes a huge difference to the user experience — especially when you have a lot of work to show across different types of projects. Still in the Content tab, scroll down to find the Filter Bar section. – Show: Switch this to Yes to display the filter bar above your portfolio grid. – Taxonomy: Choose which taxonomy the filter uses. If your posts are organised by Categories, select Category. If you used Tags, select Tag. You can also use custom taxonomy labels if you set up a custom post type. Once enabled, clickable filter buttons will appear above your grid, one for each category that has at least one post assigned to it. When a visitor clicks a filter button — say ‘Branding’ — the grid will animate and show only posts from that category. This keeps your portfolio organised and helps visitors find exactly the type of work they are interested in without having to scroll through everything.

Step 6 — Style Your Portfolio Widget

Click on the Style tab in the left-hand panel to access the visual design options. You do not need to go overboard here — clean and simple almost always looks better than over-styled. Here is what to pay attention to: – Item Gap: Adjust the spacing between grid items. A gap of around 10–15px gives a clean, modern look without the items feeling cramped or too separated. – Title Color: Set the colour of the project title that appears on hover. Make this contrast well against the overlay — white text on a dark overlay is the most readable option. – Filter Bar Styling: If you enabled the filter bar, you can set the active filter colour, inactive text colour, and spacing between filter buttons. Match the active colour to your brand’s primary colour for a polished look. – Hover Animation: The default is a subtle overlay that fades in on hover. This is clean and professional — I generally recommend leaving it as-is rather than adding heavy animations that can slow things down. Once you are happy with the styling, click Update or Publish to save your changes and preview the page.

Pro Tips for a Better Portfolio Section

After building portfolio pages for hundreds of clients across different industries, here are the practical tips that consistently make a difference: – Keep your featured images consistent in size and style. If some are landscape and some are portrait, the grid will look uneven. Crop all your images to the same ratio before uploading. – Do not display too many items at once. Six to twelve items is a comfortable amount for most visitors to browse. If you have more work, consider adding a ‘Load More’ button or linking to a separate portfolio archive page. – Use clear, descriptive category names for your filter bar. Instead of ‘Category 1’ and ‘Category 2’, use names like ‘Logo Design’, ‘Web Design’, and ‘Print’ so visitors immediately understand what each filter contains. – Always set a featured image on every portfolio post. This is the single most common reason the portfolio grid appears blank or broken for new users. – Link each portfolio item to a dedicated project page with more detail — a case study style page with the brief, your process, and the final result. This is much more persuasive for potential clients than just showing an image.

Frequently Asked Questions

Is the Elementor Portfolio Widget free?

No, the Portfolio Widget is part of Elementor Pro and requires an active Elementor Pro licence. The free version of Elementor does not include this widget. If you want a similar result without upgrading, you can use a free Elementor addon plugin that offers a portfolio or filterable gallery widget.

Why are my images not showing in the Elementor Portfolio Widget?

The most common reason is that your portfolio posts do not have a Featured Image set. The Portfolio Widget pulls the featured image from each post to display in the grid — if there is no featured image, the grid item will appear blank. Go to each of your posts and make sure a Featured Image is assigned in the right-hand sidebar.

Can I use the Elementor Portfolio Widget with custom post types?

Yes. In the Query section of the widget, you can set the Source to any custom post type available on your site. This is very useful if you have set up a dedicated ‘Portfolio’ custom post type using a plugin like CPT UI, keeping your portfolio content separate from your regular blog posts.

How do I add filter buttons to the Elementor Portfolio Widget?

In the Content tab of the widget settings, scroll down to the Filter Bar section and toggle Show to Yes. Then set the Taxonomy to Category (or whichever taxonomy you use to organise your posts). Filter buttons will automatically appear above the grid based on your existing categories.

Does the Elementor Portfolio Widget work on mobile?

Yes, the Portfolio Widget is fully responsive. Elementor automatically adjusts the number of columns on tablet and mobile screens so your portfolio looks great on any device. You can also fine-tune the column count for each breakpoint individually using Elementor’s responsive controls.

What is the difference between the Portfolio Widget and the Gallery Widget in Elementor?

They serve different purposes. The Gallery Widget displays a static collection of images that you upload manually. The Portfolio Widget is dynamic — it pulls content from your actual WordPress posts, pages, or custom post types, meaning it can update automatically when you publish new work. The Portfolio Widget also supports filter bars tied to your post categories, which the Gallery Widget does not.

Final Thoughts

Thanks so much for reading all the way through — I hope this tutorial has made the Elementor Portfolio Widget feel a lot less intimidating. It really is one of the most effective ways to show off your work on a WordPress site, and once you have it set up the first time, adding new projects is as simple as publishing a new post with a featured image. If you are more of a visual learner, I have recorded a full video walkthrough of this entire process on my YouTube channel — head over and search ‘Elementor Portfolio Widget’ on the Quick Tips channel and you will find it. Give it a like if it helps! If you have any questions or run into something that is not working quite right on your site, drop a comment below and I will do my best to help. And if you would rather just have someone set it up properly for you, feel free to get in touch with me directly through paramfreelance.com — I am always happy to help local businesses get their websites looking the part.