Artikel in diesem Thema
Branding und Farben
Fügen Sie Ihr Logo hinzu, wählen Sie Ihre Farben und Ihre Schrift und geben Sie Buchungsseite und Website denselben Look.
7 Min. Lesezeit
Ihr Logo, Ihre Farben und Ihre Schrift machen Ihre Venue wiedererkennbar. Sie legen sie einmal in der Registerkarte Branding & Design fest, und Ihre Gäste sehen sie auf Ihrer Buchungsseite und auf Ihrer Website — Clava hält die Farben von beiden im Gleichschritt.
Wo Ihre Gäste Ihr Branding sehen
| Was Sie festlegen | Wo Ihre Gäste es sehen |
|---|---|
| Veranstaltungsort-Logo | In der Menüleiste und im oberen Bereich Ihrer Website, oben auf Ihrer Standard-Buchungsseite und auf Ihren Gutschein-PDFs. |
| Farben (die Felder von Primärfarbe bis Formular-Randfarbe) und Schriftart | Auf Ihrer Standard-Buchungsseite, im Buchungsformular auf einer anderen Website (dem Buchungs-Widget) und auf Ihrer Website. Ihre Website bekommt sie über eine Kopie, die Sie unter Umständen veröffentlichen müssen — siehe Farben speichern und veröffentlichen. |
| Benutzerdefinierte CSS-Stile | Auf Ihrer Standard-Buchungsseite, im Buchungs-Widget und auf den Seiten Ihrer Website. |
Logo hinzufügen
- Klicken Sie in der Standort-Einrichtung bei Ihrer Venue auf Konfigurieren und dann auf Branding & Design. Die Registerkarte braucht ein paar Sekunden, um Ihr Logo anzuzeigen.
- Ziehen Sie Ihr Logo unter Veranstaltungsort-Logo (1) auf das Feld oder klicken Sie auf auswählen und wählen Sie die Datei: eine SVG-, PNG-, JPG- oder WebP-Datei bis 2 MB. Ein SVG bleibt auf jedem Bildschirm scharf; auch ein PNG oder WebP mit transparentem Hintergrund funktioniert gut.
- Anders überlegt? Klicken Sie auf das kleine × am Logo, um es zu entfernen.
- Klicken Sie auf Branding speichern — siehe Farben speichern und veröffentlichen. Vorher ist Ihr Logo nicht gespeichert.
Gut zu wissen
Das Upload-Feld zeigt Ihr Logo auf dunklem Hintergrund, ein dunkles Logo ist darin also unter Umständen schwer zu erkennen. Dieses dunkle Feld gehört nur zu diesem Bildschirm — Gäste sehen es nicht.
Gut zu wissen
Den Hintergrund Ihrer Website legen Sie nicht hier fest, sondern im Website-Builder: siehe Hintergrund.
Ihr Logo erscheint auf Ihrer Website auch anstelle des Website-Namens. Gäste sehen ein neues Logo, sobald Sie speichern — siehe Ihr Logo.
Mit einem fertigen Look beginnen
Der schnellste Weg zu schönen Farben ist eine Vorlage: ein fertiges Farbset mit passender Schrift.
-
Klicken Sie oben rechts in der Registerkarte auf Vorlage wählen (1).
Vorlage wählen (1) und die Vorschau (2) -
Von rechts schiebt sich das Fenster Design-Vorlagen herein (1). Es enthält 36 Looks in Gruppen — Elegant, Modern, Warm, Kühl, Kräftig, Natürlich und Dunkel. Jede Karte (2) zeigt sechs Farbpunkte, den Namen des Looks und den Namen seiner Schrift. Die Namen der Looks und der Schriften sind immer englisch.
Das Fenster Design-Vorlagen: der Titel (1), ein Look (2) und die Schaltfläche zum Schließen (3) -
Klicken Sie auf eine Karte. Das Fenster schließt sich, und die Farbfelder, Header-Transparenz und Schriftart sind für Sie ausgefüllt. Ihr Logo bleibt, wie es ist. Um das Fenster zu schließen, ohne einen Look zu wählen, klicken Sie oben rechts darin auf das × (3).
-
Sehen Sie sich die ausgefüllten Felder an. Die Vorschau ändert sich nicht von selbst — siehe Jede Farbe selbst wählen. Jede Farbe können Sie weiterhin selbst ändern, wie dort beschrieben.
-
Klicken Sie auf Branding speichern, wenn Sie zufrieden sind.
Wichtig
Eine Vorlage ist nur ein Vorschlag, bis Sie auf Branding speichern klicken. Sie ersetzt die Farben und die Schrift im Formular, nicht die, die Sie zuvor gespeichert haben. Gefällt sie Ihnen nicht, laden Sie die Seite ohne zu speichern neu, und Ihr gespeicherter Look ist wieder da.
Jede Farbe selbst wählen
Unter dem Logo-Feld finden Sie sechs Farbfelder und ein Zahlenfeld, Header-Transparenz. Um eine Farbe zu ändern,
klicken Sie auf den runden Farbpunkt am Ende des Feldes und wählen eine Farbe — oder tippen einen Farbcode ein, wenn
Sie ihn kennen, zum Beispiel #d97706.
| Feld | Was es einfärbt | |
|---|---|---|
| (1) | Primärfarbe | Schaltflächen und kleine Hervorhebungen in vielen Abschnitten Ihrer Website, etwa Symbole und Etiketten. |
| (2) | Sekundärfarbe | Den Hintergrund der Seiten Ihrer Website sowie den Text auf Schaltflächen in Ihrer Akzentfarbe. |
| (3) | Akzentfarbe | Überschriften, Menü und Links, den Kalender und die hervorgehobenen Schaltflächen des Buchungsformulars. |
| (4) | Header-Hintergrundfarbe | Die Leiste oben auf der Seite mit Ihrem Menü. |
| (5) | Header-Transparenz | Wie durchsichtig diese Leiste ist: eine Zahl von 0 (ganz durchsichtig) bis 1 (ganz deckend), zum Beispiel 0.9. |
| (6) | Formular-Hintergrundfarbe | Den Hintergrund des Buchungsformulars. |
| (7) | Formular-Randfarbe | Die Linien um das Buchungsformular und seine Felder. |
Gut zu wissen
Der Website-Builder führt die ersten drei Farben unter anderen Namen auf: Primär (Text), Sekundär (Hintergrund) und Akzent (Hervorhebungen). Diese Namen sind nur grobe Hinweise. Was jede Farbe wirklich einfärbt, steht in der Tabelle oben.
Header-Transparenz ist eine Zahl zwischen 0 und 1, keine Prozentangabe. Für eine Leiste, die zu 90 % deckend ist,
tippen Sie 0.9, nicht 90. Tippen Sie 90 und klicken auf Branding speichern, erscheint unter dem Feld eine
rote Meldung, dass die Zahl nicht größer als 1 sein darf: Header-Transparenz darf nicht größer als 1 sein.
Gespeichert wird erst, wenn Sie das korrigiert haben.
Gut zu wissen
Schreiben Sie die Zahl mit einem Punkt, etwa 0.9 — nicht mit einem Komma. In manchen Browsern geht das Komma
verloren, und aus 0,9 wird 09, was ebenfalls abgelehnt wird.
Rechts in der Registerkarte zeigt die Vorschau ein kleines Muster aus Header und Formular. Trotz ihres Namens und der Zeile darunter folgt sie Ihren Änderungen nicht: Sie zeigt die Farben, die die Registerkarte hatte, als Sie sie geöffnet haben. Zum Aktualisieren öffnen Sie eine andere Registerkarte und kehren zurück. Entscheidend sind die Farbfelder — und wie Ihre Standard-Buchungsseite nach dem Speichern aussieht.
Tipp
Achten Sie auf genug Kontrast. Dunkler Text auf hellem Grund oder umgekehrt ist am besten lesbar — auch auf dem Handy in der Sonne. Zwei oder drei Farben reichen völlig.
Eine Schrift wählen
- Scrollen Sie zu Schriftart (1). Sie bietet eine Liste von 55 beliebten Schriften.
- Klicken Sie ins Feld und tippen Sie einen Namen, zum Beispiel Lora, oder blättern Sie durch die Liste. Klicken Sie auf die gewünschte Schrift.
- Klicken Sie auf Branding speichern.
Die Schrift wird für alle Texte Ihrer Buchungsseite und Ihrer Website verwendet. Die Browser Ihrer Gäste laden die Schrift von Google Fonts. Eine Vorlage bringt ihre eigene Schrift mit, wählen Sie Ihre Schrift also, nachdem Sie eine Vorlage gewählt haben.
Zusätzliche Gestaltung mit CSS (für Profis)
Das Feld Benutzerdefinierte CSS-Stile (2) ist für Webdesigner gedacht, die den Look mit CSS-Code feinjustieren möchten. Was Sie hier eintippen, wird Ihrer Buchungsseite, Ihrem Buchungs-Widget und den Seiten Ihrer Website hinzugefügt.
Achtung
Clava prüft diesen Code nicht und zeigt keine Vorschau. Ein Fehler kann das Layout Ihrer Seite für Ihre Gäste zerstören. Bewahren Sie eine Kopie dessen auf, was Sie einfügen. Zum Rückgängigmachen leeren Sie das Feld und klicken auf Branding speichern.
Wenn Sie CSS nicht kennen, lassen Sie das Feld leer.
Farben speichern und veröffentlichen
- Klicken Sie unter dem Formular auf Branding speichern. Eine grüne Meldung sagt Änderungen erfolgreich gespeichert.
- Lesen Sie, was die Meldung sagt — Ihre Farben werden jetzt auch auf Ihre Website kopiert, und was als Nächstes passiert, hängt von Ihrer Website ab:
| Was Sie sehen | Was es bedeutet |
|---|---|
| Nur Änderungen erfolgreich gespeichert. | Sie haben noch keine Website, oder die Farben sind dieselben wie vorher. Sie müssen nichts weiter tun. |
| Änderungen erfolgreich gespeichert. und Ihre Website zeigt jetzt die neuen Farben. | Ihre Website hatte keine anderen unveröffentlichten Änderungen, deshalb hat Clava die neuen Farben für Sie online gestellt. Im Versionsverlauf finden Sie sie als Branding-Aktualisierung. |
| Änderungen erfolgreich gespeichert. und, in Gelb, Öffnen Sie den Website-Builder und klicken Sie auf „Veröffentlichen“, um die neuen Farben auf Ihre Website zu übernehmen. | Die neuen Farben stehen im Entwurf Ihrer Website, Ihre Gäste sehen sie dort aber noch nicht. Klicken Sie auf Website-Builder öffnen, prüfen Sie das Ergebnis und klicken Sie auf Veröffentlichen. |
Die gelbe Erinnerung erscheint, wenn Ihr Entwurf andere Änderungen hat, die noch nicht veröffentlicht sind, wenn Ihre Website noch nie veröffentlicht wurde oder wenn sie ausgeblendet ist. Clava veröffentlicht Ihre anderen Änderungen nie hinter Ihrem Rücken. Eine ausgeblendete Website bleibt ausgeblendet, bis Sie sie wieder online stellen — siehe Ihre Website wieder online stellen.
Ihre Standard-Buchungsseite und das Buchungs-Widget verwenden die neuen Farben sofort, was auch immer die Meldung sagt. Nur Ihre Website wartet aufs Veröffentlichen. Siehe Ihre Änderungen veröffentlichen und Versionsverlauf.
Wichtig
Farben und Schrift werden in beide Richtungen kopiert. Wenn Sie Ihre Website veröffentlichen, werden ihre Farben und ihre Schrift auch in diese Registerkarte übernommen, sodass die letzte Änderung gilt, die Sie irgendwo machen. Entscheiden Sie sich für einen Ort, an dem Sie Farben und Schrift gestalten — den Tab Website im Website-Builder, wenn Sie eine Website haben, sonst diese Registerkarte — und nutzen Sie diese Registerkarte für Ihr Logo. Siehe Ihr Buchungsformular folgt Ihrer Website.