Example detail page

The detail page (also known as a content page) is the standard page type. Its purpose is the clear and structured presentation of information, facts, and complex content for the various target audiences of LMU. Optionally, an image can be added here. On this page we show you examples of paragraph modules.

Tipp
You can find all instructions for using the modules in the WCMS Wiki.

Standard content with text (only)

This module is the most important module on detail pages for displaying detailed and structured information.

Use meaningful subheadings

To structure the text well and make it quicker and easier to understand.

Use formatting

You also have the option of formatting the text by making it bold or italic. Or superscript or subscript .

You can highlight particularly important information using the integrated info box.

You have various options for lists

  • To short texts...
  • make it visually easy to grasp
  1. Numbers for representing steps
  2. which must occur in sequence
  3. ...
  1. Lowercase letters
  2. ....
  3. ...
  1. Uppercase letters
  2. ...
  3. ..
  1. Roman numerals with lowercase letters
  2. ...
  3. ..
  1. Roman numerals with capital letters
  2. ....
  3. ...

You can use all variants of the link.

For example, you can set an internal link to a page within your website. You can also select a specific paragraph to link to or even to the other language version of the page. This is helpful if, for example, you only have a page in one language.

If you link to websites outside your own website, you can use the external link . This should open a new browser window so that your users understand that they are now leaving your website.

In addition, you can also set links to files such as PDFs (PDF, 9 KB) or directly to data sources such as news articles, event articles, or individual contact pages from within the normal text flow.

Standard content (with image)

A female student reads in a work area of the Philologicum.

© LMU

The image is optional and can be aligned either left or right.

Tip: If you want to use multiple images within the text, split the content into multiple standard modules.

Standard content (with teaser)

The teaser is optional. You can use it to link to pages that are particularly relevant and that your visitors should easily find. You can also link to datasets (such as person pages, news or event pages) as well as downloads (e.g. PDFs) via the teaser. Another option is a video teaser, where you can link a YouTube, Vimeo or LMUcast video.

Teasers can be placed on the left or right. Alternating layout of successive standard modules with images or teasers (left, right, left) can make the page more dynamic. However, with more than three standard modules of this type, the page can quickly become visually cluttered.

Tip: If you want to use multiple teasers within the text, split the text into multiple standard modules.

Announcement (Information)

The announcement is available in three variants: information, notice, and warning. You can use them to interrupt the normal reading flow and draw attention to important details with varying levels of emphasis.

The information variant shown here is the most subtle—it’s only an additional notification that blends well with the rest of the site’s design and can remain on the page for a longer period.

Announcement (Notice)

The announcement in the notice variant is more prominent—it can be used, for example, to highlight typical errors in a registration process. It visually stands out from the rest of the design and therefore should only be used sparingly and thoughtfully as a permanent feature on websites.

Announcement (Warning)

The warning variant of the announcement noticeably disrupts the rest of the page design. It should only be used for very critical notices—such as an unexpected cancellation of a lecture. Typically, it should only be deployed temporarily.

Accordion module

Only show the detailed information on demand (when clicked).

This is sensible when not all detail information is equally relevant to every visitor, allowing users to selectively view the details that pertain to their interests.

Typical application: Frequently Asked Questions (FAQs).

Each element needs a heading that is always visible.

Each element must contain a text that becomes visible when expanded.
Behavior: opening/closing prompting.

In the dialog for editing accordion items, they are displayed in a list. On mouseover, icons appear—among others a drag‑and‑drop icon and up/down arrows. Using these controls, you can change the order within the accordion.

Each accordion element requires a heading that is always visible.

Tip:

Accordions can also be used without a heading and be appended to a standard content module to...

Profile fact sheet

Term
Description
Often used for:
Structured presentation of course details
Accessible display on mobile devices
→ A good alternative to traditional tables
Optional: From the 5th term onward, the table must be expanded
...
...
in order to read the additional entries
Alternatively, you can choose:
“Show all content”

Table

Optionally, a table caption
Table header:can be set at top or left
Enter your text hereeach column needs a heading
Each cell must contain texttable cells must not be merged
Tables may only be used for tabular data - not to layout text on a pagewhen in doubt, avoid tables. Prefer lists or fact sheets
Do not merge rows, as this makes them inaccessible!

Video/Audio-Player

video player

If you click to view this video your personal data will be transmitted to YouTube and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.

More information available here: LMU data protection policy, data protection policy from YouTube / Google

Here you can embed video or audio files hosted by YouTube, Vimeo, or LMUcast. The module works on both the overview page and the detail page. Legally required data protection information is displayed automatically.

3:33 | 28 Nov 2022 | ©LMU

LMUcast Playlist

You can also embed an LMUcast playlist directly, where all videos are displayed in a clean overview. Since a playlist’s content is usually very extensive, it’s generally worthwhile to create a dedicated detail page for it. We have linked here an example playlist from the CAS program.

Image slider – with images from the LMU image pool (research)

The image slider can be used to display a variety of large images, for example from an event.

The text above the slider is optional, maximum 320 characters. The slider is embedded directly into the page. At least 2 images must be linked, maximum 32.

