Repeater.

Use a Repeater to display dynamic content in multiple boxes with uniform styling. Add and manage items, customize the layout and optimize the Repeater for every breakpoint.

Use a Repeater to display dynamic content in multiple boxes with uniform styling. Add and manage items, customize the layout and optimize the Repeater for every breakpoint.

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.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Blue background with a Repeater layout over it. There is a white icon in the middle.

LESSONS & EXERCISES

Repeater

Discover how to display content in a multi-box, flex layout with uniform styling.

Thumbnail indicating the content manager. Green background with 3 paler green boxes over it and a black icon in the middle.

LESSONS & EXERCISES

Content Manager

See how to create and store heavy or dynamic site content using database collections.

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