This article takes you through the process of setting up a Magnolia website. The objective is to demonstrate the ease with which users of all technical levels can build a site. The article uses the free, open-source Community Edition and the Standard Templating Kit. (Article credit Vikram Vaswani, Webreference.com)

Getting started

The first step is to download and install Magnolia Community Edition and the Standard Templating Kit (STK). You will find instructions on how to do this at Community Edition Installation  .

After installation, log into AdminCentral where the Website workspace will be open.

Viewing the demo sites

There are two demo sites, demo-project and demo-features, each with several pages. For each page, AdminCentral displays:

  • Page name.
  • Title which can be different from the name.
  • Status that indicates whether the page has been activated (published) to the public instance.
  • Template. Each page is assigned a template. STK contains ready-to-use templates for many use cases.

To open the demo-project site, select the demo-project page and click Open page or right-click and select Open page.

The demo-project site is displayed in a window used for editing and inserting content. It is a WYSIWYG editor. HTML generation takes place automatically and produces HTML5-compliant code.

When we create our site in the later sections, we will go into more detail about functionality and procedure but for now note the following:

  • Pages have different structures because they are based on different templates
  • Templates are assigned to pages in AdminCentral.
  • Components on the page are grouped into areas that are defined by templates. For example, the Contact, Sitemap and Login/Logout links in the header are in the Meta Navigation area. The components in the vertical column on the right are in the Promos area.
  • Navigation is created automatically and corresponds to the page hierarchy.
  • To view the page without the green bars, as it would appear on the live site, click the Preview button (top left).
  • To set page properties and meta data click the Properties button (top right).
  • Page layout adapts to the user's viewport. Placement of the content areas is fluid.

Components are added by clicking an area toolbar. Individual component toolbars are displayed (light green):

  • To add components, click the plus icon in the New Component box.
  • To edit content, click the edit icon in the component toolbar.
  • To move a component, click the move icon in the component toolbar.

Creating the site structure

In this example we create a website about pet products. In addition to product pages the site contains company information, a contact form and a sitemap. The site structure looks like this:

  • Home
    • Dogs
      • Dog Food and Chews
      • Dog Toys
      • Dog Collars and Leads
      • Dog Kennels
    • Cats
      • Cat Food
      • Cat Baskets
    • About Us
    • Service
      • Contact Us
      • Sitemap

To create the site structure:

  1. Click New Page to create a home page. The Home template is selected automatically because it is a top-level page.
  2. Create as many second and third level pages as you need. You can go down as many levels as necessary but flat hierarchies usually work better. To create a subpage, select the parent page and click New Page.
  3. Change the page names and titles by double-clicking.
  4. Where necessary, change the template selection by double-clicking the template name.

To open the Home page, select it and click Open page. The horizontal and vertical navigation menus have been created automatically and match the site structure in AdminCentral. The Title is used for menu links but can be changed at a later stage.

Browse through the pages and note the skeletal structure of the various templates.

Creating the home page

All other pages inherit the header and footer areas that we now create on the home page.

Page properties

Click Properties in the page toolbar and complete the fields in the dialog. Each page of the site has its own Properties dialog. The options available are identical except the home page includes some information that is site-wide. The Abstract is a summary of the page content that is used in teaser components that reference the page. The Search Page field defines the page on which search results are displayed.

The logo image and slogan are displayed on the page while the keywords and description entered in the Meta Data tab are merged into the HTML code.

The meta navigation area is suitable for inserting links to pages such as Contact and Sitemap. Click the area bar, then the Add icon in the toolbar, choose Internal Link and browse to the target page.

The title of the target page is used automatically as the link text. You can override it in the Link Title field. Keep adding as many link components as you need.

To add footer components, click the Edit icon in the Footer area toolbar and add your copyright text. The text is displayed at the bottom of the page.

Click the component placeholder to add Footer links and About this site components. The links can be internal or external. The About in footer dialog includes a text editor that gives you control over the formatting.

The components available in each area depend on the area and the template. The other areas of the home page such as stage, main, base and promos are designed for components that tease other pages of the site. We will create these later.

Create content pages

In the site structure, we have two section pages Dogs and Cats that are based on the Section template. Pages below them are based on the Article template. Section pages are designed to tease article content so create the Article pages first.

Article pages

Navigate to Dogs > Dog Food and Chews. The page header component is added automatically and the page title is inserted in the Headline field. Click the Edit icon in the Page Header toolbar and complete the fields in the dialog.

In the Content area, below the header component, add a new content component.

To demonstrate a few components, we added a Text and Image, a Quoted Text and a Video component.

Set up the rest of the pages based on the Article template.

Section pages

Navigate to the Dogs section page. The purpose of the Section template is to summarize and tease article pages within the section. The Section Header component is unique to this template and is usually used to summarize or introduce the section. Open the dialog and type in the title and text.

Add teaser components in the Teasers area after the Page Header component.

The Opener is an internal page teaser component that renders more prominently. The Internal Page Teaser component picks up the title, abstract and first image of the target page automatically. Navigate to the target page in the dialog and select it. On the Teaser Overwrite tab you have the option to overwrite the automatically retrieved information by using a different image, title and abstract.

To see a list of components available in the Teasers area, click the plus icon in the New Teaser Component box.

We added an Internal Page Teaser, a Teaser Group - Carousel and a Teaser Group - Finger Tabbed component to demonstrate a few.

The imaging engine   takes care of resizing all images to fit the area and component in which they are displayed. Images can be uploaded directly or stored in the built-in document management system (DMS).

Create the Cats section page in similar fashion.

Contact Form

To set up the contact form, navigate to Service > Contact. This page is based on the Form template. Click the Content area toolbar and then the Edit icon in the Form toolbar. The Form tab in the dialog allows for introductory text and the symbol and text for required fields.

