The Multiple Scroll Image module, developed by Divigrid, offers users the ability to showcase a collection of scrolling images with customizable layouts, directions, and design options. This module provides unique and interactive ways to present image galleries, portfolios, or featured images. It’s a flexible solution for users who need a responsive and visually appealing image scroll feature.

In this documentation, we’ll cover every aspect of customizing the Scroll Multiple Image Module, including content, image, and design settings.

Scroll Multiple Image Item Customization

Title & Description

In this section, you can add textual content for each scrolling image item.

  • Title: Add a title for the image. This title will appear alongside the image and can be customized in terms of typography and placement.
  • Description: Add a description to provide additional context for the image. This could be a short caption or a more detailed explanation, depending on the needs of the site.

Image & Icon

In addition to the textual content, you have the option to upload an image and customize its display.

  • Upload Image: This is where you can upload the image that will be part of the scrolling collection. Multiple images can be uploaded and displayed in either horizontal or vertical scroll layouts.
  • Image Alt: Add an alt text for accessibility purposes. This alt text is also important for SEO, ensuring that your images are properly indexed by search engines.

Content Tab Customization

The Content Tab is where you can manage the core information related to each image in the scrolling gallery. It allows you to add multiple images, along with titles and descriptions, and configure scrolling settings for a dynamic, user-friendly experience.

Add New Item

In the Add New Item section, users can add new images to the scrolling collection. Each new image item can have its own set of content, images, and icons. This provides a flexible structure for building rich, interactive scroll sections.

Configuration

This section provides control over how your images scroll. The settings here allow you to manage the direction, speed, and spacing of the scrolling images.

Scroll Type

You can choose between Horizontal or Vertical scroll types, depending on how you want your images to move.

  • Horizontal Scroll: This type moves the images left and right across the screen, making it ideal for wide images or collections that need to be viewed in a side-by-side manner.
  • Vertical Scroll: This type moves the images up and down, which is useful for galleries or items that are tall rather than wide.

Scroll Direction Type

  • Horizontal Scroll:

    • Left to Right: The images will begin on the left side of the module and scroll to the right.
    • Right to Left: The images will start on the right side and scroll toward the left.

  • Vertical Scroll:

    • Top to Bottom: The images will scroll from the top of the module to the bottom.
    • Bottom to Top: The images will start at the bottom and scroll upward.

[ Tip: Choose a scroll direction that complements the flow of your content. ]

Scroll Duration (Milliseconds)

The Scroll Duration setting controls how long it takes for an image to scroll from one end of the screen to the other. This is measured in milliseconds, giving you precise control over the speed.

[ Tip: Consider the amount of content on each image. If you have lengthy descriptions or important details, you may want to extend the scroll duration so that users have time to read everything. ]

Item Spacing

The Item Spacing setting adjusts the amount of space between each image as it scrolls. This can be particularly useful when you have multiple images displayed at once or when you want to create a cleaner, less cluttered layout.

Design Tab Customization

The Design Tab is where you can fine-tune the appearance of your images, content, and items within the scroll module. This tab provides advanced styling options for each element, ensuring that your scroll looks exactly the way you want it.

Image Style

The Image Style section provides options to customize how the images are displayed within the module.

Use Image as Background (Switch)

This option lets you decide whether the uploaded image should be used as the background for the item. When enabled, the image will stretch across the entire background of the image container, with the title and description appearing as an overlay.

Image Position

You can position the image within the item in four ways:

  • Left
  • Right
  • Top
  • Bottom

This setting controls the alignment of the image relative to other content within the item.

