Similar content

Loading

Powered by Canoo FindIT.

Demo Project Website

Introduction

The standard Magnolia Enterprise Edition 4.1 installation contains a fully functional sample website named demo-project.

This section provides an overview of the structure and features of the demo-project website. An initial, general understanding of demo-project's functionality and features should help to develop an in-depth understanding of the content of the later sections.

Page Structure

The demo-project website has a hierarchical page structure, both in AdminCentral and in the navigation structure of the website.

In AdminCentral:

  • The Home page is the only first or top level page;

  • Under the Home page, on the second level, there are four section pages: About, News and Events, Multimedia and Services;

  • Under each section page there are a number of level three and level four pages.

While there are no pages on levels lower than level four, it is possible to create lower-level pages, i.e. on levels five, six, seven etc.

In the website, the site navigational structure is identical to the page structure in AdminCentral, with the exception that here, the Home button is included in the top-level navigation menu, together with the section page buttons.

Site Navigation

The page templates automatically render the navigational structure and navigation menus of the website.

The Home page has a single horizontal navigation menu at the top of the page, which includes the page or navigational titles of the Home and section pages.

All other pages contain two navigation menus: a horizontal menu at the top of the page and a vertical menu to the left of the content columns. In addition, a horizontal breadcrumb trail is also included at the top of the main content section.

The vertical menu is a sub-menu of the section page, which is currently open in the horizontal navigation menu.

The horizontal menu contains the page or navigation titles of the Home and section pages, and the vertical menu, the titles of the level three and level four pages.

When a section page is open, the vertical menu displays a list of the level three pages, and when a level three or level four page is open, this menu also includes the other level four pages of the level three page that is open in the vertical menu.

The screenshots below demonstrate the differences in display of the vertical menu when a section page and a level three page are opened, respectively.

Section page open

Level three page open

It is possible to change the content and structure of the navigation menus using the Standard Templating Kit (STK). This is fully discussed in Standard Templating Kit.

The current STK supports two levels of horizontal navigation and three levels of vertical navigation.

To create the screenshot below we re-configured the demo-project site to display two horizontal levels, with the Home and section pages on the level one, and the level three pages on the second level. As a result, the vertical navigation menu, which is a sub-menu of the horizontal one, now begins with the fourth level of the page structure.

Templates

While all web pages are template-based, the templates available for the various page-levels differ:

  • The Home template is unique to the Home page and is not available for use on pages on other levels. Similarly, it is not possible to use any of the other available templates on the Home page or a new first level page.

  • Section pages, i.e. pages on the level two of the page structure, may be based on any one of nine templates. These are the Section, Contact Form, Search Result, Site Map, Glossary, News Overview, Glossary Letter, Events Overview and Category Overview templates.

  • Level three and lower-level pages, may be based on the templates available for section pages and, in addition, on the Article, Large Article, News, Event, Image Gallery and FAQ templates.

The screenshots below show a few of the many templates available.

Section Template

Article Template

Contact Form Template

Image Gallery Template

Sitemap template

Event template

Event Overview template

Glossary template

Content Areas

Each web page is made up of a number of content areas.

The demo-project website includes numerous different templates and the content areas of each page vary according to the template used.

For all pages, there is a header and footer area, a navigation menu and one or more content columns.

The various content areas are highlighted in the screenshot of the Home page below.

Each content area is made up of a number of content paragraphs.

In most areas, new paragraphs can be added. For example:

  • In the header section, the Contact and Sitemap links are each contained in a separate paragraph and it is possible to add further link paragraphs containing links.

  • In the footer section, the links and text blocks are contained in a separate paragraphs and it is possible to add further paragraphs containing links and text.

The content of most paragraphs can be changed in the editing window, i.e. the window, which opens automatically when pages are opened in AdminCentral. The editing window has two modes: editing mode and preview mode. As the names suggest, pages are edited in editing mode and previewed in preview mode.

In editing mode, each distinct content paragraph is easily identifiable by the green edit bar, which mostly lies above the actual paragraph.

The main content areas are arranged in columns and within each column there are a number of content paragraphs, which are inserted sequentially from top to bottom.

The screenshot below is of the Service section page in editing mode and highlights the various content paragraphs.

Most of the green edit bars above the paragraphs contain Edit, Move and Delete function buttons. At the bottom of each content column, new paragraphs may be added, and the edit bars above the new content area contain New function buttons.

Paragraphs that have no edit bars are inherited paragraphs and can only be edited on the page on which they were created. The promo paragraphs in the right-hand column of the screenshot above are examples of inherited paragraphs.

