Introduction

You can scroll or drag in all directions with this addon. Scroll Slider can feel very different depending on the scroll type you choose.

Infinite repeats the layout, so visitors can keep moving left, right, up and down without reaching an edge.

Zoom & Pan lets visitors move around a larger layout and zoom in or out.

Galaxy Zoom turns Gridder rows into zoom layers and creates a deeper zooming movement.

Tile-Globe uses your Gridder layout for a globe-like tiled movement.

Get the Addon

There are two ways to get the Addon.

You can buy it:

Buy for €29

Or, go to laytheme's Instagram.

Now add this post ⬇️ to your story and tag @laytheme.

Now wait for a DM by us, we'll send the download link to you!

How to Install & Activate

After you got the .zip file, you can install the Addon.

Make sure to use the latest version of Lay Theme for the Addon to work!

Simply go to "Plugins" → "Add Plugin" → "Upload Plugin" and choose the .zip file. Click "Install Now", then "Activate Plugin".

Now go to "Lay Options" → "Scroll Slider Addon". Enable the Addon and choose if the Scroll Slider checkbox should appear when you edit pages, projects or news posts.

Then edit a page or project and enable Scroll Slider for that layout.

The Scroll Slider Addon is not an element you add to your Gridder. It is just something you enable for a page, just like the Lightbox Addon or Fullscreen Slider Addon.

Now of course, you need content on your page. You can add for example images, videos and project thumbnails to your layout.

The "Tile-Globe" only supports images.

Place Many Images

When you add images, you can hold the Option key on Mac or the Alt key on Windows to place all of them at the same time.

This is especially useful for Scroll Slider pages, because you can build a full image feed or moodboard much faster instead of inserting every image one by one.

Scroll Types

Scroll Slider now has different scroll types. This is the main setting that decides how the page behaves.

Normal lets visitors drag and scroll freely in all directions.

Infinite repeats the layout so visitors can keep moving left, right, up and down without reaching an edge.

Zoom & Pan lets visitors move around and zoom into the layout. You can set the minimum, maximum and starting zoom.

Galaxy Zoom treats every Gridder row as a zoom layer. Use several rows in the Gridder, then set auto scroll, scroll speed, starting position and blur out.

Tile-Globe uses your Gridder layout for a globe-like tiled movement. You can set auto scroll, scroll speed and direction. This scroll type only supports images.

Scroll-Type Settings

Depending on the scroll type, the Scroll-Type-Settings section contains extra controls like random order, small movement on mouse move, parallax, movement type, velocity, auto scroll, scroll speed or zoom values.

For example, Parallax can make bigger images move faster, while small movement on mouse move adds a subtle reaction to the cursor.

Layout

For the layout, choose between Random Layout and Layout created in Gridder.

Use Random Layout when you want Scroll Slider to place and size elements automatically. Use Layout created in Gridder when you want your Gridder rows and element positions to define the composition, or when you use larger elements like Thumbnail Grids, News Elements, Project Indexes or Element Grids.

Random Layout Settings

Random Layout is a fast way to get started. Scroll Slider sizes and spaces your elements automatically, but keeps them inside the ranges you set.

You can set the space around the grid, randomized widths for landscape and portrait elements, and the randomized space between elements. These settings exist separately for desktop, tablet and phone.

The video shows the fast workflow: enable Scroll Slider, add many images, hold Option on Mac or Alt on Windows to place them all at the same time, then let Random Layout place them differently on the frontend than they appear in the Gridder.

Starting Animation

When you land on a page that has the Scroll Slider enabled, you can use a starting animation so visitors understand they can move around. Choose no animation, fade, zoom in or zoom out, then set the zoom amount, duration and easing.

Congratulations!

That's it! You just learned how to use the Scroll Slider Addon.

Take a look at our Instagram for more tips.