PDF

Webinhalte in einem Abschnitt gestalten

Hier änderst du das Aussehen eines Abschnitts auf deiner Website: Farben, Abstände, Hintergrund, Schrift und spezielle Effekte wie Animationen oder Trennformen. Die Einstellungen gelten nur für diesen einen Abschnitt – du kannst also jeden Bereich individuell anpassen, ohne das Design deiner ganzen Website zu verändern.

Voraussetzungen

Du bearbeitest einen Abschnitt auf einer Seite. weboffice zeigt dir dann automatisch die Einstellungen für diesen Bereich.

So gehst du vor

Grundaussehen einstellen

Farbstimmung – Wähle eine Farbe aus deinem Website-Design. Das Feld zeigt dir eine Vorschau, wie der Abschnitt aussieht. Die verfügbaren Farben kommen aus dem Erscheinungsbild deiner Website.
Breite (nur in der Standard-Ansicht) – Entscheide, wie breit der Inhalt höchstens wird. „Volle Breite" spannt den Abschnitt über die ganze Seite.
Spalten (nur wenn der Abschnitt das unterstützt) – Teile den Inhalt in mehrere Spalten auf.
Abstand zwischen den Teilen – Der Zwischenraum zwischen Karten, Bildern oder Spalten in diesem Abschnitt.
Aufteilung der zwei Seiten (nur bei zweiteiligen Abschnitten) – Bestimme, wie viel Platz die linke und rechte Seite bekommen.
Hintergrundbild – Lade ein Bild, das hinter dem Inhalt angezeigt wird.
Überlagerung (nur wenn ein Hintergrundbild da ist) – Legt eine Farbe über das Bild, damit der Text darauf lesbar bleibt.
Abstand – Die Luft über und unter dem Inhalt. Der Standard folgt der Dichte deines Website-Stils. Wenn du den Abschnitt anfasst und ziehst, kannst du den Abstand auch direkt im Editor verändern.
Textausrichtung – Bestimme, ob der Text links, mittig oder rechts ausgerichtet ist.

Handy-Ansicht gestalten

Wenn du die Handy-Ansicht öffnest (die Bildschirmbreite ist dann der Bearbeitungsmodus), siehst du ein Hinweisfeld ganz oben. Dort wird angezeigt, dass du gerade die Handy-Version bearbeitest. Jede Angabe, die du hier änderst, gilt nur auf Handy-Breite – die Standard-Ansicht bleibt unangetastet.

Auf dem Handy ausblenden – Schiebe den Schalter um, um diesen Abschnitt nur auf Tablet und Rechner anzuzeigen.
Reihenfolge auf dem Handy (nur bei mehrteiligen Abschnitten) – Ordne die einzelnen Teile so an, wie sie auf Handy-Breite untereinander stehen sollen. Auf größeren Bildschirmen bleibt das Raster, das du festgelegt hast.

Um eine Handy-Einstellung zu löschen und wieder die Standard-Ansicht zu verwenden, klicke auf „zurücksetzen" neben dem Wert.

Erweiterte Einstellungen vornehmen

Klicke auf die Schaltfläche „Für Fortgeschrittene", um zusätzliche Optionen zu öffnen:

Eigene Farben

Hier setzt du Farben, die vom Standard deiner Website abweichen:

Hintergrund – Die Fläche hinter dem Inhalt.
Text – Die Schriftfarbe (wenn der Abschnitt das zulässt).
Überschriften – Farbe für Titel und Überschriften (wenn unterstützt).
Akzent und Verweise – Kleine Überschriften und Links sowie oft auch die Symbole im Abschnitt.

Unter jeder Farbe siehst du ein „Automatisch"-Feld, das die voreingestellte Farbe zeigt. Klicke auf den Farbbereich, um einen eigenen Wert zu wählen. Du kannst auch Farben aus deinem Website-Design (Variablen) verwenden oder aus der Liste deiner zuletzt benutzten Farben wählen. Ein Kontrastverhältnis zeigt dir, ob die Farben gut genug beieinander liegen, damit die Schrift lesbar bleibt.

Farben der Teile (nur wenn der Abschnitt Karten oder ähnliche Elemente enthält):

Teile im Abschnitt – Wähle, wie die einzelnen Karten oder Boxen aussehen sollen (Stufe oder eine eigene Farbe).
Fläche der Teile – Die Hintergrundfarbe der Karten.
Schrift der Teile – Die Textfarbe in den Karten.

