Zum Hauptinhalt springen

Branding

Richte Logo, Themes und benutzerdefiniertes CSS passend zu deinem Markenauftritt ein.

Verfasst von Maria

Hier kannst du dein Logo hochladen, dein Webinar-Theme konfigurieren und deinen Seiten benutzerdefiniertes CSS hinzufügen.

Logo

So lädst du ein Logo hoch:

  1. Klicke oben rechts auf ‚Account‘.

  2. Klicke anschließend im Dropdown-Menü auf ‚My account‘.

  3. Navigiere auf der linken Seite im Tab ‚Webinars‘ zu ‚Branding‘.

  4. Klicke auf ‚Upload logo‘ und wähle die richtige Datei aus.

Du kannst zwei Logos hochladen: eines für den Hellmodus und eines für den Dunkelmodus. Das Logo für das helle Theme wird bei aktiviertem Hellmodus auf der Registrierungsseite, der Bestätigungsseite, im Channel und oben links auf der Webinarseite angezeigt. Das Logo für das dunkle Theme wird nur bei aktiviertem Dunkelmodus auf der Webinarseite angezeigt.

Logos für helles und dunkles Theme hochladen

Hinweis! Für die bestmögliche Qualität in jeder Anzeigegröße wird das SVG-Format empfohlen (du kannst auch transparente PNG-Dateien hochladen). Hochgeladene Bilddateien (.png) müssen mindestens 70 Pixel hoch sein.

Icon

So lädst du ein Icon hoch:

  1. Klicke oben rechts auf ‚Account‘.

  2. Klicke anschließend im Dropdown-Menü auf ‚My account‘.

  3. Navigiere auf der linken Seite im Tab ‚Webinars‘ zu ‚Branding‘.

  4. Klicke auf ‚Upload logo‘ und wähle die richtige Datei aus.

Das Hochladen eines Icons ist ab dem Enterprise-Plan verfügbar. Du kannst zwei Icons hochladen: eines für den Hellmodus und eines für den Dunkelmodus. Das Icon für das helle Theme wird bei aktiviertem Hellmodus in der mobilen Streaming-App und im Browser als Favicon angezeigt. Das Icon für das dunkle Theme wird nur bei aktiviertem Dunkelmodus angezeigt.

Icons für helles und dunkles Theme hochladen

Theme-Farben

So änderst du das Webinar-Theme für deine Webinare:

  1. Klicke oben rechts auf ‚Account‘.

  2. Klicke anschließend im Dropdown-Menü auf ‚My account‘.

  3. Navigiere auf der linken Seite im Tab ‚Webinars‘ zu ‚Branding‘.

  4. Klicke auf ‚Theme colors‘ und richte dein Standard-Webinar-Theme oder benutzerdefinierte Theme-Farben ein.

  5. Klicke auf ‚Update webinar theme‘, um deine Änderungen zu speichern.

Webinar-Theme

Hier kannst du das visuelle Standard-Theme für deine Webinare festlegen. Es gilt für die Seiten, auf denen Teilnehmer an deinem Webinar teilnehmen. Standardmäßig kann niemand das von dir gewählte Theme ändern – weder Referenten noch Moderatoren oder Zuschauer –, es sei denn, du konfigurierst es anders.

Das Standard-Webinar-Theme in WebinarGeek einrichten

Hinweis! Wenn das Kontrollkästchen ‚All participants can toggle between light and dark mode.‘ aktiviert ist, hängt das Standard-Theme für deine Registrierungs- und Webinarseiten von den Geräteeinstellungen des Teilnehmers ab.

Wenn das Kontrollkästchen ‚All participants can toggle between light and dark mode.‘ aktiviert ist, können Besucher über einen Button zwischen Dunkel- und Hellmodus wechseln.

Der Button, mit dem Teilnehmer zwischen Hell- und Dunkelmodus wechseln können

Benutzerdefinierte Theme-Farben

Hier kannst du eigene Farben einrichten. Standardmäßig verwenden wir deine Primär- und Akzentfarbe als Grundlage. Mithilfe der Farbtheorie kombinieren wir sie zu einer ansprechenden Zusammenstellung.

Hinweis! Änderungen werden erst nach dem Speichern übernommen. Stelle sicher, dass das benutzerdefinierte Theme aktiviert ist, und klicke auf ‚Update theme colors‘.

