Website-Theme: Text, Farben, Hintergrund und Layout

Das Panel Thema wirkt sich auf deine gesamte Website aus. Text, Buttons, Bilder, Hintergrund und Navigations-Widgets gestaltest du dort zentral über das Design-Panel. So änderst du das Aussehen schnell und für alle Seiten zugleich, sparst Zeit beim Design und hältst den Stil einheitlich.

Zum Öffnen klickst du in der Seitenleiste auf Thema. Die Arbeitsfläche verkleinert sich dann automatisch auf 50 %, sodass du beim Anpassen der Theme-Einstellungen die ganze Fläche im Blick hast. Zurück zur 100-%-Ansicht kommst du über das Dropdown oben in der Leiste, dort wählst du 100 %. Ein- und Auszoomen geht auch im Vorschaumodus.

Hinweis: Änderungen an einzelnen Widgets oder Seiten überschreiben die im Panel Thema festgelegten Themes. Wir empfehlen, zuerst ein Theme festzulegen und dann die Teile deiner Website anzupassen, die hervorstechen oder sich vom Rest abheben sollen.

Theme-Text

In diesem Bereich steuerst du den gesamten Text deiner Website, vom Fließtext bis zu Überschriften aller Größen (H1 bis H6). Du änderst hier Stil und Aussehen und legst dabei getrennte Einstellungen für normalen Text, Links und Titel fest, etwa Schriftart und Schriftgröße.

Solche Änderungen an Schriftgröße, Stil und Farbe gelten für alle künftigen Absätze und Texttypen. Sie wirken außerdem auf bestehende Widgets, die mit Seiten-Text verbunden sind und die du nicht von Hand geändert hast.

Theme-Text konfigurieren

So konfigurierst du den Theme-Text:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf den Pfeil neben Text.
3. Klicke auf den gewünschten Texttyp. Die Optionen sind:
   • DFLT. Damit legst du das Theme für allen Text in Widgets fest, die weder einer Überschrift noch dem Absatzstil zugeordnet sind, etwa das Navigations-Widget. Auch Farbe und Unterstreichung von Linktext lassen sich hier einstellen. Zusätzlich kannst du das Aussehen von Links für verschiedene Zustände anpassen, darunter Default Link State, Link On-hover und Link Clicked.
   • PAR. Damit legst du das Theme für das Text-Widget fest.
   • Überschriften und Zwischenüberschriften H1 bis H6.
4. Pro Texttyp kannst du Folgendes ändern:
   • Font
   • Font size. Diese wird für Desktop/Tablet und Mobil getrennt festgelegt.
   • Font color
   • Font format
   • Text direction
   • Font weight
   • Line height
   • Letter spacing
   • All caps
   • Text shadow

Änderungen im Bereich Text wirken auf allen Text der Website, den du nicht einzeln über eigene Stiländerungen überschrieben hast. Sobald du ein Element von Hand bearbeitest, hat diese Bearbeitung Vorrang: Spätere Theme-Änderungen ändern den Stil dieses Elements nicht mehr. Das gilt jeweils nur für die konkrete Stileinstellung, die du am Element angepasst hast. Wenn du zum Beispiel nur die Textfarbe in einem bestimmten H1-Widget auf der Arbeitsfläche geändert hast:

• und danach die Schriftgröße von H1 im Theme änderst, ändert sich die Schriftgröße auch im H1-Widget.
• und danach die Farbe von H1 im Theme änderst, wird das bereits geänderte H1 nicht mit der neuen Farbe aktualisiert.

Theme-Text aktualisieren

Du kannst den Theme-Text in den Texteinstellungen aktualisieren, indem du auf Thema klickst und dann Text auswählst. Alternativ klickst du auf ein Text-Widget, um das Kontextmenü zu öffnen, klickst auf das Dropdown zur Überschriftenauswahl und wählst Thema aktualisieren. Damit öffnen sich die Theme-Text-Einstellungen, in denen du Änderungen vornimmst.

Schriftbibliothek

Der Editor bietet eine Vielzahl von Schriften. Lege eine Theme-Schrift fest oder hebe deinen Text durch mehrere verschiedene Schriften auf deiner Website hervor.

So siehst du dir die verfügbaren Schriften und ihr Aussehen an:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Text.
3. Wähle eine Schrift aus dem Dropdown-Menü Font.

Theme-Farben

Mit Farben definierst du eine Farbpalette und verknüpfst die einzelnen Farben mit beliebigen oder allen Widgets, die Farbeinstellungen haben. Die Farbe jedes Elements, das mit den Theme-Farben verknüpft ist, wird automatisch aktualisiert, sobald du die verknüpfte Farbe in den Einstellungen der Theme-Farben änderst. So nimmst du Farbänderungen schnell vor, sparst Zeit beim Design und sorgst dafür, dass der Stil deiner Website über alle Seiten hinweg einheitlich ist.

