Scrolling Image

Content Controls

Content

This section lets you add and customize the main components of your scrolling image element, including the image itself, an optional caption, an icon, and a link for user interaction.

  • Image – Select and upload the image you want to feature in this element.
  • Caption – Add a text caption that will appear with your image.
  • Icon – Choose an icon to accompany your image, adding a visual cue or decorative element.
  • Link – Insert a hyperlink to make your image clickable, leading to another page or resource.

Design Controls

Image

Customize the appearance of your scrolling image, including its size, scroll duration, and border style, for a more engaging visual effect.

  • Width – Adjust the width of your image to fit your layout design.
  • Height – Modify the height of your image to ensure it aligns well with other page elements.
  • Duration – Set how long it takes for the image to scroll across the screen.
  • Borders – Style the borders of your image, including border radius, styling options, and shadow effects for added depth and prominence.
    • Radius – Round the corners of your image’s border to soften its appearance.
    • Styling – Customize the border style, color, and width to match your design aesthetic.
    • Shadow – Add a shadow effect to make your image stand out on the page.

Icon

Enhance the icon associated with your scrolling image, adjusting its color, size, and position to complement the overall design.

  • Color – Choose a color for your icon to ensure it is visible and matches your design scheme.
  • Size – Change the size of the icon to balance it with the image and other elements.
  • Hover Offset – Adjust the icon’s position when hovered over, adding a dynamic interactive element.

Caption

Customize the caption of your scrolling image, including its position, full-width setting, typography, background color, and spacing for a cohesive look.

  • Position – Choose where the caption will appear relative to the image.
  • Full Width – Toggle whether the caption should span the full width of the image.
  • Typography – Style the font, size, color, and other typography aspects of the caption.
  • Background – Select a background color for the caption to enhance readability and visual appeal.
  • Spacing – Adjust the margin and padding around the caption for optimal positioning and layout.
    • Margin – Set the external spacing around the caption.
    • Padding – Define the internal spacing within the caption area.

Spacing

Control the external spacing of the entire scrolling image element, ensuring it fits seamlessly within your page’s layout.

  • Margin Top – Set the top margin to control space above the scrolling image.
  • Margin Bottom – Adjust the bottom margin to manage space below the scrolling image.