booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Filter Showcase Images

Filter Showcase Images

Preview Widget
Preview Widget
Getting Started
Content & Container Styling
Masonry & Filter Styling

More Widgets

• Filter Scroll Images
• Interactive Carousel
• Team Slider
• Image Card Slider

# Getting started

The filter showcase images widget uses a filters system that you can use to organize your images.This, combined with  multiple stylish overlay effects .will allow you to create astonishing images list.The possibility to use text for both the image and overlay is also available.

Lets go over the options provided in this amazing widget.


This is where you will manage your images list.You can add an image to the list by clicking on the add item button at the bottom of this section.Each image has the following options.

  • Image : This is where you will upload or select the desired image.
  • Heading :  A title text that gives a global insight about what you are showcasing.
  • Sub-heading : An optional small more detailed text about your topic.
  • Overlay Text : A description text that gives more information about what you want to showcase.This element will be hidden until you hover over the widget.
  • Custom Classes : This is where you will define this specific image filters.If you want to use more than one filter you can separate them by a single comma.Example : nature,sport,world-tour.
  • Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.

Note that the global filters list can be defined in the filter global settings available in the style tab.


Under the cettings section, you will be able to control the position of the content and to change the hover style.  

  • Content Alignement : Change the horizontal alignement for your heading and subheading.The options available here are left, center, and right.
  • Overlay Hover Style :  Change the hover overlay style.Choose from over 10 effects each with a unique design.


The styling tab is going to be used to style all the filter showcase images elements.You can change the text style, customize the containers, setup your filters, and more.

  • Content Styling

Customize the text properties for the heading, sub heading, and overlay text.Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Customize the color of your text elements including the overlay text.Note that this can also be changed for the hover state.

-Distances : control the margins & distances between each element.

  • Container Styling

Control everything about the container design.

-Overlay Background Color : Customize the images overlay background color.Using a good color mix between the image, text color and overlay color is best.

-Normal & Hover : Select​ which widget state you want to customize.Normal for the idle state of the the image and hover for when the image is being hovered.Note that all the remaining options of this section will only affect the selected state.

-Borders & Shadows : Add a border for the container with the possibility to customize the width and color, and apply a box shadow to create unique effects.You can also change the container radius if you want a more rounded shape 

  • Distances : Control the space between the heading and sub heading by changing the margins values.

Masonry & Filter Styling

The masonry and filter sections are going to be used to change  the masonry layout and effects as well as to setup the filters settings and styling.

  • Masonry Global Settings

Change the number of columns, enable the gutter, and change the show effect.

-Columns Number : Set the number of columns that you want to use for the masonry layout.

-Enable Gutter & Gutter Value : Enable this if you want the images to be separated by white space.You can also change the gutter value to control separating space.

-Show Effect : Change the images showing effect.Select one of the many animations available.

  • Filter Global Settings

Setup your filters list, align the filters section, and change the filter links typography.

-Enable Filter : Enable the use of filters for your images.

-Filter Labels : Specify the filters that you want to use.The filters name have to be separated by a comma.

- : Control the horizontal alignement for the filters links section.

-: Change the font family, font size, and all the other text properties for the filters links.

-Enable All Button: Enable the use of an 'all images' button.When the user clicks on this button, all the images in the list will be displayed.

-: Choose if you want the all button to appear on the left or right side of the filters links.

  • Filter Link Styling

Customize the links style.Change colors and add borders and box shadow.

-Link Padding & Margin : Control the links inner and outer space by changing the padding and margin values.

-Normal & Active: Select​ which link state you want to customize.Normal for the idle state of the links and active for when a link is currently selected and active.Note that all the remaining options of this section will only affect the selected state.

-Colors : Customize the color for both the links text and the background with the possible use of gradient colors for the background.

-Radius, Border & Box Shadow : Customize the links background radius to change their shape and add a border and a box shadow to add even more design.

  • Filter Container Styling

You have the full control over the style of both the links outer  and inner containers.

-Container & Inner : Select which container to style.The container option allows you to style  the whole space around the links section while the inner option is only for the links text container.

-Background : Customize the selected container background & choose to apply either a solid background color or a gradient color.

-Radius, Borders & Shadows : Control  the border for each container and apply custom box shadows.The option to change the shape of the container is also possible by changing the border radius value.

-Padding & Margin : Change the padding and margin values to control the inner and outer space for each container.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020