Auto Admin Labels for Divi Modules

Written by Dan Mossop

Divi modules, rows, and sections can have custom admin labels that make it easier to locate specific elements in Divi Builder layouts, when viewed in wireframe mode. When new modules are added to the page, their admin labels default to the module type, for instance, “Text”, “Button”, etc. However, it’s possible to change the admin label in the module settings.

The problem with adding manual labels is that it consumes time and requires a lot of effort, especially for web designers working on a large website with multiple pages. Therefore, it would be helpful if these admin labels could be populated automatically from the module content itself.

In the past, it was possible to dynamically copy text being entered into a module field (such as the "Title" field), directly into the admin label field. But with the latest Divi Builder updates, the admin label field no longer exists in the page while its settings toggle is closed. This makes it challenging to copy data to the admin label field automatically.

Automatically updating Admin Labels using Divi Admin Label Helper

Resource Mobility have come up with a plugin called Divi Admin Label Helper that aims to work around this problem. This plugin includes the option to move the admin label field / keep its toggle open. This makes it possible to populate the admin label field automatically using the content from another field. Divi Admin Label Helper does this for any module that supports the "Title" field.

Streamline Your Divi Workflow with WP Magic CTAs

Effortlessly enhance your WordPress posts with AI-driven CTAs using WP Magic CTAs. This innovative plugin auto-generates tailored call-to-actions, helping you boost engagement and conversions without the hassle. Perfect for enhancing offers and directing visitor attention.

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, 

6 Comments

  1. Hi Dan!
    No idea if you're still active over here but I have a question. I added the code to functions.php in my Divi child theme. Changed it a little cause the names of classes and id's are slightly different now in Divi but I can't get the the text module admin label to auto populate with text I type in the text box.. This is what I used:

    function dattm_register_admin_js() { ?>

    jQuery(function($){

    // text module
    $(document).on('mousedown', '.et-fb-modal-save, .et-fb-modal-save-template', function() {

    if ($('.et-fb-module-settings[data-module_type=et_fb_text]').length) { // if text module

    // Get the tinymce iframe
    var iframe = document.getElementById('main_content_content_vb_tiny_mce_ifr');

    if (iframe) { // Using tinymce

    // Get the tinymce dom element
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var content = $(innerDoc).find('#tinymce');

    } else { // Not using tinymce

    // Get the textbox content as HTML
    var textbox = $('#main_content_content_vb_tiny_mce');
    var content = $($.parseHTML("+textbox.val()+"));

    }

    // Get the first header or paragraph to use as title
    var title = content.children(":header,p").first().text();
    title = (title.length > 80)?(title.substring(0,80)+'…'):title;

    // Update the admin label with the title
    $('#et-fb-admin_label').val(title);
    }
    });
    });

    <?php
    }
    add_action('admin_head', 'dattm_register_admin_js');

    Hope you can help me out!

    Best, Martine form the Netherlands

    Reply
    • Hey Martine, it looks this approach doesn't really work any more. The issue is that the visual builder the settings modal no longer contains the elements for closed settings sections – they are dynamically added when the setting section is opened. This means that, for example, the text module text box and the admin label field are no longer present at the same time in the settings modal, since they exist in separate settings sections. As such the approach of copying text from the text box straight into the admin label field doesn't work. I'll try and spend some time on this (most likely this won't be until the new year now) and if I'm able to figure out a good alternative I'll update here. Cheers!

      Reply
  2. Just added this to a new site I'm building with the latest Divi, and it no longer seems to work. I've used it before, and it has. Perhaps recent Divi updates broke it?

    Reply
    • Hey Michael, that's exactly what happened. The recent Divi updates changed the id on the content box preventing the original version of the code from working. I've updated the post, so the code should now (hopefully) work with both old and new Divi versions. Let me know if you can't get it going. Thanks!

      Reply
  3. An interesting article and a very useful piece of code. Unfortunately you neglected to tell us where to put the code or how to use it which makes if difficult for hobbyist like me trying to learn a bit as well as use Divi.

    Reply
    • It's PHP code, so the best place for it is probably in the functions.php file of a child theme. I included a link after the code box to my post on adding PHP code to Divi which explains what to do – sorry it wasn't clear. Here's the post link:

      https://divibooster.com/adding-php-code-to-the-divi-theme/

      If you're still unsure how to add the code after reading that post, let me know and I'll do my best to explain it better. Thanks!

      Reply

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 Posts

Set Custom CSS IDs for Individual Divi Accordion Items

Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...

Enable Swipe Navigation in the Divi Gallery Lightbox

Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...

Disable Slide-In Animation for Divi Gallery Grid Images

Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...

Control Image Count Display in Divi Gallery Lightbox

Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...

Hide Gallery Image Titles in the Divi Lightbox Overlay

Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...

Random Posts