In Magnolia CMS, content is authored in the browser. The user interface for content authors supports in-place editing. In this view, the edited page looks and behaves like the live page, except for the green bars. Editable components and areas are displayed in accurate context. Authors can see what effect adding a new component has on the page and they can move components around if needed and permitted.
Pages are composed of pre-defined content areas that can be controlled with templates. With the exception of the main page area, the green bars indicate the area name.
Editable content items within these areas are called components. Clicking the area bar or any component activates the toolbars of components within the area.
Editable components have light green toolbars. Clicking the Edit icon in the toolbar opens a dialog. A dialog is an HTML form with fields for editing component content and metadata. The data you enter into the fields is stored in the repository and ultimately rendered as a component on the page.