1. Home
  2. Docs
  3. Happy Elementor Addons P...
  4. Premium Widgets
  5. Single Image Scroll

Single Image Scroll

Bother with image scrolling on your website in an organized way? Take a glimpse at Happy Addons Pro‘s new ‘Single Image Scroll‘ widget. Now, you can smoothly scroll website images with this completely flexible widget more decent way.

Pre-requisites

To use that excellent Single Image Scroll Widget, you need the following things:

  • Elementor
  • Happy Addons
  • Happy Addons Pro

How To Use Single Image Scroll Widget

Let’s get into deep and exploring the following steps:

Step: 1

First, find the ‘Single Image Scroll‘ widget in the search bar. Then select the widget from the left side menu. Finally, drag and drop it onto the selected area. Here, we’ve added three columns to work on the Single Image Scroll.

Select Single Image Scroll Widget

Step: 2

After adding the widget in the selected area, you will get the widget content like Image, Settings, and Wrapper Link.

Content of Image Scroller

In Content–>Image, you can add a Scroller Image. Define the Image Size and Container Height.

Add images

Note: Make sure Container height/width is less than the Image’s actual height/width. Otherwise scroll will not work.

After adding images, you can set the images for the scroll. To do this, go to Content–> Settings, here you’ll get several options for settings the images like Link, Show Badge, Badge, Trigger, Scroll Type, Direction, Speed, and Indicator Icon.

Follow the below guide to add a custom link and badge in your image.

Link and Badge settings

Example of Hover & Vertical Scroll:

Let’s set Trigger–> Hover and Scroll Type–>Vertical and see how the scroll will work.

Content Hover Vertical

Example of Hover & Horizontal Scroll:

You can also set Trigger–>Hover and Scroll Type–>Horizontal and see how the scroll will work.

Content Hover Horizontal

Example of Mouse Scroll & Horizontal Scroll:

Finally, set Trigger–>Mouse Scroll and Scroll Type–>Vertical and see how the scroll will work.

Content Mouse Scroll

You can also select the Horizontal Scroll Type for Mouse Scroll option.

Step: 3

In the ‘Style‘ section, you’ll see multiple options to style the widget using Container, Image, Badge, and Indicator Icon.

Style Image Scroller

In the Style–>Container, you can easily design each container in your own style using these options Border Type, Color, Border Radius, and Box Shadow.

Style Container

Images can also be redesigned. Navigate to Style–>Image. You can set the Image Opacity and CSS Filters.

Style Image

Using these options Offset, Padding, Text Color, Background Color, Border Type, Color, Border Radius, Box Shadow, and Typography, you can make the Badges more exclusive.

Style Badge

When you select Trigger–>Mouse Scroll, you will get the Indicator Icon style option. Here, you can set the Font Size, Color, and Background of the Indicator Icon.

Style Indicator Icon

Step: 4

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Advanced Image Scroller

Here is the final preview of Single Image Scroll widget.

Final Preview

That’s it.

How can we help?