There are two main content paragraph categories: body content paragraphs and teaser paragraphs. Within each category, various paragraph types are available. For example, in a teaser content column there are a number of different types of teaser paragraphs from which to choose. The page template determines the paragraph types that may be added in any content area.

The paragraphs within a content column are consistent as to category, i.e. a teaser content column can only contain teaser paragraphs, and not body content paragraphs.

In each content column, it is possible to add a virtually unlimited number of new paragraphs.

Paragraphs are inserted sequentially from top to bottom, but it is possible to change the sequence by moving them. How to add and move paragraphs is fully discussed in Working with Web Content: Adding paragraphs and Moving paragraphs.

Pages based on the Home and Section templates contain teaser paragraphs, whereas pages based on other templates contain body content paragraphs in addition to teaser paragraphs.

As the name suggests, teasers are paragraphs that introduce other pages, providing only a "tease" of the full content. The extras and promos areas are the two columns positioned to the right of the main content column. Paragraphs in the extras and promos areas are also teaser paragraphs, but a distinction is drawn as they are positioned in distinct columns.

Within each content paragraph category, there are a number of different content paragraph types.

The available types of teaser paragraphs in the demo-project website are:

  • Internal Page

  • External page

  • Link List

  • Download File

  • Link List

  • Contact

  • Calendar

  • Latest News

  • Latest Events

  • Various group teasers

  • Various RSS feed teasers

The screenshot below, of the content columns of the About section page, highlights some of the different types of teaser paragraphs.

The available types of body content paragraphs in the demo-project website are:

  • Header

  • Text and Image

  • Quoted Text

  • Link List

  • Flash Animation

  • Video

  • HTML

The screenshot below of the main body content column of the News and Events - News Overview - Annual Report Presented page highlights some of the different types of body content paragraphs.

The various paragraph types are fully discussed in Working with Web Content - Paragraph types.

Failing later amendment, some page elements, such as the titles in the navigation menu and the main page heading, are created from the information inserted in AdminCentral, while others, such as the header, content paragraphs and the footer are created in the Editing window, which is accessed from Admin Central.

Working in the Editing window is fully discussed in Working with Web Content.

Print and Bookmark

All pages based on the News, Article and Large Article templates give the site visitor the option to print and/or bookmark the particular article, which forms the main subject matter of the page. The page template renders these options automatically.

When a visitor clicks on the Print link, the article will automatically be sent for printing.

The Bookmark link allows a visitor to choose from numerous bookmarking options. When a visitor clicks on the Bookmark link, a drop-down list of links to numerous social bookmarking sites will appear.

Adaptable Screen Resolution

Magnolia templates are designed to be adaptable to a users screen resolution. The templates automatically detect the size of the user's screen and dynamically adapt to it. The web page content is automatically rearranged to make optimum use of the available screen space.

For example, on the Home page of the demo-project website for:

  • large screens, the teaser column displays the paragraphs in rows of three and the promo column is displayed as a vertical columns.

  • medium screens, the teaser column displays the paragraphs in rows of three and the promos are moved to below the teaser column and displayed in a row, as opposed to a column.

  • small screens, the teaser column displays the first two paragraphs in a row of two and the third paragraph moves to a second row. The promos are moved to below the teaser column and are displayed in a row, as opposed to a column.

In the different templates, as the number of main body content columns excluding the promo column, varies from one to two columns, the manner in which the template will adapt to accommodate different screen sizes also varies. In some cases, the content within a column will be rearranged to adapt to the screen resolution.

For example, the Image Gallery template contains only a single main body content column and a promo column. In this instance for:

  • large screens, the main body content column and the promos are displayed in two vertical columns across the screen, and the images within the main body content column are displayed in rows of three.

  • medium screens, the main body content column is displayed in a vertical column, with the images appearing in rows of three, but the promos are moved to below the main body content column and are displayed in a row, as opposed to a column.

  • small screens, the main body content column is displayed in a reduced size vertical column in the upper portion of the screen. The arrangement of the actual contents within this column is adapted to the reduced column-size by moving the image on the right in each row into to a separate row below. The promos are moved to below the single main content column and are displayed in a row, as opposed to a column.

Small screen

The templates also adapt to accommodate the small screens of mobile devices. The screenshot below shows the About section page on an iPhone screen.

Previewing Pages

Pages can be previewed at any time and you can monitor your progress in almost real time as you work.

In the editing window, the preview mode function allows you to view your pages, as they will appear of the web.

To preview a page click on the Preview button in the left-hand corner of the screen, and the page will open in preview mode.