top of page

“Zebra” Repeater with multi-state box

Editor X Team


Apr 20, 2023

“Zebra” Repeater with multi-state box

This innovative Repeater layout follows an A, B, A, B structure, so the image-text relationship is mirrored on each site fold.

Design: Chen Rozen, Hadar Yamini, Tech design: Eve Silber

Learn how to create this design in 13 steps

1. From the Add panel, open the Quick Add tab and add a Repeater to your main section. Stretch it so that it takes up the entire width and height of the section.

image of step 1

2. Choose the List layout from the dropdown menu in the floating action bar.

3. Add an item to the repeater so that you have at least 4 items in total.

image of step 3

4. Turn on Dev Mode. From the Add panel, under Layout Tools, add a Multi-State Box to an item. Select the multi-state box and set the width to 100%.

image of step 4

image of step 4

5. Inside the multi-state box, create a 2x1 grid

image of step 5

6. To set up the first state of the multi-state box, add text and images to each column.

image of step 6

7. From the Layers panel, select the multi-state box and click Manage States

image of step 7

8. Edit the ID of the first state and name it ‘even’. Then, click the 3 dots on the right, choose Duplicate State and rename it ‘odd’.

image of step 8

9. Set up the second state of the multi-state box. To make sure you’re working on the second state, use the Layers panel.

image of step 9

10. Switch around and place the elements in the opposite column.

image of step 10

11.  Open the built-in IDE and paste the following code:

   $w('#repeater1').forEachItem(($item, itemData, index) => {

       if (index % 2 === 0) {


       } else {





image of step 11

image of step 11

12. Make sure the element IDs match the IDs in the code. 

image of step 12

13. Preview the result. The elements will appear on opposite sides in each item.


To add dynamic content to each item in the repeater, use the Content Manager. Create a content collection, fill in the relevant fields, and add text and images for each item. Then connect it to your Repeater by creating a dataset. For more information on how to use the CMS, check out this tutorial in Academy X.  

**If you decide to populate the repeater using a database, then use the onItemReady() function in the code instead of the forEachItem() function.

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page