Let’s explore how to create responsive layouts with flexbox technology on Editor X. We’ll tackle three different layouting tools built with flexbox: Stack, Layouter and Repeater.
Flexbox auto-stacks and wraps your content, so your site looks great at every viewport size.
Your open canvas on Editor X lets you drag and drop elements freely so when you resize the viewport, some of them can overlap.
To control the relationship between elements that are arranged above and below each other, multi-select them, and press Stack.
This places them all inside a flex container, which understands their order. Now when we resize the screen, the elements maintain space between them.
For a more structured section design, use a layouter, which you’ll find in the Add panel under Layout Tools.
A layouter is a smart layout tool that’s made up of a collection of responsive containers.
Drag the handles to see how your content seamlessly reorganizes across viewports.
Elements within each container automatically stack, so they keep their space from each other.
On an image, click Stretch to fill the entire container. To reorder the containers, just drag and drop them.
Use these plus and minus icons to change the relative width of each container.
The layouter automatically chooses the best layout for every viewport. And if you prefer, you can choose your own.
Let’s change this layout on mobile. Click Manage Layout, and choose the display you want.
For the final section, let’s add a Repeater. A Repeater is a layout that’s made up of many identical containers.
It’s ideal for a product page, where you want to display a lot of content with uniform styling.
To add content to your Repeater, first create a collection. To do this, add the Content Manager from the Add panel and create a new collection.
After you fill in all the fields, use a dataset to connect this collection to your repeater. Choose the collection you want and click create.
To display content from your collection on the Repeater, you’ll need to connect each component of the Repeater with the relevant field in your collection.
Connect the image to the image field, the title to the product name field — and finally the button to the product page field.
Now when you click Preview, your repeater displays all the content from your collection.
You can go back and change the styling of any component in your Repeater and it will automatically apply to all.
As with all the flexbox layouts, your content will seamlessly adjust across viewports—so your site design is instantly optimized for every screen.
Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.
