Sidebar elements are different from the elements in the modal window because they are less complicated. They can be manipulated in the editor but they don't have their own settings. It's easy to add sidebar elements to Glazed Builder, you can just take any snippet of HTML and make them editable using these special classes:

CSS ClassWhat it does
az-editableMakes content of elements editable in Glazed Builder text edit modal. Editor will also have style panel.
az-styleableAllows you to style element in Glazed Builder modal style panel. 
az-sortableMakes direct child elements of elements sortable using drag and drop. Also allows cloning of elements within the sortable set. 

If you use the az-editable class this also makes an element styleable, so you never add both classes to 1 element. The az-styleable element is typically used to container elements, when you want the elements inside the container to be editable on their own. The az-sortable class is what we use to make parts of the timeline manageable in the builder. 

Certain elements in your HTML snippet are recognised without need classes:

ElementBehavior
IconsClassnames of icons in the Glazed Builder Icon element are recognised and the icon will be editable using the icon Glazed Builder icon selector.
Images Image tags are automatically editable using the Glazed Builder modal and Drupal media library integration
LinksLink tags are automatically editable in a Glazed Builder modal where you can configure link text and link url 

There are 2 ways to add custom elements:

Option 1: Add sidebar elements in a theme

You can download the example elements folder we create in these steps and add it your theme as boilerplate code: sidebar-elements-example.zip

  1. Create a folder named elements in your theme folder. Glazed Builder automatically discovers elements in the /elements folder in any active themes.
  2. Create a new folder inside the elements folder. The name of the folder will be used as the element name in the sidebar
  3. Add an HTML file in your new folder with a unique name. For example: clientstory-1.html
  4. Add a thumbnail image for your element with the same file name as your HTML file, and a jpg or png extension (lowercase).
  5. Add any CSS and JS separate .css and .js files inside the same folder as your .html file. You can reference them using link and script tags. The files should be referenced using relative paths. These tags will be automatically recognised by Glazed Builder and handed over to Drupal for processing when a page is viewed by visitors.
  6. Images can also be included in the same folder as your .html file and must be referenced using a relative path. Images tags will be editable in each indivisual instance of your sidebar element, but they do need some image as placeholder for initial rendering.
  7. Clear caches. This is required every time you make a change to your sidebar element because the elements are cached

Here is an example of what your folder structure should look like, only the highlighted directories are relevant: 


The "img" directory is not required, it's used in this example to store images that are used by the clientstory sidebar element.

Option 2: Add sidebar elements in a module

Glazed Builder provides a hook hook_glazed_builder_elements_folders_alter that allows you to modify the array of elements folder information.

  1. Add the following code to your custom module and replace mymodule with the name of your module. In this example we add a folder called but you are free to use any path and url for your custom elements. 
    /**
     * Implements hook_glazed_builder_elements_folders_alter().
     */
    function mymodule_glazed_builder_classes_alter(&$glazed_elements_folders) {
        $glazed_elements_folders[] = array(
          array(
            'folder' => dirname(__FILE__) . DIRECTORY_SEPARATOR . 'elements',
            'folder_url' => $base_url . '/' . drupal_get_path('module', 'mymodule') . '/' . 'elements',
          ),
        );
    }
  2. From here on you can add the elements folder to your module and follow steps 1-7 exactly as in the Option 1 instructions above.