booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Scroll Image

Scroll Image

Preview Widget
Preview Widget
Getting Started
Content
Action
Image & Icon Styling

More Widgets

• Modern Image
• Showcase Image
• Hotspot Image
• Image Comparison

# Getting started

The scroll image widget from Booster Addons is a great tool to display long images on your website with its scrolling effect.Choose from different layouts and style your images.

Let's go over the possibilities provided by this widget.

Content

The content section is where you will select your image and setup the layout and animation settings.

  • Choose Image : Select or upload the desired image.Note that in order to use this widget to its full potential, it is recommended to use long vertical images.
  • Layout :  Choose either the simple layout or the device frame layout if you want to use a device ( a laptop for example) as the scrolling container
  • Min Height : Set the height of the image container.
  • Duration : Control the scroll animation duration.The higher this number, the slower the animation.
  • Animation Timing : Select one of the multiple animation timing available.For example, if you want the animation to start fast and slow down at the end.

Action

The action section is going to be used to define an action when clicking on the image.

  • Choose Action : Select the link option if you want to specify a link to a web page or lightbox option if you want to pop up the image on click.
  • Enable Icon : Enable the use of an icon and select one from the options provided.Note that when the icon is enabled, the action will only be triggered by clicking on the icon and not the image.
  • Link : This option is only displayed when the link action is selected.Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.

Styling

Under the styling tab section, you will have the tools to style the widget image and icon.

  • Image Styling

Change the image shape and add borders and shadows.

-Normal & Hover : Select​ which image state you want to customize.Normal for the idle state and hover for when the image is being hovered.Note that all the remaining options of this section will only affect the selected state.

-Radius, Border & Box Shadow : Customize the image radius to change its shape and add a border and a box shadow to add even more design to this element.

  • Icon Styling

Control everything about your icon, apply a custom icon & background sizes.

-Sizes : Control the size for both the icon and icon background.

-Icon Alignement : Horizontally align the icon inside the image container.

-Icon Position : Vertically align the icon inside the image container.

-Icon Margins & Radius : You can have even more control over the icon position by changing the margins values and you can also change the icon shape with the radius control.

-Colors : You can change the color for both the icon and icon background.Note that these options can also be changed for the hover state of the icon.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Morocco our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020