Make the Divi Gallery Module Swipeable

Written by Dan Mossop

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to the next / previous image. This tutorial explains how to make the Divi Gallery Module slider swipeable on touchscreens.

Divi doesn't currently have an option to make the gallery module swipeable. However, we can do so using the "Enable Touchscreen Swiping" option included in the Divi Booster and Divi Gallery Booster plugins.

Make the Gallery Module Swipeable with Divi Booster

Our Divi Booster plugin adds a range of new options to the Divi gallery module, including the option to make its slider layout swipeable. This same option is also available in our Divi Gallery Booster plugin, which is a subset of the Divi Booster features focused exclusively on enhancing the Divi gallery module. Whichever plugin you choose to use, here's how to set it up. 

Get Divi Booster (or Divi Gallery Booster)

Our popular Divi Booster plugin adds hundreds of new features to Divi, including the one we need here.

If you haven't already done so, grab your copy of Divi Booster now.

Divi Booster Plugin

Alternatively, if you don't need the full power of Divi Booster, you can get Divi Gallery Booster which adds all the essential missing features to the Divi Gallery module. 

Divi Gallery Booster Plugin

Upon purchase, you'll be provided with a copy of the plugin zip file, called either divi-booster.zip or divi-gallery-booster.zip, depending on which plugin you have. Download the plugin zip file to your computer, ready for installing in the next step.

If you have already purchased either plugin, you can obtain the plugin zip file from within your Divi Booster account.

Install Divi Booster or Divi Gallery Booster

The plugin zip file can then be uploaded to your own site at:

WP Admin > Plugins > Add New Plugin > Upload Plugin

There, click "Choose File", locate and select your divi-booster.zip or divi-gallery-booster.zip file and then click "Install Now". Once uploaded, click the button to activate the plugin and the feature will be added to Divi.

Open your Page for Editing in the Visual Builder

Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.  

Open your Gallery Module's Settings

Locate the gallery module you want to modify, or add it to your layout if you haven't already. Then, hover over the module to reveal the module buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the module instead of hovering. Click the "Gear" icon to open the module's settings.

Activate the "Enable Touchscreen Swiping" Option

In the gallery module settings, navigate to the "Design" tab and then the "Layout" settings section. First, ensure your layout is set to "Slider", as this option is only compatible with the gallery module slider layout. When the layout is set to "Slider", you should see the "Enable Touchscreen Swiping" option added by the plugin. Set it to "Yes" to activate the option.

The Divi gallery module mobile swiping option was added in Divi Booster v4.7 and Divi Gallery Booster v1.3.

Save the Module Settings

To save the changes to the module, click the green check mark button at the bottom of the module settings. 

Save the Page

When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

Test Out the Swiping Effect

When you are ready, open your page on a touchscreen device, such as a mobile or tablet. Now you and your users should be able to easily navigate the slides in the gallery by swiping left or right. 

Conclusion

That's all there is to it. A simple way to level up your mobile designs with a user-friendly swiping function. No more trying to click on small arrows or dots – just an easy, intuitive swipe gesture.

 

Enhance Your Divi Galleries with Essential Features

Add all the missing options you need to style your Divi gallery modules with ease and make them swipeable. Whether you choose the full power of Divi Booster or the focused enhancements of Divi Gallery Booster, you'll save time and impress your site visitors with smooth, interactive galleries.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Removing Gaps in Divi Builder Layouts

Designing a seamless, professional-looking website is often about managing space effectively. Gaps in Divi Builder - particularly excessive white space between sections, rows, or modules - can disrupt your layout, leading to a fragmented and less engaging user...

Random Divi Posts