Repeater

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.

Adding a Repeater

To add a Repeater, choose from the selection of Repeaters available in the Add panel under Layout tools and drag one onto the canvas.

Inside the Editor X workspace, the Add panel is open. Layout Tools are selected, then Layouters, showing a range of preset options ready to drag onto the canvas.

Choosing a display type

To choose your preferred Repeater layout, select the Repeater and, from the floating action bar or the Inspector panel, choose an option from the Display type dropdown. You’ll see options for Cards, List, Slider and Grid Cells. You can also make a different layout choice for each breakpoint.

A blank Layouter is on the canvas and there is a dropdown menu showing different display types. The Slides option is highlighted

Managing items

In the Inspector panel, click on the 3 dots next to Manage items to enter the Manage items panel. From there you can add, duplicate, rename and delete items.

In the Inspector panel, the cursor is selecting Left to Right as the direction of choice

Customizing items

If you add or remove elements or make any design, position or layout changes to one Repeater item, these will affect all the other items in the Repeater. You can display multiple different elements in each Repeater item by adding them to one item from the Add panel. You can also adjust the grid of one item, which will affect each item.

In the Inspector panel, the number 1 has been typed in the field controlling how many items are in view at once

Populating your Repeater

You can populate a Repeater by manually adding data to each item, or you can sync data with the Repeater behind the scenes using the built-in Editor X CMS.

In the Inspector panel, the Navigation dropdown is open, showing the option to add Arrows, Buttons or Text

Follow these steps in the editor

Open exercise template →

Add an element. From the Add panel, drag a paragraph to the bottom row of the Repeater. Then, set the element’s width to 80% in the Inspector panel. Notice that the element appears in the same position on all items.
Change the color of the text. Edit the text and choose a font color for it. Notice how this change affected all items in the Repeater as well.
Change the text. Add different text to each paragraph in the Repeater. Note that this does not repeat across all items.
Add an item. Select the Repeater and, from the Inspector panel, click on the 3 dots next to Manage items. Click Add item. The item that you’ve added will now automatically have the same design as the other Repeater items.
Change the layout. Move to the mobile breakpoint. Select the Repeater and, from the floating action bar, choose Slider from the Display type dropdown.
Preview the behavior across breakpoints. Drag the handles of the canvas to see how the Repeater behaves across all breakpoints. Notice that changing the display type of the Repeater to Slider on mobile did not affect the display on larger breakpoints.

Transcript

Let’s explore how to use Repeaters on Editor X.

A Repeater is a layouting tool based on flexbox technology that can be used to display dynamic content in multiple boxes that are designed in the same way.

We can use Repeaters to create team profiles, feature lists, project galleries and more. Items in Repeaters also automatically adjust to fit every screen size.

Let’s dive into how Repeaters work in detail.

In the Add panel, under Layout tools, you’ll find a selection of Repeaters from customizable blank wireframes to intricate, pre-designed layouts.

Let’s choose a blank layout.

The responsive boxes inside Repeaters are called items. In the Inspector panel, you can add an item, duplicate an item or rename items. Note that, if we rename an item, all the other items in the Repeater will be renamed too. You can also delete items from here.

You can also set a Repeater’s alignment and adjust its sizing here.

In the Display section, you can choose from 4 display types: Cards, List, Slider and Grid Cells. Under Direction, you can also set the direction of the items from left to right or right to left.

The Set items per row setting is toggled on, so the number of items here will define the maximum number of items shown per row on every screen size. Since the number of items is set to 3, we can resize the screen and see this in action.

You can also define the gaps between the items in a Repeater here.

You can adjust an items’ placement under Item alignment here. This allows you to control the way items are aligned on each row of a Repeater.

Since this Repeater has the Set items per row setting active, you can’t set a custom width for each item.

However, if you toggle that option off, the number of items will be set based on the width of the Repeater and its items. The Repeater will adjust in this way on every viewport.

Plus, you can then choose size options for the items in the Repeater like width and minimum width. Note that design and layout changes to one item will affect all the other items in the Repeater.

We can delete the fourth item for now, directly on the canvas. When the Set items per row option is toggled off, the items will wrap as the screen size changes.

Now let’s move on to designing the items in the Repeater. You can adjust the grid of an item to position the content within it exactly as you’d like.

When you make an adjustment like this to an item, the changes will apply to all items in the Repeater.

For example, if you adjust the height of each row in the grid, that adjustment will also apply to all the items. This also goes for changes like applying padding.

To add an image to an item, simply drag an image onto the canvas from the Add panel. Let’s click this button to stretch the image to fill the top row of the item. Notice how this change applies to all the items.

You can add multiple different types of elements to Repeater items. Here, we’ll add a title and a button. In the same way that previous style changes have applied across all items, these new elements will be mirrored across the items too. If we edit these elements, such as changing the button’s corners, those changes will also affect all the items.

Now that the layout is complete, let’s resize the canvas to check how it looks across breakpoints. Notice how the items wrap as the screen size changes.

You can also customize the layout of the Repeater per breakpoint to make the design more suitable for different screen sizes. For example, you can change the Display type to Slider on mobile like so.

You can choose to display the items in the Slider from left to right or top to bottom under Direction.

For the Slider, you can also set the Scroll snap alignment. This controls where the slider will stop after one swipe. You can choose whether or not you want to display a scroll bar as well.

Notice that these changes on mobile haven’t affected the display on desktop. This is because of the cascading rule, meaning changes made on bigger breakpoints will be reflected on smaller breakpoints, but not the other way around.

Next we’ll cover how to populate the content in a Repeater item. To update the image placeholder, just select the element and click Change Image. Notice that this change didn’t apply to all the items. As we mentioned at the start of this tutorial, with Repeaters, you can add specific data to each item you’ve set up but the layout and design will remain the same across the items.

You’ll see the same behavior when we update this text and the button text.

This is one way to update the content in the Repeater—directly on the canvas.

But you can also populate a Repeater’s content using the content manager which you can add to the site from the Add panel. The content manager is an integrated CMS that allows you to manage dynamic content behind the scenes using collections, without affecting the design you’ve set up. This is particularly useful if you’re dealing with a large number of items.

We’ve already created and set up a collection here called “Products”. This product collection includes the fields with the content we want to display.

Choose the Connect to data option here to connect the Repeater items with the relevant fields in our collection of product data. You can think of the dataset we’re adding here as the bridge between the collection and the Repeater.

This Repeater had 3 items, but now it has 5 because the Repeater serves as a layout guide for however much content you want to display from the data collection.

Once we connect elements to their relevant fields in the collection, all the items in the Repeater will become populated according to the data in the collection.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.