Add Gallery with filters widget via Elementor

The Gallery with filters widget creates a responsive, attractive grid or masonry image gallery. Such an element is perfect for a range of different use cases to get eye-catching content on your personal portfolio, creative agency site, company presentation page, etc.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content tab

On the Content tab of the gallery with filters widget, you can manage the basic settings such as content uploading, columns, animation, layout, etc.

Gallery

Gallery type

Select one of the available image sources for the gallery.

Custom

The option allows you to add a new gallery category with images from the media library.

To add a new element, click “Add Item” and fill in all the necessary fields.

Add images to the gallery with filters
  • Gallery title – a text field to enter the category name that will be displayed as tabs in your gallery.
  • Add images – a section to upload and select images from the media library for the current category.
Gallery from post images

The option allows you to display featured images of the selected posts. The categories of selected posts are displayed as tabs in the gallery.

Select posts to display the featured images

Layout

Select one of the available layouts for displaying images:

  • Grid – grid images display
  • Masonry – masonry grid images display

Columns

Specify the number of columns in one row for different devices(desktops, tablets, mobiles).

Link

Select link type for gallery images. Select None to remove any links from the images.

  • Media – allows opening images in a lightbox.
  • Custom – allows specifying a custom link for images.
  • Post link – this type is suitable for GALLERY FROM POST IMAGES gallery type. Each image of a specific post will link to the current post.

Overlay

The toggle to enable/disable the overlay feature for the images. When the option is enabled the new Overlay section is available with additional settings.

Lazy load

The toggle to enable/disable the lazy load feature. It makes the page load faster.

Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.

Image animation

Choose one of the available image animations: Grow, Shrink, Slide up, Slide down, Swing. Each type has additional settings where you can adjust the Animation Duration, Animation Delay, or Easing. Select None to disable the animation.

Overlay

The section is available if the Overlay option is enabled in the General settings.

Overlay settings of the Gallery with filters
  • Title – select which image attribute to display as the title for image overlay.
  • Description – select which image attribute to display as the description for image overlay
  • Text alignment – manage the overlay text alignment (left, center, right).
  • Vertical Position – specify the vertical position of the text on the image overlay.
  • Overlay animation – choose one of the available overlay animations: Grow, Slide in right, Slide in left, Slide in down, Fade in. Each type has additional settings where you can adjust the Animation Duration, Animation Delay, or Easing. Select None to disable the animation.
  • Overlay text animations – choose one of the available text animations: Grow, Shrink, Slide in right, Slide in left, Slide in up, Slide in down, Fade in. Each type has additional settings where you can adjust the Animation Duration, Animation Delay, or Easing. Select None to disable the animation.

Filter

  • Filter alignment – manage the gallery filter alignment (left, center, right).
  • All galleries filter – the toggle to enable/disable the “All” tab in the filter. When the option is enabled, the text field for “All” filter name is available.
  • Pointer – select one of the available pointers for the filter tabs on hover. The available options: Underline, Overline, Double line, Framed.
  • Pointer animation – choose one of the available pointer animations: Grow, Shrink, Slide up, Slide down, Swing. Each type has additional settings where you can adjust the Animation Duration, Animation Delay, or Easing. Select None to disable the animation.
Filter section settings of the Gallery with filters widget

Style tab

On the style tab, you can manage the element styles of the gallery with filters like image size, item colors in different states, typography, borders, padding/margin, etc.

Filter

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Space between items – the setting allows managing the spacing between tabs in the gallery filter for different devices.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/active

The filter style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Images

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Width – specify the width of the current element using the slider in different units(px, %) for different devices.
NORMAL/HOVER

The image style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • CSS Filters – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Filter bar

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER

The style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Content

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Space between items – the setting allows managing the spacing between tabs in the gallery filter for different devices.
NORMAL/HOVER

The content item style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Overlay

  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Blend Mode – defines the blending mode of the first color on the second color. Select one of the 12 available modes.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.

Overlay title/Overlay description

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The filter style settings for different states.

  • Color – specify the text color and opacity using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The settings in the advanced tab of the Gallery with filters widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Was this article helpful to you?