Abstände je Seite

Hier stellst du ein, wie viel Platz der Inhalt an den vier Rändern (oben, unten, links, rechts) haben soll:

Innenabstand – Der Platz zwischen dem Rand des Abschnitts und dem Inhalt. „Keine" bedeutet 0 Pixel. Du kannst für jede Seite einzeln einen Wert wählen oder alle vier auf einmal einstellen.
Außenabstand – Der Platz zwischen diesem Abschnitt und dem Abschnitt darüber oder darunter.

Beide Felder zeigen dir die aktuellen Werte in Pixeln. Wenn du einen eigenen Wert eingibst, ersetzt er die Stufe aus deinem Website-Stil.

Höhe

(Nur in der Standard-Ansicht)

Höhe – Wähle, wie hoch der Abschnitt sein soll. „Bildschirmhöhe" füllt ihn auf die ganze Höhe des Browserfensters. Der Abschnitt wird aber nie kleiner als sein Inhalt. Wenn du eine eigene Pixelzahl eingibst, ersetzt sie die Stufe.
Inhalt senkrecht – Wo der Inhalt sitzt, wenn der Abschnitt höher ist als das, was darin steht (oben, Mitte, unten).

Hintergrund

(Nur in der Standard-Ansicht)

Verlauf der Fläche – Wähle einen Farbübergang, der von deiner Farbstimmung in eine zweite Farbe aus deinem Design übergeht.
Richtung des Verlaufs – Bestimme, von wo nach wo der Übergabe läuft (z. B. von oben nach unten oder diagonal).
Farbe der Überlagerung (nur wenn es einen Verlauf gibt) – Stelle die Farbe ein, die über das Hintergrundbild liegt.
Adresse eines Hintergrundvideos – Trage eine URL ein, um ein Video als Hintergrund abzuspielen. Es lädt ohne Ton in einer Schleife. Während das Video geladen wird, zeigt der Abschnitt das Hintergrundbild. Am besten eine MP4-Datei unter 5 MB, sonst wird die Seite langsam.

Schrift in diesem Abschnitt

(Nur in der Standard-Ansicht)

Schriftgröße – Wie groß der Text in diesem Abschnitt ist.
Zeilenabstand – Der Platz zwischen den Zeilen.
Buchstabenabstand – Der Abstand zwischen Buchstaben.
Überschriften: Schreibweise – Groß- und Kleinschreibung von Titeln (z. B. alle Großbuchstaben).
Überschriften: Gewicht – Wie fett oder dünn Überschriften sind.
Kursives in Überschriften (wenn unterstützt) – Hebt Wörter, die in den Überschriften kursiv sind, visuell hervor.

Ecken, Rahmen und Schatten

(Nur in der Standard-Ansicht)

Ecken – Wie stark die Ecken des Abschnitts gerundet sind. Die Stufen kommen aus deinem Design. Wenn du eine eigene Pixelzahl eingibst, ersetzt sie die Stufe. Runde Ecken schneiden auch Hintergrundbilder und Verläufe mit ab.
Welche Ecken (nur wenn Ecken gerundet sind) – Entscheide, an welchen Ecken die Rundung gilt (alle vier oder nur einzelne).
Schatten – Ein Schatteneffekt unter dem Abschnitt.
Rahmenlinie – Eine sichtbare Linie um den Rand des Abschnitts.
Art der Rahmenlinie (nur wenn eine Rahmenlinie gesetzt ist) – Durchgehend, gestrichelt oder gepunktet.
Farbe der Rahmenlinie (nur wenn eine Rahmenlinie gesetzt ist) – Welche Farbe die Linie hat.
Beim Überfahren – Was passiert, wenn die Maus über den Abschnitt fährt (z. B. leichte Veränderung der Farbe oder des Schattens).
Deckkraft – Der ganze Abschnitt wird durchscheinend (Fläche und Inhalt gemeinsam).

Übergang und Ornament

(Nur in der Standard-Ansicht)

Ornament – Dünne Linien hinter dem Inhalt (rein dekorativ).
Trennform nach oben – Legt eine Form (Schräge, Welle oder Bogen) zwischen diesem und dem Abschnitt darüber. Sie nimmt die Farbstimmung dieses Abschnitts.
Form spiegeln (nur wenn eine Trennform gesetzt ist) – Dreht die Form seitenverkehrt um.
Überlappung – Der Abschnitt rückt nach oben und legt sich teilweise über den darüber. Das ist vor allem dann sichtbar, wenn der Abschnitt eine andere Farbstimmung hat.

