Image Rotator widget

The Image Rotator widget lets you display a collection of images either as a continuously scrolling image strip or as a static grid.

It works well for displaying:

  • Customer or partner logos
  • Portfolio images
  • Product imagery
  • Brand galleries
  • Press or media logos
  • Customer examples
  • Visual social proof

Images can be reordered, removed, displayed in grayscale, opened in a lightbox, and customized depending on the selected layout.

Images

The main Settings view contains all images currently included in the widget.

From here, you can:

  • Add images
  • Reorder images
  • Remove images

Add an image

Click Add to add another image to the widget.

Reorder images

Use the drag handle next to an image to change its position.

The order shown in the settings determines the order in which the images appear in the widget.

Remove an image

Click the trash icon next to an image to remove it.

💡 Tip

For the cleanest result, try to use images with similar proportions or visual weight. This is especially helpful when displaying logos or other images side by side.

Layout

The Layout setting controls how the images are displayed.

Available options:

  • Marquee (scrolling)
  • Static grid

Marquee (scrolling)

Displays the images in a continuously moving horizontal strip.

This works particularly well for:

  • Customer logos
  • Partner logos
  • Brand showcases
  • Repeating image galleries
  • Visual trust sections

When Marquee (scrolling) is selected, you can control:

  • Image height
  • Rotation speed
  • Border radius

Static grid

Displays the images in a fixed grid without scrolling.

This works well when visitors should be able to see several images at once and inspect the collection without animation.

When Static grid is selected, you can control:

  • Items per row
  • Image height
  • Border radius

💡 Tip

Use Marquee when the image collection should act as a moving visual accent. Use Static grid when visitors should be able to browse or compare the images more deliberately.

Heading

Use the Heading field to add text above the image collection.

For example:

Trusted by  

Other examples could include:

  • Our clients
  • Featured in
  • Trusted by leading brands
  • Recent projects
  • Our partners

Keep the heading short so that the images remain the main focus.

Text Style

Click Change next to Text Style to customize the appearance of the heading.

Use styling that remains consistent with the surrounding page and your website's overall typography.

Image appearance

These settings control how the images themselves are displayed.

Grayscale (color on hover)

Enable Grayscale (color on hover) to initially display the images without color.

When a visitor hovers over an image, its original colors are shown.

This can create a cleaner and more consistent appearance when the images contain many different brand colors.

💡 Tip

Grayscale works particularly well for logo collections, where many different colors can otherwise make the section feel visually busy.

Image height

Controls the displayed height of the images.

A larger value makes the images more prominent, while a smaller value creates a more compact collection.

This setting is available in both Marquee and Static grid layouts.

Border Radius

Controls how rounded the corners of the images are.

  • Lower values create sharper corners
  • Higher values create more rounded images

This setting is available in both layouts.

Marquee settings

The following setting is available when Marquee (scrolling) is selected.

Rotation speed

Controls how quickly the image strip moves across the page.

The value is displayed in seconds (s).

  • Lower value = faster movement
  • Higher value = slower movement

For example, 60s produces slower movement than a lower value.

💡 Tip

Avoid making the images move too quickly. A slower rotation generally creates a calmer visual effect and gives visitors more time to recognize each image.

Static grid settings

The following setting is available when Static grid is selected.

Items per row

Controls how many images are displayed next to each other in each row.

For example, setting Items per row to 5   displays up to five images across the row where space allows.

The ideal number depends on:

  • Image proportions
  • Number of images
  • Available page width
  • How prominent each image should be

💡 Tip

Avoid fitting too many images into each row. If individual images become difficult to recognize, reduce the number of items per row.

Enable Open image in lightbox on click to allow visitors to open an image in a larger popup view.

This can be useful for:

  • Photography
  • Portfolio work
  • Screenshots
  • Detailed product images
  • Images containing details visitors may want to inspect

For simple logo collections, a lightbox is usually unnecessary.

💡 Tip

Use Lightbox when viewing a larger version adds value. If an image is simply decorative or a small brand logo, there may be no reason to make it clickable.

Common use cases

The Image Rotator widget works particularly well for:

  • Customer logos
  • Partner logos
  • Press and media logos
  • Portfolio images
  • Product galleries
  • Brand showcases
  • Project examples
  • Customer examples
  • Photography collections
  • Visual social proof

Best practices

  • Use images with similar proportions when possible
  • Keep logo collections visually consistent
  • Use Grayscale when many different colors compete for attention
  • Avoid overly fast scrolling in the Marquee layout
  • Choose an appropriate number of Items per row in the Static grid layout
  • Keep the heading short
  • Use Lightbox only when visitors benefit from seeing a larger image
  • Choose an image height that works with the surrounding content
  • Keep border radius consistent with the rest of your website
  • Check both layouts on desktop and mobile

💡 Tip

For customer or partner logos, the Image Rotator often works best as a subtle trust element rather than the main focus of the page. Keep the presentation clean and let the images reinforce credibility without distracting from the surrounding content.

Summary

  • The Image Rotator widget displays a collection of images
  • Add, reorder, or remove images as needed
  • Choose between Marquee (scrolling) and Static grid
  • Marquee lets you control rotation speed
  • Static grid lets you control items per row
  • Both layouts let you control image height and border radius
  • Add an optional heading and customize its text style
  • Display images in grayscale with color on hover
  • Allow images to open in a Lightbox when appropriate
  • Use it for logos, galleries, portfolios, partners, and other image collections

Used well, the Image Rotator widget provides a flexible way to display multiple images using either a dynamic scrolling presentation or a structured static gallery.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.