In this section we cover general principles about web content and the editing interface. Web content is added in the editing interface. This interface displays the site pages as they appear on the web allowing for content creation in a replica of the live environment.

Green bars

Green bars allow you to edit a page element. The bars indicate the most relevant content possible at any point in the editing process. They allow for quick access to components and change to focus on the page area an editor is working on. There are two kinds of bars: dark green for areas and light green for components.

The dark bars are referred to as area bars and indicate one of the following when you open a page.

  • Area or subarea name, for example Extras, Promos, Footer (areas) or Meta Navigation, Stage, Comments (subareas).
  • Component type that may added to a subarea, for example Teasers or Content.
  • Component name, for example Page Header, Section Header, Opener.

Where there is no content in an area a placeholder displays.

Typically area bars do not contain function icons. Their function is to:

  • Indicate areas.
  • Facilitate access to components within areas.
  • Maintain focus on a selected area.

When you click an area bar:

  • The components in the area, together with their light green component toolbars, appear.
  • All bars on the remainder of the page disappear.

To re-display all area bars click a green part of main bar at the top of the page.

The dark bars of automatically generated components are an exception in that they contain function icons. They have either:

  • Edit icons: These components are intrinsic to the template and can be edited but not deleted. Examples are the Page Header, Section Header and Footer components.
  • Delete or Add icons: These are optional components that may be added, edited and deleted. The Opener is an example of this type of component.

Individual component toolbars are light green and only display within a selected area. They display the component name, Edit and Delete icons and a Move icon where components can be moved. You can access the component toolbar by clicking the component content or the area bar.

Areas

Template have distinct page areas. When you open a page, the area name is indicated in the green bars, except in areas that have subareas, like main area area. Possible areas include header, main, extras, promos, base and footer. The end of an area or subarea is marked with a thin green bar.

The STK templates are largely distinguishable by the content options in main area. Where more space is required in main area, extras area is disabled. The header, footer, promos and base areas are included on all templates. The screenshots below highlight the areas on the Home and Section templates.

Subareas determine the sequence of content and are distinguishable by the name in the bars. Content sequence can only be changed on a template level and not in the editing interface.

Examples:

  • Header area of the Home template has a stage subarea and the Section template a section banner subarea.

  • Main area on the Section template has intro (header), opener and component (teasers) subareas, and the Article template has intro (header), component (content) and comments subareas.

Technically, navigation has three subareas: horizontal, vertical and meta. Only the meta navigation subarea contains components and is editable in the editing interface. This area is located within the header on the right.

Templates

The pages of the demo sites are based on templates that are included in the Standard Templating Kit (STK). Templates are included for most types of pages. View the available templates on the live demo-features site (username/password – superuser) in the Content Templates and Special Templates sections.

The STK templates are well-structured, flexible and configurable. You can customize them to suit your needs in Templating Kit. This is discussed in STK.

Components

Components are the smallest blocks of content. Each component has a toolbar accessed by clicking the area bar or the component content. At its simplest, a component consists of a heading and some text, but can contain almost anything: an image, links to other articles in the same category, teased content from a sub page, RSS feeds and much more.

General concepts applicable to components:

  • Components are created in dialogs.
  • Most components can be moved, edited and deleted.
  • When you amend a component or page in any way the page reloads and returns you to the position of your last edit.
  • There are four component types: content, teaser, form and special components.
  • The component type available in each area is consistent, but there are exceptions. Generally:
    • Teaser components are available in:
      • Extras, promos and base areas on all templates.
      • Main area on the Home and Section templates.
    • Content components are available in main area on original content templates, i.e. the Article, News, Events and Glossary Terms templates.
  • Numerous components are available for each type, i.e. there are many different teaser, content, form and special components.
  • Some components contain grouped subcomponents.
  • Some components are generated automatically by the template.

The individual components are discussed in STK components.

Dialogs

Content is created and edited in dialogs. There are two ways to access a dialog:

  1. Click an Add icon to create a new component.
  2. Click an Edit icon to edit a current component.

When you click an Add icon a selector dialog opens to select the component.

On selection the component dialog opens for content entry.



#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))
  • No labels

To comment, create an account and log in.

© Copyright 2023 Magnolia