Interactive Showcase Widget

The Interactive Showcase Widget from RTM Elements allows you to present your content in an engaging, interactive way on your Elementor website. It’s perfect for highlighting projects, products, or services that visitors can explore with a simple hover or click.

With the Interactive Showcase Widget, you can add your items, choose how they interact, and customize the style to match your website’s design.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Interactive Showcase Widget is part of the RTMElements Addon, which is available with a Rometheme PRO subscription. Before you begin, make sure you have:

1. Installed and activated RTMKit on your WordPress website. (Go to Plugins → Add New Plugin, search for RTMKit, then click Install Now and Activate).
2. Subscribed to Rometheme PRO and connected your account to RTMKit.
   📘 Getting Started with Rometheme PRO
3. Activated the RTMElements Addon from WordPress Dashboard → RTMKit → Features → Addons → Install & Activate RTM Elements.
   📘 How to Activate Addons

Step 2 — Add the Interactive Showcase Widget

• Open the page with Elementor.
• Find RTM Elements → Interactive Showcase.
• Or search for Interactive Showcase in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Interactive Showcase Widget

• In the Content tab, you will find several sections to set up your showcase.
• Gallery: Choose your image source. Select Gallery to pick multiple images at once, or Custom Items to add each item with its own title, category, and link. You can also set the image resolution and order.

• Layout: Choose one of 11 layouts: Grid / Masonry / Mosaic, Accordion Reveal, Parallax Columns, Marquee Columns, Loop Strip, Infinite Canvas, 3D Sphere, Arc Wheel, 3D Ring Carousel, Scroll Zoom, or Text Hover Reveal.
• Then set the image ratio, gap, and height. Each layout also has its own settings, such as the wheel radius and motion speed for Arc Wheel.

• Center Text: Adds a large text over the gallery, for example CREATIVE. Leave it empty to hide it.

• Item Content: Decide what happens when visitors click an item, such as opening it in a lightbox.
• You can also show a large preview when visitors hover over an item, and add effects like zoom in, dimming other images, or a soft ambient glow behind the gallery.

• Info Panel: Shows or hides an info panel with details about each item.

• Lightbox: Controls the full-screen preview that opens when visitors click an item.
• Show or hide the caption and image counter, and let visitors loop through the images.
• Note: The lightbox only opens on the live page, not inside the Elementor editor. Use Preview to test it.

Step 4 — Custom Style the Interactive Showcase Widget

• Go to the Style tab to customize the showcase’s appearance to match your website’s design.
• Item: Style each image, including the background shown while it loads, the transition speed and zoom amount, and the overlay color, CSS filters, border, corner radius, and shadow, with separate Normal and Hover styles.

• Center Text: Set the text’s font, color, stroke, and width. You can place the text in front of or behind the gallery, add a blend mode for a creative effect, and adjust its vertical position.

• Lightbox: Customize the lightbox backdrop, caption color, and image corners, plus the size, position, colors, and border of the navigation arrows.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make your Interactive Showcase live on your website.