Erweitertes Branding: Erstellen eines hervorgehobenen Themas

  • Aktualisiert

organizers_only.jpgimage6.png

image14.png

Wenn Sie die Farben Ihres Hopin-Veranstaltungsortes an Ihrem Branding ausrichten möchten, können Sie dieser Anleitung folgen, um ein hervorgehobenes Thema zu erstellen, ohne zu viel Zeit aufzuwenden. Um dieses Thema anzuwenden, müssen Sie mehrere Themenfarben ändern und benutzerdefinierte CSS-Codes hinzufügen.

Mit einem hervorgehobenen Thema können Sie die Hopin-Standardfarbe im gesamten Veranstaltungsort ersetzen. Außerdem können Sie Ihre Markenfarbe als Hintergrund für das Navigationsmenü auf der linken Seite und die Kopfzeile des Aktivitätsfensters auf der rechten Seite verwenden. Dies ist ein Beispiel dafür, wie es aussehen könnte:

image2.png

Ändern der Theme-Farben

Bevor Sie beginnen, müssen Sie die Hex-Codes für die Farben Ihrer Marke kennen. Wenn Sie die Hex-Codes nicht kennen, können Sie diese Online-Farbauswahl verwenden laden Sie Ihr Logo oder Bild hoch und es wird die Farbcodes für Sie generieren.

Ändern der Primärfarbe

