Create visually engaging and fully responsive media showcases directly within Elementor. Whether you want to display images or videos from multiple platforms or curate a sleek playlist from YouTube, this widget gives you full control over your media presentation — no coding required.
Items#
Source#
Select the source of your media gallery.
- Custom: Add videos manually from various platforms.
- YouTube Playlist: Automatically fetch and display videos from a selected YouTube playlist.
- YouTube Channel: Pull videos directly from your YouTube channel to keep your gallery updated.
Items#
- Type: Image or Video
- Source: Select the video source.
- YouTube
- Vimeo
- Dailymotion
- Self Hosted
- External URL: You can show a video that is hosted on another domain.
- Choose File: Or upload the video through the media uploader.
- Start Time: Set the video start time.
- End Time: Set the video end time.
- URL: Video URL.
- Filter Label: A text to show in the frontend filter.
- Media Title: A text to display with the video.
- Description: A short description for the video to display on the frontend.
- Custom Thumbnail: Enabling this option lets you choose a custom thumbnail for the video.
- Link (Type: Image): This option lets you link the image to the file or to a custom URL.
Filter#
- Enable Filter: Toggle to enable/disable frontend filters.
- "All" Filter Label: Set a custom text for the "All" label.
- Alignment: Allows you to set the filters' alignment.
- Pointer: Hover animations for filters.
Play Icon#
- Icon Type: You can display a custom icon from the icon library or a custom image.
Settings#
- Layout: Choose a layout (Grid or Carousel).
- Columns: Specifies the number of columns displayed in the gallery grid.
- Aspect Ratio: Determines the width-to-height proportion for each gallery item. Common choices include "16:9", which is standard for widescreen content.
- Preload: Manages how media is loaded initially. Works only with self-hosted videos.
- Auto: The widget decides the best preload option automatically.
- Metadata: Only loads media metadata without full media content, saving bandwidth and speeding up initial load.
- None: No preloading; media loads only on demand, which may delay playback but conserves resources.
- Mute: Mute or unmute media as it is displayed or played in the gallery.
- Click Action: Defines what occurs when a gallery item is clicked.
- Play Inline: Plays the video inline.
- Play in Lightbox: Media opens in a popup overlay, allowing focused viewing.
- Ordering: Sets the order in which media items appear (e.g., "Default" implies the original upload/order).
Carousel Settings#
- Effect: Controls the animation style of slide transitions.
- Slide – standard sliding movement.
- Fade – crossfade between slides without sliding.
- Slides Per View: Sets how many slides are visible at once.
- Slides to Scroll: How many slides advance when moving forward/backward.
- Transition Duration (ms): Speed of the slide/fade animation, in milliseconds.
- Autoplay: Toggle automatic slide progression on or off. When enabled, slides advance automatically after a delay.
- Autoplay Speed: Time (in milliseconds) between automatic slide changes.
- Pause on Hover: If enabled, pauses autoplay when the user hovers over the slider.
- Pause on Interaction: If enabled, disables autoplay permanently after any user interaction (like clicking arrows or swiping).
- Infinite Loop: Enables looping: after the last slide, it seamlessly goes back to the first.
- Center Mode: When active, the current slide is centered, with partial previews of adjacent slides.
- Direction: Sets the slide direction.
- Left
- Right
- Navigation:
- Arrows: Toggles next/previous arrow buttons on/off.
- Pagination Type: Defines the style of slide indicators.
- None – no pagination indicators.
- Dots – small circles below the slider.
- Fraction – e.g., "1/5" showing current/total slides.