top of page

Building a slider using a Layouter

Learn how we built a slider section to showcase 3D type in our mid-year 2022 digital design trends report. Technical Designer Ido Hershkovits explains how to recreate the design using a Layouter set to the slides display type.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

Ido Hershkovits

Technical Designer

I’m a web developer and Editor X specialist based in Tel Aviv. I work closely alongside the Editor X marketing team as a coding and responsive design expert. In my spare time, I’m a passionate musician and producer.

How we built the 3D lettering slider on our digital trends page.

Part 1: Section structure.

Let’s start with how the section is structured. The section is divided into a grid with one column and 3 rows. Each row also has a container that is stretched to fill it. In the middle row, where we’re going to create our slider, we’ve applied a 3X3 grid to lay out our elements. Also note, the section has padding of 35 pixels to the left and right.

Part 2: Set up the Layouter.

  1. Open the Add panel

  2. Drag a Layouter into the container in the middle row of the section

  3. From the floating action bar, change the Layouter type to Slides

  4. Delete one item from the Layouter (there should be a total of 3)

  5. Remove the background color from each item

  6. From the Inspector panel, under Location in grid cells, make sure the Layouter spans all grid cells in the container

  7. Stretch it to fill the container

Part 3: Add media.

  1. With the first Layouter item selected, add the first image

  2. Align the image to the center and middle

  3. Set its width to 50%

  4. Dock it to the top of the Layouter item

  5. Set the top margin to 4%

  6. Scroll to the second layouter item and add the second image

  7. Align it to the center and middle

  8. Set the width to 90%

  9. Dock it to the top with a 12.5% top margin

  10. Add the third image to the third Layouter item

  11. Center the image

  12. Set the image width to 80%

  13. Dock to the center with zero margins

Result: When we preview and scroll side-to-side, the images slide. The design is also responsive. Now we need a few finishing touches.

Part 4: Finalize the design.

First, we want to hide the scroll bar.

  1. Select the Layouter

  2. From the Inspector panel, switch off the Show scrollbar toggle

Next, you might have noticed that when the items slide in and out to the left and right, they cut out at the edge of the container instead of at the edge of the screen. This is because the Layouter is stretched to fill the container, but the section has 35px padding on each side. Let’s see how to change this:

  1. Select the Layouter

  2. Set the left and right margins to -35px

Finally, let’s add some navigation arrows to scroll between items.

  1. With the Layouter selected, open the Inspector panel

  2. Under Navigation, click Add and choose Arrows

  3. Select the Prev button and choose Change Basic Shape from the floating action bar

  4. Choose the arrow we’re using in this design

  5. Under Adjust, choose Flip horizontally

  6. Resize the arrow to 75px width and 65px height

  7. Do the same for the Next button

  8. Change the position of both arrows so they’re pinned to the container instead of to the Layouter. Now we can position them within the grid

  9. Position the arrows to the right side of the top middle grid cell

  10. Dock each of them to the right

  11. Set their sizing to Fluid

Final result: We have a fully responsive slideshow created using a slides Layouter.



Working with Layouters: When, why & how


Pinned position


Building a custom badge using a Multi-state box

bottom of page