GSAP Extensions Gallery Filter Estimated reading: 5 minutes 9 views Gallery Filter lets you organize your images by category, making everything easier to view and manage. After turning it on from the settings, you can start adding filters, pick a layout style, and choose how your images should look. It’s a simple way to build a neat and clear gallery, whether you’re showing photos, projects, or products. Requirement Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Gallery Filter Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension Tab. Under Flips, toggle on Gallery Filter. Step 1: Insert and Activate Gallery First, click on the ‘+’ icon, then type “Filterable Gallery” in the search box. Once you click on the Filterable gallery, you will find three options: Layer, Filter, and Gallery. Each setting helps you improve your gallery filter design. For example, I’ll start with Layer, but you can start with any of them. Step 2: Adjust Layout Style and Columns Choose a layout style to decide how your images will be shown, then pick how many columns you want to display items in each row. This makes your gallery look neat and well-arranged. Layout Now, in the Layout Style section, you will find two options: Grid and Masonry. The Grid setting ensures that all gallery items are placed in equal-sized rows and columns. On the other hand, Masonry arranges items in columns, but their heights can vary based on the actual height of the images. For example, I chose Grid, but you can pick either one based on your preference. The Column setting lets you choose how many items line up in each row of your gallery. For example, I selected 3, but you can choose any number you prefer. Step 3: Set Up Filters and Gallery Items Filters let you organize your gallery so visitors can easily find what they’re looking for. Just add your categories, link them to each item, and set up the layout the way you want. Filter Enable Filter: The Enable Filter setting has two options: Show and Hide. If you select Hide, the filter item settings won’t be visible. However, if you select Show, the filter item settings will appear. Filter All labels: In the Filter All Labels setting, you’ll see options like ‘All’ set as the default, but you can change it to something like Show All, Everything, or All Projects. In this case, I kept it as the default, but you can customize it however you prefer. Filter Items: The Filter Items settings let you manage and organize the categories (or filters) that appear above your gallery. You can also set a title based on your preference. For example, I named it Item 1, Item 2, and Item 3 in categories. Gallary In the Gallery settings, you can add and manage the images or items that will appear in the gallery. You can include multiple images for each item. For example, I set it to show three or four images per item, but you can add as many as you like. Filter Name: After that, click on any item and enter the filter name you already set in the Filter Items settings. In my case, I used “Item 1,” “Item 2,” and “Item 3,” so I will enter the names “Item 1,” “Item 2,” and “Item 3” three or four times in the Gallery Filter Name field for each item I want to display under that filter. Type: In type settings, you will find options like Image, Audio, and Video. For example, I have picked an image since I like to show my audience to image gallery on my site. However, you can choose anything. Lightbox: The Lightbox setting lets you control whether images open in a pop-up (overlay view) when clicked. If you turn it on, the image will open in a pop-up. If you keep it off, the image won’t open in a pop-up. I set it to Show, but you can choose whatever works best for you. Masonry Class: It offers four options: Default, Big, Horizontal, and Vertical. If you choose Default, the items will stay at their regular size. Big makes the items larger than usual. Horizontal makes the items wider but keeps the height the same. Vertical makes the items taller and stretches them across two rows. For example, I chose Big, but you can pick any option that works best for you. Final Result You Did It You’ve successfully finished setting up the Gallery Filter. Now your content is grouped and easy to browse, with filters that let visitors jump right to what they’re looking for. Whether it’s images, designs, or anything else, the gallery feels smooth and organized. Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