Theme-Farben konfigurieren

Du kannst bis zu 30 Theme-Farben konfigurieren.

So konfigurierst du Theme-Farben:

1. Klicke in der Seitenleiste auf Thema.
2. Wähle den Pfeil neben Farben.
3. Klicke auf das Plus-Symbol neben Primär oder der Einstellung, die du festlegen möchtest.
4. Gib den HEX- oder RGB-Wert der gewünschten Farbe ein oder wähle die Farbe mit der Pipette aus.
5. (Optional) Du kannst Farben aus deinem Logo generieren. Klicke, um die Primärfarbe zu öffnen, öffne dann den Tab Brand und klicke auf Logo hinzufügen (wenn du in deinen Business Info in der Inhaltsbibliothek ein Logo hinzugefügt hast, erscheint es hier). Nach dem Hinzufügen deines Logos wird ein Farbsatz generiert. Wenn du das Logo entfernen oder ersetzen möchtest, klickst du auf das Drei-Punkte-Symbol neben deinem Logo und wählst Entfernen oder Bild ersetzen.

Wiederhole diese Schritte bei Bedarf für jede Theme-Farbe. Anschließend verknüpfst du die Farben mit Widgets auf deiner Website (siehe „Theme-Farben mit Widgets verknüpfen" unten).

Theme-Farben automatisch konfigurieren

Wenn auf der Website oder Vorlage noch keine Farben verknüpft sind, geht das auch automatisch. Der automatische Generator für Theme-Farben scannt deine Website und erkennt die am häufigsten verwendeten Farben. Er erstellt eine Liste von Farben zur Auswahl, und sobald du sie auswählst, werden diese Farben zu deinen Theme-Farben und mit den Widgets deiner Website verknüpft.

So konfigurierst du Theme-Farben automatisch:

1. Klicke in der Seitenleiste auf Thema.
2. Wähle den Pfeil neben Farben.
3. Klicke auf Set Theme Colors.
4. Klicke auf Connect it for me oder I'll connect it myself.
5. (Optional) Wenn du I'll connect it myself gewählt hast, klickst du im Design-Panel auf das Plus-Symbol neben jeder Farbe und wählst die Farben einzeln aus.
6. Wähle aus, welche der generierten Farben du verwenden möchtest.
7. Klicke auf Save & Connect Colors.

Die Farben erscheinen dann im Bereich Farben des Panels Thema.

Theme-Farben mit Widgets verknüpfen

So verknüpfst du ein Widget mit einer Theme-Farbe:

1. Klicke auf ein Widget, um sein Einstellungsmenü zu öffnen.
2. Öffne die Farbeinstellungen und wähle oben eine der aufgelisteten Theme-Farben.
3. Wiederhole dies bei Bedarf für weitere Elements.
4. (Optional) Wenn du eine der Theme-Farben bearbeiten möchtest, klickst du auf das Stift-Symbol, und die Einstellungen der Theme-Farben öffnen sich, wo du die gewünschte Farbe bearbeitest.

Sobald ein Widget mit Theme-Farben verknüpft ist, wird es automatisch aktualisiert, wenn die verknüpfte Theme-Farbe geändert wird.

Theme-Farben umbenennen

So benennst du Theme-Farben um:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Farben.
3. Bewege den Mauszeiger über den gewünschten Farbnamen und klicke auf das Stift-Symbol.
4. Gib einen neuen Namen ein.

Der neue Name wird automatisch gespeichert und erscheint, wenn du im Farbwähler über die Farbe fährst.

Theme-Farben entfernen

Du kannst die Verknüpfung beliebiger Widgets zu einzelnen Theme-Farben aufheben.

So hebst du die Verknüpfung eines Widgets auf:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Farben.
3. Klicke auf das Symbol mit den drei waagerechten Punkten neben dem Text Farben und wähle Remove theme colors.
4. Wähle aus, welche Farben entfernt werden sollen, und klicke dann auf Remove Selected Colors.

Website-Buttons

In diesem Bereich legst du den Stil der primären und sekundären Button-Widgets deiner Website fest. Wähle eines der Button-Layouts und lege Text, Hintergrundfarbe, Rahmen, Hover-Zustand, Ecken und Schattenstile fest.

Um den Button Back to Top auf Mobilgeräten auszublenden, aktivierst du den Schalter im Bereich Site Layout.

Theme-Bilder

In diesem Bereich steuerst du den Stil der Bild-Widgets deiner Website. Du kannst das Bild-Layout ändern und Rahmenstil, abgerundete Ecken oder Schatteneffekte hinzufügen oder bearbeiten.

Theme-Zeilen und -Spalten

In diesem Bereich definierst du das Theme für das Design von Zeilen und Spalten in Bezug auf Hintergrundfarbe und Standardabstände. Änderungen an einzelnen Zeilen oder Spalten überschreiben die Theme-Einstellungen für Zeilen und Spalten.

Theme-Hintergrund

In diesem Bereich steuerst du den Hintergrundstil deiner Website. Wähle zwischen einer Farbe oder einem Bild als Hintergrund. Wähle ein individuelles Hintergrundbild aus der Bildergalerie oder lade eigene Bilder hoch, um deiner Website ein einzigartiges Design zu geben. Die Änderungen wirken sich auch auf Desktop und Tablet aus.

Hinweis: Informationen zu Hintergründen einzelner Website-Elements findest du unter „Element-Hintergründe".

Website-Hintergrund anpassen

So passt du deinen Website-Hintergrund an:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf den Pfeil neben Hintergründe.
3. Klicke auf Standard-Hintergrund.
4. Klicke auf den Tab Farbe oder Image oder wähle eine Farbe für den Website-Hintergrund oder lade ein Bild hoch.
5. (Optional) Klicke auf den Schalter Do not optimize this image, um die Optimierung zu verhindern (diese Einstellung erscheint, sobald ein Bild ausgewählt wurde).

Hintergrund pro Seite anpassen

So passt du den Hintergrund pro Seite an:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf den Pfeil neben Hintergründe.
3. Klicke auf Hintergrund pro Seite.
4. Wähle eine Seite aus dem Dropdown-Menü und wähle Bild oder Farbe für die jeweilige Seite.
5. (Optional) Klicke auf den Schalter Do not optimize this image, um die Optimierung zu verhindern (diese Einstellung erscheint, sobald ein Bild ausgewählt wurde).

Breite & Abstand (Editor 2.0)

Hinweis: Diese Informationen gelten speziell für Editor 2.0, früher bekannt als All-Flex Editor.

Über das Panel Thema passt du das Layout deiner Website an, darunter die Seitenbreite sowie die Standardabstände für Abschnitte, Spalten und innere Spalten.

So öffnest du die Layout-Einstellungen der Website:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Width & Spacing.
3. Klicke auf den gewünschten Bereich, um ihn aufzuklappen.

Seitenbreite

Du kannst die Standard-Seitenbreite für Abschnitte festlegen, die auf dem Desktop nicht auf volle Breite gesetzt sind (früher „full bleed" genannt). Die passende Standard-Seitenbreite sorgt für die beste Lesbarkeit und ein gutes Design, je nachdem, wie die Website angezeigt wird. Manche Websites werden zum Beispiel auf einem Fernsehbildschirm oder auf Bildschirmen dargestellt, die größer als ein durchschnittlicher Desktop-Computer sind.

So legst du die Standard-Seitenbreite fest:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Width & Spacing.
3. Klicke, um den Bereich Seitenbreite aufzuklappen.
4. Wähle 1200 px, 1440 px oder Custom. Wenn du Custom wählst, stellst du die Pixelbreite mit dem Schieberegler ein oder gibst einen Wert in das Feld ein. Der individuelle Wert kann zwischen 960px und 1920px oder zwischen 50 vw und 100 vw liegen.

Aktiviere den Schalter Volle Breite, wenn alle neuen Abschnitte standardmäßig volle Breite haben sollen.

Abschnittsabstand

Du kannst den Standard-Innenabstand für neue, leere Abschnitte deiner Website festlegen. Bei Bedarf überschreibst du den Theme-Abschnittsabstand im Design-Panel des jeweiligen Abschnitts.

Wichtige Hinweise:

• Abschnitte, die dem Header hinzugefügt werden, behalten den Standard-Header-Abstand, unabhängig davon, was im Abschnittsabstand des Themes festgelegt ist.
• Beachte, dass Abschnitte, die vor der Veröffentlichung dieser Funktion (5. August 2025) erstellt wurden, den Innenabstand aus Bereiche Abstand nicht automatisch übernehmen. Du kannst sie jedoch erneut verbinden, indem du das Design-Panel des Abschnitts öffnest und im Bereich Bereiche Abstand auf Reset to theme spacing klickst.

So legst du den Abschnittsabstand fest:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Width & Spacing.
3. Klicke, um den Bereich Bereiche Abstand aufzuklappen.
4. Klicke in die jeweiligen Felder, um die Werte für den Innenabstand zu bearbeiten. Die horizontalen Werte sind verknüpft. Wenn du einen änderst, wird der andere automatisch angepasst. Über das Ketten-Symbol kannst du die Verknüpfung aufheben. Beachte, dass der Abschnittsabstand pro Breakpoint festgelegt wird.

Klicke bei Bedarf auf Reset padding, um alle Werte auf null zurückzusetzen.

Wenn du den Innenabstand eines einzelnen Abschnitts änderst, überschreibt das die Theme-Einstellungen. Du kannst ihn auf die Theme-Einstellungen für Bereiche Abstand zurücksetzen, indem du das Design-Panel des Abschnitts öffnest und im Bereich Bereiche Abstand auf Reset to theme spacing klickst.

Spaltenabstand

Du kannst den Standard-Innenabstand für neue, leere Spalten deiner Website festlegen. Bei Bedarf überschreibst du den Theme-Abschnittsabstand im Design-Panel der jeweiligen Spalte.

So legst du den Standardabstand für Spalten fest:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Width & Spacing.
3. Klicke, um den Bereich Spalte Abstand aufzuklappen.
4. Klicke in die jeweiligen Felder, um die Werte für den Innenabstand zu bearbeiten. Die vertikalen Werte sind verknüpft. Wenn du einen änderst, wird der andere automatisch angepasst. Über das Ketten-Symbol kannst du die Verknüpfung aufheben.

Innerer Spaltenabstand

Du kannst den Standard-Innenabstand für neue, innere Spalten deiner Website festlegen. Bei Bedarf überschreibst du den Theme-Abschnittsabstand im Design-Panel der jeweiligen inneren Spalte.

So legst du den Standardabstand für innere Spalten fest:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf Width & Spacing.
3. Klicke, um den Bereich Inner Column Spacing aufzuklappen.
4. Klicke in die jeweiligen Felder, um die Werte für den Innenabstand zu bearbeiten. Die vertikalen Werte sind verknüpft. Wenn du einen änderst, wird der andere automatisch angepasst. Über das Ketten-Symbol kannst du die Verknüpfung aufheben.

Website-Layout

Steuere die Navigation des Website-Layouts auf Desktop, Tablet und Mobil. Für die Desktop-Version kannst du zwischen zwei Breiten wählen: 960px oder 1200px.

Wenn du das Layout deiner Navigation änderst, wirkt sich das oft auf das Verhalten deines Headers und manchmal auf den Rest deiner Website aus. Wenn dein Header nach dem Ändern des Layouts plötzlich falsch aussieht, probiere ein anderes Layout aus.

Seitenleisten-Layout für Desktop

Du kannst dein Desktop-Website-Layout in ein Seitenleisten-Layout ändern. Beim Seitenleisten-Layout wird der Header an der Seite der Website angezeigt (links oder rechts). Das ist ein tolles Gestaltungsmittel, um deiner Website ein einzigartiges Aussehen zu geben. Der Seitenleisten-Header wirkt außerdem wie ein fixierter Header und bleibt immer auf dem Bildschirm sichtbar. Du kannst Widgets wie in jede andere Zeile in die Seitenleiste einfügen.

Hinweis:

• Wenn du von einem klassischen Website-Layout zu einem Seitenleisten-Layout wechselst, behält der Header das Logo, und alle vorhandenen Widgets werden entfernt (ähnlich wie beim Wechsel des Header-Layouts beim oberen Header-Layout). Die Hintergrundfarbe wird entsprechend dem gewählten Layout geändert.
• Der schrumpfende Header ist für die Seitenleisten-Navigation nicht verfügbar. Die Seitenleiste wird immer auf der Website angezeigt, unabhängig davon, ob gescrollt wird.
• Auf Bildschirmen mit weniger als 1090 Pixeln Breite wird der Inhalt der Seitenleiste bis auf das erste Bild ausgeblendet, und ein Symbol zum Aufklappen des Menüs erscheint. Die Farbe der Auslöse-Schaltfläche, die im Design-Editor erscheint, kannst du anpassen.

So änderst du dein Website-Layout in ein Seitenleisten-Layout:

1. Klicke in der Seitenleiste auf Thema.
2. Klicke auf den Pfeil neben Site Layout.
3. Wähle das Seitenleisten-Layout. Du kannst Zeilen hinzufügen, Widgets per Drag-and-drop in den Seitenleisten-Header ziehen und ihn anpassen.

Um das Design des Seitenleisten-Headers zu bearbeiten, bewegst du den Mauszeiger über die Seitenleiste und klickst oben rechts auf Sidebar. Du kannst eines der mehreren Seitenleisten-Header-Layouts für deine Website wählen, es links oder rechts auf dem Bildschirm anzeigen, seine Breite festlegen und mehr.