How To Use The ESC Key To Enable Or Exit The Divi Visual Builder

Divi, a flagship WordPress theme by Elegant Themes, empowers users to create stunning websites without any coding knowledge. Central to its user-friendly design is the Divi Visual Builder, a powerful tool that allows for real-time customization and editing. However, navigating in and out of the Visual Builder efficiently can enhance your workflow significantly. One handy shortcut for this is utilizing the Escape (ESC) key. In this guide, we’ll explore how you can leverage the ESC key to seamlessly enable or exit the Divi Visual Builder, streamlining your website creation process.

Exit Divi visual builder by using a PHP code snippet

you can add that code in your child theme or you can also use a code snippets plugin to use this code. After adding that code snippet you will be able to enable/disable divi visual builder with ESC key easily.

function wpexpertguide_enable_disable_divi_VB() {
    wp_enqueue_script('jquery');
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(document).keyup(function(e) {
                if (e.keyCode === 27) {
                    let builderKey = document.location.href.indexOf("?et_fb=1&PageSpeed=off");
                    if ($('body').hasClass('logged-in')) {
                        if (builderKey >= 0) {
                            if ($('li#wp-admin-bar-et-disable-visual-builder>a').length > 0) {
                                $('li#wp-admin-bar-et-disable-visual-builder>a')[0].click();
                            } else {
                                window.location.href = document.location.href.substring(0, builderKey);
                            }
                        } else {
                            if ($('li#wp-admin-bar-et-use-visual-builder>a').length > 0) {
                                $('li#wp-admin-bar-et-use-visual-builder>a')[0].click();
                            } else {
                                window.location.href = document.location.href + '?et_fb=1&PageSpeed=off';
                            }
                        }
                    }
                }
            });
        });
    </script>
    <?php
}
add_action('wp_head', 'wpexpertguide_enable_disable_divi_VB');

Benefits of Using the ESC Key:

Incorporating the ESC key into your Divi workflow offers several advantages:

1. Speed and Efficiency: Toggling the Visual Builder with a single keystroke accelerates the editing process, saving valuable time.
2. Enhanced User Experience: The seamless transition between editing and viewing modes promotes a smoother user experience, facilitating more intuitive website customization.
3. Minimal Disruption: The ESC key provides a non-intrusive means of accessing and exiting the Visual Builder, minimizing disruption to your workflow.
4. Streamlined Workflow: By integrating keyboard shortcuts like the ESC key into your workflow, you can streamline the website creation process and focus on design and content creation.

In Conclusion

Mastering the use of keyboard shortcuts such as the ESC key can significantly enhance your experience with the Divi Visual Builder. By leveraging this simple yet powerful tool, you can streamline your workflow, increase productivity, and create visually stunning websites with greater ease and efficiency. Whether you’re a seasoned Divi user or just getting started, incorporating keyboard shortcuts into your workflow is a smart strategy for optimizing your website development process.