Scroll image module for divi brings several features that allow you to define the image scroll directions, interaction conditions, frame, and more. Let’s discuss each of the feature tabs in detail.
Content Tab
Image
Inside the image, you can upload photos, which will be scrolled. You can use any type of image that WordPress supports. In addition to that, you will find the following features:
- Min-Height: With this, you can define the minimum height of your image. By default, we kept this at 450px.
- Frame: Enable frame to use image scroll effect inside different frames. Here we have 16 frames like browsers, desktops, laptops, mobiles, etc.
- Overlay: You can use overlay color over the image with this feature. By default, an overlay will stay, and it will fade out on hover.
Scroll Settings
Under the scroll setting, you can change the scroll direction. You also have the option to choose transition duration, delay and speed curve.
Scroll types you can choose-
- Top to Bottom
- Bottom to Top
- Left to Right
- Right to Left
- Off (No Scroll)
TIPS: Keep the scroll effect off and use a different image in the lightbox. This way, you can easily have a different image in the lightbox for Divi.
Icon
Turn this on and use an image or icon over the scrolled image in different stages. The icon will bring some settings-
- Use Image as Icon: Instead of an icon, you can use an image here.
- Icon: If you choose to use icons, here is the list of icons for you.
- Icon/Image position: Set the image or icon in 9 different places over your main image.
- Show on Hover: Icon/image will be visible only on hover.
- Hide on Hover: Icon/image will be disabled on hover.
- Icon Motion: Turning this ON will show a motion animation on your icon.
Caption
Turn this ON, then add a caption and description for the image. Here we have a text field just like the text module.
Badge
Turn ON the badge, and you will get some features to modify your badge for a scrolling image.
- Badge Text: Here is the text area you can use to give your badge text.
- Badge Icon: If you want to keep an icon with the text, you can select one from here.
- Icon Placement: Placement option for the icon. It can be left or right of your text.
- Badge Position: The badge can be set in 9 different positions.
- Show on Hover: To set the badge to appear on hover, use this show on hover option.
- Hide on Hover: On hover, you can hide this from your photo as well.
Lightbox & Link
Under The Lightbox & Link Setting, you can use either the lightbox or link.
- Lightbox: If you activate the lightbox feature, you can set the same or different image for the lightbox view.
- Custom Link: On the other hand, you can add a custom link to navigate the user to another page while clicking on the module.
Design Tab
Image Design
With the Image Design feature, you can make the image rounded and use borders. Also, you can change the border style, width, and box shadows.
Icon Design
The Icon Design feature helps to change the icon color, size, and background. In addition, you can add borders, make it rounded in the corner and apply box shadow.
Caption Design
Caption Design is a dedicated feature for designing the caption. It can change the caption background with color, gradient, or image. Also, allow you to add a border with corner rounding and box shadow effects.
Caption Text
With this feature, you can change the caption text font, weight, style, alignment, color, and size with a text-shadow effect. If you use any link, ordering, numbering, or quote in the text, you can do the same for them.
Caption Heading
All the customizing facilities under the Caption Text are available in the Caption Heading.
Note: this feature only works if you use heading tags (H1-H6) in the caption.
Badge Design
The Badge Design lets you change the badge background, icon color, and size with other typography customizations and all the other necessary customization options.
Custom Spacing
The custom spacing option allows you to add margin padding in almost any element of the scroll image. Specifically, we have margin padding for Icon, Caption, Badge, Badge icons, etc.
Advanced Tab
The features in the Advanced tab are covered in the General document.
