Media Grid Widget Tutorial

Intro

The Premium 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 free plugin installed and activated on your website.
  • Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
  • 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

The first option is the grid layout. You can choose between:

  • Even
  • Masonry -An adaptable grid that adjusts the height and width depending on the media used.
  • Metro  -Lets you mix between tall, wide and square media all in one grid!

The Even grid layout has its own settings where you can select from the following images height from Height Options.

For Even and Metro grid, you can set images fit to fill or cover, and you can set images size for all layouts:

  • Thumbnail – 150 x 150
  • Medium – 300 x 300
  • Medium Large – 768 x ?
  • Large – 1024 x 1024
  • Post-thumbnail -Depends on your theme settings.
  • Full
  • Custom – Lets you select and apply your own image dimensions.


You can select between 1 and 12 columns, and add a Load More button if you are using more than 6 media.

When you switch on the Load More button, you can change its text, you can change the text of the Load More button, the number of media to load when the button is clicked, and the images to show on every click, as well as the button alignment: left, center, or right.

Layout Options Elementor Media Grid
Layout Options Elementor Media Grid

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.
Gradient Layer for Elementor Media Grid Widget
Gradient Layer for Elementor Media Grid Widget

2. Categories

Enable Filter Tabs For Elementor Media Grid
Enable Filter Tabs For Elementor Media Grid

Enable Filter Tabs option to enable images categorization.

First category – Display or hide the first category. The first category is the first filtration button that shows all of the media included in your grid. You can also change the visible text label. Disabling the First Category will load the first category for media created by you.

The widget has two default categories.
Click on the name to change the category name and the rotation of the button.
Duplicate or delete any of the categories using the two icons which are placed on the right side of each category.

To change the order, you can click and hold and then drag the item to the position you want. To add a new category, select the Add Item button.

Active Category Index means the category that will be selected by default which will appear directly after page load.
The counting starts right after the first category.
For example, if you entered number “2”, thus the category that will be selected is the 2nd one after the first category “All”.

Media Categories Added to Media Grid Widget for Elementor
Media Categories Added to Media Grid Widget for Elementor

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.

Category Options of Midea Grid for Elementor.
Category Options of Media Grid for Elementor

3. Images/Videos

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

In the media settings, you can choose your image from the WordPress media library or upload a new file.

If you have selected the Metro layout, you can select the number of columns that the media should span across, either the width, height, or both. Select between 1 and 12 columns. Also, you can enable Get Title/Description From Media Library to fetch them autoamticlly.

This way you can combine large media with small, wide or tall images in a unique, flexible way. When you change the width or height settings, you will be able to see your changes in the live preview.

Shuffle Images on Page Load: Media will shuffle its position every time the page loaded.

YouTube Videos Thumbnail Size: Select the thumbnail quality for the YouTube videos.

Images/Videos Options of Midea Grid for Elementor
Images/Videos Options of Media Grid for Elementor
Customize Height for the Media in Elementor Media Grid Widget
Customize Height for the Media in Elementor Media Grid Widget

Below this, you will find the options to change the media title and description. You can also choose to leave these empty if you prefer. Also, you can set the width and height but at Metro option only.

You can assign the media to one or more categories, separated by commas.

You can optionally link the media to an URL or an existing page on your website.
If you want the whole image to be clickable, you can enable the Whole Image Link option. Otherwise, a link icon will be displayed when the user hovers over the image.
Similarly, you can can enable the Whole media Lightbox option if you want to make the whole image a clickable area to open the gallery Lightbox.

Add Media to Elementor Media Grid
Add Media to Elementor Media Grid

You can enable Video option to add a video to the current grid item.

  • Type: Set Type option to add a video from YouTube, Vimeo or Self Hosted. Then add the video link in Video URL option.
  • Controls: Enable or disable the video player controls.
  • Mute: Mute the video sounds when the video started.
  • Loop: Enable/disable loop option for videos.
  • Get Title/Description From Media Library: Get title/description from media title and description.
Video Options in Elementor Media Grid
Video Options in Elementor Media Grid

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.
Skin Style 1 for Elementor Media Grid Widget
Skin Style 1 for Elementor Media Grid Widget
  • 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.
Skin Style 2 for Elementor Media Grid Widget
Skin Style 2 for Elementor Media Grid Widget
  • 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.
Skin Style 3 for Elementor Media Grid Widget
Skin Style 3 for Elementor Media Grid Widget
  • Style 4  -Makes title under the media and a hover effect on media.
Skin Style 4 for Elementor Media Grid Widget
Skin Style 4 for Elementor Media Grid Widget

Select from the following optional hover effects. The default is Zoom in.

  • None
  • Zoom In
  • Zoom Out
  • Scale
  • Grayscale -Images are displayed in grayscale until the user hovers over them.
  • Blur -Images are blurred when the user hovers over them.
  • Bright -Images appear brighter when the user hovers over them.
  • Sepia -A beautiful sepia toned filter is added to the image until the user hover over them.
  • Translate -Images will be moved a bit to the right when the user hover over them.

Links Icon option to assign icon for links.

For Videos, you can enable the Always Show Play Icon option to make the icon always displayed, and select the icon from Videos Play Icon option.

Enable RTL mode if you are using the widget in RTL website.

Content Alignment -Align the image title and description to the left, center or right.

Display Options for Elementor Media Grid
Display Options for Premium Media Grid widget

5. Lightbox

Elementor Media Grid Lightbox options
Elementor Media Grid Lightbox options

Lightbox to enable or disable the lightbox.

You can select from different Lightbox Styles from the Lightbox Style option. and from the Lightbox Theme option to select the theme of the lightbox.

