Scrollable Content

In this tutorial, we will show you how to create scrollable content in UXPin using Groups. Follow these steps to learn how to create a horizontal scroll effect.

Setting up the Design

To create a scrollable carousel in UXPin, you can upload your own images or you can use ready-to-use Data. Below, we described both ways:

Upload Images in Bulk

1. To upload multiple images at once, click Media in the left-side Toolbar or use the "I" shortcut.
2. Select the images from your computer and place them on the canvas one by one. You can also place them in existing elements on the canvas. See how to add images to elements.
3. If you want to create a vertical scroll, place them one under another. If you want to have a horizontal scroll, position them in a row.

Use Built-In Data

1. To fill existing elements with ready-to-use photos, select the elements on the canvas.
2. In the Top Bar, click Fill with Data, choose Photos and select the type of photos you want to use.
3. The elements will immediately fill up with photos.

Horizontal Scroll

1. On the canvas, select the elements that you want to have in the carousel.
2. Group the selected using the Ctrl "G" shortcut. Please remember that you can only crop content that's already grouped.
3. With the elements selected, go to the Properties Panel.
4. In the Crop section, check the Crop selected content and Horizontal scroll checkboxes.
5. Crop the selected elements.
6. Preview your design.

Vertical Scroll

1. On the canvas, select the elements that you want to have in the carousel.
2. Group the selected using the Ctrl "G" shortcut.
3. With the elements selected, go to the Properties Panel.
4. In the Crop section, check the Crop selected content and Vertical scroll checkboxes.
5. Crop the selected elements.
6. Preview your design.