Media Grid Widget Tutorial

Intro

Premium Media Grid Widget allows you to create interactive media galleries with many styling & customization options. You can set the number of columns and choose between various skins and hover effects.

In addition, you can add titles, descriptions and links to the individual images. You can also choose to show or hide filtration buttons above the gallery, and style them to match your theme and your media.

You can view examples of the different grid styles on this demo page.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Layout
• Categories
• Images
• Grid settings
• Responsive

1. Layout

In the Layout section, you can configure the overall structure of your media grid:

• Grid Layout: Choose between:
  • Even: Uniform grid layout.
  • Masonry: Adaptable grid that adjusts the height and width based on the media.
  • Metro: Mix tall, wide, and square media within a single grid.
• Height: For the Even layout, set the desired image height.
• Images Fit: Determine how images fit within their containers:
  • Fill: Images fill the container, potentially cropping.
  • Cover: Images cover the container while maintaining aspect ratio.
• Image Resolution: Select the image size:
  • Thumbnail: 150 x 150
  • Medium: 300 x 300
  • Medium Large: 768 x ?
  • Large: 1024 x 1024
  • Post-thumbnail: Depends on theme settings.
  • Full: Original image size.
  • Custom: Define custom dimensions.
• Columns: Specify the number of columns (1 to 12).
• Load More Button:
  • Enable: Toggle to display the button when using more than six media items.
  • Text: Customize the button text.
  • Media to Load: Define the number of media items to load per click.
  • Alignment: Set button alignment (left, center, right).

Gradient Layer where you can add a gradient color on top of the grid container

• Color: Pick colors for the two different colors [First and Second Color] separately.
• Location: Set starting location for the two different colors [First and Second Color] separately.
• Type: You can select Linear or Radial gradient type.
• For Liner:
  • Angle: Adjust the angle for gradient Colors.
• For Radial: select center of gradient colors.
• Height: Set the gradient layer height.
• Position: Set the gradient layer position.

2. Categories

The Categories section allows you to organize media items into filterable groups:

• Filter Tabs: Enable to display category filter tabs above the gallery.
• First Category:
  • Display: Show or hide the initial category (e.g., “All”).
  • Label: Customize the label text.
• Categories List:
  • Name: Edit category names.
  • Rotation Degrees: Set rotation angle for category names.
  • Duplicate/Delete: Manage categories using the respective icons.
  • Reorder: Drag and drop to rearrange categories.
  • Add Item: Add new categories.
• Active Category Index: Define which category is active by default (index starts after the first category).
• Shuffle Images on Filter Click: Enable to shuffle media items when a category is selected.
• Alignment: Set filter tabs alignment (left, center, right).
• URL Flag: Assign a flag for linking categories from different pages.

Shuffle Images on Filter Click will shuffle the media when the user clicks on the category button.

Alignment used to align the filter tabs: left, center, or right.

3. Images/Videos

In the Images/Videos section, manage individual media items:

• Images List:
  • A list of all added media items, each assigned to a category.
  • Options to edit, duplicate, or delete items.
• Add Item:
  • Button to add a new media item.
• Shuffle Images on Page Load:
  • Toggle to randomize media item positions each time the page is loaded.
• YouTube Videos Thumbnail Size:
  • Dropdown to select thumbnail resolution (e.g., Maximum Resolution).

• Image/Media Settings:
  • Upload Image: Upload or choose an image from the WordPress media library.
  • Width/Height: Sliders to define the dimensions of the image for Metro layout.
  • Video: Toggle to enable video options.
• Title/Description:
  • Get Title/Description From Media Library: Toggle to fetch metadata from the media library.
  • Title: Input field to define a custom title.
  • Description: Input field for a custom description.
• Category Assignment:
  • Category: Assign the media item to one or more categories, separated by commas.
• Link Options:
  • Whole Image Lightbox: Toggle to enable the lightbox feature for the media.
  • Link Type: Choose between “URL” or other linking options.
  • Link: Input field for the URL.
  • Whole Image Link: Toggle to make the entire image a clickable link.

The widget starts with two placeholders, one in each default category. Click on each tab to open the media settings.

Adding a Video to Elementor Media Grid

To add a video to your Media Grid and display its thumbnail:

1. Enable the Video Option:
   • In the media settings, toggle Video to “Yes” (as shown in the controls above).
   • This activates the video-specific settings, such as video type and URL input.
2. Set Video Type and URL:
   • Under the Type dropdown, choose from:
     • YouTube
     • Vimeo
     • Self-Hosted
   • Enter the video URL in the Video URL field.
3. Remove the Image:
   • If an image is already uploaded, click the trash icon (located at the top right of the image preview) to remove it.
   • This step ensures that the video thumbnail will be displayed instead of the image.

Additional Video Settings

The following options are available to customize video playback:

• Controls: Toggle the visibility of the video player controls.
• Mute: Automatically mute the video when it starts.
• Loop: Enable or disable looping of the video playback.
• Privacy Mode (YouTube Only): Ensures YouTube does not store information about visitors until they play the video.
• Get Title/Description From Media Library: Automatically fetch the title and description from the WordPress Media Library metadata.
• Title and Description: Customize the title and description directly or leave them empty if not needed.
• Category: Assign the video to one or more categories by entering them, separated by commas.

Thumbnail Settings