Overlay Gallery Images -This will show all the images in the grid above the current image in the lightbox.

You can set the lightbox icon trigger from Lightbox Icon option.

6. Responsive

With the responsive option, you can hide the image description, in case if it doesn’t fit on smaller screens. The text will be hidden when the screen width reaches below 767 pixels. If you want to increase/decrease this value, you can go and change the Maximum Size value.

Responsive Options for Elementor Media Grid
Responsive Options for Elementor Media Grid

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
Elementor Border Style Options
Elementor Border Style Options

You can also select the border color from the color picker.

The border radius can be declared using pixels, % or em. The higher the number, the more circular corners.

Box Shadow

You can add a shadow around the widget with this option. Select the color and the following settings:

  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset
Margin and Padding

Margin is the space between the content and the widget. Padding is the space inside the widget.

The widgets margin and padding can be declared using pixels, % or em. You can link the values together, or only change the value for one side of the widget.

General Style of Media Grid for Elementor
General Style of Media Grid for Elementor

2. Image

Hover Overlay Color: to select a overlay color when hovering on media.

The image section has the same options as the general section, and the settings apply to all the images in the gallery. Here you can change the border type, color and radius, shadow, margin, and padding.

But there is also an additional unique option for image filters. Select between:

  • Blur
  • Brightness
  • Contrast
  • Saturation
  • Hue

Same for Hover CSS Filters.

Image Style of Media Grid for Elementor
Image Style of Media Grid for Elementor

3. Title / Description

Title and Description – Change the text color and typography of the image titles and descriptions.

In the Typography settings you can:

  • Select from a large number of font families.
  • Select the font size in either pixels, em, rem or vw.
  • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
  • Transform the text to: Uppercase, lowercase, capitalized, default or normal.
  • Select a font style: Normal, italic or oblique.
  • Select a text decoration: Default, underline, overline, line through, none.
  • Adjust the line height.
  • Adjust the letter spacing.

The remaining options are the same options as in the general section, and the settings apply to the image titles and descriptions. Here you can change the background, border type, color and radius, text shadow, box shadow, margin and padding.

Title/Description Style of Media Grid for Elementor
Title/Description Style of Media Grid for Elementor

4. Icons

Size – Set the size of Icons.

Position -Set icons position within the image. Adjust this carefully if you have images in many different sizes.

You can toggle between the settings for the normal state, and the hover state.

  • Color -Select the color of the icon itself.
  • Background color: -Select the background color around and behind the icon.
  • Border: Select a border type, width, color and border radius.

The shadow option adds a shadow around the area that is filled with the background color, not behind the icon itself. Select the shadow color as well as:

  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset
Elementor Media Grid Icon Shadow
Elementor Media Grid Icon Shadow

The last options in this section are the margin and padding. Changing the padding will change the size of the background area around the icon.

Icons Style of Media Grid for Elementor
Icons Style of Media Grid for Elementor

5. Filter

The filter settings are applied to the category navigation filter which is placed above the gallery, if the filter is enabled.

In the Typography option you can:

  • Select from a large number of font families.
  • Select the font size in either pixel, em, rem, or vw.
  • Select the font-weight: From 100 (thin) to 900 (very thick), default, normal or bold.
  • Transform the text to Uppercase, lowercase, capitalized, default or normal.
  • Select a font style: Normal, italic, or oblique.
  • Select a text-decoration: Default, underline, overline, line-through, none.
  • Adjust the line-height.
  • Adjust the letter spacing.
  • Text Color- The text color.
  • Background color – The button background color.

Same for Hover and Active options.

Also, you can set border, box shadow, margin, and padding options.

  • Advanced Border Radius – Apply custom radius values for Elementor Media Grid widget filter tabs. Get the radius value from here.
  • Border Radius – Insert border radius values.
Filter Style of Media Grid for Elementor
Filter Style of Media Grid for Elementor

6. Load More Button

Style your load more button with various style options on normal and on hover mode.

  • In the Typography option you can:
    • Select from a large number of font families.
    • Select the font size in either pixel, em, rem, or vw.
    • Select the font-weight: From 100 (thin) to 900 (very thick), default, normal or bold.
    • Transform the text to Uppercase, lowercase, capitalized, default or normal.
    • Select a font style: Normal, italic, or oblique.
    • Select a text-decoration: Default, underline, overline, line-through, none.
    • Adjust the line-height.
    • Adjust the letter spacing.
  • Text Color: Pick a color for button text.
  • Spinner Color: Select a color for spinner loading icon.
  • Text Shadow: Adjust button Text shadow using the following controls:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Background Type: Choose from Solid Color, Image and Gradient Colors.
    • Classic Background: Color, or Image Background.
      • Position (If Image Background was selected)
      • Attachment (If Image Background was selected)
      • Repeat (If Image Background was selected)
      • Size (If Image Background was selected)
    • Gradient Background: Set background using gradient colors.
      • Location: Within Gradient Background you can set a location for the two different colors [ First and Second Color] separately.
      • Type: You can select Linear or Radial gradient type.
      • Angle: Adjust the angle for Gradient Background Colors.
  • Border Type: Set a border type, choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Width: Set border width. (Appears only when “Border Type” option is selected).
  • Color: Choose a color for your border. (Appears only when “Border Type” option is selected).
  • Border Radius: Set Border Radius for using pixels (PX), percentage (%), or Em (em). Higher border-radius means a more circular border.
  • Box Shadow: Add a shadow around the button by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Margin: Adjust the margin in pixels, em or %
  • Padding: Adjust the padding in pixels, em or %.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.