PDF

Ein Rasterfeld mit Bauteilen aufbauen

Ein Rasterfeld ist ein flexibles Layout mit zwölf Spalten, in das du verschiedene Bausteine einfügst: Überschriften, Texte, Bilder, Schaltflächen, Symbole, Abstände und Trennlinien. Jeder Baustein bekommt eine Startposition und eine Breite – auf dem Handy stehen alle Bausteine automatisch untereinander über die volle Breite.

Voraussetzungen

Du brauchst ein Rasterfeld auf einer Seite. Die Verwaltung dazu findest du unter Block auf einer Seite einrichten.

So gehst du vor

Bauteile einrichten

Öffne die Registerkarte Bauteile. Ist das Rasterfeld noch leer, wirst du zunächst nach einem vorgefertigten Layout gefragt.
Wenn du einen Vorschlag nutzen möchtest: Wähle eine der vorbereiteten Raster-Vorlagen aus. Das Rasterfeld füllt sich mit Platzhaltern zum Ersetzen. Jedes Bauteil lässt sich danach verschieben, ändern oder entfernen.

Falls du lieber von vorne anfängst, schließe diese Vorschläge einfach oder ignoriere sie.
Über der leeren Liste findest du mehrere Schaltflächen, je eine für jeden Bauteiltyp. Wähle den Bauteiltyp, den du einfügen möchtest:
- Überschrift: Für Zwischentitel und Abschnitte
- Text: Für längere oder formatierte Texte
- Bild: Für Fotos und Grafiken
- Schaltfläche: Ein Schaltflächenelement mit einem Ziel-Link
- Symbol: Ein Icon aus der FontAwesome-Bibliothek
- Kleine Überschrift: Eine Kopfzeile über einer Überschrift (kein H-Tag, wird also nicht als Überschrift gezählt)
- Trennlinie: Eine waagrechte Linie in der Abschnittsfarbe
- Abstand: Ein Platzhalter für Weißraum; du wählst die Höhe
Das neue Bauteil taucht am Ende der Liste auf und öffnet sich automatisch zur Bearbeitung.
Fülle die Angaben für das Bauteil aus:
- Bauteil: Der Typ ist bereits gewählt; ändern kannst du ihn hier noch.
- Feld für den Inhalt (z. B. Überschrift, Text, Text der Schaltfläche): Trage hier ein, was sichtbar sein soll.
- Ebene (nur bei Überschriften): Wähle, ob es ein Seitentitel (H1), Abschnittstitel (H2), Zwischentitel (H3) oder Kleiner Titel (H4) sein soll. Der Seitentitel darf nur einmal pro Seite vorkommen – die Prüfung vor dem Veröffentlichen zählt ihn mit.
- Ziel (nur bei Schaltflächen): Wähle, wohin die Schaltfläche führt – zu einer anderen Seite, zu einer externen Website oder zu einer Datei.
- Stil (nur bei Schaltflächen): Definiere das Aussehen – Farbe und Form.
- Symbol (nur bei Symbol-Bauteilen): Wähle ein Icon.
- Höhe (nur bei Abstand): Bestimme, wie viel Platz der Abstand einnehmen soll (Kein, S, M, L, XL).
- Startspalte: In welcher der zwölf Spalten beginnt das Bauteil (1–12).
- Breite in Spalten: Wie viele Spalten das Bauteil einnimmt (1–12). Ein Bauteil mit Breite 12 läuft über die ganze Breite.
- Zeile: In welcher Zeile das Bauteil erscheint. Leer lässt: weboffice ordnet es automatisch ein. Du kannst eine Zeile auch festlegen, um Bausteine nebeneinander zu positionieren.
- Fläche (nur wenn das Bauteil eine Farbe bekommen kann): Wähle, ob das Bauteil einen farbigen Hintergrund bekommen soll – dann wird es zur Kachel mit Innenabstand und gerundeten Ecken. Ohne Fläche: Das Bauteil sitzt direkt im Raster.
Speichern geschieht automatisch bei jeder Änderung.
Füge weitere Bausteine hinzu, indem du wieder eine Schaltfläche wählst. Alle Bausteine stehen dann in der Liste untereinander.

Bauteile ordnen und bearbeiten

Reihenfolge ändern: Jedes Bauteil in der Liste hat zwei Pfeile. Mit dem oberen Pfeil schiebst du es nach oben, mit dem unteren nach unten.
Bauteil duplizieren: Die Kopierschaltfläche neben den Pfeilen erstellt eine Kopie mit denselben Angaben – du kannst es danach ändern.
Bauteil löschen: Das X-Symbol löscht das Bauteil endgültig aus dem Rasterfeld.
Ein Bauteil bearbeiten: Klappe es in der Liste auf, um alle Felder zu ändern.

Rasterplan anschauen

Die Registerkarte Plan zeigt dir, wie die Bausteine aktuell angeordnet sind:

Jedes Bauteil erscheint als Kachel.
Du kannst ein Bauteil per Drag-and-Drop in eine andere Spalte ziehen – das ändert die Startspalte.
Der rechte Rand jeder Kachel ist ein Griff – ziehe daran, um die Breite zu ändern.
Ein Klick auf die Kachel öffnet das Bauteil zur Bearbeitung.

Weitere Einstellungen

Die Registerkarte Mehr enthält:

Beschriftung des Rasterabschnitts: Ein Name, unter dem du den Abschnitt in den Listen wiedererkennst.
Eine Erklärung zum Raster (zwölf Spalten, Handy-Ansicht) – siehe auch "Tipps und Hinweise" unten.

Aufbau des Rasterfelds

Das Fenster hat oben drei Registerkarten:

Bauteile: Hier fügst du Bausteine ein, bearbeitest sie und ordnest sie.
Plan: Eine Vorschau des Layouts – du siehst, wie breit und wo jedes Bauteil steht.
Mehr: Optionale Einstellungen für das ganze Rasterfeld.

In der Bauteile-Registerkarte findest du oben die Schaltflächen zum Hinzufügen von Bausteinen, darunter eine sortierbare Liste mit allen vorhandenen Bausteinen. Jeder Eintrag in der Liste klappt auf und zeigt alle Felder für diesen Baustein – z. B. Überschrift oder Bildwahl. Neben der Liste stehen Schaltflächen zum Verschieben (Pfeile), Kopieren und Löschen.

Was danach passiert

Das Rasterfeld wird gespeichert, sobald du eine Änderung machst. Auf der veröffentlichten Website sehen Besucher das Rasterfeld mit allen Bausteinen in der angegebenen Anordnung.

Auf einem Handy erscheinen alle Bausteine automatisch untereinander über die volle Breite – unabhängig davon, wie breit du sie auf dem Desktop gemacht hast. Die Reihenfolge auf dem Handy kannst du getrennt festlegen, wenn du die Handy-Ansicht im Reiter "Aussehen" (Abschnitt "Für Fortgeschrittene") nutzt.

Tipps und Hinweise

Handy-freundlich gestalten: Bedenke, dass auf Handys alle Bausteine untereinander stehen. Texte und Bilder sollten also auch allein sinnvoll sein, nicht nur als Nebeneinander.
Überschriften zählen: Der Seitentitel (H1) darf nur einmal pro Seite vorkommen. weboffice prüft das automatisch, bevor die Seite veröffentlicht wird. Abschnitte und Zwischentitel können mehrfach vorkommen.
Kleine Überschriften für Zwischentext: Mit "Kleine Überschrift" kannst du eine Kopfzeile über einer echten Überschrift platzieren – sie wird von der Barrierefreiheit und der Suchmaschinen-Prüfung nicht als Überschrift erkannt.