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.