Options on the Submit settings tab control what is displayed on the page after submission.

Options on the E-mail tab define how the information collected on the form is sent to the recipient. You can reference a form field using a FreeMarker tag such as ${subject} to include the information collected in that field.

Options on the Confirmation E-mail table define a confirmation email sent to the visitor.

(warning) Checking the Send confirmation box is not enough. You need to also add an enabled data node under the SendConfirmationEMailProcessor form processor and set its value to true. See Form processors  .

Form field components are inserted in field sets. A set groups similar fields together, such as all the fields that comprise a street address. Add as many fields sets as you need.

To add a field set, click the Form Fieldsets area, then the add icon on the New Form Fieldsets Component placeholder.

To add forms fields, select the field set and add a New Form Fields Component in it. Select the field type from a list of form components.

We added four text fields and a submit button component.

In order for the emails to be delivered, enter valid settings in Configuration > Mail (SMTP) in AdminCentral. Learn more about the Form module .

Site map

The Site Map template lists all pages in the Site Map component automatically. Navigate to Service > Site Map where a site map based on the default settings is rendered. If necessary, add content to the header component and change the default settings in the Site Map dialog.

The page linked to in the Search Page field of the Properties dialog on the home page is used to display search. The Search Result component is included automatically when you assign the Search Results template to the page. You can change how the results are displayed in the component dialog. Ideally, this page should be hidden in the navigation. The option to hide the page is available in the page properties dialog.

Extras, Promos and Base areas

All templates have Promos and Base areas and most have an Extras area. These areas are used for teaser components. Many kinds of teasers are available.

Promos area

Promos and many extras are inheritable. This means that you create the component once on a parent page and it is displayed on all child pages. Promo components are internal page teaser components displayed in their own area. On wider viewports the promos area is on the far right in the page layout. Promos are usually used to promote entire sections of a site but are also useful to tease special offers, seasonal promotions and landing pages.

To create promos, click the Promos area toolbar on the home page and add a New Promos Component component. Complete the fields in the component dialog.

If you check the Show in subpage box, the promo will be inherited by all child pages. For the example below, we resized the screen so that the promos render below the main and extras areas.

Extras area

Extras are also teaser components but there are a few exceptions. The extras area is to the right of main area. Many extras are inheritable.

On the Dogs page, we included an Internal Page Teaser, an External Page Teaser and a Download File Teaser component to demonstrate a few.

Base area

The base area is above the footer. Teaser carousel and category cloud components are available.

Completing the home page

Add a stage component and teaser components in the Main area of the home page. In the stage area you can either tease a single page or a number of pages using the Stage Paging component. We selected the paging option and made a few edits on the Teaser Overwrite tab.

In the Main area you can select from a number of teaser components.

We added Internal Page Teasers with link lists.

Creating a new theme

The STK is a templating framework that gives you control over of all aspects of your site, including the functionality, visual identity, templates and components. Read more about the   Standard Templating Kit .

The demo sites are based on the pop theme that is predominantly black, white and pink. This theme is assigned in Templating Kit > Site Configuration in AdminCentral. Change this assignment to orange. We will create the orange theme below. A more comprehensive tutorial   Creating a custom theme is available.

To create the new orange theme, go to Templating Kit > Themes. The visual identity of the site is controlled by a single CSS file, styles.css, linked to in the pop/cssFiles/styles/link node. Create the orange configuration shown in the screenshot below using the New content node and New data node commands. The extends property tells Magnolia to use the entire pop theme except for the new styles.css that will be stored in a folder to be created in Resources.

The CSS files used by the pop theme are stored in Resources. In /templating-kit/themes, create a new folder structure /orange/css using the New folder command. Next, copy /pop/css/styles into the new folder.

The new styles.css file can be edited directly in AdminCentral. Select the file and click Edit item. In the Edit dialog, change the styling to suit your theme. We changed the colors to orange and gray.

The images referenced by /pop/css/styles.css are stored in Resources in /templating-kit/themes/pop/img/bgs and /icons.

Either recreate the images or download and edit them to suit your styling. Upload the new images to new folders /templating-kit/themes/orange/img/bgs and /icons, leaving the file names intact. styles.css uses relative URLs so the correct images will be merged in the template.

These minor changes give the site a new visual identity without touching the templates or content.

Activating content

The last step is to activate the content to the public instance. Magnolia is preconfigured with two instances: author and public. Up until now we have worked on the author instance. Both instances are installed automatically. The public instance is set up as a subscriber of the author instance. Open Configuration > Subscribers and note the URL property that tells Magnolia where to activate the content.

Magnolia Enterprise Edition supports multiple subscribers per authoring instance, meaning that you can activate to multiple sites from a single authoring instance.

Login to the public instance at http://localhost:8080/magnoliaPublic/.magnolia . In the Website workspace you can find the demo sites but not the pet-products site as it is yet to be activated.

To activate the site, select the pet-products page on the author instance and click Activate incl.sub pages. Fill in the activation comment in the dialog and click OK. This creates a work item in the Inbox. Go to the Inbox and proceed with the work item. When the activation is complete the status indicator will change from red to green.

On the public instance in Website click Refresh and the pet-products page structure will appear. On the public website the pop theme is applied as the orange theme has not yet been activated.

On the author instance, activate the following nodes using the Activate incl.sub nodes command:

  • Templating Kit > Site Configuration /theme.
  • Templating Kit > Themes /orange.
  • Templating Kit > Resources /templating-kit/themes/orange.

Refresh the page on the public site and the orange theme is applied.

This quick start has shown you only the very basics. There is much more that Magnolia can do.

Browse documentation and visit the Forum to learn more.

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

To comment, create an account and log in.

© Copyright 2023 Magnolia