PORTAL und PPS Knowledge Base

HTML Templates

Owned by Former user (Deleted)
Last updated: 2024-10-29 by Ilker Oygün
4 min read

Über die HTML Templates werden Vorlagen für Teaser, Callout-Boxen, Buttons oder Icons sowie die Codes für das responsive Grid-Layout und nützliche CSS-Klassen und HTML-Elemente direkt im PORTAL zur Verfügung gestellt. Mit nur einem Klick können die Vorlagen und Codes kopiert und an diversen Stellen im PORTAL eingebunden werden. Die in den HTML Templates bereitgestellten Codes können für die Gestaltung von Kurationsflächen und Targeting-Slots im Teasermanagement, für die Code-einbetten-Funktion sowie auf statischen Seiten als Basis verwendet werden.

Funktionalitäten der HTML Templates

  • Direkt im PORTAL integrierte HTML Templates mit

    • Templates für Teaser

    • Erklärungen und Codes für das Responsive Grid

    • Nützliche CSS-Klassen & HTML-Elemente aus dem Framework

    • Erklärungen, Codes sowie eine Auswahl an Icons

  • Vorlagen und Codes als Unterstützung für freies Gestalten in HTML

  • Best-Practice-Gestaltungsvorlagen mit Vorschaufunktion

Inhaltsverzeichnis

Allgemeine Beschreibung

Im PORTAL gibt es diverse Stellen, die via HTML frei gestaltet werden können: Im Teasermanagement können Kurationsflächen und Targeting-Slots mit HTML-Code bestückt werden. Ebenso können beliebig Statische Seiten angelegt werden, die ebenfalls via HTML frei gestaltet werden können. 

  • Das Gestalten im Design/Theme der Seite (Farben, Schriften/Schriftgrößen, Hintergrund) ist durch das Nutzen der CSS-Klassen (einsehbar über die Kitchen Sink in der Administration & Moderation) einfach möglich.

  • Verschiedenste Einbettungen können vorgenommen werden: Bilder, Videos, Widgets.

  • Statische Seiten können mit Subnavigation und Sidebar sowie Teasern gestaltet werden.

Die in den HTML Templates zur Verfügung gestellten Codes können als Basis für freies Gestalten in HTML verwendet werden.

Zugang zu den HTML Templates

Die Seite “HTML Templates” kann von Benutzer:innen mit Zugang zur Administration & Moderation (Berechtigung “Zugang zur Verwaltungsübersicht”) aufgerufen werden.

Zugang zur Seite “HTML Templates” über die Administration & Moderation

Thematische Unterteilung

Die Vorlagen und Codes sind thematisch in folgende Tabs aufgeteilt:

  • Templates: Best-Practice-Vorlagen für Teaser

  • Responsive Grid: Erklärungen und Codes für das responsive Grid-Layout

  • CSS & HTML: Nützliche CSS-Klassen & HTML-Elemente aus dem Framework

  • Icons: Erklärungen, Codes sowie eine Auswahl an Icons

Tab “Templates” mit Best-Practice-Vorlagen für Teaser

Templates

Im Tab “Templates” werden Best-Practice-Vorlagen zur Verfügung gestellt. Die Vorschau der Gestaltungsvorlage hilft dabei, ein passendes Design beispielsweise für einen Teaser zu wählen. Mit nur einem Klick kann der Code für das jeweilige Template kopiert werden, um es an der gewünschten Stelle im PORTAL einzubinden. Hier müssen dann noch die Platzhalter entsprechend ersetzt werden. Außerdem können beispielsweise die Teaser-Templates mit zusätzlichen CSS-Klassen und HTML-Elementen nach Belieben kombiniert werden.

Wie mit den HTML Templates ganz einfach ein Teaser erstellt und über das Teasermanagement an relevanten Stellen im PORTAL verteilt werden kann, wird in diesem kurzen Video-Tutorial gezeigt:

Warnhinweis:

Replace the examplary figure tags below with the figure tag of the chosen image in the media collections for optimal lazy loading. Always use the same aspect ratio in the figure tag for all views (small, medium, large).

Bei den in den Bildersammlungen hinterlegten figure-Tags ist eine Platzhalter-Logik implementiert, welche einen Cumulative Layout Shift (CLS) vermeiden soll. Das Bildseitenverhältnis des Platzhalters ist fest hinterlegt. Das Bild wird zwar im definierten Seitenverhältnis angezeigt, jedoch kommt es zu einem Layout Shift, da der Platzhalter im falschen Verhältnis aufgespannt wird.

Responsive Grid

Im Tab “Responsive Grid” werden verschiedene Grids mit farbigen Rändern angezeigt, um die Funktionsweise des Grid-Layouts zu verdeutlichen. Die Ränder werden nicht angezeigt, wenn der HTML-Code kopiert wird.

Benutzer:innen können die Größe ihres Browserfensters anpassen (Strg + Umschalt + M bzw. Strg + Umschalt + I), um die verschiedenen Rastergrößen an verschiedenen Break-Points (small, large) anzuzeigen.

Aktuell sind Codes für folgende Grids vorhanden:

  • 1 row (small 12 / large 6)

  • 1 row (small 1)

  • 1 row (small 12 / large 1)

  • 1 row (small 12 / large 8:4)

  • 2 rows (small 2:10 / small: 9:3)

  • 1 row (small 12 / medium 6 / large 3)

CSS & HTML

Im Tab “CSS & HTML” sind die Codes von ausgewählten CSS-Klassen und deren verschiedene sizes und styles aus der PEIQ Kitchen Sink zur Verfügung gestellt:

  • Brand (Logo des PORTALs)

  • Buttons

  • Blockquote <blockquote> & <cite>

  • Details <details> & <summary>

  • Colors (Color & Background)

  • Callouts

Icons

Wichtiger Hinweis: Es können nur Icons mit der Klasse .fa oder für Brand-Icons .fab verwendet werden. Die in der Font-Awesome-Dokumentation genannten Klassen .fal, .far, .fas und .fad werden nicht unterstützt!

Symbole werden mit der Klasse .fa verwendet.

Es können alle Symbole von Font Awesome verwendet werden – einschließlich der Pro-Only-Icons. Dazu muss nur in den Codes der Icon-Namen ersetzt werden.
Die zusätzliche – und optionale – Klasse .fa-fw gibt dem Symbol eine feste Breite. Der Tab “Icons” ist in folgende Kategorie unterteilt:

  • Icon sizes

  • Icon colors

  • Corona / COVID-19 Icons

  • Brand icons

 

Verwandte Seiten

 

Nur für PEIQ-Mitarbeiter:innen
https://peiq.atlassian.net/wiki/x/YYG2Ag

 

Impressum