Add Custom Element in Enfold Avia Layout Builder

We’re using Enfold for a specific project to enable less technically minded staff the ability to tackle more of the site management. We also wanted to add an body-area element that would be used on many or most pages and we wanted to do so without causing the end-user to tap into HTML or CSS. We just want to have them drag and drop the element into the page or post and have it styled a specific way.

Enfold’s Avia Layout Builder provides a great tool to accomplish this with.

So…

1. Go to /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/
2. In that directory will be individual PHP files respective to the elements available in the Avia Layout Builder.
3. Copy an existing element (php file), perhaps the one most similar to the desired end result, and rename it to a name of your choice. In this example, we’ll be modifying the Special Heading Content Element file heading.php.
4. Changes to the file:
   1. At the top of the file, be certain to change the class name. For example, rename the bolded portion below:
   2. if ( !class_exists( ‘avia_sc_heading’ ) )
      and
      class avia_sc_heading extends aviaShortcodeTemplate{
   3. While in the class array:
      1. Change the name:
         $this->config[‘name’] = __(‘Special Heading‘,
      2. Change the icon image if you’re so inclined (you’ll need to create a new icon if so):
         AviaBuilder::$path[‘imagesURL’].”sc-heading.png“;
      3. Change the order. This adjusts the order of the icons that appear in the elements tab. 100 is the top of the list. 99 would place the element in the second position, etc.:
         $this->config[‘order’] = 93;
      4. Change the shortcode name:
         $this->config[‘shortcode’] = ‘av_heading‘;
      5. Change the tooltip to a description that better describes the new functionality:
         $this->config[‘tooltip’] = __(‘Creates a special Heading’, ‘avia_framework’ );
      6. Change the arrays. You’ll find a number of references to “Heading Text” and “heading” which you’ll want to change to the new name and title of the element.
      7. Find the “//html markup” section comment in the file and change the CSS classes to suit your needs. Enables custom styling of an element type so that you don’t have to restyle over and over or force the user to add DIVs and classes every time they want to add this element.
   4. Test
      1. Refresh or go to Pages or Posts and edit or add content, choose layout builder and see if the new element exists. If so,
      2. Add a new element that you’ve created to the page and test that it works.
      3. Add CSS to suit.
   5. Done