Introduction

You can scroll or drag in all directions with this new addon!

Photos by @adamwhyte.nyc

Check out the slider in action on this website: Steve Marais Viewing Rooms. Website by @showstevethemoney

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 (9.3.8 or higher) 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 you can to go to "Lay Options" → "Scroll Slider Addon".

Here, click "Show a checkbox in the Page Edit Screen..." as you can see below:

Then, go to edit a page and click "Enable Scroll Slider here":

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.

Random Layout

The random layout setting is a great way to get started quickly!

Your images will be sized randomly, but their size will be within these minumum & maximum values which you can set here for Desktop, Tablet and Phone:

Now, even though all elements in your Gridder may be the same size:

On your website, you will get this better randomized layout:

Infinite Scroll

Enable "Scroll Type" : "Infinite" to be able to scroll left and right, up and down infinitely. This works because your images will just get repeated:

Enable Infinite Scroll here:

Zoom

Enable "Scroll Type" : "Zoom" to be able to zoom in and out! Zooms to where your mouse pointer is, also works on mobile. But this setting is not compatibile with "Infinite Scroll".

Enable Zoom here:

Starting Animation

When you land on a page that has the Scroll Slider enabled, you will see a Zoom-in animation by default. This is so people understand they can move around.

In this video, I repeatedly refresh my page, so you can see the animation:

Change the starting animation here:

Parallax

When Parallax is enabled, bigger images will move faster:

Enable Parallax here:

Small Movement on Mouse Move

A small animation when moving your mouse:

Enable this setting here:

Opacity and Scale Animations

When an image comes into view, it can have an animation. Here, we used the "interpolation" animation to animate the scale and opacity:

Set "Opacity and Scale Animations" settings here:

Congratulations!

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

Take a look at our Instagram for more tips.