Rasterbauteile anordnen und bearbeiten

Ein Rasterbauteile-Abschnitt (Rasterspalten) ist eine flexible Anordnung von Inhalten in einem Gitter mit zwölf Spalten. Du fügst verschiedene Bausteine wie Überschriften, Texte, Bilder oder Knöpfe hinzu und positionierst sie, verschiebst sie oder passt sie an.

Voraussetzungen

Du brauchst Schreibzugriff auf den Webseiten-Block. Der Rasterbauteile-Abschnitt muss bereits auf der Seite eingefügt sein.

So gehst du vor

Bausteine hinzufügen

1. Wähle die Registerkarte Bauteile aus.
2. Wenn der Rasterbauteile-Abschnitt noch leer ist, siehst du vorgefertigte Rastervorlagen. Wähle eine Vorlage aus, um schnell eine Grundstruktur mit Platzhaltertexten zu bekommen – jedes Bauteil lässt sich danach noch verschieben oder ändern.
3. Um neue Bausteine einzeln hinzuzufügen, klicke auf eine Schaltfläche unter „Bausteine einsetzen". Wähle einen Baustein-Typ:
   • Überschrift: eine Überschrift mit Ebene (Seitentitel, Abschnittstitel oder kleinere Titel)
   • Text: freier Text in Markdown
   • Bild: ein Bild mit Einstellungen zur Anpassung
   • Knopf: ein anklickbarer Knopf mit Ziellink und Gestaltung
   • Symbol: ein Piktogramm (Font Awesome)
   • Kleine Überschrift: eine Eyebrow (kleine Zeile vor einer Überschrift)
   • Trennlinie: eine waagrechte Linie in der Abschnittsfarbe
   • Abstand: unsichtbarer Platzhalter für Höhe zwischen Bausteinen

Der neue Baustein erscheint in der Liste und wird automatisch ausgewählt.

Inhalt eines Bausteins bearbeiten

4. Unter der Liste findest du die Angaben zum ausgewählten Baustein. Je nach Typ füllst du verschiedene Felder:

   • Überschrift: Gib die Überschrift ein. Wähle unter Ebene aus, ob es ein Seitentitel (H1), Abschnittstitel (H2), Zwischentitel (H3) oder kleiner Titel (H4) sein soll. Der Seitentitel darf nur einmal auf einer Seite vorkommen – der Prüfblick vor dem Veröffentlichen zählt ihn mit.
   • Text: Gib deinen Text ein. Du kannst Markdown verwenden (Fettdruck, Links usw.).
   • Bild: Wähle oder lade ein Bild. Du kannst einstellen, wie das Bild die verfügbare Fläche ausfüllt.
   • Knopf: Gib eine Aufschrift ein. Setze unter Ziel den Link (zu einer Seite, einer externen Website oder einer E-Mail-Adresse). Wähle unter Gestaltung den Stil des Knopfes.
   • Symbol: Klicke auf das Feld Symbol, um ein Icon aus der Font-Awesome-Bibliothek auszuwählen.
   • Kleine Überschrift: Gib eine Kleine Überschrift und optional eine Nummer ein. Diese zählt nicht als echte Überschrift.
   • Trennlinie: Keine zusätzlichen Angaben – Position und Breite bestimmen sie.
   • Abstand: Wähle unter Höhe aus, wie viel Platz (Kein, S, M, L oder XL) der Platzhalter haben soll.

5. Bei Bausteinen, die eine Fläche bekommen können (Überschrift, Text, Bild, Knopf, Symbol, kleine Überschrift, Abstand), klicke auf das Auswahlfeld Fläche. Wähle eine Farbe oder „Ohne Fläche". Mit einer Fläche wird der Baustein zu einer Kachel mit eigenem Hintergrund, Innenabstand und abgerundeten Ecken.

Position und Größe einstellen

6. Für jeden Baustein stellst du unter Startspalte ein, bei welcher Spalte (von 1 bis 12) der Baustein beginnt. Unter Breite in Spalten wählst du, wie viele Spalten der Baustein breit sein soll. Unter Zeile kannst du angeben, in welcher Reihe der Baustein stehen soll – lass es auf „Automatisch", wenn die Reihenfolge von oben nach unten laufen soll.

Das Raster hat insgesamt 12 Spalten. Auf Mobilgeräten wird jeder Baustein über die volle Breite angezeigt; die Reihenfolge auf dem Handy stellst du in der Plan-Registerkarte ein.

Bausteine verwalten

7. Um die Reihenfolge zu ändern, klicke die Pfeile Nach oben und Nach unten in der Baustein-Liste.
8. Um einen Baustein zu kopieren, klicke Kopieren – der neue Baustein wird direkt darunter eingefügt und hat die gleichen Einstellungen.
9. Um einen Baustein zu löschen, klicke Entfernen.

Plan anpassen

10. Wechsle zur Registerkarte Plan, um die Anordnung der Bausteine grafisch zu sehen. Jeder Baustein wird als Kachel angezeigt. Ziehe eine Kachel, um den Baustein in eine andere Spalte zu verschieben. Der Griff auf der rechten Seite der Kachel zieht die Breite.

Aufbau einrichten

11. In der Registerkarte Aufbau kannst du optional eine Bezeichnung vergeben – das ist nur nötig, wenn ein Verweis genau auf diesen Abschnitt zeigen soll.

Sobald du alle Änderungen vorgenommen hast, speichert weboffice sie automatisch.

Aufbau der Registerkarten

Der Editor hat drei Registerkarten:

• Bauteile: Hier fügst du Bausteine hinzu und bearbeitest ihren Inhalt, ihre Farbe und ihre Position.
• Plan: Zeigt alle Bausteine als Kacheln in einer Draufsicht. Du kannst sie per Drag-and-Drop verschieben und in der Breite anpassen. Hier siehst du auch, wie die Bausteine auf Desktopgeräten angeordnet sind.
• Aufbau: Hier legst du eine optionale Bezeichnung für den Abschnitt fest – sie wird nur bei Verweisen gebraucht.

Was danach passiert

Die Bausteine und ihre Positionen werden sofort gespeichert. Deine Änderungen sind auf der Webseite sichtbar, sobald du sie veröffentlichst. Bei mehreren Bausteinen nebeneinander: Falls die Summe ihrer Breite 12 Spalten übersteigt, rutschen die Bausteine automatisch in die nächste Reihe. Auf Handy-Größe steht jeder Baustein über die volle Breite.

Tipps und Hinweise

• Auf Mobilgeräten: Alle Bausteine stellen sich auf Handy-Größe auf die volle Breite um. Wenn du die Reihenfolge auf Mobilgeräten ändern möchtest, geht das in der Plan-Registerkarte unter einer Handy-Ansicht.
• Rasterstruktur: Denk daran, dass zwölf Spalten die maximale Breite sind. Wenn du mehrere Bausteine nebeneinander platzierst, muss die Summe ihrer Breite höchstens 12 betragen, sonst rutschen sie in die nächste Reihe.
• Seitentitel (H1): Der Seitentitel darf auf einer Seite nur einmal vorkommen. Der Prüfblick vor dem Veröffentlichen überprüft das automatisch.
• Flächen-Styling: Mit einer Fläche werden Bausteine zu Kacheln – nutze das, um wichtige Inhalte hervorzuheben.