• For YouTube videos, you can select the YouTube Videos Thumbnail Size to determine the quality and resolution of the thumbnail displayed in the grid.

Metro Layout Compatibility

When using the Metro Layout, you can adjust the Width and Height sliders to span the video thumbnail across multiple columns.

Note: If the image is not removed, the Media Grid will prioritize the uploaded image instead of the video thumbnail.

4. Display Options

Under Display Options, you can choose the image gap -the space between the images, in pixels, % or em. You can enter any positive integer, and the minimum is 1.

The skins and the hover effects are applied to all the images in the gallery.
You can select between three skins:

• Style 1 -The default styles make use of the selected Hover Effect on the media only.

• Style 2 -Makes use of the selected Hover Effect for the media, and slides in the description and title when the user hovers over the media.

• Style 3  -Makes use of the selected Hover Effect for the media, and shows a colored overlay together with the media title and description when the user hovers over the media.

• Style 4  -Makes title under the media and a hover effect on media.

• Image Gap: Adjust the space between media items (in pixels, %, or em).
• Skin: Choose a gallery layout style:
  • Style 1: Basic hover effects on media.
  • Style 2: Hover effects with sliding title and description.
  • Style 3: Hover effects with colored overlay, title, and description.
  • Style 4: Title displayed under the media with hover effects.
• Hover Effect: Select a hover effect, such as Zoom In, Zoom Out, Grayscale, Blur, Bright, Sepia, or Translate.
• Links Icon: Customize the icon used for linked media items.
• Videos:
  • Always Show Play Icon: Enable to ensure the play icon is always visible on video thumbnails.
  • Videos Play Icon: Customize the play icon for videos.
• RTL Mode: Toggle to enable right-to-left layout support for RTL websites.
• Content Alignment: Align image titles and descriptions (left, center, right).

5. Lightbox

The Lightbox section lets you configure the gallery’s lightbox functionality:

• Lightbox: Enable or disable the lightbox feature.
• Lightbox Style: Choose a lightbox style (e.g., PrettyPhoto).
• Lightbox Theme: Select a theme for the lightbox (e.g., Default).
• Overlay Gallery Images: Toggle to display all gallery images as an overlay in the lightbox.
• Lightbox Icon: Customize the icon used to trigger the lightbox.

6. Responsive

The Responsive section provides options to optimize the gallery for smaller screens:

• Responsive Controls: Toggle to enable responsive settings.
• Minimum Size: Set the minimum screen width (in pixels) where responsive adjustments take effect (default: 1px).
• Maximum Size: Set the maximum screen width (in pixels) for responsive adjustments (default: 767px).
• Description Visibility: Automatically hide image descriptions on smaller screens.

---

Style

In the Style tab you will be able to customize your Grid the way you want, to make it match and fit your needs.

• General
• Image
• Title / Description
• Icons
• Filter

1. General

Background Type

Select between:

• Classic  -A solid color or a background image.
• Gradient – Choose two colors, the color positions, and the type of gradient: linear or radial.

Border Type

Select between the following border types, as well as the width of the border on each side of the widget.

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

• Background Type: Choose between solid or gradient backgrounds.
• Border Type: Select a border style (e.g., Solid, Dotted, Dashed).
• Border Radius: Adjust the corner radius (in pixels).
• Box Shadow: Configure shadow settings around the widget.
• Margin & Padding: Adjust spacing for the widget’s exterior (margin) and interior (padding).

2. Image

• Hover Overlay Color: Set the color overlay applied on hover.
• Border Settings: Configure border type, radius, and shadow.
• CSS Filters: Apply filters such as blur, brightness, contrast, and saturation.
• Hover CSS Filters: Customize filters applied on hover.
• Margin & Padding: Adjust spacing for the images.

3. Title / Description

• Title: Set color, typography, and spacing for titles.
• Description: Configure color and typography for descriptions.
• Container:
  • Background Type: Add background colors or gradients.
  • Border Settings: Adjust border type, radius, and shadow.
  • Margin & Padding: Define spacing for the container.

4. Icons

• Position: Adjust the position of icons.Size: Set the size of icons.
• Normal & Hover States:
  • Color: Customize icon colors.
  • Background Color: Set the background color for icons.
  • Border Settings: Adjust border type, radius, and shadow.
• Margin & Padding: Configure spacing for icons.

5. Filter

• Typography: Customize the font for filter tabs.
• States (Normal, Hover, Active):
  • Text Color: Set the color of filter text.
  • Background Color: Choose a background color for filter tabs.
  • Border Settings: Adjust border type, radius, and shadow.
  • Advanced Border Radius: Enable custom border radius settings.
  • Margin & Padding: Adjust spacing for filter tabs.

6. Load More Button

• Normal and Hover States:
  • Typography: Configure typography settings for the button text, including font family, size, weight, etc.
  • Text Color: Set the button text color.
  • Spinner Color: Choose the color of the spinner displayed when loading more items.
  • Text Shadow: Apply shadow effects to the button text.
• Background Type: Select a solid color, image, or gradient for the button’s background.
• Border Type: Choose a border style (e.g., Default, Solid, Dotted, Dashed).
• Border Radius: Adjust the border radius (in pixels) for rounded corners.
• Box Shadow: Add shadow effects to the button.
• Margin: Define the space around the button (top, right, bottom, left).
• Padding: Set the space inside the button, affecting its size (top, right, bottom, left).