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 PRO plugin installed and activated on your website.
• Also, make sure that this 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

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.

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

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”.

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

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.

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.

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.

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.

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.

5. Lightbox

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.

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

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.

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.

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.

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

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.

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.

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 %.