Layout editor classes

The following classes are used internally by the Envoke layout editor, and should be added when constructing a custom template:

outer-sortable

A container for "block-outer" elements (also called "section" elements). All "block-outer" elements will be draggable and sortable within this container.

block-outer

A section element that spans the full width of the template. This may be 100% the width of the screen if the Bootstrap class "container-fluid" is used. Section styles in the layout editor UI target the "block-outer" elements.

inner-sortable

A container for "block-inner" elements (also called "block" elements). All "block-inner" elements will be draggable and sortable within this container. We recommend using the Bootstrap column system with these elements. For example, a "block-outer" might contain two "inner-sortable" columns, a larger content area "col-md-8" and a sidebar "col-md-4". Both of these columns may contain "block-inner" elements holding content, offers, or forms.

block-inner

The basic draggable, sortable, and duplicatable block type containing content, offers, or forms. Block styles in the layout editor UI target the "block-inner" elements.

content-edit

A <div> element inside of a "block-inner" that triggers the block styles editor & CK Editor dialog. It is recommended that no more than one "content-edit" elements should be inside a "block-inner".

form-edit

Add the "form-edit" class to a "content-edit" class to signal that this will be an Envoke form and to trigger the form builder dialog.

offer-edit

Add the "offer-edit" class to a "content-edit" class to signal that this will be a dynamic offer content block and to trigger the offer selector dialog.

cta-edit

Add the "cta-edit" class to a "content-edit" class to signal that this will be a call to action / button block and to trigger the button editor dialog.

Did this answer your question?