Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.
The Magnolia Travels demo demonstrates key features of Magnolia. Use it to learn what Magnolia can do, how authors manage content, and how developers create Magnolia projects. For developers, the Travels demo provides a best-practice example of the new Magnolia Templating Essentials (MTE), YAML configuration and resource loading. In producing the demo, we attempted to strike a balance between demonstrating many Magnolia features in a realistic context, while staying as small and simple as possible.
Clone the Travels demo project in Git:
git clone https://git.magnolia-cms.com/git/modules/demo-projects.git
This page is based on the Enterprise Edition. If you are working with the Community Edition, some of the features will not be available, including multisite, personalization and marketing tags.
Magnolia Travels is the website of a fictional travel agency that sells package tours. This business scenario helps showcase the benefits of Magnolia.
The demo illustrates important Magnolia features such as publishing, user roles, multilanguage content and authoring, multiple sites that reuse the same content, personalization, marketing tags and more - all in a modern, attractive, responsive design. Site content is managed in both a traditional page hierarchy and as a content pool in the Tours and Tour categories content apps.
As you browse the site, imagine what your products or services could look like in a site like this. Tours could be replaced with whatever products, information or departments are important in your organization.
The homepage has a typical structure with a top navigation and footer that is shared across all pages. The navigation contains two dropdowns.
The Website pages demonstrate key features of Magnolia:
To view the content structure and source login to AdminCentral with username and password
metaare a simple hierarchy. Content for these pages is added in the page editor. Pages under
metaare linked to in the footer, but the
metaparent page is not displayed in navigation because the Hide page option is enabled in the Page properties dialog.
travelhas only three subpages,
tour. These pages display the content for all tours. This content is added and stored in apps. Based on the URL, the content page retrieves the appropriate content item from the app and displays it.
Some of the key Magnolia features are showcased in the Travels demo.
Magnolia has a powerful and flexible security mechanism based on roles, groups and users. You can specify which apps and actions, and even which content within an app, a user can access. You can also limit who can request and publish workflows.
Open the Security app to explore. Log out as
superuser and log in as
eric). Notice that fewer apps are available, for example the Security app is no longer available.
The Travels demo includes three users to illustrate typical roles: (Password is always the same as the user name.)
eric: An editor who can edit all content. In the Pages app in CE he cannot access the Publish action. In EE he can submit items for publication with the Publish action, but he cannot actually publish content.
peter: A publisher who can also edit all content. In the Pages app in CE he can access the Publish action. In EE he can also view items submitted for publication in the Pulse, and approve (publish) or reject them.
tina: A tour editor who cannot access content in the Pages app.
Magnolia's publication takes advantage of the Workflow system. While any workflow can be implemented, in the Travel Demo you can try the standard "four-eye" publishing workflow which comes with Magnolia out-of-the-box. Eric the editor can edit content, and submit it for approval. Peter the publisher receives notifications in the pulse, and can review the changes made, and finally publish the changes to the public server instances - or reject them.
The Travels demo supports two content languages, English and German.
To see this in action, edit the
Admincentral can also be translated into multiple languages,
Log in as
eric-de) to see the administration interface in German. Each user can set their language in their user profile.
The Travels demo is a good example of efficient content reuse and demonstrates how this can easily be accomplished using content apps to store tours.
A tour is stored in one location, but the information is used throughout the site, from the homepage, to the category overviews, to the tour pages.
As a best practice, content should be added and maintained in one location and used throughout the website, or in external apps, widgets or feeds. It should never be necessary to add the same content multiple times,
Compare the information in the Tours app to the content on the site pages to see how it is reused.
Multisite is an Enterprise Edition Pro feature.
The Travels demo has a simple additional site, SportStation, which demonstrates sharing of web resources, components, and tour content across sites.
A Magnolia instance can host multiple sites that share configuration, resources and content. This is useful in a variety of situations - from campaigns and landing pages to managing sites for all departments, branches or subsidiaries of your organization. This feature is often used to simplify and consolidate management of the many websites company accumulates over time.
To view the SportStation site, edit the
sportstation page in the Pages app and click Preview page in the editor.
Personalization is an Enterprise Edition feature.
Magnolia sites can be personalized for individual visitors based on visitor traits such as location, information in a user profile, or information shared via social networks. The Travels demo illustrates this with three variants of the home page. Different tours display in the carousel depending on the location trait of the visitor.
To view the personalized pages:
Variantsnodes. There is one variant for each geographic region.
travelpage and click Preview as Visitor in the action bar.
Marketing Tags are an Enterprise Edition feature.
To see this in action: