Elementor Image Scroll Effects with Premium Addons (Showcase Mockups, Demos & Portfolios)

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)

fZcRhv kGaFCFYL1uXd3IWzMUg3tWzuF 14lqjnNsuxLKuHbbZvEcWtFTtJ6zyw6aTZG 4dQAfqpAmcEE tbHNS0eLsPO4PUC7SKcNS FN53ZuPv1eaUtmSS2e9U53ZpCnwmQOnL

Under widgets and addons, find the image scroll widget and enable it (make sure it’s green), (00:55)

W zUXP93HbQYWRyuFZcHXC2r9uVqpZqqwowARxnOYh ryOgfjRA95scgZhKeUKZbjJs7GiXIuCnHV2 4R4kDDXoDONpFgxP zNrQ9Tdn6 m5sw4bDYhuIY5BbGxqO76usRQMhX a

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)

joKPFBC5HAFSEb6BCQP25RVbWQtKOC98ft3IzTb
SIzQxfBJyVg

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)

SpzpPgPvND4Aa6W rs1PJlaOZt2 HLnIzbA sNrQIIPfpZ jY3D U9N561FgpARucXN0IcmYr nIMBsJaA4RCzp8fpWZuJ 2mxFcE2EufO E IJWBypP8Ikaca58D5A4JqD2Be16

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)

KymxX2AVqps D

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).

aOQO ki95MsKLGBc3XiVqd0XUsKACtnR2Kj4 hqzn Uk8OHiIeicFEa47oUaHgz1wCo 2unRatcpGvkIDz5jtiQT

Duplicate the column then delete the last column. 

Select the image scroll widget and add an image from your Library (03:57).

QuUW8w7GbKS1NfwQ5dMIhLjOjJkCHd MSTQ6aFW83ipJvSf vU9LhNPBpOqnBkpf7KtNWv7B6YcdyHUpoIg 5P HwJdaYVjlIU c1KPFYprXqV2Y2VkkNvle 36K6cUKkzKXYoBf

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).

cXNXCjfIcRd3fM640cw7m01VC1fYlfTmd88er3bpmLJ89XuYdD6QESWv8nglg iJQeGNclRfDNaSipyjYxFirkH 2 lmjfhxQzQeAIBLzivjXTxNH6XaM TMopp8pUtrrX0LJCqQ

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)G a aof4kH39Vt 6ioAQHinX TQh7Dr5CJQFXgBxGTrbWCpshW NlehXW4XttBGjpvtf 0zbw aKG0iPb1LX38uWMsbTDvPdO7xGudGen

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).

Elementor Image Scroll Effects Responsive Settings

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).

1Saf0yP4dpZmFIUHiArK62l9eaFA1XwVUU

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)

I5ylWjW8DMel40t VIz2M Tk1G rDoNLBRddqK9V7tO0mIvzPEi2dE8obBqEyyDw5cmZeIyRNUUtsuaJWtFVXyPetJ22vJvJ tyOV6XAaBFH 4g4Qn rFAoGii MFvZKSl x1j r

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.

8vlN8zHvanmVKxyfsW F9h Wr bKd 0uChBu5IuWCwNE h
Ej7QhSx 7v3jMN5BWKtnFuI4UVudt0

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.

f bjFdsN0dK95doYlxi2uAEnXgV2I kUbJwP1B4GKPT 9KXeKQ3 yFpJQsyxw2lU0VIjIW7vsDUEpLg8OtH

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users