Layouter.

Design responsive layouts with boxes that wrap at every viewport using a Layouter. Add elements, control the wrap behavior, and customize your layout per breakpoint.

Design responsive layouts with boxes that wrap at every viewport using a Layouter. Add elements, control the wrap behavior, and customize your layout per breakpoint.

Let’s explore how to design responsive layouts using a Layouter on Editor X.


A Layouter is a smart layouting tool made up of a collection of responsive containers. Built with flexbox technology, a layouter is perfect for designing modular layouts with boxes that seamlessly wrap at every viewport.


From the Add panel, under Layout Tools, you’ll find a selection of Layouters—from customizable blank wireframes, to designed layout suggestions.


You can also add a Layouter from the Add Section shortcut, here.


Let’s choose this layout.


Right out of the box, Layouters are fully responsive, so your designs will look great no matter the screen size.


The responsive boxes within your Layouter are called Items, Using the plus and minus icons, you can adjust their width by increments of 20%. This ensures that no matter how your items wrap, they will always look good in relation to each other on any given screen.


For more fine-grain control, you can adjust the size of each item from the Inspector panel on the right.


You can add elements to each item of your Layouter like text, buttons and media. Let’s grab some text and start customizing.

Now we’ll take a deeper look at the wrap behavior of the responsive boxes within your layout, and how to control it.


Take this item for example. To make sure the email address inside is always readable, let’s set a minimum width for this item.

550px should be wide enough. Ok, so now at screen sizes below 550 px, instead of getting smaller, this item will wrap to the next row. Note that all sizing options can be adjusted per breakpoint.


Drag your items by grabbing them from this icon in the top left. Or right click and select Switch Order to swap them around. All items in the Layouter will automatically adjust to accommodate changes in position.


If you’re finding it tricky to grab an item, there may be a layer on top, preventing you from selecting it.


For example, here we have a stretched image covering the item, so use these blue breadcrumbs to grab the layer you want.


You can also use the Layers panel on the left to view the hierarchy of each section and select each layer on your canvas.

As a site gets more complex, you can rename the layers to help you keep organized. For more on this, check out the Element Hierarchy and Parenting video in this series.


To add another item to this layout, select the Layouter from the blue breadcrumbs, and click Add Item. You can also duplicate an item using the right-click menu.


Now let’s resize the new item, and add a background image.

In addition to adding elements inside each item of a Layouter, you can also design the inner layout of each item—for example, by adding grids.


We’ll choose a 3x3 grid now, but you have the option to create a custom grid too.


Now we can add social links and precisely position them for each viewport.


To learn more about this, watch the Grid video in this series.

Alright, let’s take a look on tablet.


Select your Layouter and click Change Layout to manage the layout at any viewport.


Choose from 4 different display types: Column, Rows, Mosaic and Slider.


You can always adjust your content to fit the layout. Here, you can equalize proportions, auto-wrap items, adjust margins and choose the item direction.


In this mosaic layout, the items are set to auto-wrap as the screen size changes. So you can see this image jumps from the first row on desktop, to the second row on tablet.


If we toggle off Autowrap, the Layouter keeps all items in their original rows, and instead adjusts the overall sizing of items in relation to the screen size. For this design, we’ll keep Autowrap toggled on.


You can add vertical and or horizontal margins, to create space between your items, and use these arrows to change the direction in which the items are displayed and wrapped.


Let’s check it out on mobile. For some designs, a Slider display works well on this viewport. You can control the scroll direction here, — and with the Scroll snap toggle on, each swipe of the finger will lock the item into place on the screen.


For this design, the Mosaic display works best. It looks a little crowded, so let’s hide this image.


Note, we’re not deleting the item, just selecting Don’t Display - so the image is still visible on desktop and tablet.


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

NEXT VIDEOS

Video tutorial about how to use a Repeater on Editor X to display dynamic content with uniform styling.

Learn how to use a Repeater to display dynamic content with uniform styling.

Play icon
Video about designed sections on Editor X, and how they give inspiration and help you learn about responsive technologies

Add customizable wireframes & designed compositions to any site.

Play icon
Video about how to apply and customize hover interactions on Editor X.

Learn how to apply and customize interactions to any element on hover.

Play icon
Video about how to edit the style, position and behavior of images on Editor X

Learn how to add, style, replace and position images on every site page.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Blue background with the outline of a box in the middle of it. The box has alternating shaded blue lines, there is a white icon in the middle of the box. This shows stack.

LESSONS & EXERCISES

Stack

Learn how to use stack to control the vertical relationship between elements.

Blue background showing a layouter in the middle of it.

LESSONS & EXERCISES

Layouter

Get to know the Editor X Layouter, built on flexbox technology.

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
Collaboration
Arrow down icon
VIDEO LIBRARY
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.