Innovatives Web-Design: Inhaltsseiten flexibel gestalten mit CSS-Only in Weblication®

17. Jan 2023

Mit Weblication® entwickeln Sie über auswählbare CSS-Only Darstellungsvarianten innovative Web-Designs.

Sie können sich unter https://coredemo.de mit Benutzer: admin und Passwort: demo anmelden und Beispiele im Praxiseinsatz ansehen.

Layout-Beispiele für Elemente und Weblics
Layout-Beispiele für Elemente und Weblics

Beispiele

Inhaltsbox: Form über Untervarianten definieren

Inhaltsboxen lassen sich per Mausklick positionieren über CSS-Only. 

Wenn Sie sehen möchten, wie das in der Praxis funktioniert, melden Sie sich unter  https://coredemo.de mit Benutzer: admin und Passwort: demo an und klicken Sie im Menüpunkt Beispiele auf Inhaltsboxen positioniertBeispiele -> Inhaltsboxen positioniert

Dort klicken Sie auf den Button "Diese Seite bearbeiten". Im Editor können Sie unter den Konfigurations-Icons im Inhaltsbereich sowie in den Inhaltsboxen die jeweiligen Einstellungen ansehen und nachvollziehen.

Nachvollziehen der Beispiele im Editor

Nachvollziehen der Beispiele im Editor
Nachvollziehen der Beispiele im Editor

Beispiele - Inhaltsboxen positioniert

Beispiele - Inhaltsboxen positioniert
Beispiele - Inhaltsboxen positioniert

Inhaltsbox: Form über Untervarianten definieren

Für die "Inhaltsbox (mit weiteren Elementen befüllbar)" ist eine CSS-Only Einstellung 
-w-editmaskExtended-shape:yes; verfügbar, um die Form einer Inhaltsbox über Untervarianten zu definieren.

Inhaltsbox: Form über Untervarianten definieren
Inhaltsbox: Form über Untervarianten definieren

Inhaltsbereich mit Inhaltsbox rechts oben überlappend

Es ist eine Komponente als Inhaltsbereich mit Infobox rechts oben überlappend verfügbar.

Inhaltsbereich mit Inhaltsbox rechts oben überlappend
Inhaltsbereich mit Inhaltsbox rechts oben überlappend

Inhaltsbereich mit von unten überlappenden Boxen

Inhaltsbereich mit von unten überlappenden Boxen.

Inhaltsbereich mit von unten überlappenden Boxen
Inhaltsbereich mit von unten überlappenden Boxen

Box halbtransparent - überdeckten Hintergrund unscharf darstellen

Für die "Inhaltsbox (mit weiteren Elementen befüllbar)" ist eine CSS-Only Darstellungsvariante verfügbar, um eine Box halbtransparent darzustellen. Dabei wird der überdeckte Hintergrund automatisch unscharf angezeigt.

Box halbtransparent - überdeckten Hintergrund unscharf darstellen
Box halbtransparent - überdeckten Hintergrund unscharf darstellen

Inhaltsbox: Ausrichtung in Box über Untervarianten definieren

Für die "Inhaltsbox (mit weiteren Elementen befüllbar)" ist eine CSS-Only Einstellung 
-w-editmaskExtended-contentAlignment:yes; verfügbar, um die Ausrichtung innerhalb einer Inhaltsbox über Untervarianten zu definieren.

Inhaltsbox: Transparenz und Unschärfeeffekt auswählen

Bei den Hintergrundfarben Primärfarbe 1 und Primärfarbe 2 in der "Inhaltsbox (mit weiteren Elementen befüllbar)" lassen sich zusätzlich Transparenz und Unschärfeeffekt auswählen.

Inhaltsbox: Parallax Effekte weg vom Element

Für die "Inhaltsbox (mit weiteren Elementen befüllbar)" ist eine CSS-Only Option 
-w-option-parallaxcontentdirectionelement:from; verfügbar, um zu erreichen, dass Parallax-Effekte weg vom Element gehen. Beginnt ein Effekt z.B. bei 50 %
(-w-option-parallaxcontentstart:0.5;), so bleibt die Position bis dahin neutral und ändert sich dann in die gewünschte Richtung.

Mehrspaltiger Inhaltscontainer: CSS-Only Variante "Mehrzeilig fließend, mit Inhaltsboxen befüllbar"

Es ist eine CSS-Only Variante "Mehrzeilig fließend, mit Inhaltsboxen befüllbar" verfügbar. Bei dieser Variante lassen sich beliebig viele Inhaltsboxen einfügen, die anschließend entsprechend er Spaltenanzahl dargestellt werden.

Inhaltsbox: CSS-Only Untervarianten mit fester Breite

Es sind CSS-Only Untervarianten mit fester Breite sind verfügbar:

  • Feste Breite 240 Pixel
  • Feste Breite 320 Pixel
  • Feste Breite 480 Pixel
  • Feste Breite 640 Pixel

Diese wird dafür eingesetzt, damit eine Inhaltsbox nicht durch deren Inhalt aufgespannt wird, sondern immer dieselbe Breite aufweist. Im Beispiel des Screens aus dem folgenden Artikel soll die rechts oben angezeigte blaue Inhaltsbox unabhängig vom Inhalt immer gleich breit dargestellt werden.