PDF

Abschnitte gestalten

Jeder Abschnitt einer Webseite – Text, Bilder, Karten, Formular – lässt sich in Farbe, Form und Abstände anpassen. Diese Seite zeigt dir, wie du einen Abschnitt einrichtest: von der Breite über Farben bis zu Schatten und Animationen. Die meisten Einstellungen gelten unterschiedlich auf Handy und Rechner.

Voraussetzungen

Du arbeitest im Editor eines Abschnitts. Es gibt keine besonderen Voraussetzungen.

So gehst du vor

Öffne die Einstellungen für einen Abschnitt. Je nachdem, was dein Abschnitt kann, siehst du zwei Registerkarten: Layout für Form und Größe, Farben für Aussehen.

Abschnitte auf verschiedenen Bildschirmbreiten einstellen

Wenn du am Handy arbeitest, zeigt dir eine Leiste oben an: „Sie bearbeiten die Handy-Ansicht". Das ist wichtig – Änderungen, die du hier machst, gelten nur für das Handy. Am Rechner sieht der Abschnitt anders aus, wenn du ihn nicht auch dort anpasst.

Sobald du für das Handy eigene Werte setzt, erscheint ein zurücksetzen-Schalter oben in der Leiste. Damit nimmst du alle mobilen Anpassungen zurück und der Abschnitt sieht überall gleich aus.

Layout anpassen (Registerkarte Layout)

Volle Breite: Schalte diesen Schalter ein, wenn der Abschnitt sich über die ganze Breite der Seite spannt. Ohne diese Option sitzt der Abschnitt mit Rändern links und rechts.

Inhaltsbreite: Wie breit darf der Inhalt im Abschnitt höchstens sein (zum Beispiel bei sehr breiten Bildschirmen). Wähle zwischen Schmal, Normal oder Breit. Diese Einstellung wirkt auch, wenn der Abschnitt die volle Breite nutzt.

Abstand zwischen den Teilen: Nur bei Abschnitten mit mehreren Teilen nebeneinander (Karten, Bilder). Wähle aus, wie viel Platz zwischen ihnen sein soll – S, M, L oder Keiner.

Spalten: Wie viele Teile stehen nebeneinander – zwischen 1 und 6. Auf dem Handy stehen sie immer untereinander.

Aufteilung der zwei Seiten: Nur bei zweispaltigen Abschnitten. Wähle, wie ungleich die beiden Seiten sein sollen – Ausgeglichen, Betont oder Stark betont. Welche Seite breiter ist, bestimmt der Abschnitt selbst.

Reihenfolge auf dem Handy: Nur beim freien Raster in der Handy-Ansicht. Hier kannst du die Teile per Drag-and-drop neu sortieren, damit sie auf dem Handy in dieser Reihenfolge untereinander stehen.

Höhe: Wie hoch der Abschnitt sein soll – Automatisch (so hoch wie der Inhalt), Bildschirm (füllt das Fenster), oder Stufen wie S, M, L. Der Abschnitt wird niemals kleiner als sein Inhalt.

Inhalt senkrecht: Wenn der Abschnitt höher ist als sein Inhalt – soll der Inhalt oben, in der Mitte oder unten sitzen?

Innenabstand und Außenabstand:

Innenabstand ist der Platz zwischen dem Rand des Abschnitts und seinem Inhalt.
Außenabstand ist der Platz zwischen diesem Abschnitt und dem davor oder danach.

Verwende den Schieber für die wichtigsten Abstände. Der Abschnitt zeigt die Werte auch direkt im Blatt – du kannst sie dort anfassen und ziehen.

Für Fortgeschrittene (eingeklappt): Hier gibst du alle vier Richtungen als Pixel-Zahlen ein, falls die Schieber nicht reichen. Auch eine Mindesthöhe ist möglich – als Alternative zu den Höhe-Stufen.

Auf dem Handy ausblenden oder Nur auf dem Handy zeigen: Der Abschnitt verschwindet auf der gewählten Breite – wird aber im Editor noch angezeigt, damit du ihn bearbeiten kannst.

Farben und Bilder (Registerkarte Farben)

Farbstimmung: Wähle eine Grundstimmung für den ganzen Abschnitt – zum Beispiel deine Markenfarbe, ein Akzent, Creme oder Dunkel. Auf dem Handy kannst du eine andere Stimmung wählen als auf dem Rechner.

Hintergrund: Die Grundfarbe des Abschnitts. Leer = die Farbe der Stimmung.

Text und Überschriften: Schriftfarbe. Leer = wird automatisch so gewählt, dass sie lesbar ist. Akzent und Verweise: Farbe für kleine Hervorhebungen im Text.

Farben der Teile (wenn der Abschnitt Karten oder Kacheln hat):

Teile im Abschnitt: Wie die einzelnen Karten aussehen – hell, getönt (Farbe des Abschnitts, aber heller/dunkler), oder nur Rahmen.
Fläche der Teile und Schrift der Teile: Farben für die Karten selbst.

Verlauf (nur am Rechner): Die Fläche läuft von einer Farbe in eine andere – zum Beispiel zur Markenfarbe, zur Akzentfarbe oder zu Dunkel. Mit Richtung des Verlaufs bestimmst du, wohin der Verlauf läuft.

Textausrichtung: Links, zentriert oder rechts. Nur für Abschnitte, die eine Textausrichtung unterstützen.

