LESSON 07

Layouter.

Let your content seamlessly adjust to every screen size using Flexbox technology—ideal for structured layouts with multiple boxes.

Resize your browser to see the Layouter in action.

Adding a layouter.

Find Layouters in the Add panel under Layout Tools. Drag one onto your canvas to begin.

4 display types.

At each breakpoint, you can choose to lay out your items in a row, column, mosaic or slider. Drag items to reorder and the Layouter will automatically adjust.

Items.

Each item in the Layouter is a separate container, so you can drag and attach elements to it. You can also apply a grid and position elements exactly where you want.

Adding & removing items.

To add a new item, drag a container into the Layouter and place your cursor between 2 items. You can also duplicate an existing one. Want to remove a container? Simply drag it outside or delete it.

Reordering items.

Drag and drop items to reorder your content. The Layouter automatically adjusts to accommodate any changes.

Resizing items.

Click +/- to change the width of any item. You can also adjust the width and height of items from the Inspector panel.

TRY IT YOURSELF

Exercise on Layouter.

​Open Academy X from desktop to complete this exercise.

01

Resizing items. Select the top right item and +/- icons will appear. Click + to increase the width of the item. Next select the bottom left item and increase its width.

02

Reordering items. Drag the top right item to the bottom left corner, over the hot zone. The Layouter automatically adjusts to the change.

03

Changing the layout. Move to the tablet view from the Breakpoints navigator above. Select an item and click Layouter from the breadcrumbs, then click Manage Layout. Change the display type to Column.

04

Adding an item. Grab the  black container at the bottom and drag it into the Layouter.

Watch related videos.