Editor Control Panel (buttons at the top)

Hover the mouse over each of the buttons for a description of what they all do.

Top row buttons: allow you to change the HTML tag or appearance for the selected text.

Second row buttons: help you to insert multimedia, lists, create links, view/edit the source code, search, and expand the editor to full screen mode.

Third row buttons: help you to insert dynamic content and layouts, and to clean the content and code.

Editor Content (the editable area):

If you've been through Capitan Basic Training you'll understand that HTML is a collection of nested boxes and know how important it is to put content in the right box. The Capitan editor provides visual references to make this more clear while creating/editing your content. 

Grey Dotted Outline Box: content tag (headings, paragraphs, lists)

Grey Solid Outline Box: content tag which has style attributes (id, class, style)

Blue Dotted Outline Box: building block tag (div)

Blue Solid Outline Box: building block tag which has style attributes (id, class, style)

Blue Background Box: text in an anchor tag (link)

Blue Background Box with Blue Outline: text in ananchor tag with style attributes (id, class, style)

Grey Background Box: text in a span

Grey Background Box with Grey Outline: text in a span with style attributes (id, class, style)

Yellow Solid Outline: image or video which is set to be responsive (class="rspnsv")

Editor Information Panel (at the bottom)

Useful for letting you know the nesting of tags for the selected content, and a word count. If you need to select a particular tag and you can't do that within the editor content you can click it in the information panel instead.