Gallery Widget
Use the widget to add galleries to your site easily.
Content
Settings
Type: Choose between Single and Multiple gallery types.
Single Gallery type.
Add needed images to a Gallery.
Link: Set the Gallery link. Choose between None, Lightbox and URL. When the ‘URL’ is chosen you can add the desired URL the gallery should link to.
Layout: Choose between Justified, Grid and Masonry layouts.
When Justified layout is chosen you can set needed Row Height and Spacing between images for desktop, tablet and mobile and choose desired Image Size using setting from the dropdown.
Using the Grid layout you can choose the amount of Columns the images should be displayed in, set a Spacing between images for desktop, tablet and mobile, choose desired Image Size and Aspect Ration using setting from the dropdown.
Masonry layout allows to choose the amount of Columns the images should be displayed in, set a Spacing between images for desktop, tablet and mobile and choose desired Image Size using setting from the dropdown.
Multiple Gallery type.
Multiple Gallery type provides all the options of the Single Gallery type but also allows to add several Galleries using +ADD ITEM button.
Filter Bar
When Multiple Gallery type is used you can also set a Filter Bar.
Hide Filter Bar: Slide to YES to hide the Filter bar.
“All” Filter: Slide to YES to enable “All” Filter.
“All” Filter Label: Add desired Label here.
Animation: Choose the Filter Animation from the dropdown.
Additional
Content: Choose the content that should be displayed on the Gallery images. The choice is between None, Icon and Text.
When Icon type is chosen you can use the Icon from the Icon Library or upload needed SVG.
When Text type is chosen you can choose Title and Description from the dropdown.
Overlay: Slide to SHOW to enable Overlay.
Lazy Load: Slide to YES to enable Lazy Load.
Style
Image
Set the Gallery Images both for Normal and Hover modes.
Border Color: Set desired border color here.
Border Radius: Set a border radius to the image.
Box Shadow: Choose desired settings from the dropdown.
CSS Filters: Use CSS filters to set Blur, Brightness, Contrast, Saturation and Hue.
Border Width: Set the border width here.
Hover Animation: Choose the Animation from the dropdown.
Animation Duration: Set the Animation Duration in milliseconds.
Overlay
Set the Gallery Images’ Overlay both for Normal and Hover modes.
Overlay: Choose between Classic and Gradient types and set it using corresponding settings
Blend Mode: Choose desired setting from the dropdown.
Hover Animation: Choose the Animation from the dropdown.
Animation Duration: Set the Animation Duration in milliseconds.
Content (Icon Type)
Alignment: Choose between Left, Center and Right Icon Alignment.
Vertical Position: Choose between Top, Middle and Bottom Icon Vertical Position.
Padding: Set Padding for desktop, tablet and mobile.
Icon
Color: Choose desired Icon Color.
Background Color: Set the Icon Background Color.
Size: Set the Icon size.
Padding: Set the Icon padding.
Border Radius: Set a border radius to Arrows Box for desktop, tablet and mobile.
Hover Animation: Choose the Animation from the dropdown.
Content (Text Type)
Alignment: Choose between Left, Center and Right Text Alignment.
Vertical Position: Choose between Top, Middle and Bottom Text Vertical Position.
Padding: Set Padding for desktop, tablet and mobile.
Gap Between: Set the Gap between Title and Description.
Text Box
Background Color: Set the Text Box Background Color.
Border Color: Choose desired Text Box Border Color.
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set a border radius to the Text Box.
Padding: Set the Text Box paddings.
Hover Animation: Choose the Animation from the dropdown.
Full Width: Slide to ON to enable Full Width Text Box.
Filter Bar
Alignment: Choose between Left, Center and Right Filter Alignment.
Set the Filter Bar Colors and Typography for Normal, Hover and Active modes.
Filter Bar Item
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set a border radius to the Filter Bar Item.
Padding: Set the Filter Bar Item paddings.
Space Between: Set a Space between filter items.
Filter Bar Container
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set a border radius to the Filter Bar Item.
Padding: Set the Filter Bar Container paddings for desktop, tablet and mobile.
Margin: Set the Filter Bar Container margins for desktop, tablet and mobile.
Advanced
Set the Advanced options that are applicable to this widget