Du gestaltest das Layout, die Farben, Abstände und Effekte eines Abschnitts – etwa ob er über die volle Seitenbreite läuft, welche Hintergrundfarbe er hat oder wie viel Luft über und unter ihm ist. Je nachdem, ob du auf Handy, Tablet oder Rechner bearbeitest, gelten die Einstellungen nur für diese Bildschirmbreite oder für alle.
Voraussetzungen
Du hast einen Abschnitt auf einer Seite eingefügt und öffnest gerade sein Einstellungsfenster.
So gehst du vor
Bestimme, auf welcher Bildschirmbreite du arbeitest. Oben rechts im Fenster stehen die Tasten Mobil, Tablet und Desktop. Wenn du auf Handy-Breite klickst, änderst du nur die Einstellungen für Handys – alles andere bleibt auf Tablet und Rechner gleich. Ein Hinweis zeigt dir, dass du auf Handy bearbeitest.
Wähle die Farbstimmung des Abschnitts im Feld Farbstimmung. Dieses bestimmt, welche Farbe der Hintergrund und die Schrift bekommen. Wähle einen Wert aus deinem Design oder lasse das Feld leer, damit der Abschnitt die Farben der Seite übernimmt.
Lege die Breite des Inhalts fest (nur auf Desktop und Tablet sichtbar): Nutze den Schieber Breite. Mit „Volle Breite" spannt sich der Abschnitt über die ganze Fensterbreite – sonst hat er eine Höchstbreite und zentriert sich auf breiteren Bildschirmen.
Steuere den Abstand über und unter dem Abschnitt mit Abstand. Die Stufen folgen dem Design deiner Website – oder trage eine eigene Pixelzahl ein, um einzelne Abschnitte anders zu spacen.
Soll der Abschnitt auf Handys unsichtbar sein? (nur auf Handy-Breite sichtbar): Schalte Auf dem Handy ausblenden an. Im Editor bleibt der Abschnitt grau und sichtbar, auf der veröffentlichten Website nicht.
Passe die Textausrichtung an, falls du das Feld Textausrichtung siehst. Klicke auf Links, Mitte oder Rechts, um zu wählen, wie der Text positioniert werden soll.
Öffne „Für Fortgeschrittene", wenn du mehr einstellen willst:
- Eigene Farben: Überschreibe die Farbstimmung mit eigenen Farben für Hintergrund, Text, Überschriften und Verweise.
- Farben der Teile: Passt nur auf Abschnitte mit Karten oder mehreren Elementen – hier stellst du deren Farbe einzeln ein.
- Reihenfolge auf dem Handy: Ordne Karten und andere Teile so um, dass sie auf Handys untereinander statt nebeneinander stehen.
- Abstände je Seite: Feintuning für Inneneabstand (Luft zwischen Inhalt und Rand) und Außenabstand (Luft zwischen diesem und dem nächsten Abschnitt).
- Höhe: Bestimme, wie hoch der Abschnitt mindestens sein soll (etwa um ein großes Bild zu füllen), und wo der Inhalt sitzt, wenn noch Platz übrig ist.
- Hintergrund: Nutze Bilder, Verläufe oder Videos als Hintergrund.
- Schrift in diesem Abschnitt: Schriftgröße, Zeilenabstand und Buchstabenabstand nur in diesem Abschnitt ändern.
- Ecken, Rahmen und Schatten: Runde Ecken, Rahmenlinien und Schatteneffekte.
- Übergang und Ornament: Dünne Linien, wellenförmige oder schräge Übergänge zum nächsten Abschnitt, Überlappung.
- Bewegung: Animation, die beim Scrollen abläuft.
- Eigener Code: CSS-Klasse und eigene Stilregeln, falls du kennst, wie das funktioniert.
Speichere deine Änderungen, indem du das Fenster schließt oder auf eine Schaltfläche außerhalb klickst. Die Änderungen sind sofort sichtbar.
Aufbau des Fensters
Das Fenster zeigt immer nur die Einstellungen, die für diesen Abschnitt sinnvoll sind. Manche Felder erscheinen nur, wenn der Abschnitt sie unterstützt (etwa „Spalten" nur bei Abschnitten mit nebeneinander stehenden Inhalten).
Farbstimmung: Farb-Vorschlag aus deinem Design. Ein leeres Feld bedeutet: die Farben der ganzen Seite gelten.
Breite: Nur auf Desktop und Tablet. „Schmal", „Normal" oder „Volle Breite" – je breiter, desto breiter wird der Inhalt maximal.
Spalten: Nur wenn der Abschnitt mehrere Teile nebeneinander anordnen kann. Wähle, wie viele Spalten nebeneinander stehen (auf Rechner).
Abstand zwischen den Teilen: Der Zwischenraum zwischen Karten, Bildern oder Spalten.
Aufteilung der zwei Seiten: Nur bei Abschnitten mit zwei Spalten – lege fest, wie breit jede Seite ist (z. B. 50:50 oder 60:40).
Hintergrundbild: Wähle oder lösche ein Bild, das hinter dem Text liegt.
Überlagerung: Falls ein Hintergrundbild da ist – eine halbtransparente Farbe darüber, damit der Text lesbar bleibt.
Abstand: Die Luft über und unter dem Abschnitt. Wähle eine Stufe aus deinem Design oder eine eigene Pixelzahl.
Sichtbarkeit (nur auf Desktop und Tablet): Soll der Abschnitt auf Handy, Rechner oder beiden sichtbar sein?
Sichtbar ab und Sichtbar bis einschließlich: Termine, an denen der Abschnitt angezeigt werden soll. Ein leeres Feld heißt: kein Anfang oder kein Ende.
Was danach passiert
Deine Einstellungen sind sofort gespeichert. Du siehst im Editor, wie der Abschnitt mit den neuen Farben, Breiten und Abständen aussieht. Auf der veröffentlichten Website gelten die Einstellungen für die jeweilige Bildschirmbreite – wenn du auf Handy besondere Einstellungen gemacht hast, unterscheidet sich das Aussehen dort von Desktop und Tablet.
Falls mehrere Abschnitte zusammen nicht so aussehen wie erhofft, schau in Abschnitte und Trenner, wie Abschnitte zusammenpassen.
Tipps und Hinweise
Handy-Angaben haben Vorrang: Wenn du auf Handy-Breite arbeitest und einen Wert setzt, überlagert er die Einstellung aus Desktop und Tablet. Ein kleines Handy-Symbol zeigt das. Mit „zurücksetzen" neben dem Symbol kehrst du zur normalen Einstellung zurück.
Mobile Reihenfolge nutzen: Auf Handys stehen Karten, Bilder oder andere Teile automatisch untereinander. Mit Reihenfolge auf dem Handy kannst du sie umsortieren – etwa das Wichtigste nach oben.
Farben und Farbstimmung: Wenn du eine Farbstimmung wählst, werden Hintergrund, Text und Verweise automatisch aufeinander abgestimmt. Im Bereich Eigene Farben kannst du einzelne Farben ändern, ohne die ganze Stimmung zu verlieren.
Hintergrundbild mit Text: Ein Hintergrundbild kann zu dunkel oder zu hell sein. Nutze Überlagerung, um eine halbtransparente Farbe darüber zu legen – der Text wird lesbar.
Verschachtelte Abschnitte: Wenn ein Abschnitt in einem anderen sitzt (etwa in einer Spalte), können beide eigene Farben und Abstände haben. Die inneren Einstellungen gelten nur für diesen einen Abschnitt.