1. Home
  2. Docs
  3. Creative Elements
  4. Filterable Gallery

Filterable Gallery SA Element

The Filterable Gallery widget allows you to create spectacular galleries on your WordPress website with the Elementor page builder. This awesome element allows you to make your image gallery more functional and easy to browse with a simple toggle. The Filterable Gallery SA Element for Elementor offers full control over how your images are displayed and can showcase each image individually with the Lightbox display. Here in this tutorial, you’re going to learn how to use the Filterable Gallery element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Filterable Gallery Element

 

»Content

 

Settings

⇒Items to Show: Set how many items you want to show.

⇒Animation Duration: Set the duration of the animation based on ms.

⇒Columns: Select the number of columns you want in a single row for different dimensions.

⇒Layout: Set the layout of the image gallery either grid or masonry.

: Select the caption style either overlay or card.

: Customize the hover style.

⇒Hover Transition: Set the hover transition manually.

⇒Link To: Set the gallery items link to either media or buttons.

⇒Lightbox Icon: If you prefer a link to buttons then select the lightbox icon here.

⇒Link Icon: Select the link icon.

 

Filterable Controls

⇒Enable Filter: Enable/disable the filter by selecting Yes or No.

: Enter the Gallery All label under which all of your media files will be displayed.

⇒Add Item: Add items to the filter list.

 

Gallery Items

⇒Video Gallery? Do you want a video gallery? If so, then enable the video gallery option.

⇒Control Name: Use the gallery control name from Control Settings. Separate multiple items with a comma (e.g. Gallery Item, Gallery Item 2)

⇒Item Name: Give the name to each item.

⇒Item Content: Enter the item content for each item.

⇒Image: Upload an image for the gallery.

⇒Gallery Lightbox Button? Want to show the gallery lightbox button? Enable this option.

⇒Gallery Link Button? Want to show the gallery link button? Enable this option.

⇒Link: This is where you can add your Desire link or URL so that your selected part can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Add Item: Use the ‘+Add Item’ button to add more gallery items to the list.

 

Load More Button

⇒Load More Button: Do you want to add the Load More button at the bottom of the gallery? Then enable this option and customize the more part of the gallery according to your preferences like below:

→Images Per Page: Select how many images you want per page for the load more section.

→Button Text: Type the load more button text.

→No More Items Text: Add a custom text to the no more items button text.

→Size: Set the size of the load more button.

→Button Icon: Add an icon to the button text.

→Icon Position: Set the icon position either left, center or right.

→Alignment: Set the alignment of the load more button.

 


»Style

 

General Style

⇒Background Color: Add a custom background color to the gallery.

⇒Padding: Set the padding value for the top, right, bottom and left around the gallery for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the gallery for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the gallery for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the gallery for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Control Style

⇒Padding: Set the padding value for the top, right, bottom and left around the filter control button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the filter control button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the control texts.

⇒Text Color: Customize the control text color for Normal & Active view.

⇒Background Color: Customize the control background color for Normal & Active view.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the control buttons for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the control for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Item Style

⇒Padding: Set the padding value for the top, right, bottom and left around the gallery items for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the gallery items for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the gallery items for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the gallery items for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Item Hover Style

⇒Background Color: Add a custom background color to the gallery items for hover view.

 

Video Item Hover

⇒Background Color: Add a custom background color to the video items for hover view.

⇒Background transition: Manually set the background transition for the video item hover.

⇒Icon Size: Customize the icon size for the video play button.

⇒Hover Icon Scale: Set the hover icon scale for the video items.

⇒Icon Transition: Manually set the icon transition for the video items.

 

Item Card Style

⇒Background Color: Add a custom background color to the item card.

⇒Padding: Set the padding value for the top, right, bottom and left around the item card for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the card for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Title Typography

→Color: Add a custom color to the item card title.

→Hover Color: Add a custom color to the item card title for hover view.

→Typography: Set the typography options for the titles.

⇒Content Typography

→Color: Add a custom color to the item card contents.

→Typography: Set the typography options for the contents.

→Content Alignment: Set the alignment of the card content for different dimensions.

 

Icons Style

⇒Background Color: Add a custom background color to the icons.

⇒Padding: Set the padding value for the top, right, bottom and left around the icons for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the icons for different dimensions. You can link the values together or customize them individually.

⇒Icon Size: Manually customize the size of the icons.

⇒Icon Font Size: Customize the icon font size manually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icons for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the icons for different dimensions.

 

Load More Button

⇒Top Spacing: Generate some spaces from the top of the load more button.

⇒Background Color: Customize the background color of the load more button for Normal & Hover view.

⇒Text Color: Customize the load more text color for Normal & Hover view.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the load more button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the load more button for different dimensions.

⇒Typography: Set the typography options for the load more button texts.

⇒Padding: Set the padding value for the top, right, bottom and left around the load more button for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Button Icon:

→Margin: Set the margin value for the top, right, bottom and left around the load more button icon for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Filterable Gallery Element.


Was this article helpful to you? Yes No

How can we help?