Layouter.

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.