Gehen Sie zu Ihrem Event-Dashboard > Setup > Thema. Sie sehen eine Kopfzeile namens "Color". Geben Sie im Feld "Primärfarbe" den HEX-Code (beginnend mit dem #-Symbol) Ihrer bevorzugten Markenfarbe ein.

Hinweis: Achten Sie darauf, Ihre Farbwerte hinzuzufügen; „#HEXCODE“ muss durch den HEX-Code Ihrer Hauptmarke ersetzt werden.

Vergessen Sie nicht, auf „Speichern“ zu klicken, um die Änderungen zu übernehmen.

image5.gif

Tipp: Überprüfen Sie den Kontrast für die besten Ergebnisse

Um sicherzustellen, dass Ihre Absätze und Überschriften lesbar sind, können Sie für dieses hervorgehobene Thema dieses Online-Tool verwenden, um den Kontrast zwischen der von Ihnen gewählten Farbe und dem weißen Hintergrund zu überprüfen. Bitte beachten Sie, dass es wichtig ist, AA-Standards für große Text- und Grafikobjekte und Benutzeroberflächenkomponenten zu erfüllen.

Weitere Informationen zur Lesbarkeit und Zugänglichkeit finden Sie in den Leitlinien für die Zugänglichkeit von Webinhalten (Web Content Accessibility Guidelines – WCAG).

Ändern der Themenfarben

Weitere Informationen zu Lesbarkeit und Barrierefreiheit finden Sie in den Richtlinien zur Barrierefreiheit von Webinhalten (WCAG).

Textbeschriftung

Farbwert

Hintergrund Navigationsleiste

Ihre Markenfarbe

Standardeinstellung für Symbol in der seitlichen Navigationsleiste

RGBA (255,255,255, 0.9)

Standardmäßige Einstellung für die Berührung des seitlichen Navigationsleisten-Symbols mit dem Mauszeiger

Weiß

Standardmäßiger Hintergrund Seitennavigationssymbol

Ihre Markenfarbe

Standardmäßige Einstellung für die Berührung des Symbolhintergrunds in der seitlichen Navigationsleiste mit dem Mauszeiger

RGBA (255,255,255, 0.3)

Standardeinstellung für den Text des Seitennavigationssymbols

RGBA (255,255,255, 0.9)

Standardmäßige Einstellung für die Berührung des Symboltextes in der seitlichen Navigationsleiste mit dem Mauszeiger

Weiß

Seitennavigationssymbol ist aktiv

Weiß

Aktiver Mauszeiger des Seitennavigationssymbols

Weiß

Aktiver Hintergrund des Seitennavigationssymbols

RGBA (255,255,255, 0.3)

So sehen die Theme-Farben aus, wenn Sie sie in Ihrem Event bearbeiten. Um Zeit bei der Suche nach den entsprechenden Textfeldern zu sparen, können Sie die Webseite mit command + F (für Mac) or Ctrl + F (für Windows) durchsuchen.

image1.png

Weitere Informationen darüber, auf welche Einstellungen sich diese beziehen, finden Sie in unserem Leitfaden Einführung in erweitertes Branding für mehr Übersicht. 

Benutzerdefinierten CSS-Code hinzufügen

Scrollen Sie als nächstes ganz nach unten und fügen Sie den folgenden Code in das Feld „Benutzerdefiniertes CSS“ ein.

image4.png

Hinweis: „#HEXCODE“ muss durch den Hex-Code Ihrer Hauptmarke, den Sie zuvor gefunden haben, ersetzt werden.

/*sidepanel background*/
.test-id-panel-row, .side-panel_panel-header-wrapper__3TdDN, .side-panel_tab__w71zF{background-color: #HEXCODE; color: white; fill: white;}
.side-panel_tab__w71zF.side-panel_active__1kHlI, .side-panel_tab__w71zF:hover {background-color: rgba(255,255,255, 0.3); color: white;}

/*Icon*/
.side-panel-header_buttons-container__uMiUR div button svg fill path, .direct-messages-icon-styles_icon__2iXXJ svg path, .sc-hOqqkJ svg path, .notification-bell-styles_notification__nUErE svg path, .side-panel_collapse__MPQE3 svg path, .side-panel_collapse__MPQE3 svg rect{fill: white!important;}
.side-panel-header_buttons-container__uMiUR .sc-jUEnpm svg path, .event-settings-menu-styles_menu-button___-SMk svg path, .side-panel_panel-tab-icon__jU487 svg path{fill: white!important;}
.side-panel-header_online__3P6Pr span svg path{fill: white;}
.side-panel-header_online__3P6Pr span {color: white;}
.side-panel-header_buttons-container__uMiUR button svg path {fill: white;}
.side-panel_collapse__MPQE3 {background-color: transparent;}

/*icon hover*/
.side-panel_collapse__MPQE3:hover, .direct-messages-icon-styles_icon__2iXXJ:hover, .notification-bell-styles_notification__nUErE:hover, .side-panel-header_buttons-container__uMiUR button:hover {background-color: rgba(255,255,255, 0.3);}
.user-menu_avatar-wrapper__2uuRv:hover button {background-color: transparent;}

/*waiting room link*/
.waiting-page_link-button__DonIl, [class*="waiting-page_link-button"]{color: #HEXCODE;}

/*Sidepanel collapsed*/
.side-panel_collapsed__3Rg5s .side-panel_tab__w71zF {background-color: #HEXCODE;}
.side-panel_collapsed__3Rg5s .side-panel_tab__w71zF:hover {background-color: rgba(255,255,255, 0.3);}

/*22-03*/

/*Reg page button correction*/
.event-page__header-event-info button {background-color: #HEXCODE !important; border-radius:0.2 rem; border: 0.0625rem solid #HEXCODE;}
.event-page__header-event-info button:hover {color: white; background-color: #303030 !important; border-radius:0.2 rem; border: 0.0625rem solid #303030;}

Wenn Sie für Ihre Veranstaltung eine andere helle und dunkle Farbe anstelle von reinem Weiß und reinem Schwarz verwenden, ersetzen Sie die Farbwerte „schwarz“ und „weiß“ durch Ihre Farbcodes.

Es kann einfacher sein, command + F (für Mac) or Ctrl + F (für Windows) zu verwenden, um die erforderlichen Werte zu finden und zu ersetzen.

Video-Tutorial

Sehen Sie sich dieses praktische Video-Tutorial zu allen Punkten, die wir oben beschrieben haben, an!

Hopin verändert sich ständig!

Die Hopin-Plattform wird häufig aktualisiert, sodass die vorgeschlagenen benutzerdefinierten CSS-Codes veraltet sein können. Wir tun unser Bestes, um diesen Leitfaden auf dem neuesten Stand zu halten. Wenn Sie jedoch nach dem Befolgen aller Schritte und dem Anwenden dieses Themas feststellen, dass einige Farben nicht funktionieren, zögern Sie bitte nicht, uns unter support@hopin.comzu kontaktieren.

Wir empfehlen auch, die Veranstaltung mindestens 1 Woche vor dem Starttermin noch einmal in der Vorschau zu sehen. Dies lässt genügend Zeit, um Fehler zu korrigieren und bei Bedarf die endgültigen Änderungen anzuwenden.

Andere Themen

Wenn Sie etwas anderes suchen, empfehlen wir Ihnen, sich unsere Leitfäden zu einfachen Themen -Events und Dark Theme -Veranstaltungen anzusehen.

Sie können uns gerne unter support@hopin.com kontaktieren, falls Sie eine bestimmte CSS-Anfrage haben oder Hilfe bei der Erstellung Ihrer Veranstaltung benötigen.

 

War dieser Beitrag hilfreich?