Gallery/Slider Module

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to learn how to use the Gallery/Slider module.

Step 1: Gallery Of Images Custom Field

Head over to the Field Group in ACF associated with your desired Post Type. Add a Group Type Gallery Custom Field and as many Sub Fields as you desire with Type Image. Make sure that you go to your posts and add images for each post.

Step 2: Single Post Template & Gallery/Slider Module

Make your way to the Single Post Template in the Theme Builder where you would like to display an Image Gallery and add the Gallery/Slider Module.

Step 3: The Gallery/Slider Module

After adding the Gallery/Slider Module you will need to customize it by defining the Gallery Layout, ACF Gallery Type and ACF Group Name. Please view the Gallery/Slider Module settings below.

Gallery/Slider Module Settings

Main Settings

  • Gallery Layout: Select Grid or Slider.
  • ACF Gallery Type: Select Free or Pro ACF version.
  • ACF Group Name: Select the ACF Group Name.
  • ACF Group Image Name: Define an ACF group image name.
  • Include Featured Image In Gallery: Enable to include the Featured Image.
  • Enable Lightbox: Enable to make images open in a Lightbox.
  • Image Count: Define the number of images to show.

Slider Tablet Settings

  • Slide To Show On Tablet: Define the number of images to show on the Tablet view.
  • Slides To Scroll On Tablet: Define the number of images to show on the Tablet view.

Slider Mobile Settings

  • Slide To Show On Mobile: Define the number of images to show on the Mobile view.
  • Slides To Scroll On Mobile: Define the number of images to show on the Mobile view.

Grid Settings

  • Grid Style: Select Grid or Masonry.
  • Show Title And Caption: Enable to show the Title and Caption.
  • Grid Columns: Select the number of Grid Columns on Desktop.
  • Tablet Grid Columns: Select the number of Grid Columns on Tablet.
  • Mobile Grid Columns: Select the number of Grid Columns on Mobile.
  • Grid Gap Size: Select the size of the Grid Gap.
  • Overlay Icon: Select and Overlay Icon.
  • Overlay Icon Color: Select the Overlay Icon colour.
  • Overlay Background Color: Select the Overlay Background colour.
  • Grid Custom Code: Define a Custom Layout of your Grid using the mod CSS.

More Support?

Please email us at [email protected] if you are unable to get Divi Machine working.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.