Welcome to our guide on Creating Beautiful Image Galleries with Divi! If you’re looking to showcase your images in a visually stunning and organized manner, This is the moment you’ve been waiting for!. In this blog post, we’ll walk you through the process of setting up an eye-catching image gallery using Divi’s default gallery module. Whether you’re a seasoned web designer or a beginner, this step-by-step tutorial will help you harness the power of Divi’s built-in tools to enhance your website’s visual appeal. Let’s dive in and start building your perfect gallery!

Installing and Setting Up the Divi Theme

Before adding an image gallery to your website, it is essential to first install the Divi Theme. For a comprehensive guide on purchasing, downloading, and installing the Divi Theme, we have prepared a detailed step-by-step tutorial. After successfully installing Divi, you will be equipped to enhance your site with a visually appealing image gallery using Divi’s robust tools. Follow our guide to get started with Divi, and then proceed to create a stunning image gallery to showcase your content.

Creating a New Page and Activating the Divi Builder

To add an image gallery to your website using Divi, start by creating a new page or selecting an existing one where you want the gallery to appear. From your WordPress dashboard, navigate to Pages and click on Add New. Enter a title for your page— for example, “Gallery” if that’s the purpose of the page. After naming your page, click Publish to make it live.Once your page is published, you will see a button labeled Use The Divi Builder. Click this button to activate Divi’s visual page builder, which will enable you to customize your page and incorporate the image gallery using Divi’s advanced features.

Creating a New Page and Activating the Divi Builder

Navigating the Divi Builder Interface

When you first dive into the Divi Builder interface, you’ll encounter three modules: Start Building, Browse Layouts, and Choose Page. The Start Building option allows you to create a new page from scratch. If you prefer to use a pre-made design, select Browse Layouts to choose from Divi’s extensive collection. The Choose Page option is for working with an existing page on your site and includes three sub-options: Premade Layout for selecting and uploading a Divi Elegant Themes design, Saved Layout for using previously created custom templates, and Clone Existing Page for utilizing a page already present on your site. For this guide, click on Start Building. After clicking, you’ll see a blank page with a plus icon button. Click the plus icon to open the Insert Row option and select a single-column row, which will allow your gallery to be displayed in full width, providing ample space for your content.

Navigating the Divi Builder Interface

Read More: Cafe Landing Page Divi Layout

Adding and Inserting a Gallery Module

After selecting the row and column, a new module setting will appear, labeled Insert Module. This setting provides two options: New Module and Add From Library. Choose New Module to proceed. In the module search bar, start typing “Gallery” and the gallery options will appear as soon as you’ve typed two or three letters. Select the Gallery option from the search results. Your gallery will then be displayed on the page, as shown in the image below. Congratulations, your gallery is now ready! The next step is to proceed with customization.

Adding and Inserting a Gallery Module

Read More: Divi Accordion Module Pack

Configuring Gallery Settings

Hover your mouse over the Gallery module to reveal the settings option. Click on this settings icon to open the Gallery Settings. In the Gallery Settings, navigate to the Content tab. The first option here is Image; click on it to access the Media Library. Select the images you want to include in your gallery by choosing them from the Media Library. Once you have selected all desired images, click the Select button in the bottom right corner.

Configuring Gallery Settings

Read More: Divi Blog Module Pack

Adjusting Image Order and Count

Next, navigate to the Image Order option within the Gallery Settings. Here, you’ll find two choices: Default and Random. Selecting Default will display the images in a structured pattern, while Random will shuffle the images randomly, as the term suggests. Additionally, the Image Count option allows you to specify how many images you want to display. We have selected 12 images, which not only looks more appealing but also showcases a greater number of images in your gallery.

Adjusting Image Order and Count

Configuring Additional Gallery Settings

In this section, we will cover all the settings options together, as they are brief and straightforward. Scroll down to the Elements section. Here, you’ll find a toggle button for Title; turn this off to avoid displaying titles, making your gallery look cleaner and more attractive. The next option is Show Pagination. Pagination typically refers to dotted or arrow icons for navigating through images. Since we don’t need these navigation buttons or titles for our gallery, Hide Image Title and Pagination in Divi Gallery Lightbox.

