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.
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
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!
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?
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!
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.
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!