top of page

Sliding gallery with a Layouter

Editor X Team


Apr 20, 2023

Sliding gallery with a Layouter

A project portfolio with a sliding gallery that site visitors can click through.

Design: Sari Lorber, Linor Pinto, Tech design: Anastasia Logacheva

Learn how to create this design in 15 steps

1. Add a container to a blank section and stretch it.

image of step 1

2. Apply a 3x1 grid to the container. 

image of step 2

3. Drag a Layouter from the Add panel into the middle grid cell and stretch it to fill the cell. 

image of step 3

4. Add an image to each Layouter item. Stretch each one to fill the item. 

image of step 4

5. Select the Layouter. From the dropdown in the floating menu, change the display type to Slides

image of step 5

6. From the Inspector panel add navigation, then choose Arrows. Change the arrows by selecting each one and clicking Change Basic Shape

image of step 6

7. Set the width and height of both arrows to 80px.

8. Select the “previous” arrow, and from the Inspector panel, make sure the position type is set to Pinned. Then pin it to the section. Do the same for the “next” arrow. 

image of step 8

9. Add a text element and position it next to the “previous” arrow. Change the text to “Previous Project.” Set the width of the text element to Max content. Duplicate the text element, edit the duplicate to say “Next Project” and position it beside the “next” arrow. 

image of step 9

10. Hold down the shift key and select the “previous” arrow and the “Previous Project” text element. In the floating menu, choose Place in Container

image of step 10

11. Select the container and set its width to Max content. Apply a 2x1 grid. From the Inspector panel, add a 20px gap between the grid columns. 

12. Set the width of each grid column to Max content. Make sure the text and arrow elements are positioned in the correct grid cell from the Inspector panel. 

image of step 12

13. Repeat steps 10-12 for the “next” arrow and “Next Project” text element. 

14. Select the container with the “previous” arrow and text and use the alignment icons in the Inspector panel to align it to the vertical center and left side. Add a left margin of 20px. Select the “next” container, center it vertically and align it to the right with a right margin of 20px

image of step 14

15. Preview the result. The images are laid out in a gallery and you can click to scroll between them. 

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page