Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML Wrap
alignright
classmenu

Live demo for visitors (public instance):
https://demopublic.magnolia-cms.com

Live demo for editors (author instance):
https://demoauthor.magnolia-cms.com

Log in as superuser / superuser

Excerpt

The Magnolia Travel 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 Travel 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 Travel demo project in Git:

Code Block
languagebash
git clone httphttps://git.magnolia-cms.com/git/modules/demo-projects.git

...

HTML Wrap
alignright
classmenu

Youtube
playlistIdPLxHBbwVVoCob0wnr64vUIEJ1nhirkYoZY
width450
videoIdtKoOK3-BZXQqGVMkz1rRwI
urlhttps://www.youtube.com/watch?v=tKoOK3-BZXQ&rel=0
height282

Watch: Introduction to the Travel Demo

...


Content reuse

HTML Wrap
alignright
classmenu

Youtube
playlistIdPLxHBbwVVoCob0wnr64vUIEJ1nhirkYoZY
width450
videoIdvu9Ha-mWbJE
urlhttps://www.youtube.com/watch?v=vu9Ha-mWbJE
height282

Watch: Content reuse with Content apps

The Travel 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

Info

Multisite  is an Enterprise Edition Pro feature.

HTML Wrap
alignright
classmenu

Youtube
playlistIdPLxHBbwVVoCob0wnr64vUIEJ1nhirkYoZY
width450
videoIdLeD_2vzqAx0
urlhttps://www.youtube.com/watch?v=LeD_2vzqAx0
height282

Watch: Sharing content and resources across sites

The Travel 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.

  • SportStation offers only Active tours and uses the same content as Travel.
  • Site styling is similar to Travel because the same web resources are used.
  • The home page features a carousel of hand-picked active tours and then a tour list of all tours in the Active category, displayed in teaser blocks. The tour list is the same as as that used on category overview pages in Travel.
  • The tour detail pages are very similar to those in Travel but do not include icons linking to tour types or destinations, nor are their related tours at the bottom of the page.

Personalization

Info

Page personalization is an Enterprise Standard and Enterprise Pro feature, component personalization is an Enterprise Pro feature.

Magnolia sites can be personalized for individual visitors based on visitor traits such as cookies, location, date, information in a user profile, or information shared via social networks. 

Page personalization

HTML Wrap
alignright
classmenu

Youtube
playlistIdPLxHBbwVVoCob0wnr64vUIEJ1nhirkYoZY
width450
videoIdabF79TUU_FY
urlhttps://www.youtube.com/watch?v=abF79TUU_FY
height282

Watch: Page personalization in a previous version of the Travel Demo

The Travel demo illustrates page personalization with three variants of the contact page in both EE versions. Different contact information displays in the second Text and image component depending on the location trait of the visitor.

To view the personalized pages:

  • In the Pages app expand the contact and Variants nodes. There is one variant for each geographic region.
  • Select the contact page and click Preview as Visitor in the action bar.
  • In the overlay select different sample users to view the page variants.

Image RemovedImage Added

Component personalization

HTML Wrap
alignright
classmenu

Youtube
playlistIdPLxHBbwVVoCob0wnr64vUIEJ1nhirkYoZY
width450
videoIdyIlQ_Vdr1Fo
urlhttps://www.youtube.com/watch?v=abF79TUU_FY
height282

Watch: Personalization in the Travel Demo

In Magnolia EE Pro, the Travel demo illustrates component personalization on the home page using the Tour type cookie. 

To view the personalized components:

  • In the Pages app open the travel page in the editor.
  • Click  in the top bar to view the page in the browser.
  • Click Cultural in the Which tour type are you? component. 
  • View any tour page and click the logo to navigate back to the home page.
  • The question is hidden and the Featured tours (by tour type) component displays cultural tours below the carousel. 

Image RemovedImage Added

Marketing tags

Info

Marketing Tags is an Enterprise Edition Std feature.

HTML Wrap
alignright
classmenu

Youtube
playlistIdPLxHBbwVVoCob0wnr64vUIEJ1nhirkYoZY
width450
videoIdKalIaVh8dLs
urlhttps://www.youtube.com/watch?v=KalIaVh8dLs
height282

Watch: Marketing Tags example

The Marketing Tags app integrates with marketing services like Clicky and Google Analytics. Marketing teams can add snippets of HTML or JavaScript to all or any set of pages without code changes or developer assistance.

To see this in action:

  • Open the Marketing Tags app in the Tools group.
  • Edit any tag to view the configuration options.
  • Click Show provider dashboard to view the provider dashboard (as configured in the tag). You can also view the dashboard in your browser.
  • View the page source of any page on the public instance to confirm that the tag is added to the HTML.

Learn more

...