Add Custom Labels to Avia Layout Builder Elements?

Hi support team,

I have the same issues with missing labels on the code-block module, but in my opinion every module should be possible to identify without clicking at it.
And actually it’s more or less adding 2 lines of code to the shortcode classes your theme provides. I just tried myself adding that feature by editing the shortcode file: config-templatebuilder/avia-ahortcodes/codeblock.php and changing the editor_element method from this:

public function editor_element($params)
        {
            $params['innerHtml'] = "<img src='".$this->config['icon']."' title='".$this->config['name']."' />";
            $params['innerHtml'].= "<div class='avia-element-label'>".$this->config['name']."</div>";
            return $params;
        }

to this:

public function editor_element($params)
{
	$content = stripslashes(trim(html_entity_decode( $params['content']) ));

	$params['innerHtml'] = "<img src='".$this->config['icon']."' title='".$this->config['name']."' />";
	$params['innerHtml'].= "<div class='avia-element-label'>".$this->config['name']."</div>";
	$params['innerHtml'].= "<div><i>".$content."</i></div>";
	return $params;
}

That way you see the module label like it is now (icon and “code-block”) and in a line below you see the shortcode itself.
As all your editor-shortcodes are based on nice php classes (nice work!) you could as well just add 1 input field for the module-name (from the users perspective) and output that somehow.

Of course you have to do a proper simple styling but in general this feature should be very easy to implement and it sooo valuable.
Have a great day – Karsten

PS for the records: in case somebody is going to try this: make the changes in your child-theme and NOT directly in the theme files. I only did a quick test in the original files to see if it’s possible (reverted to original stage after).
You can copy original shortcodes into your child-theme and edit them there (or build new ones). Put this in function.php

// Add custom shortcodes based on enfold shortcode classes
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
  array_unshift($paths, $template_url.'/avia-shortcodes/'); // change path to your needs depending on how you  named your folder

  return $paths;
}

• This reply was modified 5 years ago by mikabodesign.

Hej,
yes you are right (in not everybody wants to see the whole shortcode) – I just wanted to show how simple it would be to add a little bit extra information. The best (in my opinion) would be to supply one additional input field maybe called “label”. There we could write down in a few words or even 1 word what the shortcode is about.
I build a website for a client using your theme and we have pages with about 8 to 10 rows having shortcodes in it. It just takes too much time to find the right module if you can’t differentiate them in the backend.

Best regards
Karsten