[ Tip: If you're using a horizontal scroll with text descriptions, placing the image on the left or right of the text creates a professional-looking layout that is easy to read and visually balanced. ]

Alignment

This setting controls the alignment of the image within its container. The options are:

  • Left

  • Center

  • Right

Image Width & Height

You can manually set the width and height of the images to control how much space they occupy within the item. This is useful for standardizing the size of all images or creating custom layouts where certain images are larger than others.

Image Spacing

Adjust the spacing around the image. This can help separate the image from other elements within the item, such as the title and description.

Image Border Styles

You can apply a variety of borders to your images, including solid, dotted, dashed, or none. You can also customize the border width and color.

Image Box Shadow

This setting allows you to apply a shadow effect to the image, which can create a sense of depth and make the image stand out more on the page. You can adjust the shadow’s color, spread, blur, and position.

Font Style Customization

The Scroll Image module allows you to customize the Title and Description fonts independently, giving you precise control over how each text element appears.

Title Font Style

In the Title Font Style section, you can customize the font settings for the title text:

  • Font Family: Choose from a wide variety of fonts to match your website’s branding.
  • Font Weight: Adjust the weight of the text (e.g., Light, Normal, Bold).
  • Alignment: Align the text to the left, right, or center, depending on your layout.
  • Letter Spacing: Increase or decrease the spacing between letters to achieve your desired typographic look.
  • Line Height: Adjust the space between lines of text for better readability.
  • Color: Choose the color of the title text.
  • Text Shadow: Add a shadow behind the text to create depth and highlight the title.

Description Font Style

Similarly, the Description Font Style offers a wide range of options for customizing the description text. This ensures that your description is styled in a way that complements the overall design of the scroll multiple images.

Item Settings

Alignment

Control the alignment of each item within the module. You can choose from the standard options:

  • Left
  • Center
  • Right

Item Width & height

Manually adjust the width and height of each item. This gives you fine control over the layout, allowing you to create a consistent look or highlight specific images by making them larger.

Item Flex-basis

Flex-basis is used in CSS Flexbox layouts to define the default size of an element before any remaining space is distributed. You can adjust this setting to control how the items within the scroll behave in flexible containers.

Item Background

The Item Background is one of the most customizable elements in the Scroll multiple Image module. You can choose between a solid color, gradient color, or even use an image as the background for your item, giving it a unique look that suits your website’s style.

  • Item Background Color: You can set a solid color for the item background, choosing from any color in the palette or using custom hex codes. This is ideal if you want a bold, uniform badge that stands out.

  • Item Background Gradient Color: If a single color feels too flat, you can add a gradient background to the item. The Gradient Color feature lets you choose a primary and secondary color, as well as define the direction of the gradient (horizontal, vertical, diagonal). This gives the item a more dynamic and polished look.

  • Item Background Image: For even more customization, you can use an image as the item’s background. This is useful for brands that want to use logos, textures, or patterns within the item. The Background Image setting allows you to upload any image, adjust its size, and control its position to ensure it fits well within the item area.

Overlay Settings

Use Overlay on Item (Switch)

When activated, this switch adds an overlay to the entire item, covering the image, title, and description. This is often used to apply a color overlay that makes the text stand out more clearly against the image.

The Use Overlay switch allows you to enable or disable the overlay feature on the scroll image. Once activated, you can access a range of options to customize the overlay’s appearance, including color, gradient, and even the addition of an icon.

  • Overlay Background Color: You can set a solid color for the overlay. This is especially useful for images where you want to dim or highlight certain areas to make text or badges more legible. The color opacity can also be adjusted to fine-tune the visibility of the underlying image.

  • Overlay Background Gradient Color: Similar to the badge, you can apply a gradient to the overlay for a more sophisticated look. The gradient can include a primary and secondary color, and you can adjust the gradient direction to match the design.

  • Overlay Background Image: For a more creative overlay, you can use an image. This feature allows you to layer an image over your scroll image, providing extra texture or thematic elements to enhance the design. The background image can be adjusted for size and position to ensure it fits perfectly within the overlay area.

Use Overlay Icon

Enabling the Overlay Icon places an icon in the center of the scroll multiple image. This is ideal for creating a clickable image or adding a visual cue to the image. Once activated, you’ll have access to customization options for the icon’s style and background.

  • Icon Selection: You can choose from a wide variety of icons, such as arrows, play buttons, or custom icons, to place in the center of the overlay. This is perfect for creating interactive elements on the image, like linking to a video or another page.

  • Icon Color: You can customize the color of the icon to ensure it stands out against the overlay and the image. Choose from the default color palette or use custom hex codes to match your site’s design scheme.

  • Icon Background: The background of the icon is customizable with three options:

    • Background Color: Set a solid color for the background of the icon to make it stand out more.
    • Background Gradient Color: Add a gradient to the background, similar to the item, for a more polished and layered look.
    • Background Image: For even more design flexibility, you can use an image as the icon’s background.

Overlay Icon Spacing

The Icon Spacing settings allow you to control how much space surrounds the overlay icon. This ensures that the icon does not feel cramped or too close to the edges of the scroll image.

  • Padding: Control the space inside the overlay icon background, ensuring that the icon is properly balanced within its background area.

  • Margin: Adjust the margin to position the icon appropriately on the scroll image.

Overlay Border

The Overlay Border settings allow you to add a border around the entire overlay, creating a defined space between the image and the surrounding page elements. You can adjust the border’s width, style, and color for full control.

Overlay Box Shadow

Lastly, the Overlay Box Shadow allows you to create depth around the overlay by adding shadows. This feature helps the overlay stand out, especially if you want it to hover above the image content.

The Multiple Scroll Image Module from Divigrid provides powerful and flexible options for creating scrolling image galleries with dynamic customization. From content settings to intricate design tweaks, this module offers everything you need to make your images stand out. Whether you want to showcase a horizontal or vertical image gallery, this module gives you complete control over scroll direction, speed, item spacing, and style. With user-friendly controls and endless customization possibilities, it is a must-have for creating engaging, interactive image displays on any Divi-powered website.

Frequently Asked Questions (FAQs)

Q. What is the maximum number of items I can add to the scroll?

There is no hard limit, but the more items you add, the more careful you need to be with performance and load times.

Q. Is the Scroll Multiple Image module mobile responsive?

Yes, the module is fully responsive and allows you to customize the design and settings for different screen sizes, such as desktop, tablet, and mobile.

Q. Can I add custom CSS to the Scroll Multiple Image module?

Yes, in the Advanced tab, you can input custom CSS to further refine the design and behavior of the module.

Q. What image formats are supported by the Scroll Multiple Image module?

The module supports common image formats such as JPG, JPEG, PNG, and GIF.