Divi Elastic Gallery is a third-party plugin for Divi that gives a brand spanking new gallery module to the Divi Builder. Display pictures with plenty of structure possible choices, select how the images react when clicked, regulate the captions, titles, clear out, pagination, and additional. In this post, we’ll take an extensive take a look at Divi Elastic Gallery to help you decide if it’s the suitable Divi Module on your needs.
Divi Elastic Gallery Module
Divi Elastic Gallery supplies a brand spanking new module to the Divi Builder known as Elastic Gallery.
The module’s Content material subject matter tab contains Gallery Settings, Background, and Admin Label. Gallery Settings contains the image selector and fairly a large number of image adjustments. So that you could upload pictures to the gallery, make a choice Add Gallery Photos. The Media Library will open, and also you’ll select the images you want to turn.
Gallery Settings
Together with pictures mechanically display them inside the gallery. You’ll add as many as you want and it doesn’t matter what dimension they’re.
I’ve made up our minds on pictures of fairly a large number of sizes for the example below. The pictures have mechanically adjusted in dimension to fit the space. This created a mosaic with fairly a large number of columns. We can regulate the choice of pictures in line with row, the height of the images, the space between them, the image dimension, and so forth. We’ll take a look at plenty of the settings.
Row Most sensible and Area Between the Photos
A couple of the ones settings took me a minute to understand. Proper right here’s my rationalization of every environment in line with the documentation and my assessments.
The Minimum Row Most sensible supplies pictures to every row until the dimensions is higher than the minimum. Using a lower amount presentations additional pictures inside the gallery. Inside the example below, I’ve set the Minimum Row Most sensible to 145.
Minimum Row Photos determines the choice of pictures that may appear in as many rows as possible, starting with the bottom row. Inside the example below, I’ve set the Minimum Row Photos to 6. The bottom row presentations 6 pictures, and the best row presentations 3. If I set it to 4, the best row presentations one image and the second and nil.33 rows display 4 pictures.
Area Between Photos determines the choice of pixels between every image on the top, bottom, and sides. I’ve set the example below to 21 pixels and there are 21 pixels on every facet between every image.
Image Onclick Movement
The Image Onclick Movement determines what happens when the shopper clicks an image inside the gallery. It will in truth open the image in a lightbox, link to other pages, or don’t anything else. When you’ve got it open in a lightbox, you’ll see possible choices for the lightbox. When you’ve got it to link to other pages, you’ll see a field where you’ll enter every URL with instructions on how you’ll be able to add the links.
Proper right here’s a take a look on the lightbox possible choices. You’ll regulate the lightbox color and choose from 5 possible choices for the image identify and caption inside the popup. Show now not anything else, the identify out of doors the image, the identify and caption out of doors the image, the identify during the emblem, or the identify and caption during the emblem. Showing the identify supplies an chance for the legend color.
Proper right here’s the default lightbox. It has a depressing background, arrow navigation, an extensive icon, and a reputation beneath the image.
For this example, I’ve added the identify during the emblem and changed the background color.
Categories Filter
The Categories Filter signifies that you’ll be able to select the kinds to turn and change the text for the All Categories button.
Pagination
The Pagination chance supplies pagination beneath the gallery. You’ll moreover select the internet web page dimension, which determines the choice of pictures that presentations on every internet web page. in this example, I’ve made up our minds on a Internet web page Measurement of 4. This displays 4 pictures in line with internet web page and creates 3 pages to show my pictures.
Divi Elastic Gallery Design Alternatives
The Elastic Gallery Module contains the entire standard Divi settings, allowing you entire keep an eye on over the styling of every element. Proper right here’s a take a look on the idea settings.
Overlay
The Overlay settings can help you choose from showing an icon, the image identify to turn inside the overlay, or best showing the overlay. Business the colors and fonts with the standard Divi settings. inside the example below, I’ve made up our minds on to show the identify and changed the overlay color, font color, font dimension, style, and added a shadow to the font.
Hover Animations
The hover animations unravel how the overlay turns out when the shopper hovers over the image. Choose from 7 animations or disable animations.
You’ll moreover select an animation for the image that takes place similtaneously the overlay animation. Choose from 5 animations or disable the image animation. I’ve made up our minds on Grayscale to Color inside the example below. This changes the images to grayscale and displays the image in color when you hover over it.
Photos
The Image settings keep an eye on the rounded corners and border. Regulate the border’s sorts, width, and color. Inside the example below, I’ve made the rounded corners 30px, added a 1-pixel border, and changed the color to purple.
Gallery Filter
The Gallery Filter has a very good choice of possible choices. Regulate the alignment, color, fonts, borders, and so forth., for the category buttons, and then regulate the existing magnificence independently. The not too long ago energetic magnificence will use the average clear out settings when you don’t regulate it separately.
Inside the example below, I’ve set the clear out to turn at the correct. I’ve moreover better the dimensions of the fonts, font style, and weight, added line length, changed the background color, added a border, rounded two of the corners, and added correct and left padding. I customized the energetic magnificence independently.
Gallery Pagination
The Gallery Pagination moreover has a very good choice of possible choices. Regulate the alignment, colors, fonts, borders, spacing, shadows, and additional. In this example, I’ve adjusted the dimensions of the fonts, changed their weight, rounded the corners, changed the colors of the fonts and backgrounds, and given them a box shadow. I’ve moreover added a border to the energetic internet web page, squared the corners, reversed the colors, and bigger the dimensions of its font.
Divi Elastic Gallery Example
Proper right here’s how Divi Elastic Gallery seems to be like inside of a structure. I’m the use of the unfastened Leather-based Items Structure Pack that’s available inside of Divi. I’ve made the gallery entire width changed the colors to test the structure and changed the images to grayscale and have them trade to color on hover. The space between the images is 0. The font is Inter, with bold for the burden, and TT for the way. I’ve added 20px Padding to the best and bottom and 30px Padding to the left and correct.
This situation displays the Elastic Gallery with one of the most pictures showing the hover have an effect on. It was once easy to make the gallery are compatible the structure.
Gain Divi Elastic Gallery
Divi Elastic Gallery is to be had within the Divi Market for $25. It contains countless internet web page usage, a 30-day money-back make certain, and one year of strengthen and updates.
Completing Concepts
That’s our take a look at Divi Elastic Gallery. This is a simple module, however it definitely has numerous display and styling possible choices to create with regards to any type of gallery you need. A couple of the Min settings take some tweaking to get the design you want, alternatively I was impressed with the layouts I was in a position to get from it. Should you’re interested in a feature-rich gallery module for Divi, Elastic Gallery is worth a look.
We want to pay attention from you. Have you ever ever tried Elastic Gallery for Divi? Let us know what you believe it inside the comments.
The post Divi Plugin Spotlight: Divi Elastic Gallery gave the impression first on Sublime Issues Weblog.
0 Comments