Moving on to the Content Setting section, the Link option allows you to add internal or external links to your images. You can also configure Module Links Target, which determines whether the links open in a new window or the same window.

The Background Setting is another crucial option. Here, you can set a background color for your image gallery or upload a background image.

Lastly, the Admin Label setting lets you assign a label to the module, such as “Gallery” for the gallery module or “Contact Form” for a contact form module, helping you identify and manage your modules more easily.

Configuring Additional Gallery Settings

Exploring the Design Section

In the Design section of the Gallery module, you’ll find several subsections. The first setting is Layout. Within this subsection, you have two options: Grid and Slider. The Grid layout arranges images in a grid pattern, displaying them side by side and one above the other. Slider, on the other hand, presents images in a sliding format, allowing them to move right or left, with options for auto-sliding or manual navigation via buttons. For a gallery, we will select the Grid option to showcase images in a more traditional layout.

The next option under Layout is Thumbnail Orientation, which offers two choices: Landscape and Portrait. Landscape orientation causes images to slightly zoom out, while Portrait orientation makes images slightly zoom in. In other words, Landscape decreases the size of the images, while Portrait increases it. We will choose Portrait, but feel free to select the option that best suits your visual preference, as both are effective.

Exploring the Design Section

Read More: Designing Flawless Websites: Tips, Tricks, and Divi Enhancements

Customizing Overlay Settings

After configuring the Layout, scroll down to the Overlay section. In this area, you will find three options: Icon Color, Overlay Background Color, and Overlay Icon. The Icon Color option allows you to set the color of the overlay icon. The Overlay Background Color lets you choose a background color that will appear over the image. The Overlay Icon option enables you to select a preferred icon from the available choices for the overlay.

To clarify what an overlay does, when you hover your mouse over an image, the image’s color will change, and an icon will be displayed, as demonstrated in the image below. This effect, known as an overlay, allows the chosen color to cover the image, creating a highlighted effect with the icon or additional information visible on hover.

Customizing Overlay Settings

Read More: Divi Overlays Popup Builders

Customizing the Image Section

In the Image section, you’ll find several important options for customization. Follow these steps to personalize your image effectively:

At the very top, you’ll see the Image Rounded Corners option. This allows you to adjust the corners of your image to create a rounded effect, as shown in the image below. You can apply rounded corners to all corners, or just one or two, by selecting the appropriate options. To set the radius of each corner individually, click on the icon to access separate settings for each side.

Below this, the Image Border Style option lets you add a border to your image, which can be customized for each side or applied uniformly around the entire image. You can choose the shape and style that best fits your design.

Next is the Image Border Width, which allows you to adjust the thickness of the border according to your preference. The Image Border Color option lets you select a color that complements your website’s design, ensuring the border color aligns with your overall theme.

The Image Border Style option lets you choose from various styles, such as dotted or solid, depending on your design needs. Finally, the Image Box Shadow option enables you to add a shadow effect to your image. Choose a shadow design that enhances your image and fits your desired results.

A few additional steps remain that are not covered in this image. We will explore these further customization options in the next paragraph.

Customizing the Image Section

Fine-Tuning Image Customization Settings

As you continue to scroll down, you’ll find additional image customization settings. The Image Hue option changes the internal colors of your image, but it’s usually best to avoid this unless you want a significant color shift. Image Saturation allows you to adjust the intensity of the colors, making them either more vibrant or more muted. The Image Brightness setting lets you modify the overall brightness, making the image lighter or darker, while Image Contrast changes the difference between light and dark areas to enhance the visual impact.

For now, we’ll skip adjusting these settings. Moving on, Image Invert alters the colors to their opposites, creating a negative-like effect, and Image Sepia adds a vintage tone. Both options are useful for dramatic color changes, so you might experiment with them as needed.

The Image Opacity setting controls how transparent or opaque the image appears, affecting its visibility. Image Blur adjusts the sharpness of the image, allowing you to make it clearer or more blurred. Lastly, Image Blended Mode provides various blending options to creatively combine your image with its background. You can explore these options to find the best effect for your gallery or choose to skip them if they aren’t necessary for your design.