Animation beim Einblenden: Der Abschnitt kann beim Scrollen animiert erscheinen – zum Beispiel einfahren oder aufleuchten. Leer = keine Animation.

Dauer: Wie lange die Animation dauert.
Verzögerung: Wie lange es wartet, bis die Animation startet.
Nacheinander: Die Teile des Abschnitts erscheinen einer nach dem anderen statt alle auf einmal.

Beim Überfahren: Nur auf Rechnern. Der Abschnitt oder seine Teile können sich beim Überfahren mit der Maus ändern – zum Beispiel anheben oder aufleuchten.

Schrift in diesem Abschnitt (eingeklappt): Schriftgröße, Zeilenabstand, Buchstabenabstand, und Stil der Überschriften – alles nur für diesen Abschnitt.

Ecken: Wie rund die Ecken sein sollen – Eckig, S, M, L, XL oder Rund. Runde Ecken schneiden auch Hintergrundbilder und Verläufe mit ab.

Welche Ecken: Wenn du Ecken rundest, kannst du hier angeben, ob alle Ecken oder nur oben oder unten gerundet sein sollen.

Schatten, Rahmenlinie: Optische Effekte. Bei einer Rahmenlinie bestimmst du auch, ob die Linie durchgezogen, gestrichelt oder gepunktet sein soll, und in welcher Farbe.

Deckkraft: Der ganze Abschnitt wird durchscheinend – Fläche und Inhalt zusammen. Nicht unter 50 %, damit die Schrift noch lesbar bleibt.

Ornament: Dünne Linien hinter dem Inhalt – Kreise, Bogen oder Raster.

Übergang nach oben (eingeklappt): Gestalte die obere Kante des Abschnitts.

Trennform: Die Kante kann gerade, schräg, wellig oder als Bogen laufen.
Form spiegeln: Die Schräge oder Welle seitenverkehrt; der Bogen als Mulde statt als Kuppel.
Überlappung: Der Abschnitt rückt nach oben und legt sich über den Abschnitt davor.

Hintergrundbild (eingeklappt):

Trage die Adresse eines Bildes ein (https://...).
Überlagerung: Wie stark eine Farbe das Bild abdunkelt, damit die Schrift lesbar bleibt.
Verlauf: Wenn eine Überlagerung aktiv ist – in welche Richtung der dunkle Bereich läuft (unten, oben, von außen).
Farbe der Überlagerung: Welche Farbe zum Abdunkeln genutzt wird.

Hintergrundvideo (eingeklappt): Die Adresse einer MP4-Datei (unter 5 MB). Das Video läuft ohne Ton in einer Schleife hinter dem Inhalt.

Sichtbarkeit (eingeklappt, nur für Abschnitte auf einzelnen Seiten): Der Abschnitt erscheint nur an bestimmten Tagen – zum Beispiel für zeitlich begrenzte Aktionen oder Ankündigungen.

Sichtbar ab und Sichtbar bis einschließlich: Datumsangaben. Leere Felder = ohne Anfang oder ohne Ende.

Für Fortgeschrittene (eingeklappt):

Eckenradius in Pixel: Eine genaue Zahl statt einer Stufe.
CSS-Klasse: Ein Name, unter dem du den Abschnitt in eigenem CSS ansprechen kannst.
Eigenes CSS für diesen Abschnitt: Hier schreibst du CSS-Regeln speziell für diesen Abschnitt.

Aufbau der Registerkarten

Die Einstellungen sind in zwei Registerkarten organisiert:

Layout: Größe, Breite, Abstände und sichtbarkeit des Abschnitts.

Farben: Hintergrund, Schriftfarben, Effekte und Animation. Hier stehen auch Bilder und Videos.

Welche Felder du siehst, hängt davon ab, was dein Abschnitt unterstützt. Ein reiner Textabschnitt hat zum Beispiel keinen Schieber für „Abstand zwischen den Teilen", weil es dort nichts nebeneinander gibt.

Was danach passiert

Deine Änderungen werden sofort im Editor angezeigt. Du kannst zwischen Handy- und Rechner-Ansicht wechseln und für jede Breite unterschiedliche Einstellungen machen. Ohne Änderungen an der mobilen Ansicht sieht der Abschnitt überall gleich aus.

Wenn du eine Farbe einstellst, merkt sich weboffice sie unter „Zuletzt verwendet" – so sparst du dir das Suchen, wenn du die gleiche Farbe mehrmals verwendest.

Tipps und Hinweise

Handy vs. Rechner: Bearbeite die Seite immer in beiden Ansichten. Was auf dem Handy gut aussieht, kann am großen Bildschirm zu eng wirken – und umgekehrt.
Farben und Kontrast: weboffice zeigt dir das Kontrastverhältnis zwischen Text und Hintergrund. Hellblau auf Hellgrau ist zwar schön, aber nicht lesbar.
Runde Ecken: Sie schneiden auch Hintergrundbilder und Verläufe mit ab. Wenn das nicht passt, nutze stattdessen einen Rahmen.
Abstände per Maus: Du kannst Innenabstand und Außenabstand nicht nur über die Schieber einstellen, sondern auch direkt im Blatt anfassen und ziehen – das ist oft schneller.
Handy-Reihenfolge: Beim freien Raster (Grid) kannst du nur in der Handy-Ansicht die Reihenfolge ändern. Das ist absichtlich – so verhinderst du, dass du versehentlich zwei unterschiedliche Reihenfolgen pro Breite setzt.