PORTAL und PPS Knowledge Base
HTML Templates
Ü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.
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
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).
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