Round image of the author with a thin blue line around the image

Mayara Volpe

Product Specialist

,

July 26, 2022

Pro Gallery with Infinite Loop.

Follow along with Maya as she explains how to create a design using a slider Pro Gallery to display images that slide and loop automatically. You’ll also learn how to link the Pro Gallery to a content collection to easily update the images without affecting the design.

How to create a Pro Gallery with an infinite loop.

Part 1: Set up the section.

  1. Set the header to 15vh and the section to 85vh so the two combined are 100vh

  2. Apply a 2X1 grid to the section

  3. Go to Advanced mode and adjust the left grid column to 40%, and the right grid column to 60%

  4. Adjust the row height to 85vh

  5. Add content such as a title, text and button to the left side of the grid and set to stack

  6. Center the content vertically

  7. Dock it to the left and right with 10% margins, and to the top with a 55px margin

  8. Add an arrow basic shape to the left side of the grid. You can find arrows in the Add panel under Decorative, then Arrows

Part 2: Add and adjust the Pro Gallery.

  1. From the Add panel, under Media then Pro Galleries, drag the last slider gallery into the right grid column

  2. The gallery will automatically stretch to fill the column. Click the icon in the top right corner to unstretch it

  3. Set the width to 100%

  4. Set the height to 85%

  5. Dock the gallery to the left and right with margins of zero

  6. Dock the gallery to the bottom with a 50px margin

  7. With the Pro Gallery selected, go to settings from the floating action bar

  8. From the Layout tab, choose Customize Layout

  9. Under Slideshow Settings, turn on Loop

  10. Also switch on Slide automatically, and change the slideshow to Continuous

  11. Finally, switch it to Pause on hover

  12. Under the Settings tab, change the setting for When clicking an item to Nothing happens

  13. Turn off the Heart icon so it doesn’t display

  14. Under the design tab, go to Navigation Arrows and switch them off

  15. Drag the arrow basic shape to align with the bottom of the gallery. Dock it to the right and bottom

Part 3: Change layout for tablet and mobile breakpoints.

1. At the tablet breakpoint, edit the grid so the left column in 60% and the right column is 40%

2. Move to the mobile breakpoint

3. Adjust the grid layout from 2X1 to 1X2


Note: When we make this change, we will need to adjust the Pro Gallery settings. From the Inspector panel, make sure it’s still located in the bottom grid cell.


4. Change the height of the Pro Gallery to 85vh

Part 4: Connect to the Content Manager.

  1. Click on the Content Manager icon and add it to the site. More on how to do that here

  2. When setting up the content selection, we recommend adding each image as a different field to make it easier to manage

  3. Select the Pro Gallery

  4. From the floating action bar, select Connect to Data

  5. Choose the dataset with the images you want to display

  6. Connect the image source to the image field inside the dataset collection

How to create a Pro Gallery with an infinite loop.
Part 1: Set up the section.
Part 2: Add and adjust the Pro Gallery.
Part 3: Change layout for tablet and mobile breakpoints.
Part 4: Connect to the Content Manager.
Round image of the author with a thin blue line around the image

Mayara Volpe

Product Specialist

I’m a product specialist for Editor X.  Currently, I'm studying UX/UI Design, and I have a background in graphic and web design.  My hobbies include biking, outdoor adventures, reading, and traveling.

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 ▶