Meta Attributes

Protected meta attributes of the Visual Composer available for use via the API.

tag

This unique tag which is used to identify and find element components and settings.

tag attribute settings.json file example:

{
  ...
  "tag": {
    "access": "protected",
    "type": "string",
    "value": "basicButton"
  }
  ...
}

relatedTo

Relation to groups. Used for drag&drop and add element panel. The default value is “General”.

relatedTo attribute settings.json file example:

{
  ...
  "relatedTo": {
    "type": "group",
    "access": "protected",
    "value": [
      "General",
      "Buttons"
    ]
  },
  ...
}

editFormTab1

List of edit form attributes in General section of the edit form.

It is not mandatory to set key as editFormTab1, it can be set as any other key

editFormTab1 attribute settings.json file example:

{
  ...
  "editFormTab1": {
    "type": "group",
    "access": "protected",
    "value": [
      "title",
      "alignment",
      "color",
      "metaCustomId",
      "customClass"
    ],
    "options": {
      "label": "General"
    }
  },
  ...
}

metaEditFormTabs

List of sections in editForm. A section can be a group like “editFormTab1” or attribute like “designOptions”.

metaEditFormTabs attribute settings.json file example:

{
  ...
  "metaEditFormTabs": {
    "type": "group",
    "access": "protected",
    "value": [
      "editFormTab1",
      "designOptions"
    ]
  },
  ...
}

containerFor

Defines what child elements can be inside the container element.

containerFor attribute settings.json file example:

{
  ...
  "containerFor": {
    "type": "group",
    "access": "protected",
    "value": [
      "Buttons"
    ]
  },
  ...
}

or

{
  ...
  "containerFor": {
    "type": "group",
    "access": "protected",
    "value": [
      "Tab"
    ],
    "options": {
      "elementDependencies": {
        "tag": "tab"
      }
    }
  },
  ...
}

initChildren

Used to initiate child elements. Each child object must hold a tag attribute and optional attribute names with values for initialization.

initChildren attribute settings.json file example:

{
  ...
  "initChildren": {
    "access": "protected",
    "type": "object",
    "value": [
      {
        "tag": "outlineButton",
        "titleColor": "#fff"
      },
      {
        "tag": "basicButton",
        "titleColor": "#fff"
      }
    ]
  }
  ...
}

metaPublicJs

A list of custom JS libraries which will be used by and related to a particular element. Libraries may be included on conditions, a rule must be set in order to enqueue a library. libPaths property may contain a string or an array value.

metaPublicJs attribute settings.json file example:

{
  ...
  "metaPublicJs": {
    "access": "protected",
    "type": "string",
    "value": {
      "libraries": [
        {
          "libPaths": [
            "public/dist/customSlider.min.js",
            "public/dist/customGallery.min.js"
          ]
        },
        {
          "rules": {
            "toggleResponsiveMode": {
              "rule": "toggle"
            }
          },
          "libPaths": "public/dist/responsive.min.js"
        }
      ]
    }
  }
  ...
}

sharedAssetsLibrary

A list of JS libraries that are provided by the system which can be included by elements. Libraries may be included on conditions, a rule must be set in order to include a library. Learn how to include assets via the manifest.json file.

sharedAssetsLibrary attribute settings.json file example:

{
  ...
  "sharedAssetsLibrary": {
    "access": "protected",
    "type": "string",
    "value": {
      "libraries": [
        {
          "libsNames": [
            "slickSlider"
          ]
        },
        {
          "rules": {
            "clickableOptions": {
              "rule": "value",
              "options": {
                "value": "lightbox"
              }
            }
          },
          "libsNames": [
            "lightbox"
          ]
        },
      ]
    }
  },
  ...
}

Available shared library list:

Library name	Description
waypoints	Uses waypoints library. Included in the Design Options attribute
animate	Uses animate.css library. Included in the Design Options attribute
iconpicker	Uses a set of multiple various icon sets. Typicons, Material, Font Awesome, Entypo, etc.
imageFilter	Uses CSSgram library.
lightbox	Uses lightbox library.
photoswipe	Uses photoswipe library.
slickSlider	Uses slick slider library.
zoom	Uses jQuery zoom library.

groups

Used to assign an element to a group of elements. Can be used for replacing elements. Possible values: Content, Containers, Buttons, Separators.

groups attribute settings.json file example:

{
  ...
  "groups": {
    "type": "string",
    "access": "protected",
    "value": "Buttons"
  },
  ...
}