Ü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.
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.
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.
Résumé des possibilités d'édition du Column Container
- Subdivision possible en 1-4 colonnes pour mettre en page et structurer une page.
- Rows (rangées les unes sous les autres) définissent l'ordre sur Mobile -> tout ce qui se trouve dans une rangée est affiché en priorité les uns sous les autres.
- Possibilité d'insérer des titres H2 et H3 (inconvénient : il n'est pas possible de placer une ancre sur le titre, si on le souhaite utiliser le champ Text&Image au préalable pour le headline).
- Attention lors du déplacement à l'intérieur d'un conteneur de colonnes -> les contenus peuvent être perdus. Il est donc toujours préférable d'utiliser le copier-coller.
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
Résumé des possibilités d'édition des Tabs
- L'élément se compose toujours d'abord d'un « Tab » et ensuite d'un « Tab Items ».
- Distinction entre Horizonzal, Vertikal et Accordion -> l'Accordion est le plus souvent utilisé.
- Le nombre de tab items à l'intérieur d'un tab n'est pas limité.
- Pour les titres qui doivent être placés sur toute une rangée d'onglets, un conteneur texte et image doit être placé au préalable (des ancres peuvent également y être placées).
- Les titres d'onglets peuvent être édités avec H2 ou H3 (à des fins de référencement).
- Les onglets peuvent être tous fermés ou le premier ouvert.
- Tous les contenus possibles peuvent être ajoutés dans un onglet.
- Onglet dans l'onglet n'est pas possible
- Lien vers les onglets (lien direct possible) en ajoutant l'ID de l'objet avec un # à la fin de l'URL (les instructions se trouvent ici). Par exemple: https://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)
Possibilités d'utilisation du Reference Component
- Idéal pour définir une « source » de contenu qui peut ensuite être placée sur de nombreuses pages, afin de ne devoir l'éditer qu'à un seul endroit à l'avenir (par ex. teasers ou CTA). Dès que la page source est publiée, le contenu s'adapte automatiquement sur toutes les pages référencées.
- Evite le contenu dupliqué car le crawler reconnaît où se trouve la source référencée (bon pour le 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