Texte mehrspaltig anzeigen
Veröffentlichungsdatum: 13. März 2017
Änderungsdatum: 15. März 2017
weblication cms core grid css css-only text mehrspaltig
Nutzen Sie eigene CSS-Only-Varianten für das Text-Element, um Texte auch mehrspaltig anzuzeigen.
Mehrspaltige Texte können Sie für Redakteure über entsprechende CSS-Only-Varianten zur Verfügung stellen. Ein Redakteur muss für das entsprechende Text-Element lediglich die CSS-Only-Variante auswählen, welche ab Weblication® CMS-Version 11.x als installierbare CSS-Only-Variante verfügbar ist.
Gelöst ist die mehrspaltige Ansicht rein über CSS, wobei ein Umbruch abhängig von der Bildschirmbreite automatisch gesetzt wird.
Die Varianten für zwei-, drei- und vierspaltige Textblöcke finden Sie nachfolgend direkt als Quelltext-Beispiel.
Beispiel: Auszug aus der design.css mit CSS-Only-Varianten für mehrspaltigen Text
/*@wCssFragment{class:elementText;variant:202;caption-en:Two Columns;caption:Zweispaltig;selectable:yes;livepreview:yes;}*/ .elementText_var202 {column-count:2;column-gap:16px;} .elementText_var202 > p {display:inline-block;width:100%;} @media only screen and (max-width: 480px){ .elementText_var202 {column-count:1;} } /*@wCssFragment{class:elementText;variant:203;caption-en:Three Columns;caption:Dreispaltig;selectable:yes;livepreview:yes;}*/ .elementText_var203 {column-count:3;column-gap:16px;} .elementText_var203 > p {display:inline-block;width:100%;} @media only screen and (max-width: 768px){ .elementText_var203 {column-count:2;column-gap:16px;} } @media only screen and (max-width: 480px){ .elementText_var203 {column-count:1;} } /*@wCssFragment{class:elementText;variant:204;caption-en:Four Columns;caption:Vierspaltig;selectable:yes;livepreview:yes;}*/ .elementText_var204 {column-count:4;column-gap:16px;} .elementText_var204 > p {display:inline-block;width:100%;} @media only screen and (max-width: 1024px){ .elementText_var204 {column-count:3;column-gap:16px;} } @media only screen and (max-width: 768px){ .elementText_var204 {column-count:2;column-gap:16px;} } @media only screen and (max-width: 480px){ .elementText_var204 {column-count:1;} }