The Divi Image Scroll module for Divi Builder is designed to create interactive scrolling effects for images, enhancing visual engagement and user interaction on your Divi website. It allows you to display images in a way that reveals different parts of the image as the user scrolls, creating a dynamic and immersive experience.
Content
Content
- Upload Image – It allows you to add the image you want to use for the scroll effect. You can choose an image from your media library or upload a new one, setting the visual content for the interactive scrolling experience.
- Image Alt Text -The “Image Alt Text” setting lets you provide descriptive text for the uploaded image. This is important for accessibility, helping screen readers describe the image to users with visual impairments, and also aids in SEO by providing context for search engines.
- Show Direction Icon – This option enables or disables the display of directional arrows on the image. These icons guide users on how to interact with the scrolling effect, indicating the direction in which the image can be scrolled.
- Select Icon – It allows you to choose a specific icon for the direction arrows. You can pick from a range of icons or upload a custom one to fit your design and enhance user navigation.
- Use Icon Image – Lets you use an image instead of a standard icon for directional arrows. This provides the flexibility to incorporate custom visuals for a more personalized or branded user experience.
- Use Icon Animation – The “Use Icon Animation” setting allows you to apply animations to the directional icons. This can include effects like fading, bouncing, or sliding to make the icons more engaging and draw users’ attention to the scroll controls.
Settings
- Scroll type – This option determines how the image scrolls in response to user interaction. You can choose from various scroll types, such as horizontal or vertical scrolling, to create the desired effect for navigating through the image.
- Scroll Direction – The “Scroll Direction” setting specifies the direction in which the image scrolls. You can select from options like up, down, left, or right, allowing you to control the flow of the scroll effect and how users interact with the image.
- Scroll Speed – The “Scroll Speed” option adjusts the rate at which the image scrolls when the user interacts with it. You can set a faster or slower scroll speed to match the desired visual effect and ensure a smooth user experience.
Design
Design tab of the Image Scroll module.
Image
The “Image” design options allow you to style the main image used in the scroll effect. You can adjust settings such as the image size, border, and spacing to ensure it fits well within your design and provides the desired visual impact.
Overly
The “Overlay” design settings let you apply a semi-transparent overlay on top of the image. You can customize the overlay’s color, opacity, and blend mode to create visual effects or ensure that text and icons placed on top of the image are readable.
Icon
The “Icon” design options control the appearance of the directional icons used for scrolling. You can customize the icon’s size, color, and style to ensure it stands out and fits seamlessly with the overall design of your image scroll effect.