Bewegung

(Nur in der Standard-Ansicht)

Animation beim Einblenden – Wie der Abschnitt beim Scrollen ins Bild kommt (z. B. von unten einfahren, ausfaden). „Wie der Stil der Website" nutzt die Standardeinstellung.
Dauer (nur wenn eine Animation gesetzt ist) – Wie lange die Animation dauert.
Verzögerung (nur wenn eine Animation gesetzt ist) – Wie lange es dauert, bevor die Animation startet.
Nacheinander (nur wenn der Abschnitt mehrere Teile enthält) – Die einzelnen Teile erscheinen nacheinander statt alle auf einmal.

Eigener Code

(Nur in der Standard-Ansicht)

Nur nötig, wenn du den Abschnitt über eigenes CSS ansprechen willst:

CSS-Klasse – Ein Name, unter dem du den Abschnitt in deinem eigenen CSS identifizieren kannst.
Eigenes CSS für diesen Abschnitt – Trage hier CSS-Regeln ein, die nur auf diesen Abschnitt gelten. @import, HTML-Zeichen und Verweise auf andere Abschnitte werden entfernt.

Sichtbarkeit und Planung

(Nur in der Standard-Ansicht)

Sichtbarkeit – Entscheide, auf welchen Bildschirmgrößen der Abschnitt angezeigt wird (Handy, Tablet, Rechner – oder auch gar nicht).
Sichtbar ab und Sichtbar bis einschließlich – Trage Datumsangaben ein, um den Abschnitt nur in einem bestimmten Zeitraum anzuzeigen. Ein leeres Feld heißt: ohne Beginn oder ohne Ende. Im Editor bleibt der Abschnitt immer sichtbar, aber gedämpft dargestellt.

Abweichungen vom Website-Stil

Wenn du Einstellungen änderst, die vom Stil deiner Website abweichen, erscheint ein Hinweisfeld mit der Aufschrift „Weicht an X Stellen vom Stil der Website ab". Dort kannst du dir anschauen, welche Einstellungen nicht dem Standard entsprechen, und sie alle auf einmal zurücksetzen. Das löscht deine eigenen Werte, und der Abschnitt folgt wieder dem Website-Stil.

Aufbau der Einstellungsseite

Die Einstellungen sind in mehrere Bereiche gegliedert:

Oben: Die wichtigsten Einstellungen (Farbstimmung, Breite, Abstände) – schnell erreichbar.
Für Fortgeschrittene: Zusätzliche Optionen, die die meisten Nutzer nicht brauchen. Klicke auf die Schaltfläche, um sie auf- oder zuzuklappen.
Handy-Modus: Wenn du die Handy-Ansicht öffnest, siehst du nur die Einstellungen, die auf Handy-Breite Unterschiede machen.

Jede Einstellung zeigt dir einen Hinweistext, wenn du mit der Maus darauf zeigst – das erklärt dir kurz, was das Feld macht.

Was danach passiert

Deine Änderungen werden direkt im Editor sichtbar. Sobald du speicherst, gelten die neuen Einstellungen auf deiner Website. Der Abschnitt behält diese Gestaltung, bis du ihn erneut bearbeitest.

Wenn du mehrere Abschnitte auf der gleichen Seite gestalten willst, klickst du den nächsten Abschnitt an und wiederholst die Schritte für dessen Design.

Tipps und Hinweise

Farben ausprobieren: Alle Farben zeigen dir eine Vorschau, bevor du speicherst. Im Editor siehst du sofort, wie es aussieht.
Handy und Standard trennen: Was du in der Handy-Ansicht änderst, beeinflusst die Standard-Ansicht nicht. So kannst du für kleine Bildschirme anders gestalten als für große.
Zurücksetzen nutzen: Neben vielen Einstellungen gibt es ein „zurücksetzen"-Feld. Das löscht deine Änderung und nutzt wieder den Standardwert.
Kontrast prüfen: Wenn du Schriftfarben änderst, zeigt dir das Kontrastverhältnis, ob die Farben gut genug beieinander liegen. Grüne Werte sind gut, rote bedeuten: nicht lesbar genug.