3D Ring Gallery [+ only]
A rotatable gallery of images arranged in a 3D ring.
Note: The section this module is added to should have its Content Alignment set to Full width.
View a live demo of this module.
Content
- Add as many images as you want
- Edit the instructions text that appears on hover.
Styles
- Set colors for the instructions text.
- Adjust details of the ring’s dimensions and appearance.
Usage Guide
The 3D Ring Gallery module creates an interactive, eye-catching display that’s perfect for showcasing portfolios, product collections, or team photos on your HubSpot pages. This premium module works exceptionally well on landing pages, about pages, and service showcase pages where you want to create a memorable visual experience that encourages visitor engagement.
When you drag this module into your page editor, you’ll want to position it in a section where it can truly shine. The full-width requirement isn’t just a suggestion—the 3D rotation effect needs adequate horizontal space to display properly across all device sizes. Consider placing it as a hero section or featured content area rather than in narrow sidebars or multi-column layouts.
Adding your images through the content settings is straightforward, but choosing the right images makes all the difference. Use high-quality photos with consistent dimensions for the smoothest rotation effect. Images with similar lighting and composition create a more cohesive gallery experience. You can upload directly through HubSpot’s file manager or select from your existing media library.
The hover instructions you customize will guide visitors on how to interact with the gallery. Keep this text concise but clear—something like “Click and drag to rotate” or “Explore our portfolio” works well. This instruction text appears as an overlay, so choose colors in the style settings that provide sufficient contrast against your images.
For optimal performance, limit your gallery to 8-12 images. While the module supports more, too many images can slow the rotation animation and overwhelm visitors. The 3D effect is subtle but effective—it adds depth without being distracting, making it suitable for professional service websites where you want to maintain credibility while showcasing visual content.