Übersicht / Aperçu
2-Columns 50/50
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula.
2-Columns 33/66
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
2-Columns 66/33
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
3-Columns 33%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
4-Columns 25% und 3 Rows (tight grid)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Zusammenfassung der Editiermöglichkeiten des Column Container
- Unterteilung in 1-4 Spalten möglich um eine Seite zu Layouten und strukturiert zu gestalten
- Rows (Reihen untereinander) definieren die Reihenfolge auf Mobile -> alles in einer Reihe wird priorisiert untereinander gezeigt.
- Möglichkeit H2 und H3 Titel einzufügen, jedoch kein Muss (Hinweis: es kann kein Anker auf den Titel gesetzt werden, falls dies gewünscht ist Text&Image Feld vorab für die Headline verwenden
- Achtung beim Verschieben innerhalb eines Column Containers -> Inhalte können verloren gehen. Daher immer besser copy & paste verwenden.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Tab Horizontal
Tab Vertical
Tab Accordion
Accordion first open
Accordion all closed
Zusammenfassung der Editiermöglichkeiten der Tabs
- Element besteht immer zuerst aus «Tab» und dann einzelnen «Tab Items»
- Unterscheidung von Horizontal, Vertikal und Accordion -> meist genutzt ist das Accordion
- Die Anzahl von Tab Items innerhalb eines Tabs ist nicht eingeschränkt
- Für Headlines die eine ganze Tabreihe betiteln sollen sollte vorweg ein Text&Image Container gesetzt werden (darin können auch Anker gesetzt werden)
- Tabtitel können mit H2 oder H3 editiert werden (zu SEO zwecken)
- Tabs können alle geschlossen, oder der erste geöffnet angezeigt werden
- In ein Tab Item können alle möglichen Inhalte hinzugefügt werden
- Tab in Tab ist nicht möglich
- Verlinkung auf Tabs (Direktlink ist möglich) dazu am Ende der URL die Item ID mit einem # Anfügen (Anleitung dazu ist hier zu finden)
z. B. www.hirslanden.ch/de/corporate/digital-marketing-trainings.html#item-160329358
Einsatzmöglichkeiten der Reference Component
- Ideal um eine «Quelle» für einen Inhalt zu definieren, der dann auf vielen Seiten platziert werden kann, um diesen für die Zukunft nur an einem Ort editieren zu müssen (z.B. Teaser oder CTAs). Der Inhalt passt sich, sobald die Quellseite gepublished wurde auf allen referenzierten Seiten automatisch an.
- Vermeidung von doppeltem Content da der Crawler erkennt, wo die referenzierte Quelle ist (gut für SEO)
/content/corporate/de/teaser/teaser-hc/jcr:content/content/columncontainer_3978_1919954011/par-3/primary_image_copy_c
/content/corporate/de/teaser/teaser-hc/jcr:content/content/columncontainer_875562261/par-2/primary_image_copy_c
/content/corporate/de/home/jcr:content/stage/banner_slider/slides/awareness_banner_cop_530566730
/content/klinik-hirslanden/de/centers/geburtenabteilung
/jcr:content/contacts/contact1_copy
/content/hirslandenblog/de/blog-call-to-actions/jcr:content/content/columncontainer/par-1/phone_copy_copy