The Imagely Gallery module lets you display any gallery built with the NextGEN Gallery plugin (by Imagely) inside the Divi Builder and style every part of it to match your site.
You create and manage your galleries in NextGEN Gallery as usual - the module embeds a selected gallery on your page and handles the design.
Note: This module requires the NextGEN Gallery plugin to be installed and activated. Any gallery you create in NextGEN Gallery then becomes selectable inside the module. The module supports NextGEN's Image Browser, Gallery (thumbnails), and Slideshow display types.
Add The Imagely Gallery Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Imagely Gallery module and click on it to load it. Alternatively, you can use the Search option to find it.
The Imagely Gallery Module Use Cases
Displaying an existing NextGEN gallery: Show a gallery you've already built in NextGEN Gallery without recreating it in Divi.
Styling galleries to match your site: Apply Divi's design controls to the gallery's images, text, pagination, and navigation arrows for a consistent look.
Restyling galleries during a redesign: Keep the NextGEN galleries from a site you're rebuilding with Divi and restyle them in place.
Imagely Gallery Module Settings Breakdown
Once you've added the Imagely Gallery module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab lets you choose which NextGEN gallery to display and configure the module's general content settings.
Gallery - Choose which NextGEN gallery to display from the dropdown of galleries you've created in the NextGEN Gallery plugin.
Elements - Allows adding nested modules.
Background - Choose the Imagely Gallery module's background styles.
Link - Wrap the whole module in a link and choose where it points.
Loop - Enables the loop builder.
Order - Choose the order in which the Imagely Gallery module appears inside a Flexbox and Grid layout.
Meta - Choose the Imagely Gallery module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Imagely Gallery module are in this tab. Because a NextGEN gallery is built from many different parts, this module gives each part its own styling group. Some groups only apply to certain display types - for example, the counter and navigation arrows appear on the Image Browser and Slideshow views.
Image - Style the gallery images. This group includes Sizing (aspect ratio, width, height, and alignment), Border, Box Shadow, Framing (how the image fits its frame), and Filters.
Title Text - Style the gallery's title text.
Counter Text - Style the image counter (for example, "1 of 12") shown in the Image Browser view.
Description Text - Style the image description or caption text.
Tag Cloud Text - Style the tag cloud links shown in tag-based galleries.
Pagination Text - Style the pagination links used to move between pages of images.
View Link Text - Style the View Text which displays only for the Imagely Galleries which have the Layout set to SlideShow.
EXIF Meta Data Text - Style the EXIF information. This only applies if
The uploaded images contain EXIF information.
The Gallery's layout is set to ImageBrowser.
The Legacy Template is set to NextGEN Legacy: imagebrowser-exif.php.
Navigation Arrows - Style the previous and next arrows used in the Slideshow and Image Browser views. This group includes Arrow Size and Arrow Color, plus Background, Border, Box Shadow, Spacing, and Sizing for the arrow buttons (use Toggle Options to show or hide each one).
Sizing - Choose the Imagely Gallery module's sizing.
Spacing - Choose the Imagely Gallery module's spacing.
Border - Choose the Imagely Gallery module's border styles.
Box Shadow - Choose the Imagely Gallery module's Box Shadow styles.
Filters - Choose the Imagely Gallery module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Imagely Gallery module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Imagely Gallery module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Imagely Gallery module.
HTML - Choose the semantic HTML tag for the Imagely Gallery module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the module, and many more.
Visibility - Choose the module's visibility based on different devices.
Transitions - Choose how long the module's animation takes.
Position - Choose precise control of the module's placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
