Filterable Gallery Widget

It adds a gallery with a filterable feature to your page. It has many features and customization options:

Content #

Gallery

1. Items: Add any no. of items in the gallery clicking on ADD ITEM.
   • Image: Upload image for the item.
   • Category: Enter the category on which the item lies.
   • Title: Enter the Title of the item.
   • Description: Enter the description of the item.
   • Lightbox button: Show or hide the lightbox button that appears on hover on image.
   • Link Button: Show or hide the link button that appears on hover on image.
   • External link: Enter the link if you want to give your custom link to the item.

Controls

1. Filterable Image Gallery: Enable or disable the filterable feature in the gallery.
2. First Tab Label: Enter text for first filterable tab control. Default is ALL.
3. Categories: Add categories clicking on Add item and give it a name under Category Name.

Settings

1. Image Size: Choose the size for the image.
2. Layout: Choose either Grid or Masonry layout.
3. Columns: Select the no. of columns for displaying gallery items.
4. Lightbox Slider: Enable or disable Lightbox Slider .
5. Link Context: Choose either image or button for linking item
6. Lightbox icon: If the link context is a button, select the lightbox icon.
7. Link Icon: If the link context is a button, select an icon for the link.
8. Link Target: If the link context is an image, choose the link target to either lightbox or custom link.

---

Style #

Gallery

1. Column Gap: Increase or decrease the space between gallery items.
2. Row Gap: Increase or decrease the space below the gallery items.

Controls

1. Alignment: Set the alignment of filterable tabs.
2. Margin: Set the margin around filterable tabs.
3. Padding: Set the padding inside filterable tabs.
4. Active Control
   • Choose options for styling the active tab. Given options for styling are typography, border, box-shadow, color, background.
5. Normal Control
   • Choose options for styling the other filterable tabs. Given options for styling are typography, border, box-shadow, color, background.

Items

1. Overlay Color: Select the overlay color for gallery item
2. Border: Select the border type, radius, color and width for each gallery item.
3. Box Shadow: Set the box-shadow around the border of the gallery item.

Caption Area

1. Alignment: Set the alignment of the caption area.
2. Title: Choose the color, typography, and margin for the title of the caption.
3. Description: Choose the color, typography, and margin for a description of the caption.

Icon Button

1. Margin: Set the margin around the icon button.
2. Size: Set the container size of the icon button.
3. Icon Size: Set the size of the icon of the icon button.
4. Border: Select the border type, radius, color and width for icon button.
5. Other options for styling are background, box-shadow, and color.