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