Media Gallery

The Media Gallery widget allows you to easily create and style beautiful image and video galleries on your website. This widget is useful for showcasing portfolios, product galleries, or event photos.

View Live Demo

Content Tab

Settings

  • Galleries: Add images or other media types to your gallery. You can click the "+ Add Item" button to include more media.
  • Type: Choose the type of media you're adding, such as "Image".
  • Image: Upload or select the image you wish to display in the gallery.
  • Link: Determine where the image links to when clicked. Options typically include the media file, attachment page, or a custom URL.
  • Order By: Define how the media items should be sorted within the gallery.
  • Lazy Load: Enable this to load images as they come into the viewport, which can improve page load times.

Layout

  • Layout: Choose from layouts such as "Grid", "Justified", or "Masonry".
  • Content Visibility: Decide if the content (like titles or captions) is always visible, visible on hover, or not displayed.
  • Content Layout: Choose the layout of content related to the images (e.g., "Content Under Image").
  • Columns: Set the number of columns in the grid.
  • Spacing: Adjust the space between the media items.
  • Title/Caption/Description/Alt: Enable or disable these elements for each media item.
  • Video Play Icon: Toggle on if you want to show a play icon for video items.
  • Video Preview: Choose how the video preview should be displayed (e.g., "Video Player" or "Poster").
  • Aspect Ratio: Set the aspect ratio for the media items.
  • Media Position: Choose the alignment of the media within its container.
  • Image Resolution: Select the resolution for the images displayed.

Filter Bar

  • "All" Filter: Toggle on to include an "All" label in the filter bar.
  • "All" Filter Label: Customize the label for the "All" filter.
  • Animation: Choose an animation effect for when filtering items, such as "None", "Fade", or "Grow".

Style Tab

Image

  • Border Color: Choose a color for the image borders.
  • Border Width: Set the width of the borders.
  • Border Radius: Define the radius for the image corners to create rounded edges.
  • Hover Animation: Select an animation for when the image is hovered over.
  • Animation Duration (ms): Set the duration for the hover animation.

Content

  • Alignment: Align the text content related to the image (center, left, right).
  • Padding: Set the padding inside the content container.
  • Title/Caption/Description/Alt: Customize the color, typography, and spacing for these elements.

Filter Bar

  • Filter Bar Container: Adjust the padding and gap for the filter bar.
  • Background Type: Select a background type for the filter bar (classic, gradient).
  • Sticky Bar: Enable this to make the filter bar stick at the top when scrolling.
  • Border Type: Select a border type for the filter bar.
  • Border Radius: Adjust the border radius of the filter bar.
  • Box Shadow: Add a shadow to the filter bar.
  • Category Items: Customize the color, typography, background type, border, and box shadow for the filter categories.

Video Play Icon

  • Icon: Choose a play icon for video type items in your gallery.
  • Size: Define the size of play icon.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles