Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

,

Jul 11, 2022

Slider Section With 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.

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.

How we built the 3D lettering slider on our digital trends page.
Part 1: Section structure.
Part 2: Set up the Layouter.
Part 3: Add media.
Part 4: Finalize the design.
Ido Hershkovits profile picture

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.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

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
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
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.

See all results ▶