These settings offer numerous ways to enhance your gallery’s appearance. Although we’ve covered their functions, the best results will come from experimenting with each setting to see what works best for your design.

Fine-Tuning Image Customization Settings

Read More: How To Apply A Blur and Filter Effects To Divi Section Background Image

Customizing Text Settings

The next section to adjust is Text. Here, you can set the Text Alignment to position the text in one of four ways: left, right, center, or full width, depending on your design preferences. The Text Color option offers two choices: Dark and Light. While we are hiding the text in this gallery setup, it’s helpful to know that these options are available for future text elements. Lastly, the Text Shadow setting allows you to add a shadow effect to your text, which can enhance its visibility or provide a stylistic touch. Although the text is not currently visible in this gallery, these settings can be useful for customizing text in other contexts.

Customizing Text Settings

Read More: The Divi Text Module

Customizing Title Settings

The Title settings are essential for refining the appearance of text elements, even though they aren’t utilized in the current gallery setup. The Title Heading Level option allows you to choose from heading levels H1 through H6, which affects the size and hierarchy of the title. Title Font Style lets you select the font style, such as Roboto, to match your design. With Title Font Weight, you can make the title bold by increasing its weight.

Title Font Style includes additional styling options such as Italic, Capital Letters, and Underline to further customize the title’s appearance. Title Text Alignment enables you to position the title to the left, right, center, or full width, as previously described. Title Text Color allows you to change the color of the title text, similar to the text color setting.

The Title Text Size setting adjusts the size of the title, while Title Letter Spacing increases the space between individual letters (e.g., A B C), not between words. Title Line Height controls the space between lines of text, affecting the vertical distance between lines. Finally, Title Shadow adds a shadow effect to make the title more visually appealing. Although these settings are not currently applied to the gallery, they are useful for customizing titles in other areas.

Customizing Title Settings

Customizing Sizing Settings

We have skipped the Caption Text and Pagination Text settings as they are similar to the text settings previously discussed and do not require further explanation. Instead, let’s focus on the Sizing settings for the gallery.

In the Sizing section, the first option is Width and Maximum Width, which allows you to define how wide you want your gallery to be. You can specify the exact width or set a maximum width to control the gallery’s size.

Module Alignment lets you position your gallery in the center, right, or left of the page, depending on your design needs.

The final three options pertain to Height. You can adjust the Minimum Height and Maximum Height of the gallery module, allowing you to control how tall the gallery will be. These settings help you ensure that the gallery fits well within your page layout and maintains a consistent appearance.

Customizing Sizing Settings

Read More: How To Make The Row Full Width In Divi

Customizing Spacing Settings

In the Spacing section, you can adjust the spaces around and within the gallery module. The first option is Margin, which lets you shift the module from its current position. For example, if you want the module to move slightly upwards or away from other elements, you can adjust the margin accordingly.

The next option is Padding, which allows you to add space inside the module. Both Margin and Padding can be applied to individual sides or all sides of the module. You can customize these settings for one side, two sides, or all four sides, depending on your design needs.

To apply padding or margin to a specific side, click on the link icons to separate the settings for each side. This will enable you to set different values for the top, bottom, left, or right sides as needed. Adjust these settings one by one to achieve the desired layout and spacing for your gallery.

Customizing Spacing Settings

Customizing Border Settings

The Border settings are essential for designing an appealing gallery. These settings allow you to apply borders to one side or multiple sides of your images, similar to Padding and Margin.

The first option, Rounded Corners, lets you round the corners of your images. By increasing the pixel (px) value for each corner, you can make the corners progressively more rounded, creating a soft, curved effect.

Next is Border Style, where you can choose the type of border for your images, including options like solid, dashed, or dotted. This allows you to define the visual style of the border.

The Border Width setting controls how thick the border will be. Adjust this to match your design needs, ensuring the border is the right thickness for your gallery.

Finally, Border Color lets you select a color that aligns with your website’s design. This customization helps ensure that the border color complements the overall theme of your site.

These border settings help you create a cohesive and attractive appearance for your gallery images.

Customizing Border Settings

Read More: Getting Started with Divi: Design Settings

Customizing Animation Settings

