Divi Multimedia Grid requires the Divi Theme or the Divi Builder plugin version 4.8.1 or higher to properly work on the Visual Builder editor.
- Download the plugin file from the link you receive (divicoding-media-grid.zip).
- Navigate to the WordPress admin area and visit Plugins » Add New page.
- After that, click on the ‘Upload Plugin’ button on top of the page.
- This will reveal the plugin upload form. Here you need to click on the ‘Choose File’ button and select the plugin file you downloaded earlier to your computer. After you have selected the file, you need to click on the ‘Install Now’ button. WordPress will now upload the plugin file from your computer and install it for you. You should see a success message after the installation is finished.
- Once installed, you need to click on the Activate Plugin link to start using the plugin.
- Now you will have a new module called DC Multimedia Grid in the Divi Theme module collection menu. This is a standard module so it will not show under the fullwidth section modules.
If you bought the plugin via the Elegant Themes marketplace you don’t need to activate the license, the plugin is tied to your Divi license. If you bought the plugin via our site.
- Open the WordPress admin dashboard -> Divi Coding -> DCMG.
- Add your license key.
- Click on the Save Changes button.
- Click on the Activate License button.
Module Settings – Content Tab
Divi Multimedia Grid is designed to display only attachment post type, files uploaded to the WordPress Media Library.
In this section of the settings, you can define the items from the Media Library that will show on the grid.
Dynamic Content: (version 1.1.2) Activate this option if you want to dynamically load the media items in the grid using a custom field. It will work if the custom field return and an array or a comma separate list of media ids. Compatible with ACF gallery field.
Custom Field Name: (version 1.1.2) Enter the custom field name from where the plugin should load the media items ids.
Include Media: Click on the Select Media Items button will open the WordPress Media Library, where you can select specific media items to show on the grid, this option will override the Media Type and Media Number options.
Media Type: If you want to display a specific media type, you can select the checkboxes on this option.
Media Number: Here you can set the max number of items you want to display, enter) to display all items.
Order: Select the order to display the items. Ascending or descending.
Order By: Select how to order the items, by date, title, slug, or random. Use random to show a different order each time the page loads.
In this section of the settings, you will have the option to add content before the grid. Add the content to the editor that will show when the Show Grid Header option is activated.
Show Grid Header: Activate/Deactivate the Header Content.
Header Info: Add content to the Grid Header.
In this section of the settings, you can define what info to show for all items on the grid.
Show Media: Show/hide the media object/media icon. This option will show for images, audio, and video items the media object if icons are deactivated, for documents will always show the icon. (Icons Toogle).
Show Media Meta: Show/hide the media meta info. This includes media title, caption, file meta, taxonomy terms, and description, each one can be shown/hide independently. Show Media File Meta includes file type, artist, album, size, dimensions, and length. Show Taxonomy Terms will open another option Terms Taxonomies where you can select from which taxonomy to show terms, by default the plugin register two taxonomies for media category and media tags. Will be possible to link to the term archive page or not using the option Show Terms Links.
Show Action Button: Show/hide the action button. This will open three new options where you can set the action button text, the action, and open or not the action in a new browser window. Open Media Page action will link to the default WordPress media page. Open Media URL action will link directly to the media file. Download Media File action will trigger the download of the media file. Open in Lightbox action will open the media object on a lightbox, documents will be shown inside an iframe if the browser supports the media type. Open in Lightbox Gallery have the same functionality as the lightbox but include previous next arrows to navigate between each item lightbox.
Show Item Overlay: (version 1.1.0) Show/hide an item overlay. This will add an overlay to the items that can also be used to trigger the actions explained above for the action button.
In this section of the settings, you can activate/deactivate icons for each media type. The icons will be used instead of display the image, video, or audio.
In this section of the settings, you can activate/deactivate filter functionality for the module.
Filter By Taxonomy Terms: Activate this option to show filter buttons using the terms of the selected taxonomies on the Filter Taxonomies fields that will show below. By default, the plugin registers two taxonomies for the media post type, categories, and tags. You can also select any other taxonomy already created for media using custom code or another plugin. The filters button will show on top of the grid.
Filter All Text: (version 1.1.0) Enter a comma separate list of words, you want to use instead of the default All texts. One for each taxonomy selected for the filters.
Multilevel Relation: (version 1.1.2) Select the relation to use between filters on all levels. Or if you want to show items that have terms on at least one level. And if you want to show items that have terms on all levels.
Multiselect: (version 1.1.2) Activate multiselect for filters on each level. It allows the selection of multiple filter buttons.
Multiselect Relation: (version 1.1.2) Select the relation to use between filters on each level. Or if you want to show items that have terms on at least one selected term of the level. And if you want to show items that have terms on all selected terms of the level.
The Link, Background, and Admin Label on the Content Tab have the same functionality that on default Divi modules.
Module Settings – Design Tab
In this section of the settings, you can set the layout that will be used to show the media items.
Layout: Select the layout for the items. There are three options (Masonry, Grid, and List). Masonry will stack the items vertically. Grid will show the item on a flexbox based layout and List will show the items on fullwidth with the media object to the right or left of the media meta and action button.
Grid Columns: Here you can set the number of columns for each screen size. This option will show for Grid and Masonry layouts.
Gap: Here you can set items vertical and horizontal separation for each screen size.
Items Alignment: This will allow you to set the items justification for the Grid layout.
Media Position: Here you can set the position of the media object for the List layout to the right or left.
In this section of the settings, you can set colors for the background of the header section, the background of item container, the background of lightbox click action, color each of media type icons, and media player background color and active color.
In this section of the settings, you can set the icon and the color for the icon and the hover overlay.
Lightbox Toggle (version 1.1.0)
In this section of the settings, you can control some options for the lightbox feature of the plugin.
Legend: Allow you to control which data from the media item to show on the lightbox, as the current version is possible to show the media title, caption, and/or description.
Autoplay Video/Audio: Activate/deactivate the video and audio autoplay inside the lightbox.
Documents Viewer: It will allow you to select if you want the documents on the lightbox to be open by the browser or Google/Office online viewers.
Font Style Toggles
In these sections of the settings, you can set font settings for all elements of the media: title, caption, file meta, media terms, and description.
The rest of the setting toggles on the Design Section are the same as on default Divi modules.