Gallery Widget

The Gallery widget allows you to add and customize image galleries with a variety of layouts and styles. You can choose between single or multiple gallery types, configure image settings, and apply different effects to effortlessly create and style stunning image galleries on your website.

Content tab

Settings

• Type: Select the type of gallery, choosing from Single or Multiple. Multiple allows you to have a filterable portfolio-style gallery of images.
  
  If Multiple is chosen, enter a title into the field.
• Add Images: Choose multiple images from the media library to insert into your gallery and type a title for the gallery.
• Display Title and Description: Enable to show the title and description of images
• Order By: Choose Default or Random order.
• Lazy-Load: Set to Yes to use Lazy Load to improve loading speed.
• Layout: Select from Grid, Justified, or Masonry. The Grid is based on an aspect ratio of your choosing. Justified lets you set the height for each row and adjusts to different widths per image. Masonry maintains the same image width and adjusts to varying heights.
• Columns: Set how many columns will be displayed per row, from 1 to 24.

  Note:

  Not available if Justified Layout is chosen.

• Row Height: Set the height of each row, in pixels.

  Note:

  Only available if Justified Layout is chosen.

• Spacing: Control the amount of space between each row of the images.
• Horizontal Spacing: Control the amount of space between each image in a row.
• Link: Set the link for the images to None, Media File, or Custom URL.
• Aspect Ratio: Choose the Aspect Ratio, selecting from 1:1, 3:2, 4:3, 9:16, 16:9, and 21:9.

  Note:

  Only available for Grid layout.

• Image Resolution: Set the size of the image, from thumbnail to full, or enter a custom size.

Filter bar

• All Filter: Select Yes to include the All filter, or No to exclude it.
• All Filter Label: If set to Yes, enter the desired label or use Dynamic Tags. All is default.
• Pointer: Select the pointer used when hovering over each filter label. Choose from None, Underline, Overline, Double Line, Framed, Background, or Text.
• Animation: Set the Pointer’s animation style. Choose from Fade, Slide, Grow, Drop In, Drop Out, or None.

Item content

• Overlay Background: Select Yes to have an overlay appear upon hovering over each image, or No for no overlay.

  Note:

  If the Display Title and Description option is enabled, the next 2 sections will appear in the content tab.

• Title and Description: You have the option to choose when the title and description should show Show on Hover or Always Show.
• Title: Choose which meta attribute to display as the overlay’s Title. Select from the image’s Title, Caption, Alt, Description, or None.
• Description: Choose which meta attribute to display as the overlay’s Description. Select from the image’s Title, Caption, Alt, Description, or None.

Title

• Gallery Name: Set the name for the Gallery you have created.
• Size: Select the size from the drop-down list.
• HTML Tag: Modify the title size from the drop-down list of HTML tags.
• Alignment: Choose from Right, Center, Left, and Justified.
• Title Spacing: Set the space between the title and gallery.

Description

• Position: Set the position of the description in the Top or Bottom of Gallery.
• Description Spacing: Set the space between the gallery and the Description text.
• Description: Add the text for the description.

Style tab

Image

• Border Color: Choose the color of the image border, for Normal and Hover states.
• Border Width: Choose the thickness of the border for Normal state only.
• Border Radius: Control the corner roundness of the image border, for Normal and Hover states.
• Background Color: Choose background color for all the images.
• CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast, and Saturation for Normal and Hover states.
• Background size: Customize the background size by choosing from Drop down list:
  
  Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image.
  Contain: Always prioritize to show the whole image, even if that leaves a little space to the sides or bottom
  Auto: Automatically calculates the size based on the actual size of the image and the aspect ratio.
• Hover Animation: Choose the animation of the image upon hover, selecting from None, Zoom In, Zoom Out, Move Left, Move Right, Move Up, or Move Down, for Normal and Hover states.
• Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Title and Description

• Customize the Color and Typography of the Title and Description as per your preferences
• Text shadow: Adds a shadow behind the text to enhance readability or create a stylized look.
  Blur: Soften the edges of the shadow for a diffused look or keep it sharp for a crisp effect.
  Horizontal & Vertical: Control the direction of the shadow, simulating different light sources.

Overlay

• Overlay: Select the type of Overlay (Classic or Gradient) for the images’ Normal and Hover states.
• Color: Set the Overlay color or gradient colors for the images’ Normal and Hover states.
• Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.
• Hover Animation: Choose the overlay’s Entrance or Exit animation upon hover. Select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. If Entrance Animation is chosen, images are shown full opacity in Normal state, with the overlay covering the image upon hover. If Exit Animation is chosen, the overlay covers the image in the Normal state, and is removed upon hover.
• Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Content

• Alignment: Align the content to the left, right, or center.
• Vertical Position: Align the content to the top, middle, or bottom.
• Padding: Adjust the content’s padding.
• Hover Animation: Choose the content’s Entrance, Reaction, or Exit Animation upon hover. For Entrance Animation, select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. For Reaction Animation, select from Grow, Shrink, Move Left, Move Right, Move Up, or Move Down. For Exit Animation, select from Slide Out Right, Slide Out Left, Slide Out Up, Slide Out Down, Zoom In, Zoom Out, and Fade Out.
• Animation Duration: Set the amount of time the animation takes, in milliseconds.
• Sequenced Animation: Set to Yes to have Title and Description animate in sequence. Set to No to have Title and Description animate at the same time.

Filter bar (Multiple Gallery Type)

• Alignment: Align the content to the left, right, or center.
• Text Color: Choose the color of the Filter bar text for Normal, Hover, and Active states.
• Typography: Set the typography options for the Filter bar text.
• Pointer Width: Select the thickness of the pointer.
• Space Between: Control the amount of space between Filter text items.
• Gap: Control the amount of space between the Filter text and the gallery images.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.