This “Subscribe” slider looks complicated with all the different things on it, but it’s easier, than you would think, so let’s check through the whole process of this slider’s creation.
The first steps are the same as for any slider. In our main screen, you have to click on the “Create slider” button, give a name to the slider and in this case the size should be 1200*850px. Since this slider will only have one slide, choose the Block type for better performance.
After your slider is created, you should add a background image for the slider and switch on the Fixed background feature which will result the parallax effect.
As your slider settings are fine, you can create a slide. You should create an empty slide as it won’t have slide background image.
Add image, text, and input layers, and position them according to your need and you will have your basic slide layout.
Now that the layout is done, you should make the input work, as it works in our demo.
The lower image has a scrolling parallax, so you should go to its layer settings, and there set the parallax depth.
To make your subscription form work, you should set the target url where the button will send the email address and also you can change the variable name accordion to your subscribe script.
The parallax effect by default interacts with your mouse cursor, and you can change that in the slider’s settings. In this case, I will use scroll parallax.
After it’s done, you need to setup the video lightbox on the left, and you can choose at the Link option of your image.
Here you will be able to choose the Lightbox, and all you have to do is to paste the YouTube link of the video and save your slide.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!