Element Config

When using the page builder you might find yourself using the same custom classes over and over again. Instead of typing them directly on the class list, you can create a custom control tool for them by using the element config feature. These custom controls will be found under the attribute section in the properties sidebar when selecting an element in the canvas.

To manage your custom controls, go to Project > Project Options > Element Config. Any additions to the controls will only affect the current project.

Using the Element Config Editor

The element configuration editor is simply a json file where you can put additional options to help you apply your classes faster. The format of the json structure is as follows:


  • group – (string) the name of the parent group of your controls
  • items – (array) the list of controls under that group
    • elements – (array) element tags that can be applied to. use “all” to apply to all elements
    • options – (object) control options for the specific item
      • label – (string) the label of the control
      • type – (string) the type. can either be select, checkbox, color-picker, slider
      • swap – (boolean) if true, it will try to replace the existing class related to the option; false will just append all the classes to the list. this option is trueby default
      • data – (array) name-value pairs of the options ( name= the label, value= the class applied)

Make sure the json string is correct and complete otherwise it will break the system. You can validate your json by looking at the editor for (x) marks or by using a json linter .