Here in the example you can see images on the topic of research from the LMU image pool that all editors can use for their web presences.

  1. Samples in test tubes are being examined under a microscope
  2. Researchers working in a lab
  3. Bookshelves in the Philologicum
  4. A few small test tubes filled with fluids side by side.
  5. Sample fluid is applied to a metal plate with a pipette.
  6. Close-up shot of an experimental setup with a laser in a laboratory
  7. Close-up shot of a laboratory setup with a red laser
  8. A person with a labcoat and protective gloves looks through a microscope
  9. Two researchers examine something through a microscope
  10. A person wearing blue protective gloves arranges plastic trays
  11. Liquid is applied to a carrier with a pipette.
  12. Three filled pipettes in a holder
  13. Several sealed samples side by side
  14. A glass wall of the Philologicum of the LMU
  15. Petri dishes filled with liquid
  16. Rows of books on shelves in a library
  17. A hand holding a sample filled with liquid
© LMU / Jan Greune
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Arne Trautmann
© Jan Greune / LMU
© Jan Greune / LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© Matthias Firmke
© LMU

Image slider – with images from the LMU image pool (Buildings)

In this example, you can see images related to buildings from the LMU image pool, which all editors can use for their web presences.

  1. The buildings of the Campus Oberschleißheim from bird´s-eye view in 2019
  2. Waymarker with braille.
  3. View into the atrium of the LMU main buidling
  4. The Great Aula in the LMU Main Building
  5. Wall clock in the great aula in the LMU main building.
  6. Glass facade of the Historicum in the evening.
  7. Oblique view on the nano institute in the Königinstraße
  8. Students in front of the fountain on the Geschwister-Scholl-Platz
  9. Exterior view of the Biocenter in winter with two persons in the foreground
  10. The buildings of the Campus Martinsried from above
  11. View from the roof of the campus in the Oettingenstraße into the patio
  12. Main building and Geschwister-Scholl-Platz from above
  13. Atrium in the LMU main building
  14. Snow-covered building and tree on the Geschwister-Scholl-Platz
  15. Satue of King Ludwig I. of Bavaria in the LMU Atrium
  16. Campus Martinsried in Großhadern in winter
  17. Green flag with the LMU logo in front of a building
  18. Well on the Geschwister-Scholl-Platz with wintery atmosphere
  19. Object on the Campus Martinsried from above
  20. Lantern in front of the LMU main building
  21. Long hallway with windows
  22. Handrail with braille
  23. Exterior view of the Philologicum with the two towers of the Ludwigskirche in the background
  24. Statue of Prince Regent Luitpold of Bavaria in the LMU Atrium
  25. Terrace of the Biocenter with two red sun sunshades in front.
  26. Staircase in the LMU main building
© LMU / Jan Greune
© LMU
© Katharina Vukadin
© LMU
© LMU
© LMU
© LMU
© Peter Martner / LMU
© LMU
© LMU
© Philipp Thalhammer / LMU
© LMU
© LMU
© Kai Wengler
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© Katharina Vukadin
© LMU

Image slider – with images from the LMU image pool (Buildings)

In this example, you can see images on the topic of buildings from the LMU image pool that all editors can use for their web presences.

  1. Large auditorium filled with students during a lecture
  2. A lecture in the main auditorium of the LMU main building filled with many students.
  3. Several people on front of a fountain on a square
  4. Students in a counseling situation
  5. Two persons in conversation during sunset
  6. Several people outside on the Geschwister-Scholl-Platz with fountain in the background
  7. Students on a table in the canteen
  8. Work area with a person studying
  9. A female student reads in a work area of the Philologicum.
  10. Students during a counseling session
  11. Students in a work area on the Campus Großhadern/ Martinsried
  12. Students in the work area in the library
  13. Students studying in the reading hall of the medical library
  14. Students in conversation in the canteen
  15. Students on the campus Grußhadern/ Martinsried
  16. Three students in conversation
  17. A glass wall of the Philologicum of the LMU
© Katharina Vukadin
© Katharina Vukadin
© Jan Greune / LMU
© Jan Greune / LMU
© LMU
© Jan Greune / LMU
© Jan Greune / LMU
© LMU
© LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Matthias Firmke
© LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© LMU

Large image

This module allows you to display large images and graphics in full.

For instruction screenshots, this format is also suitable. Use the settings "Flexible image format" and "Use original resolution."

Wall clock in the great aula in the LMU main building.
© LMU

Automatic people list

The automatic people list displays all persons according to a filter rule that you previously select. You can adjust the layout and the displayed categories.

Name Email Tel Room Position

Manual people list

Here you can select the people manually. This is, for example, helpful for research teams from different fields. Here you see the “business card” layout.

Christoph Zehetleitner

Referat Internetdienste VI.5

Head of Division

Coordination

Eckhard Sedlmayer

Referat Internetdienste VI.5

Deputy Head of Division

Corporate Design, Webdesign

Elizabeth Forster

Referat Internetdienste VI.5

Customer Success

Customer success management | Website design | Consulting and training

Steffen Kube

Referat Internetdienste VI.5

IT

CMS Development

Newsboard (manual). Can only be integrated by project admins.

Webform (form for collecting information)

Webforms can be integrated into FirstSpirit to gather simple, structured information and send it to an email address. Separate permissions are required, which you can obtain through central support.

Because webforms are often very extensive, it is generally advisable to place them on a separate detail page. We provide an example form link here.

Anny widget (Bookings)

LMU has licensed the Anny resource booking tool. You can organize bookings for events, consultation appointments, work tables in rooms, or resources that can be loaned via Anny. An Anny booking can be embedded on a page using the FirstSpirit Anny widget.

Since Anny bookings are usually visually extensive, it is generally worth creating a dedicated detail page for them. We have linked here an example of an Anny booking on the IT Service Desk pages.

Publication list via LMU OpenAccess (example)

Cooperation partners (with logos) are usually displayed at the end of the page.