Web content is added in the page editor. This editor displays the site pages as they appear on the web allowing for content creation in a replica of the live environment.

The page editor includes on-page toolbars bars and an action bar to facilitate page editing. The editor is intuitive and changes dynamically to focus on the page element you are editing. 

Toolbars

There are toolbars for:

  • Pages: The page toolbar displays the page name and includes the language dropdown if more than one language is enabled.
  • Areas: Area toolbars typically display the area name and other useful information such as whether the area is optional, and typically do not have function icons.
  • Components: Component toolbars allow you to edit and move components.

Area bars

Typically area bars do not have function icons. Their purpose is to indicate areas, facilitate access to components within areas, and maintain focus on a selected area. The exceptions are the intro, sectionHeader and footer areas: these area bars have an edit icon to add and edit the content of the Page Header, Footer and Section Header components.

The names in the area toolbars are rendered intuitively and the name most useful to the editor is used. The names in the toolbar correspond with the actual area names for all areas except content area (a child area of main area). In content area the toolbar names reflect the type of components that can be added, i.e. content or teaser components. Compare the toolbar names of a new article (left) and section (right) page in the following screenshots. The toolbar names in the comments and opener areas correspond with the actual area names, whereas in content area, "CONTENT" and "TEASERS" display in the toolbar.

 

Page editor focus

The colors of the area and component toolbars change to focus on the page element you are working on. Various shades of green and grey are used. To change the focus click on the element you would like to work with. The following series of screenshots demonstrate how the editor changes focus.

  • When opening the pages for editing, area toolbars are light green and new component bars are a very light green.
  • When an area bar is clicked the focus shifts to that area: the selected area bar is dark green, the component bar is light green, nested component bars and other area bars are grey.
  • When a component bar is clicked, the focus shifts to that component: the selected component bar is dark green, the area bar is very light green, and nested component bars are light green.

Page templates

All pages have areas that are defined by page template. Typically components can be added in an area, but there are a number of exceptions.

You can view the available STK 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, attractive and highly configurable and you can customize them to suit your needs using the Standard Templating Kit.

The templates are largely distinguishable by:

  • The type of content rendered in main area. For example, in this area the section template allows for teaser components, whereas the content templates allow for content components.
  • The areas that are enabled on a particular template.

The images below compare the parent areas in the Home and Section templates. Note the similarities and differences:

  • The stage area is enabled in the Home template and the sectionHeader area in the Section template.
  • Teaser components are used in main area in both templates. In the Home template the components float in three columns, and in the Section template they render sequentially in a single column. 
  • extras area is disabled in the Home template.

 

From an editing point of view all areas are equal in that they look similar in the editor. Technically, many areas are configured as nested child areas. main area contains a number of child areas. The enabling and disabling of these areas is another factor that distinguishes the templates. The diagram below compares the child areas in the various template types.

Page editing

Most page editing is done on a component level within the page areas. On a page level, you can set page properties and preview pages.

Previewing

To preview a page execute the Preview page action. In preview mode the toolbars are removed and the page bar that changes to black, provides options to preview the page on a Desktop, Tablet or Smartphone.

Page properties

All Magnolia pages have a page properties dialog accessible through the Edit page properties action.

  •  Home pages: In addition to page properties, the home page properties dialog includes fields for site properties.
    • Site Title: Displayed in the browser window. The page title is appended to the site title, for example: Demo-project - Standard Article.
    • Headline: Page title for the home page.
    • Abstract: A summary used in internal teaser components.
    • Logo Image: The logo rendered in the branding area. Branding is inherited by all pages.
    • Print Logo Image: Logo used when the page is printed.
    • Alternative Logo Text: Text for logo image alt attribute.
    • Slogan: Text displayed below the logo image.
    • Search Page: Page that renders search results. This page can be anywhere in the site hierarchy. It should have the Search Result template assign to it.

  • Other pages: Page properties dialogs are identical for all pages

    • Info:
      • Page in Navigation: Check to exclude the page from the horizontal and vertical navigation. This is useful for pages such as search results that only render meaningful content when you arrive to the page via search.
      • Window Title: Text that overrides the Headline field and allows you to display different window and page titles. This is useful when the page title is too long for the browser window title bar.
      • Navigation Title: Text displayed in the navigation bars. This is useful when the page a title is too long and wraps in the navigation bar.
    • Metadata:
      • Meta Keywords: Rendered in the keywords meta element in the page HTML. 
      • Meta Description: Rendered in the description meta element in the page HTML. If you do not include a meta description the page abstract is used by default. Search engines display the description in search result summaries. It is best to keep the description under 160 characters.
    • Output Channels
      • Exclude Channels: Excludes the content from the selected channel. For more information on channel variations see Channels and Mobile.

Publishing status

The page editor displays the publishing status in the status bar at the bottom:

  • Published (green): Content was published from the author instance to the public instance. Identical content exists on both instances.
  •  Modified (yellow/amber): Content was modified since publication. The author instance is not in sync with the public.
  •  Unpublished (red): Content exists only on the author instance. It was never published.

Components

Components are the smallest blocks of 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 added and edited in dialogs.
  • Most components can be moved, edited and deleted.
  • 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 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 nested child components.
  • Some components are generated automatically by the template.

The individual components are discussed in STK components.

Component toolbars display when you focus on an area. The component name displays in the bar. Typically component toolbars have move  and edit  icons. There are also corresponding actions for these functions in the action bar, as well as the Delete component action. 

To execute a move, edit or delete action click the icon or action:

  • The edit action opens a dialog for editing.
  • To move a component drag the toolbar to the new position. You can cancel a move using the Esc key or Cancel move action.
  • When you delete a component, a confirmation dialog opens to confirm the action. (warning) Note that deleted components cannot be restored.

All areas that allow components to be added have a new component toolbar. Click the add  icon to open the selector dialog.

Dialogs

Content is added and edited in dialogs.

  • The selector dialog opens when you add a component. Choose a component from the dropdown list.

  • The component dialog opens directly when you edit a component, and on selection when you add a component.
#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))

To comment, create an account and log in.

© Copyright 2023 Magnolia