Skip to main content

Build Unique Gallery Grid (Grid Custom Code)

Divi Machine allows you to build your own unique gallery grid layout for our Gallery/Slider module as shown below.

info

We have a step-by-step tutorial on How to Create Custom Grids in Divi Using Divi Machine) on the Divi Engine blog which may also be helpful.

Using ACF, add a gallery to a post type. Instructions for ACF Free and ACF Pro can be found at these links.

Step 2: Create your Custom Grid​

To create this code we will use a free online tool located HERE called Layoutit!.

Imagine that the entire white space of blocks is going to be your gallery of images. Click on a block, type "mod 1" and save the block. one "mod" represents one image in your gallery.

Click on a block again, but this time try to make it bigger like in the image below. Type "mod 2" and save the block. The second image will therefore take up four blocks of "mod 1" size.

For "mod 3" I am going to surround two blocks, one on top of the other.

To end off I create two more blocks named "mod 4" and "mod 5" and then save.

The last step is to copy and paste this code into the Gallery/Slider module which is found under the phrase, "grid-template-areas:" In my example it is:

"mod-1 mod-2 mod-2"
"mod-3 mod-2 mod-2"
"mod-3 mod-4 mod-5"

Step 3: Insert Grid Custom Code.​

  1. Add or Edit the Gallery/Slider Module.
  2. Scroll down to open up the Grid Settings section.
  3. Paste the code from the previous step into the Grid Custom Code setting.

Video Tutorial​