How to Use the 3D Grid Marquee Widget in Elementor

What is the 3D Grid Marquee widget?

The 3D Grid Marquee widget displays a collection of images in an automatically scrolling, dynamic grid layout that features a distinct 3D perspective effect. It’s a visually striking way to showcase a gallery of images, giving the illusion of depth and movement on your page.

Common use case

Use the 3D Grid Marquee widget on a landing page hero section or a prominent area on your About Us page to create an engaging visual display of product shots, company culture photos, or client logos that continuously grabs the visitor’s attention.

Additional use cases

• Portfolio Showcase: Create a dynamic, self-scrolling gallery of project thumbnails on a portfolio page.
• Event Photo Highlights: Display a stream of photos from a recent event or conference on a dedicated event landing page.
• Product Feature Display: Showcase various angles or details of a new product release in a modern, animated way.

Requirements

To use the Smart Tabs widget, you need to have the following:

• You need the Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our installation guide.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well. The Elementor Page Builder runs on WordPress.

Add the widget

To add the Smart Tabs widget to your Elementor-powered website, follow these simple steps:

1. Navigate to the Elementor editor for the page you want to edit.
2. In the widgets panel, search for the 3d Grid Marquee widget.
3. Drag the widget to your desired location on the page.

Video

See a video demonstrating the widget in action.

Settings for the 3D Grid Marquee widget

The widget is configured using three main tabs: Content, Style, and Advanced.

Content tab

The Content tab manages the image selection, grid structure, and animation details.

Contents

1. Columns: Set the number of columns for the grid (e.g., 3 Columns).
2. Image Selection: Upload or select the images for the grid. A recommended maximum of 20 images is noted.
3. Image Resolution: Choose the size of the images used in the marquee (e.g., Medium – 300 x 300).
4. Aspect Ratio: Define the proportion of the image (e.g., 4:3).
5. Show Divider: Toggle the display of a divider line between image cells.
6. Light Box: Toggle on/off to open images in a full-screen overlay on click.
7. Gaps: Adjust the spacing (in pixels) between columns and rows.

Additional Options

1. Animation: Select the scroll direction and style (e.g., Alternate, Right, Left).
2. Speed: Set the speed of the animation. Higher numbers mean faster movement.
3. Pause on Hover: Toggle whether the marquee animation stops when a user hovers over it.

Style tab

The Style tab lets you control the visual appearance of the grid, images, and dividers.

Layout

1. Section Height: Set the overall height of the widget container using various units (e.g., vh).
2. Rotate: Apply a rotation transformation to the entire grid for a unique 3D angle.
3. Tilt (Top-Bottom): Adjust the vertical tilt perspective of the grid.
4. Tilt (Left-Right): Adjust the horizontal tilt perspective of the grid.
5. Adjustment: Fine-tune the perspective depth of the 3D effect.

Image

1. Width: Set the maximum width for the images within the grid cells.
2. Rotate: Apply a rotation to the individual images (separate from the grid rotation).
3. Border Type: Select a border type (e.g., Solid, Default).
4. Border Radius: Round the corners of the individual images.
5. Box Shadow: Add a shadow effect to the images.
6. CSS Filters: Apply visual filters like brightness, contrast, and saturation to the images.

Divider

1. Type: Choose the style of the divider line (e.g., Solid, Dashed, Dotted).
2. Width: Set the thickness of the divider line.
3. Color: Select the color of the divider line.

Advanced tab

The Advanced tab controls standard Elementor options like responsiveness, layout, and motion effects.

1. Layout: Control z-index, CSS ID, and CSS Classes.
2. Motion Effects: Add scroll or mouse effects, entrance animations, and sticky positioning.
3. Transform: Adjust container rotation, offset, scale, skew, and flip.
4. Background: Set a background color or image for the widget container.
5. Border: Add a border, box shadow, or border radius to the widget container.
6. Mask: Apply a shape mask to the widget content.
7. Responsive: Control widget visibility across different devices (desktop, tablet, mobile).
8. Attributes: Set custom attributes for the wrapper element. (Pro Feature)
9. Custom CSS: Add custom CSS code to the widget. (Pro Feature)
10. Marquee Custom CSS: Add marquee custom CSS code to the widget. (Pro Feature)

Frequently Asked Questions (FAQ)

Does the 3D Grid Marquee widget work with any WordPress theme?

Yes. The widget works seamlessly with any theme that supports Elementor, including Hello Elementor, Astra, OceanWP, and others. For best results, ensure your theme follows standard coding practices and is fully responsive.

---

Will the 3D effect slow down my website?

The widget is optimized for performance, but heavy use of large, high-resolution images may impact loading times. It’s recommended to optimize your images using tools like TinyPNG before uploading.

---

Can I duplicate or reuse my marquee settings on other pages?

Yes. You can right-click on the widget and choose Save as Template in the Elementor editor. Then, import the same template into other pages or sites using the My Templates library.