Design Editor Integration

You can easily enable designs that you create for LightCMS to work with LightCMS's built-in Design Editor. The Design Editor is a powerful feature of LightCMS that makes it easy for anyone to make changes to colors, fonts and other such aspects of a design without knowing any code. This article assumes you already have an understanding of how to create custom designs for LightCMS. If you need more information about this, please see the Creating Designs section of our support site.

Adding the Attributes

You enable the Design Editor by adding valid HTML5 Data Attributes to the HTML elements on which you wish to allow editing. For example, the italicized portion of the code below enables the Base styles panel in the Design Editor and applies styles set by it to the Body element:

<body id="theBody" data-cmsadmin-layout-base="true">

As another example, the italicized portion of the code below enables the Content styles panel in the Design Editor and applies styles set by it to a specific div with the ID of "feature".

<div id="feature" data-cmsadmin-layout-content="true">

The following is a complete list of the available data attributes. We will discuss these in more details below:

Global Attributes

  • data-cmsadmin-layout-base
    • data-cmsadmin-layout-branding (requires base)
    • data-cmsadmin-layout-footer (requires base)
  • data-cmsadmin-layout-nav

Template-Specific Attributes

  • data-cmsadmin-layout-wrapper
  • data-cmsadmin-layout-header
  • data-cmsadmin-layout-content
  • data-cmsadmin-layout-content-extra
  • data-cmsadmin-layout-sidebar-a
  • data-cmsadmin-layout-sidebar-b

You can add any of these attributes to any HTML element on any of your design templates. However, the following rules must be observed to enable the design editor:

  1. The data attribute must be set to "true" ( i.e. data-cms-admin-layout-wrapper="true" ).
  2. The HTML Element on which the attribute is applied must have an ID.
  3. Each attribute should only be applied to one HTML element per template file.

When you apply these attributes to your templates following the rules above, the enabled template(s) will show in the Design Editor's template selector and the appropriate panel(s) will show in the Design Editor's panel selector.

NOTE: if you wish to leave the attributes in your designs but disable the design editor, you can simply set the attributes to "false".

Global vs. Template-Specific

The attributes labeled "Global" above are unique in that styles set with those attributes will be applied to all templates within the design. For example, if you have a home.html and an inside.html template, styles set by the base, branding, footer, and nav attributes will apply to both of those templates. As such, if you include these global attributes on any of your templates, you should include them on all templates within your design.

The attributes labeled as "Template-Specific" cause the Design Editor to apply styles uniquely to each template. So, the user can adjust the styles for the sidebar on home.html without affecting the sidebar styles on inside.html. With these attributes, you can enable editing only on specific templates if you choose.

Panels and Attributes

A "panel" in the design editor is a set of controls that are used to edit a particular area of a design. In most cases, each attribute enables its own panel in the Design Editor. For example, adding the "wrapper" attribute to your code (as described above) will enable the user to select the "wrapper" panel in the Design Editor and use it to make changes to the HTML Element on which you placed the wrapper attribute.

Special Cases: Branding and Footer

Two special cases are the Branding and Footer attributes, which are dependent on the Base attribute. The Base panel houses the styles enabled by the Branding and Footer attributes, so if you want to allow users to edit HTML elements tagged with the Branding and Footer attributes, you must enable the Base panel as well.

NOTE: the Branding attribute is designed to control the color and typeface of the website's title, and it enables the use of the "Site title" items on the base panel.

Nesting Attributes

Most attributes can be nested. That is, they can be included on HTML elements that are contained within other HTML elements that also have attributes. Here are a few best practices to follow with regards to nesting the Design Editor attributes.

  1. The Base attribute should be top-level and should not be nested inside of any other attribute.
  2. All other attributes can be nested inside of Base.
  3. Any attribute, except for Base, can be nested inside the Wrapper attribute.
  4. The Nav attribute can be nested inside of Base, Wrapper, Header, Sidebar A, or Sidebar B.

Common Questions

Back to top