Hey – I’m Kayla from here at Wix Studio.
This video is all about how to use Repeaters.
A Repeater is a layout tool you can use to add multiple elements to your site that have a uniform design and layout, but different content.
I’ll show you how to add a Repeater, create a uniform layout or add an “AB” design pattern, and adjust per breakpoint. Let’s go.
I’ll start by adding a Repeater from the Add panel under Layout tools.
I have these boxes here, called items. I can click Add item in the floating panel to add more, or go to Manage items in the Inspector.
Here, under Layout, you can change up how many items are in each row under this toggle.
And if you turn this toggle off, the number of items per row can automatically wrap based on the width of the repeater and the items inside
From under Layout you can change the Repeater’s display type, its direction, and you can add gaps between the items.
And for some layouts like this Card layout, you can choose how your items are aligned with this dropdown here.
Next up, I can control the layout of the individual Repeater items.
Any change I make to the design or layout of one item – like when I add and position a new element – affects all the other items.
If I add a few more elements, or make any design changes, that’s also reflected on all other items.
What doesn’t change from one item to another is the content itself. So I can change the headline and paragraphs so each item has its own unique content. But they all keep the same design and layout.
To make things a little more interesting here, I’m going to create an alternating design across these items.
I’ll select the Repeater, and under Layout I can toggle this setting on to set an AB design pattern. Every other item highlights for a second – these are the “B” items.
When I go to Manage items, they’re all assigned – A, B, A, B. Even if I delete an item they’ll change to keep that pattern.
I’ll design the B items to show this more clearly.
There we go.
Let’s see what happens if I delete this A item.
My items shifted their design. This second one – which was a B – changed to the A design but kept the same content. And the rest of them did as well.
I’ll undo that and the items change again to fit the pattern.
It’s always going to retain this AB design pattern, even if I reorder items.
CHANGING AN A/B PATTERN ACROSS BREAKPOINTS
Applying or removing the AB design pattern is a global change.
If I want them to all have a uniform design on mobile, instead of toggling it off I can just redesign the B items to match the design of A.
If I toggle the AB setting off, the B design I created gets erased from all breakpoints. If I turn it back on again, I need to redesign the B items from scratch.
One last thing to mention, you can populate a repeater with content from your CMS, and manage dynamic content using collections, without affecting the design you’ve set up.
Which is especially useful if you’re creating a design with a lot of items.
There you go — that’s how to use a Repeater to display content in either a uniform design or alternating one.
See you next time.
