Filterable Gallery Widget

The Filterable Gallery Widget from RTM Elements allows you to showcase your images in a clean, organized gallery that visitors can filter by category. It’s perfect for portfolios, product collections, or project showcases where visitors want to find what they’re looking for quickly.

With the Filterable Gallery Widget, you can add your images, group them into categories, and customize the layout and style to match your website’s design.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Filterable Gallery 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 Filterable Gallery Widget

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

Step 3 — Setting the Filterable Gallery Widget

• In the Content tab, you will find several sections to set up your gallery.
• Gallery: Create your image groups, such as Portrait, Fashion, or Studio, and add images to each one. Each group becomes a filter button.
• You can also set the image resolution and the order in which images appear.

• Layout: Choose how your gallery is arranged: Uniform Grid, Masonry, or Mosaic.
• Then set the number of columns, the image ratio, and the gap between images.

• Item Content: Decide what happens when visitors click an image, such as opening it in a lightbox.
• You can also show a caption on hover, choose the title and subtitle (taken from your Media Library), and add a hover effect like zoom in.

• Filter Bar: Shows or hides the filter buttons, the “All” button, and the number of images in each group.
• You can also set the alignment, keep the buttons on one scrollable line on mobile, and choose how images animate while filtering.

• Lightbox: Shows or hides the caption and image counter in the lightbox, and lets visitors loop through the images.
• The lightbox only shows images that match the active filter.

Step 4 — Custom Style the Filterable Gallery Widget

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

• Caption: Set the caption alignment, padding, and background, plus the fonts, colors, and spacing of the title and subtitle.

• Filter Bar: Adjust the distance between the filter bar and the gallery and the gap between buttons.
• You can also style the bar’s background, padding, border, and shadow, and customize the buttons’ fonts, padding, colors, and borders for Normal, Hover, and Active states.

• Lightbox: Controls the full-screen image preview that opens when visitors click an image.
• Show or hide the caption and image counter, and let visitors loop through the images.
• The lightbox only shows images that match the active filter.

Step 5 — Publish the Template

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