Raster-Layout

Verwendung von Webstandards

WebAcappella verwendet die neueste Version des Bootstrap-Frameworks und den leistungsstarken CSS3-Standard FlexBox. Eine WebAcappella-Seite enthält ein einfaches und effektives Gittersystem, um das visuelle Erscheinungsbild einer Webseite in Ordnung zu bringen. Wie bei einem Baukasten kann man damit schnell und mit wenigen hinzugefügten Codezeilen eine Webseite entwerfen.

Begriff des Rasters

Ein Raster ist einfach eine Aufteilung in Zellen mit denselben Abmessungen

Das Bootstrap-Gitter besteht aus 12 Spalten.

Ein Raster ist in Zeilen (in Bootstrap als „row“ bezeichnet) und Spalten („col“) unterteilt, wie in der folgenden Abbildung gezeigt:

../../_images/grid_col_and_row.png

Das Bootstrap-Gitter

Bei der Spaltenaufteilung wird die Bildschirmbreite prozentual aufgeteilt. Bei Zeilen hingegen wird die Höhe an den Inhalt angepasst.

../../_images/grid_content.png

Organisation des Rasters

  • Ein Raster wird in WebAcappella über die Schaltfläche „BOX“ definiert, das so viele Zeilen wie gewünscht enthalten wird, immer mit einer Breite von maximal 12 Spalten pro Zeile.

  • Eine Zeile (row in Bootstrap) wird Elemente (Text, Bild, etc.) enthalten.

Die wichtigsten Komponenten sind die „Box“ (BOX) , die „Spalte“ (COL) und die „Linie“ (ROW).

Bemerkung

BOX: Dies ist die primäre (also unverzichtbare) Komponente

Bemerkung

ZEILE: Komponente, die es ermöglicht, Bilder, Texte, eine Galerie usw. einzubinden.

Eine Zeile wird in 12 Spalten unterteilt (siehe Bootstrap), eine Komponente wie ein Bild kann mindestens eine Spalte breit sein und maximal 12 Spalten haben.

Herausgeber von WebAcappella Fusion

Sie können die gesamte Komponentengruppe in die Arbeitsoberfläche ziehen

../../_images/add_element.png

Ändern Sie die Größe Ihrer Spalten, indem Sie dieses Kästchen ankreuzen

../../_images/resize_columns.png

Damit können Sie die Ränder Ihrer Elemente greifen, um ihre Breite anzupassen

../../_images/resize_element.png