The final section is to adjust Animation, while the Filter and Transform options are not relevant for the gallery and have been omitted. In the Animation settings, you can refine the visual effects of your gallery.

Animation Style offers various animation designs to choose from. Experiment with different styles to find the one that best suits your gallery’s look. Animation Direction allows you to determine how the animation will appear, with options such as center, zoom in, or zoom out, influencing the movement and effect of the animation.

Animation Duration controls the length of time the animation will play, affecting its speed. Animation Delay specifies the delay before the animation starts, allowing you to time the effect precisely. Finally, Animation Intensity adjusts the aggressiveness of the animation; lower intensity results in a subtle effect, while higher intensity creates a more dynamic and eye-catching animation.

Applying these settings will help you achieve a visually appealing and well-timed animation for your image gallery, enhancing its overall design.

Customizing Animation Settings

Read More: How to Create Scroll Animated Number Counters with Divi

Adjusting Gallery Size

To finalize your gallery setup, you might need to adjust its size. If you want your gallery to occupy the full width of the page, follow these steps:

First, access the Row Settings by clicking on the row within your gallery. Navigate to the Design section and select Sizing. Enable the toggle button for Use Custom Gutter Width. Once activated, you can adjust the gutter width to increase the space between columns, thereby expanding the overall width of your gallery.

Next, enable the toggle button for Equalize Column Height. This will ensure that all columns in your gallery have the same height, which can help in maintaining a consistent and organized appearance. Adjust the height settings as needed to achieve the desired look.

By applying these adjustments, you can resize and format your gallery to fit perfectly within your page layout, ensuring it displays beautifully across different screen sizes.

Adjusting Gallery Size

Divi Advanced Settings

The final section to explore is the Advanced Settings in Divi. These settings are useful when your design does not meet your expectations or if you cannot achieve the desired effect using Divi’s built-in functions and modules. Advanced Settings allow for more in-depth customization beyond the standard options.

If you need detailed guidance on using these settings, please refer to our comprehensive step-by-step guide by clicking on Getting Started with Divi: Advanced Settings. This resource will help you navigate and utilize Divi’s advanced features to achieve the perfect design for your website.

Divi Advanced Settings

Final Result

The image below displays the final outcome after crafting a stunning gallery using Divi’s built-in module. This result showcases how all the settings discussed in this blog post come together to create a visually appealing image gallery. We have demonstrated how to utilize Divi’s features to set up and customize your gallery effectively.

Final Result

Conclusion

In this comprehensive guide, we’ve explored the process of creating visually stunning image galleries using Divi’s default gallery module. From installing the Divi Theme to customizing every aspect of your gallery, we’ve covered each step to ensure you can showcase your images in a beautifully organized and attractive layout.

Starting with the installation and setup of the Divi Theme, we demonstrated how to activate the Divi Builder and navigate its interface. We then guided you through adding a Gallery module to your page, configuring its settings to include your selected images, and adjusting the order and count to suit your needs.

We delved into additional gallery settings, such as turning off titles and pagination for a cleaner look, and explored various design options like layout choices (Grid or Slider), thumbnail orientation, and overlay customizations. These options allow you to refine the appearance of your gallery, ensuring it aligns with your site’s design aesthetics.

Furthermore, we covered how to fine-tune image customization settings, including rounded corners, borders, and shadows, to enhance the visual appeal of your images. We also discussed Advanced customization options like image hue, saturation, brightness, and various filters to achieve the perfect look for your gallery.

In the section on text and title settings, we highlighted their relevance for future use, even if they weren’t applied to the current gallery setup. We then focused on sizing and spacing settings to ensure your gallery fits seamlessly within your page layout. Border and animation settings were also explored to add finishing touches that make your gallery stand out.

Finally, we discussed how to adjust the gallery size by modifying row settings, ensuring your gallery occupies the desired width and maintains a consistent appearance across different screen sizes.

By following these detailed steps, you can harness the power of Divi’s built-in tools to create an eye-catching image gallery that not only showcases your content effectively but also enhances your website’s overall visual appeal. With Divi’s robust features at your disposal, your gallery will undoubtedly capture the attention of your visitors and elevate the aesthetic quality of your site.

Read More: Divi Accordion 50 Layouts Pack