Image Gallery For Free ACF Plugin

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to set up an image gallery with the free version of ACF.

Step 1: Add Group Type Gallery Custom Field

Make your way to the Field Group in ACF associated with your desired Post Type. Add a Group Type Gallery Custom Field.

Step 2: Add A Gallery Of Images

Add 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 3: Create A Single Post Template

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

Step 4: Add & Customize The Gallery Slider Module

After adding the Gallery Slider/Module you will need to customize it by defining the Gallery Layout, ACF Gallery Type, ACF Group Name as well as other options. For more information on this module please visit the Modules section in our documentation to your left.

Step 5: Build A Unique Grid Layout

From Machine 3.6 there has been the ability to build a unique grid of different sizes of images. To use this feature add images to your gallery as shown above. Next, open up the Grid Settings section of the module and there you will see a black box that says Grid Custom Code. 

Select Grid Gallery Layout

Grid Settings

In Grid Settings insert code (CSS) describing the arrangement of your images using THIS website here: grid.layoutit.com. For example, the image grid below is made using the following "mod" code. Please know that it is important to use "mod-" as the start of each of the grid elements.

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.