Das Intro hat einen Titel über maximal zwei Zeilen
Der Titel und Text für das Intro kann ohne Formatierungen in die Felder im Content Editor eingegeben werden. Vor allem der Titel sollte sehr kurz sein, da er auf Mobile sonst sehr «sperrig» wirkt. Im Content Editor kann eine dünne Linie per Checkbox am Ende des Intros eingeblendet und ausgewählt werden, ob der Text zentriert dargestellt werden soll (Standard auf normalen Seiten).
Ein optionaler Badge kann ebenfalls via Dropdown-Menü im Content Editor hinzugefügt und auf dem Intro-Bild für Desktop mit der entsprechenden Einstellung in einem der vier Ecken angezeigt werden. Der Badge selber wird im Shared Content im Ordner «Badges» angelegt. Dieser Text ist eigentlich schon zu lange für ein Intro. Er sollte maximal 1 bis 2 eher kurze Sätze beinhalten.
Ein optionaler Badge kann ebenfalls via Dropdown-Menü im Content Editor hinzugefügt und auf dem Intro-Bild für Desktop mit der entsprechenden Einstellung in einem der vier Ecken angezeigt werden. Der Badge selber wird im Shared Content im Ordner «Badges» angelegt. Dieser Text ist eigentlich schon zu lange für ein Intro. Er sollte maximal 1 bis 2 eher kurze Sätze beinhalten.
Fakultative Subline-Zeile z.B. für Autorenzeile in Artikeln
Text Content
Bevor du diese Seite durchschaust, einige wichtige allgemeine Hinweise:
- Die einzelnen Komponenten können von der Breite her am einfachsten über die eingestellte Breite des Containers gesteuert werden, in dem sie eingebaut sind. Dies passiert im Experience Editor.
- Einige Komponenten haben standardmässig ein Titel-Feld im Content Editor. Die Titelgrösse ist dabei optisch fix gegeben. Falls ein Titel optisch nicht passt, kann stattdessen im Content Editor separat ein Text-Item erstellt und direkt vor der entsprechenden Komponente eingebaut werden.
- Beachte bitte, dass nicht alle Komponenten für Container mit mehr als einer Spalte gemacht sind (z.B. Double und Tripple Container). Tripple Container setzen wir zudem nur sehr selten ein.
- Buttons und Titel haben keine eigene Komponente und werden direkt in einem Text-Item erstellt.
Accordion Description
Ein Akkordeon hat mindestens 2 Elemente. Darin sind verschiedene Formatierungen möglich, die im Rich-Text-Editor verfügbar sind. Weitere wichtige Punkte:
- Bild einblendbar (siehe nächstes Element)
- Pro Element ist festlegbar, ob es nach dem Laden der Seite aufgeklappt sein soll (dieses Element als Beispiel)
- Jedes Element kann mit einem Ankerlink angesteuert werden (Beispiel)
Weitere Einstellungen fürs Frontend (Experience Editor):
- Im Experience Editor kann in den Einstellungen des Elements der Titel ganz oben zentriert dargestellt werden
- Im Experience Editor können in den Einstellungen des Elements links von dein einzelnen Elementen Häkchen oder Zahlen eingeblendet fakultativ werden
Bild lässt sich im Content Editor auswählen und links oder rechts vom Text anordnen. Zudem kann es mittels Checkbox auf Mobile ausblendbar.
Text
Infobox
Eine Infobox sollte nicht mit Links in diesem Text verlinkt werden und nur Fliesstext enthalten. Der Text sollte zudem kurz sein, damit unter dem Bild nicht wie in diesem Beispiel ein hässliche Abstand entsteht. Im Experience Editor kann die Position des Bildes gewählt und der gesamten Infobox ein farbiger Hintergrund gegeben werden.
Infobox List
Allgemeines
Infoboxes können auch als Liste angezeigt werden. Der Inhalt kann aus dem Ordner Local Resources einer Seite stammen oder aus dem Shared Content. Auch hier ist auf die Textlänge zu achten und Verlinkungen sind generell nicht erlaubt. Alle Elemente müssen im Item Infobox List manuell hinzugefügt werden, damit sie angezeigt werden.
Ich bin ein Label
Einstellungen für Bilder vornehmen
Bilder sind bei Infobox Lists fakultativ, sollten allerdings einheitlich innerhalb einer Infobox List sein. Jedem Bild kann im Content Editor wie hier auch ein Labeltext mitgegebenen werden mit wählbarer Position auf dem Bild.
Generelles zu Titeln und Dachzeilen
Wichtig ist, dass die Titel eher kurz gehalten sind und auf maximal zwei Zeilen passen, damit sie nicht zu häufig umbrechen. im Experience Editor kann zudem eingestellt werden, wie viele Infoboxes pro Zeile angezeigt werden. Ebenfalls sind dort weitere Einstellungen zu finden im Register «Layout», die gerne ausprobiert werden dürfen.
Infobox List Karussell
Anzeigen-Einstellung
Der Aufbau ist gleich wie bei einer normalen Infobox List. Zur Aktivierung muss im Experience Editor in den Einstellungen des Elements lediglich die entsprechende Option für Desktop, Mobile oder beides aktiviert werden. Ebenso ist einzustellen, wie viele Elemente auf Desktop immer angezeigt werden sollen.
Reihenfolge mischen
Mit der entsprechenden Checkbox in den Einstellungen im Experience Editor werden beim Laden der Seite die Elemente per Zufall neu angeordnet.
Darstellung auf Mobile
Ist die Karussell-Option auch auf Mobile aktiviert, wird immer nur 1 Element angezeigt (mit Pfeilchen, um weiter durchzuscrollen).
Titel
Text
Titel
Text
Text Content
Ein Textelement erhält normalen Text und kann Formatierungen wie Bullet Points und Links enthalten, die wie im Beispiel unten verschieden dargestellt werden können. im Experience Editor kann dem Element ebenfalls ein farbiger Hintergrund gegeben werden. Auch eine zweispaltige Darstellung ist möglich, führt allerdings bei der Nutzung von Bullet Points aus Erfahrung zu komischen optischen Verschiebungen in der rechten Spalte.
- Bullet Point
- Bullet mit Pfeil
- Bullet als Checkbox
Ebenso gibt es einen verlinkbaren Button und Inverted Button, die sich von der Darstellung unterscheiden. Sie passen sich sowohl auf Desktop als auch Mobile der Textbreite an.
Wenn mehrere Buttons auf Desktop nebeneinander dargestellt werden sollen, ist es empfehlenswert, die CSS-Class mit «80% on mobile» zu verwenden. So sehen Sie wie in diesem Beispiel (wenn auf einem Mobile oder in einem schmalen Browser dargestellt) optisch schöner aus.
Text Image
Ich bin ein fakultatives Label
In diesem Element fliesst der Text ums Bild, was je nach Darstellungsgrösse und Textlänge auch unschön aussehen kann. Das Bild ist im Content Editor links oder rechts einstellbar. Ebenfalls kann gewählt werden, ob das Bild gross dargestellt werden soll und ob es auf Mobile ersichtlich ist. Der Text darf Formatierungen und Links sowie Buttons enthalten. Eine Caption (Bildunterschrift) wird nicht empfohlen.
Testimonials
Name
Amalia Boffa
André Eiermann
Kürzlich hat mir die SWICA ein weiteres Mal geholfen. Über Nacht erhielt ich alle nötigen Dokumente für meine Russlandreise. Ein einziges Telefon reichte. Dank der raschen Hilfe habe ich noch rechtzeitig mein Visum erhalten und präsentierte meinen Vortrag in Moskau wie geplant.»
Alessandro Ferraro
