Add mobile pinch & zoom in Divi

Divi is one of the most mobile-friendly WordPress builders in the industry, but it does disable the mobile pinch and zoom feature by default. This, for some users, can be a little annoying if they want to zoom in on something when on mobile.

Divi doesn’t require extra coding to make it mobile friendly, but these tweaks can make the user experience of your visitor significantly better. This Divi tutorial is catered towards one such tweak and will give you the ability to add “pinch and zoom” feature to the text and images on the mobile version of your website.

Why is Pinch and Zoom important?

A well-designed website should work on all screen sizes, but it is really not possible to get an optimal experience on every screen.

There are many mobiles with different screen sizes making it impossible to create a website that is responsive to all screens. Sometimes it’s not even the screen size but the person reading who may have weak eyesight and would definitely benefit from having an option to view the content in more detail.

Adding pinch and zoom feature to your website won’t hurt your website but it may well make it a better experience for those that want to use it. This makes it an absolute no-brainer to get the Pinch and Zoom for your website, so the choice is up to the end-user and not enforced!

[Tutorial] How to add Pinch and Zoom feature to your Divi Website:

Before I begin please do not worry this isn’t going to be a highly complex tutorial it’s pretty much copy and paste some code into a PHP file and you’re done. So let’s get started.

Step 1: Create a Divi child theme

*(Start from Step 2 if you already have a child theme). A child theme is an add-on to your existing WordPress theme (parent) they help keep the original code of your website theme intact by holding the custom changes into a separate file.

It’s best practice to create a child theme for every website as then you can go crazy (don’t) with the developing and design part of your website without having to worry about messing up the original source code.

If you don’t already have a Divi Child theme simply download the free Bare Bones Child Theme, upload it under Appearance > Themes > Add New, and then activate it. You now have a child theme!

Step 2: Add PHP Code into Functions.php file of Divi Child Theme

This is the only step that involves a bit of code, but is pretty much standard copy-pasting the code into the functions.php file.

Here’s the Code Snippet for Pinch and Zoom Ability:

// Removes et_add_viewport_meta from the wp_head phase
function remove_divi_actions() {
remove_action( 'wp_head', 'et_add_viewport_meta' );
}
// Call 'remove_divi_actions' during WP initialization
add_action('init','remove_divi_actions');
// add ability to pinch and zoom
function et_new_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />';
}
add_action( 'wp_head', 'et_new_viewport_meta', 15 );

How to edit the Functions.php file of your Divi Website:

Step 1: Go to Appearance > Editor and select Theme Functions (functions.php) in your child theme

Step 2: Copy paste the code into Theme Functions (functions.php)

Just after the opening PHP tag or <?php copy paste the code from the snippet above and click on “update file” on the bottom.

Now go to your mobile, load up the website, and test out the pinch and zoom feature. Pretty easy right? And with this, I end my tutorial on how to add the pinch and zoom feature to your Divi website.

I know it may take some time to set up a Child theme (you should do this anyway) and a little more to edit the functions.php file but it will ultimately avoid the possibility of a frustrated visitor if they are unable to view your content more clearly.

Note: If you are using a caching plugin make sure to purge the cache to view the changes.