Texte mehrspaltig anzeigen

Nutzbar ab: Version

Nutzen Sie eigene CSS-Only-Varianten für das Text-Element, um Texte auch mehrspaltig anzuzeigen.

Textelement im Editor mit dreispaltigem Text
Textelement im Editor mit dreispaltigem Text

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;}
}