How to Build a Portfolio Website with Elementor Loop Grid
A portfolio is often the most important page on a designer's or agency's website. It is also one of the most annoying to maintain if every project card is built by hand. Add a new project, and you have to duplicate a card, swap the image, change the title, fix the link, and hope you did not break the layout.
Elementor Pro's Loop Grid solves this. You design a single card once, and Elementor repeats it automatically for every project in your database. In this tutorial you will build a complete, filterable portfolio that updates itself whenever you publish a new project.
What You Need
- Elementor Pro for the Loop Grid, Loop Item templates, and the Taxonomy Filter.
- A place to store projects. You can use regular posts in a "Portfolio" category, or better, a dedicated custom post type created with a plugin such as ACF or a custom post type plugin.
- A few sample projects with a featured image, title, short excerpt, and a category such as Branding, Web Design, or Photography.
Step 1: Structure Your Content
A dedicated Project post type keeps portfolio items separate from blog posts. Give it:
- A taxonomy such as Project Type for filtering.
- Optional custom fields: client name, year, services, and an external link.
Fill in at least six projects so you can see the grid properly while designing.
Step 2: Add a Loop Grid to Your Portfolio Page
- Edit your portfolio page with Elementor.
- Add the Loop Grid widget.
- Click Create a Template to start designing the Loop Item, the card that repeats for each project.
Step 3: Design the Loop Item
You are now editing one card. Everything you add here uses dynamic content, so it shows the data of each project automatically:
- Featured Image with a fixed aspect ratio such as 4:3, so all cards line up.
- Post Title linked to the project page.
- Post Terms showing the project type.
- Optionally, the excerpt or a custom field such as the client name.
Add a hover effect to the card container: a slight lift, a shadow, or an image zoom. Keep it subtle; the work should be the star. Save the Loop Item.
Step 4: Configure the Query
Back on the portfolio page, select the Loop Grid and open the Query settings:
- Source: your Project post type, or Posts filtered to the Portfolio category.
- Order: by date for newest first, or by menu order if you want to arrange projects manually.
- Posts per page: 9 or 12 works well for a three-column grid.
Step 5: Set the Layout
- Columns: 3 on desktop, 2 on tablet, 1 on mobile.
- Gap: 24 to 32 pixels between cards.
- Equal height: enable it if cards have different text lengths.
- Masonry: an option if your images have different proportions and you want a Pinterest-style layout.
Step 6: Add Filtering
Visitors love being able to see only the type of work they care about. Add the Taxonomy Filter widget above the grid:
- Select the Loop Grid it should control.
- Choose your Project Type taxonomy.
- Style the filter buttons with a clear active state.
Clicking a filter updates the grid without reloading the page.
Step 7: Pagination or Load More
For larger portfolios, enable pagination. A Load More button or infinite scroll often feels smoother for visual work than numbered pages. Test with your real number of projects.
Step 8: Design the Single Project Page
The cards link to individual project pages. Create a Single template in the Theme Builder for your Project post type with a large hero image, project details from custom fields, a gallery, and a "Next project" link. Every project you publish automatically uses this design.
Bonus: Highlight Featured Projects
Loop Grid can use alternate templates, showing a different card design at set positions. Make every fifth card a wide, featured card to break the rhythm of the grid and draw attention to your best work.
Atomic Loops in Elementor 4.2
Elementor 4.2 introduced Atomic Loops for Pro users, bringing the same idea to the Atomic Editor with a cleaner structure and design system support. If you are starting a new site on atomic elements, it is worth exploring; existing Loop Grid portfolios continue to work as before.
Performance Tips
- Use properly sized thumbnail images, not full-resolution originals.
- Keep the number of projects per page reasonable and use pagination.
- Lazy-load images below the fold.
Frequently Asked Questions
Can I build a portfolio with Loop Grid without a custom post type?
Yes. You can use regular posts in a Portfolio category. A custom post type keeps projects separate from blog posts, which is cleaner on larger sites.
How do I show custom fields like client name in a Loop Grid?
Add a text element to the Loop Item template and connect it to the custom field with a Dynamic Tag. Our guide on displaying custom fields with Dynamic Tags covers this in detail.
How many projects should a portfolio page show?
Nine or twelve works well for a three-column grid. Add pagination or a load more button for the rest, so the page stays fast.
Wrapping Up
With Loop Grid, your portfolio becomes a system rather than a page you keep rebuilding. Store projects as structured content, design the card once, add filters and a solid single project template, and from then on, adding new work is as simple as publishing a post.
Comments
Post a Comment
Post a Comment