LESSON 18

Repeaters.

Display dynamic content using this multi-box layouting tool. Repeaters on Editor X are built using flexbox technology, so your layout automatically adjusts to every screen size. An ideal use case could be a team page where you display unique profiles with uniform styling.

Repeater on Editor X with 3 items in a row, displaying a team with photos and images.
A repeater is being added to the canvas from the Add panel.

Adding a Repeater.

Find a selection of Repeaters in the Add panel under Layout Tools

Repeater with images and text about music equipment. The layout panel is open and the display type is being chosen.

Display types.

Arrange the containers—known as items—in Cards, a List or a Slider. To choose your preferred layout, select your Repeater, and from the floating action bar, click Change Layout. You can make a different layout choice for each breakpoint.

A repeater is on the canvas with only text inside, before it's populated with image content and buttons. The Manage Items panel is open.

Managing items.

Duplicate or delete individual items by selecting Repeater from the blue breadcrumbs and clicking Manage Items. From this panel, you can also drag and drop items to reorder them.

The repeater is now populated with images and text. The floating action bar is open.

Populating your Repeater.

Manually add data to each item of your Repeater, or sync data behind the scenes using a database.

Customizing items.

You can display different data in each item, including images, text and links. However, if you add or remove elements, or make any style and position changes, this affects all items. To update the styling of items, select the element you want to customize and click the Design icon from the floating action bar.

TRY IT YOURSELF

Exercise on Repeaters.

​Open Academy X from desktop to complete this exercise.

01

Add an element. Drag in a button and place it in the bottom center of one of the items of the Repeater. Notice that it appears in the same position on all items.

02

Data vs. style. Customize the text on one of the buttons and notice that it does not repeat on all items. Change the color of the button and see the effect.

03

 Add more items. Select Repeater from the blue breadcrumbs and from the floating action bar, click Manage Items. Select Duplicate Item to add a new one and drag the items to change their order. 

04

Chang the layout. Move to the mobile breakpoint. Select Repeater from the blue breadcrumbs and from the floating action bar, click Change Layout. Choose a display type and notice the change does not affect larger breakpoints.

Watch related videos.

Editor X

The rest is up to you.

Label that shows that this page was created on Editor X