Design und Widgets

Auf dieser Seite

Das Aussehen deiner ganzen Website (Farben, Schriften, Buttons, Effekte) legst du an einer Stelle fest: im Tab Design des Editors. Extras für die ganze Website wie Chat-Buttons und eine Hinweisleiste findest du im Tab Widgets. Änderungen erscheinen sofort in der Vorschau und gehen live, wenn du auf Veröffentlichen klickst.

Fertige Themes

Öffne im Editor den Tab Design (linker Bereich).
Unter Farben bietet dir Fertige Themes komplette Farbsets: Orange, Mitternachtsblau, Neon-Limette, Rose, Violett, Helles Studio und Schwarz-Weiß.
Klicke auf eines, um es zu übernehmen. Danach kannst du jede Farbe darunter feinjustieren.

Tipp: Starte mit dem Theme, das deiner Marke am nächsten kommt, und ändere dann nur die Akzentfarbe in deine Markenfarbe. Das reicht oft schon.

Farben

Farbe	Wo sie verwendet wird
Hintergrund	Der Seitenhintergrund.
Karten / Flächen	Karten, Boxen und hellere Abschnitte.
Linien und Ränder	Rahmen und Trennlinien.
Haupttext	Überschriften und Fließtext.
Nebentext	Kleinerer, dezenterer Text.
Akzentfarbe (Buttons, Details)	Buttons, Hervorhebungen, Links, Icons.
Text auf der Akzentfarbe	Text auf Buttons; achte darauf, dass er auf dem Akzent gut lesbar ist.
Leuchtfarbe	Das sanfte Leuchten hinter Bildern und Abschnitten.
Helle Karten (Preise)	Die hellen Preiskarten in Pakete und Preise.

Typografie

Schrift der Überschriften und Schrift des Fließtexts: Wähle aus einer Liste von Webfonts; die Vorschau lädt sie, während du auswählst.
Stärke der Überschriften: von normal bis extra fett.
Buchstabenabstand der Überschriften: engere oder weitere Titel.
Titelgröße: alle Titel größer oder kleiner skalieren.
Textgröße: die Grundgröße des Fließtexts.
Kleine Zeilen in Großbuchstaben: ob die kleinen Zeilen über Titeln in Großbuchstaben stehen.

Formen

Eckenrundung der Karten und Eckenrundung der Buttons: von eckig bis ganz rund.
Button-Aussehen: Vollfarbe, Farbverlauf oder Umriss.
Inhaltsbreite: wie breit der Inhalt auf großen Bildschirmen werden darf.

Effekte und Animationen

Leuchtstärke: wie stark der Leuchteffekt ist (0 schaltet ihn aus).
Scroll-Animation: wie Abschnitte beim Scrollen erscheinen: Keine Animation, Einblenden, Von unten einblenden, Zoom oder Scharfstellen.
Karten heben sich beim Hovern: Karten bewegen sich unter der Maus leicht nach oben.
Filmkorn über der Website: ein dezenter, strukturierter Look.
Sanftes Scrollen: weiches Scrollen, wenn ein Link zu einem Abschnitt springt.

Eigenes CSS

Unter Erweitert kannst du im Feld Eigenes CSS eigenes CSS für Designänderungen hinzufügen, die es nicht als Einstellung gibt. Beispiel:

.btn { text-transform: uppercase; }

Eigenes CSS ist für fortgeschrittene Nutzer. Wenn etwas kaputtgeht, lösche, was du hinzugefügt hast, oder nutze Strg+Z.

Design einzelner Abschnitte

Jeder Abschnitt hat unter Bearbeiten → Aussehen außerdem sein eigenes Erscheinungsbild: Hintergrund (keiner, Karte, Leuchten, Akzent), Abstände, Titelausrichtung und ein Hintergrundbild mit Abdunklung. Viele Abschnitte haben zusätzliche eigene Optionen wie Spalten, Kartenstil oder Bildform. Siehe Abschnitte und Elemente.

Widgets

Öffne den Tab Widgets. Er hat drei Gruppen: Chat-Buttons, Hinweisleiste und Sonstiges.

Chat-Buttons

Schwebende Buttons in der Bildschirmecke lassen Besucher dich mit einem Tipp kontaktieren.

Schalte Chat-Buttons anzeigen ein.
Klicke unter Kanäle für jeden Kanal auf Element hinzufügen und wähle den Kanal:
- WhatsApp, Viber, Telegram, Messenger, Instagram;
- Anruf, SMS, E-Mail;
- Anderer Link (jede https://…-Adresse, mit eigenem Icon).
Fülle Nummer, Benutzername oder Adresse aus:
- WhatsApp, Viber und Anruf: deine Nummer im internationalen Format, zum Beispiel +381601234567;
- Telegram und Instagram: dein Benutzername;
- E-Mail: deine E-Mail-Adresse;
- Anderer Link: eine vollständige https://…-Adresse.
Füge bei Bedarf eine Vorausgefüllte Nachricht (WhatsApp), einen Text neben dem Button (optional) und eine Farbe (leer = Markenfarbe) hinzu.

Danach legst du fest, wie sich die Buttons verhalten:

Einstellung	Was sie bewirkt
Text des Haupt-Buttons	Der Text auf dem Haupt-Button (standardmäßig Chat).
Layout	Ein Button (öffnet ein kleines Menü mit allen Kanälen) oder Alle Buttons (übereinander).
Bildschirmseite	Rechts oder Links.
Text neben den Buttons anzeigen	Zeigt die Beschriftungen neben den Icons.
Pulsieren (zieht Aufmerksamkeit)	Eine sanfte Puls-Animation.
Erscheint nach	Verzögerung in Sekunden, bevor die Buttons erscheinen.
Auf dem Handy anzeigen / Auf dem Computer anzeigen	Wo die Buttons sichtbar sind.

Hinweisleiste

Eine schmale Leiste ganz oben auf der Website, für Neuigkeiten oder Angebote (Diese Woche kostenloser Versand, Neuer Kurs jetzt verfügbar).

Schalte Leiste oben auf der Website anzeigen ein.
Schreib den Text und optional einen Linktext (optional) mit Link führt zu.
Wähle den Stil: Akzent, Dunkel oder Hell.
Entscheide, ob Besucher können sie schließen aktiv sein soll.

Sonstiges

„Nach oben“-Button: ein kleiner Button, der auf langen Seiten wieder nach oben scrollt.
Scroll-Fortschrittslinie oben: eine dünne Linie, die sich füllt, während der Besucher scrollt.

Tipps

Prüfe deine Farben auch unter Telefon und achte darauf, dass Text auf jedem Hintergrund lesbar ist.
Kombiniere nicht mehr als zwei Schriften; Überschriften- und Fließtextschrift reichen.
Ein oder zwei Chat-Kanäle sind meist besser als fünf.

Keine Antwort gefunden?

Schreib uns, wir antworten innerhalb eines Werktags.

Kontakt