Class name

Container

Description

table_container

table

the table container of each element. It is used by the Builder to move, duplicate, edit and remove actions. A container with a "table_container"" class shouldn't have a child element with the same class

column

td

Used for small devices to get responsive design. it display element as a block with 100% width

column-center

td

Same use as for the column class but it make centered element

hide-small

td

Hide element in small devices!

editable

td

Is the main class for each "td". It contains elements to be modified (text, image, button...). Beware: You shouldn't mix text with images elements with separators elements in the same "td". Make a "td" for each element.

ChangeBgColor

td

This class is used to change the background color of the element "td". If you add some "td" to make spaces you should add to the "editable" element a new class called "linked-bg" and an attribute "data-linked-to". The value of this attribute is the name of class of the empty-spacer "td" to change his background color when changing the background color of the editable element.

templateBgColor

td

This class is added to elements that should change background color using the theme palette.

spacer

td

Used for separator elements

spacer_height

td

If this class is present with spacer class, the user can change the height of a separator

editable-img

td, a

Used to edit an image.

editable-btn

td

To make td button editable. Use "data-btn-num" attribute to give the btn number like "btn-X-Y", We use X as the template number and Y as the btn number in this template (1, 2, 3...). Add this value to the "td" before/after btn as a class width "-L" and "-R" at the end to determine the left/right "td". Ex:v btn-37-1, btn-37-1-L, btn-37-1-R. This will help to determine the position of the btn and/or the bgcolor. Yous should specify the max width that the button can have using the attribute data-max-width.

editable-btn-link

a

To control the link and to prevent it from changing color when using theme to change all links color

editable-nav

td

Used for navigation element. When the user click on this element the navigation options palette will be shown

editable-nav-link

td

Determines the links inside the navigation elements

btn-table

table