How to Create Custom Grids in Divi Using Divi Machine

Step 1: Set Up Your Custom Post Type and Fields

Before jumping into the custom grid layout, you’ll need a custom post type. In this example, we are building a photo gallery. Start by using Divi Machine to create a custom post type called “Photo Galleries.” For this gallery, we’re adding extra information using Advanced Custom Fields (ACF). If you’re unfamiliar, ACF allows you to add custom data fields to your posts, and Divi Machine enables you to make full use of these fields visually.

Here are the steps to set up:

1. Create a Custom Post Type – Name it something relevant to your gallery, like “Photo Galleries.”
2. Create a New Field Group with ACF – Add fields that can hold your image data. For this, we’ll set up a group of image fields called “Gallery Images”.
3. Add Subfields for Images – In the group, add subfields for your images, naming them sequentially like “image_1,” “image_2,” etc. This allows you to easily reference these fields when you set up the grid.

Step 2: Add Images to Your Gallery

Once your fields are set, head over to your custom post type and start adding images to create your gallery entry. You can add images with different orientations, but make sure they match the visual style you want for your gallery. For this tutorial, we used six images, keeping them perfectly square for easy alignment in the grid.

Step 3: Build a Template for Your Custom Post Type

Next, it’s time to build a template for the custom post type. Here, we’ll create a single post template for the “Photo Galleries” post type.

1. Go to the Divi Theme Builder.
2. Create a New Template for “Photo Galleries”.
3. Add a Custom Layout – In the new template, add a row, and search for the “Gallery/Slider Divi Machine” module.
4. Configure the Module – You’ll want to select the “Gallery Images” field group you created earlier. Set the image field name to “image_” which will ensure that all subfields are pulled in properly. Divi Machine will know to fetch all images in the sequence (i.e., image_1, image_2, etc.).

Step 4: Customize Your Grid Layout

Now for the fun part—customizing the grid! With Divi Machine, you can turn your standard gallery layout into something truly unique. Here’s how:

1. Use the Divi Theme Builder to set up the gallery module in a grid format.
2. Grid Settings – Set the number of columns, grid spacing, and any other settings to achieve the visual effect you want.
3. Generate Custom Code for Custom Grids – To create a custom grid layout, use the CSS Layout Grid Builder. This tool allows you to visually generate the CSS code you need for your custom grid.

• Use the CSS grid-template-areas property to define a custom layout. You can create asymmetric grids or highlight certain images to make them larger or span more columns/rows.
• You can also refer to the detailed documentation on how to build your unique gallery grid layout using our gallery module on Divi Machine Documentation for additional guidance.

For example, you might want to use a 3×3 grid where one image takes up two rows and two columns. The CSS code for this grid could look something like:

.grid-container {
    display: grid;
    grid-template-areas:
      "mod-1 mod-2 mod-2"
      "mod-3 mod-2 mod-2"
      "mod-3 mod-4 mod-5";
}

After generating the grid using the CSS Layout Grid Builder, copy and paste just the grid block names from the CSS into your Divi Machine Gallery module under Grid Custom Code, and voilà—your gallery instantly transforms into a more engaging design.

Step 5: Publish and Test

After saving your custom template, visit your photo gallery post on the front end. You should see your images displayed beautifully in the grid you designed.

If everything looks great, congratulations! You now have a custom grid that sets your site apart from the rest.

Final Tips

• Experiment with Grid Settings: Play around with different numbers of columns, rows, and custom grid templates to find a look that works best for your project.
• Use Square Images for Clean Results: If you’re new to creating custom grids, starting with perfectly square images can simplify the alignment.
• Keep CSS Naming Conventions Consistent: Make sure the image subfields in your ACF group have consistent naming (e.g., image_1, image_2, etc.) to keep everything organized.

Wrapping Up

And that’s it, folks! Custom grids are a powerful way to add personality to your Divi site, and Divi Machine makes it easier than ever to achieve a truly bespoke look for your clients. Don’t let standard grid layouts hold you back—get creative!

If you found this guide useful, make sure to check out Divi Machine, and if you have any questions or want to see more, drop a comment below. We love hearing from you!

Happy building, and catch you in the next tutorial!