BASIS-LAYOUT

Ein Raster für alle Seiten.

Diese Bibliothek zeigt die verbindlichen Spaltenverhältnisse und ihr Verhalten über Desktop, Tablet Wide, Tablet, Phone Wide und Phone.

100 % · Einspaltig

Volle Inhaltsbreite

Für Einleitungen, Headlines, Textpassagen und breite Medien.

50 %

Zwei gleichwertige Inhaltsbereiche.

50 %

Auf Tablet und Smartphone untereinander.

60 %

Hauptinhalt oder große visuelle Bühne.

40 %

Ergänzung, Formular oder Kennzahl.

Dominanter Inhaltsbereich.

Kompakter Nebeninhalt.

⅓ · A

Dreier-Raster für Karten und Teaser.

⅓ · B

Dreier-Raster für Karten und Teaser.

⅓ · C

Dreier-Raster für Karten und Teaser.

¼ · A

Vierer-Raster für kompakte Module.

¼ · B

Vierer-Raster für kompakte Module.

¼ · C

Vierer-Raster für kompakte Module.

¼ · D

Vierer-Raster für kompakte Module.

Responsive Verhalten

Desktop: volle Rasterlogik und großzügige Abstände.

Tablet Wide: breite Mehrspalter bleiben erhalten, Vierer-Raster reduziert sich.

Tablet: Zwei-Spalter oder gestapelte 60/40-Bereiche.

Phone Wide / Phone: alle Inhaltsobjekte einspaltig, reduzierte Abstände und Typografie.

Section

Vertikaler Rhythmus und Hintergrundfläche.

Row

Maximale Inhaltsbreite und Spaltenraster.

Column

Responsiver Anteil innerhalb einer Row.

Module

Pflegbarer Inhalt und wiederverwendbares Preset.

Von der Basis zum Modul.

Die Raster bleiben gleich. Die eingesetzten Divi-Module ändern sich je nach Inhalt und Aufgabe.