In this elementor image scroll effects tutorial, I’m going to show you how to add horizontal and vertical scroll images to your Elementor website using Premium Addons for Elementor.
The elementor image scroll widget from the premium addons enables you to add vertical auto scroll images on hover as well as horizontal image scroll on mouse scroll or on hover. This widget comes in the free version.
You can use custom png images as shape masks for your scrolling image.
You can use the image scroll widget on your portfolio page or showcase product demos, among other things.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Image Scroll Effects Tutorial
What You’ll Need to Create a Image Scroll In Elementor
For this tutorial, you’re going to need the Premium Addons for Elementor plugin where you’ll find the Image Scroll widget.
To install Premium Addons for Elementor:
On your Elementor/WordPress dashboard, go to Plugins > Add New, search for premium addons then install and activate it.
After it is activated it shows on your dashboard menu, then you can click on Widgets and Addons (00:47)
Under widgets and addons, find the image scroll widget and enable it (make sure it’s green), (00:55)
Tip: You can disable all the other widgets you don’t need at the moment to reduce the load on your Elementor website.
To Read: How to Add Google Invisible reCAPTCHA in WordPress
Add a Vertical Image Scroll in Elementor
After you activate your image scroll widget, go to your Pages section and open up any page (Edit with Elementor) where you want to add your scroll image.
In your Elementor editor, click the (+) icon to add a new section with 2 columns (01:19)
In the Edit Section area on the left, under Layout set Content Width to boxed, and the Width to 1100 pixels. Under HTML Tag, select the section option.
Go to the Widgets area, find the Premium Image Scroll widget and drag it to your section (01:35)
Go to the Image Settings under Content in the Edit Premium Image Scroll area, under Image select an image from your Media Library, and insert it.
Set the Image Size to full and Image Height to 500 pixels.
Enable the Mask Image Shape option then select and insert a mask image from your library. Set the Mask Size to cover and the Mask Position to the top center.
With your image scroll selected, go to Advanced > Background, add yellow for the Background color (02:33)
To add the image scroll effect:
Select the widget and go to Content > Advanced Settings, set the Direction to vertical and the Trigger to hover.
Set the Speed to 3.
Enable the Overlay option.
Under Style > Overlay Color, select a color of your choice, set the Opacity to 1.
On the Container option just leave everything on default (03:33)
Select the column and go to Advanced, remove all the Paddings (set them to 0).
Duplicate the column then delete the last column.
Select the image scroll widget and add an image from your Library (03:57).
Select the section and go to Advanced, unlink the Padding then set 2EM on the top and 5EM for the bottom, left and right.
Click the Update button at the bottom, then preview your changes (04:17).
To Read: Elementor Slide in Image on Hover using Premium Addons
Vertical Image Scroll Responsive Settings
Back in your Elementor editor, go to Responsive Mode (04:29)
Select the Tablet device;
You’ll realize the scroll effect doesn’t show on hover.
Select the scroll image widget, under Content, set the Image Height to 280 pixels.
Do the same for the second scroll widget (05:00).
On the Mobile device;
Select the section, under Advanced go to Padding, unlink the values then set 3EM at the bottom and 1EM for the top, left, and right (05:22).
Add a Horizontal Image Scroll Effect in Elementor
Copy the section, then use the (+) icon to create a new section, paste the section you copied into it. Delete the image widgets.
Go to the Widgets area and drag the Premium Image Scroll widget to your section, choose and insert an image from your Media Library.
Select the image, under Content, set the Image Height to 500 pixels.
Enable the Link option, for someone to be able to read more details about the image.
On the Link/URL option, select URL, under URL add a hashtag (#), then under Link Title, add the text that will appear when someone clicks on the image; “Read about my process”.
Under Advanced Settings set Direction to Horizontal.
Set the Image Fit to cover and the Trigger to mouse scroll.
Enable the Icon option; that’s the mouse icon that will be used to scroll through the image. Someone can either use a mouse or the horizontal slider to scroll through the image.
Set the Icon Size to 80 pixels.
Under Style, set Opacity to 1 and for Container, leave everything on default (07:18).
Copy the scroll image widget and paste it into the second column.
Select the image, under Content, choose another image from your media library.
Set the Image Height to 600 pixels. Do the same for the first image.
For the second image, under Link > URL, add the text that you want to appear when someone clicks on the image.
When you’re done, update and preview (07:49)
To Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus
Horizontal Image Scroll Responsive Settings
In your Responsive mode;
Select the Tablet and Mobile devices and make sure the horizontal scroll image is working well.
Tip: If you’re wondering how to create the blob mask shape (09:15), you can use this site: haikei.app to create your SVG and PNG mask shapes.
When you open up the website, click on Start designing for free, select the Blob option on the left, then use the settings on the right to select a blob variant; solid, under shape; edit the complexity, contrast, and size to your preference.
You can also use the knob at the bottom to generate different blob options.
When you’re done you can download an SVG or PNG image file.
Also Read: Complete Elementor Contact Form 7 Setup Tutorial for Free
In closing
That’s how you add horizontal and vertical scroll images on hover or mouse scroll to your Elementor website with the Premium Addons for Elementor, as well as make your scroll images mobile and tablet friendly.
For any questions or comments about this tutorial, let me know in the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
