Back to PortfolioLoop Collection Widget
Rebuilding Elementor's most-used dynamic content tool from the ground up for V4. It is the engine behind every blog feed, product grid, and listing, redesigned with alternating templates, pagination, and a full UX audit.
The Loop is one of the most-used features in any website builder, and I led its ground-up V4 redesign. The challenge was making a famously complex feature usable for beginners without losing depth for pros. The result: a 30% higher completion rate than V3, 80% adoption among beginner users, and a UI praised by one of the biggest creators in the Elementor ecosystem.
Introduction
Almost every website has content that repeats: a blog feed, a product grid, a list of team members, a portfolio of work. Instead of building each card by hand, you design one template and the tool repeats it automatically for every item, pulling the live content from your site. In Elementor, the world's most popular WordPress site builder, this is the Loop, and it is one of the most-used features across the entire website-builder category.
The Loop Collection widget is V4's ground-up replacement for the older Loop Grid, and I led the redesign end to end, from competitive research and a structured UX audit through to the final engineering spec. Redesigning the single most-used feature is high-stakes work: the bar was to match everything power users already relied on while making it learnable on day one. Taking something famously powerful but hard to learn and making genuinely complex capability feel simple was the whole challenge.
Impact
higher completion rate than the previous V3 version
adoption among users in the beginner segment
UI redesign featured and praised on YouTube by one of the biggest influencers in the Elementor ecosystem
Goals
- Match the full power of the older Loop Grid while making it dramatically simpler to use
- Make connecting a design to live content clear for non-technical users, without hiding capability from advanced ones
- Bring in alternating templates (different designs for different items in the same list) as a first-class, no-code feature
- Design a pagination sub-feature that handles every common pattern: numbered, load more, and infinite scroll
- Deliver a fully specced, edge-case-covered design ready for V4 engineering
My Role
As the product designer who owned this widget, I led it from research through to a build-ready spec:
1. Competitive research: benchmarked the loop experience across 7+ builders (Webflow, Wix, Framer, Bricks, Breakdance, Oxygen, Kadence), studying how each one connects designs to content, handles pagination, and supports alternating layouts
2. UX audit: ran an 11-frame heuristic audit of the older Loop Grid, scoring it against established usability principles to pinpoint exactly where users got stuck
3. Feature design: designed the full Loop Collection widget, from connecting content and the template UI to alternating-template mode and every pagination type
4. Cross-functional alignment: partnered with product and engineering to pressure-test feasibility and sequence the build, so the spec was something the team could actually ship
5. Spec delivery: produced fully annotated specs with reusable design-system components, edge cases, empty states, and copy, ready for engineering
Problem Statement
A loop is one of the hardest things to get right in any website builder, because it asks a non-technical user to think a little like a developer: connect a design to a source of content, decide which pieces of information show where, and control how dozens or hundreds of items render on a page. Get it wrong and the whole layout breaks.
The older Loop Grid was powerful but notorious for being confusing. Users repeatedly struggled with the same three things: understanding how their content connects to the template they designed, setting up alternating designs (a common but advanced layout), and adding pagination without breaking the page.
V4 was a clean-slate redesign. Rather than carry the old patterns over just because they were familiar, the goal was something a first-time user could understand on day one while still giving power users the full control they expect. That tension, radical simplicity for newcomers without stripping depth from pros, was the central problem I owned and the lens for every decision that followed.
Competitive Research Foundation
Because the loop is such a high-value, widely-used feature, almost every builder ships its own version, so I benchmarked the experience across seven of them. I looked at how each tool connects a design to live content, how it assigns templates, how it lets you give different items different designs, and how it handles pagination.
The research surfaced a few shared patterns and one consistent failure: alternating templates are almost always either buried deep in advanced settings or missing entirely. Most tools simply avoid the hard parts. That was a clear opening for V4 to do the difficult things well and, just as importantly, make them usable.
Pagination Sub-Feature
Pagination is how a long list gets split across pages instead of loading all at once. Visitors expect it to just work, but each style behaves differently and carries its own edge cases. Loop Collection supports the three patterns people actually reach for:
Numbered: classic page-by-page navigation (1, 2, 3 and so on), with configurable count and style
Load More: a button that adds the next batch of items to the current view
Infinite Scroll: new items load automatically as the visitor scrolls
Each mode has its own settings panel and carefully designed states for when there are no more results or while the next batch is loading, all built on the editor's shared design system so it stays consistent with the rest of V4.
Future Features
Dynamic Filtering
Allow users to expose client-side filters to their visitors, letting end-users filter collection output by category, tag, or custom taxonomy without a page reload
Template Library Integration
Enable users to browse and import community-built Loop Collection templates directly from the Elementor template library
Analytics Mode
Surface basic engagement data (impressions, clicks per item) for Loop Collections used in A/B testing scenarios
