Page Comparison

...

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.

...

^{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.

...

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 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 unserer Kitchen Sink zur Verfügung gestellt:

• Brand (Logo des Portals)

• Buttons

• Blockquote <blockquote> & <cite>

• Details <details> & <summary>

• Colors (Color & Background)

• Callouts

Icons

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

...