Du kannst auch exakte Markenfarben aktivieren, indem du ‚Use exact brand colors‘ einschaltest. Dadurch werden deine Primär- und Akzentfarbe genau so verwendet, wie du sie eingibst, sodass die Webinarumgebung exakt zu deiner Marke passt. Gib die genauen HEX-Codes für deine Primär- und Akzentfarbe ein und klicke zum Speichern auf ‚Update webinar theme‘.

Um diese Funktion zu aktivieren, muss das Kontrollkästchen ausgewählt sein, das Besuchern den Wechsel zwischen Hell- und Dunkelmodus deaktiviert.

Hinweis! Exakte Markenfarben können dazu führen, dass einige Buttons, Links oder Texte in bestimmten Themes schlechter sichtbar sind.

Mehr über Webinar-Themes erfährst du in diesem Artikel.

Teammitglied-Bezeichnung

Während deiner Webinare haben Teammitglieder des Webinar-Teams eine Bezeichnung neben ihrem Namen. Standardmäßig wird ‚Team‘ verwendet, aber du kannst die Standardbezeichnung mit den folgenden Schritten anpassen:

  1. Klicke oben rechts auf ‚Account‘.

  2. Klicke anschließend im Dropdown-Menü auf ‚My account‘.

  3. Navigiere auf der linken Seite im Tab ‚Webinars‘ zu ‚Branding‘.

  4. Scrolle zu ‚Team label‘ und gib eine Bezeichnung mit bis zu 20 Zeichen ein.

  5. Klicke auf ‚Update account‘, um deine Änderungen zu speichern.

Eine benutzerdefinierte Teammitglied-Bezeichnung festlegen

Die hier konfigurierte Bezeichnung wird standardmäßig für alle Teammitglieder des Webinar-Teams verwendet, du kannst aber auch individuelle Teammitglied-Bezeichnungen hinzufügen.

Individuelle Teammitglied-Bezeichnungen

Kontoinhaber können einzelnen Teammitgliedern des Webinar-Teams individuelle Bezeichnungen zuweisen. Diese Option ist verfügbar, wenn du ein Teammitglied in einem Webinar hinzufügst oder bearbeitest. Mehr darüber erfährst du in diesem Artikel.

Benutzerdefiniertes CSS

So fügst du deinen Seiten benutzerdefiniertes CSS hinzu:

  1. Klicke oben rechts auf ‚Account‘.

  2. Klicke anschließend im Dropdown-Menü auf ‚My account‘.

  3. Navigiere auf der linken Seite im Tab ‚Webinars‘ zu ‚Branding‘.

  4. Füge deinen Seiten benutzerdefiniertes CSS hinzu, um ihnen ein eigenes grundlegendes Layout zu geben. Es wird auf alle Registrierungs- und Zuschauerseiten angewendet.

  5. Klicke auf ‚Update styles‘, um deine Änderungen zu speichern.

Benutzerdefiniertes CSS ist ab dem Enterprise-Plan verfügbar.

Hinweis! Benutzerdefiniertes CSS ist eingeschränkt. Du kannst zum Beispiel eine andere Schriftart verwenden, aber die Farben der Elemente werden von uns festgelegt. Benutzerdefinierte Schriftarten werden derzeit nicht auf Embed-Formulare angewendet.

Tipps, Tricks und Hinweise:

  • Teste deine Seiten immer, nachdem du eine Änderung vorgenommen hast.

  • Verwende die Funktion @import, um externe (https-)Quellen wie Schriftarten zu laden.

  • Lade keine Styles für interaktive Elemente wie den Videoplayer, damit Funktionen nicht beeinträchtigt werden.

  • Um herauszufinden, welche Elemente du auswählen musst, klicke in Chrome oder Firefox mit dem ‚Web inspector‘ oder der ‚Developer toolbar‘ auf Elemente, um deren Selektor (z. B. ".logo-balk") für benutzerdefiniertes CSS zu ermitteln.

  • Wir bereinigen CSS-Code und entfernen unerwünschten Code. Prüfe in diesem Fall deine Syntax und Schreibweise noch einmal.

// set all font elements to the font family 'Verdana'
* { font-family: 'Verdana' !important; }

// set all fonts on any page to 'Roboto' and fallback to sans-serif if it is not available
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* { font-family: 'Roboto', sans-serif !important; }
Hat dies deine Frage beantwortet?