Anpassen des Brandings für Ihre Vanity-URL

Sobald Sie eine genehmigte Vanity-URL haben, können Sie diese mit dem Branding Ihrer Organisation anpassen. Lesen Sie unsere Branding-Richtlinien, bevor Sie Ihre Seite mit dem Zoom-Logo oder anderen Marketingmaterialien anpassen.

Alle Änderungen am Branding gelten nur für den Zugriff auf das Zoom-Webportal über Ihre Vanity-URL (z. B. IhreOrganisation.zoom.us). Das Branding wird beim Zugriff auf das Webportal von zoom.us nicht angewendet.

Hinweise:

• Brandingeinstellungen sollten Sie nur anpassen, wenn Sie Erfahrung im Webdesign (HTML und CSS) haben. Ziehen Sie einen Web-Developer zurate, wenn Sie Probleme mit Ihrem HTML/CSS haben.
• Javascript wird derzeit für benutzerdefiniertes Branding nicht unterstützt.
• Kontoinhaber und Administratoren können für Unterkonten die Brandingeinstellungen des übergeordneten Kontos erzwingen. Diese Unterkonten können die Brandingeinstellungen für das eigene Konto nicht ändern.

In diesem Artikel: 

• Zugriff auf Brandingeinstellungen
• Hochladen von Bildern
• Anpassen der Zielseite
  • Hintergrundbild
  • Textfarbe für Inhalte
  • Seitentitel
  • Hintergrundfarbe für Schaltflächen
  • Hintergrundfarbe für Schaltflächen beim Hovern
  • Farbe für Schaltflächentext
  • Logo
• Anpassen von Kopfzeile, Fußzeile und Seitenleiste des Webportals
• Verwenden von benutzerdefiniertem CSS
• Anpassen von E-Mail-Vorlagen
• Anpassen von E-Mail-Vorlagen für Meeting-Einladungen

Voraussetzungen für das Anpassen der Brandingeinstellungen für Ihre Vanity-URL

• Business-, Bildungs- oder API-Abo
• eine genehmigte Vanity-URL, die unseren Richtlinien entspricht (z. B. success.zoom.us)
• ein Admin, der mit HTML/CSS vertraut ist

Zugriff auf Brandingeinstellungen

1. Melden Sie sich im Zoom Web Portal an.
2. Klicken Sie im Navigationsmenü auf Erweitert und dann auf Branding.

Hochladen von Bildern

Bevor Sie das Branding anpassen, laden Sie die Bilder hoch, die Sie verwenden möchten, wie das Hintergrundbild und das Logo Ihrer Organisation.

1. Melden Sie sich im Zoom Web Portal an.
2. Klicken Sie im Navigationsmenü auf Erweitert und dann auf Branding.
3. Klicken Sie auf die Registerkarte Bilder.
4. Suchen Sie in Ihren Computer nach dem Bild, das Sie hochladen möchten, und wählen Sie es aus.
5. Sobald die Dateien hochgeladen sind, werden sie in der Liste angezeigt. Die Bild-URL wird in der Spalte Pfad angezeigt.
   

Anpassen der Zielseite

Die Zielseite ist die Hauptseite für die Vanity-URL Ihrer Organisation. Standardmäßig sieht die Zielseite wie folgt aus:

So passen Sie das HTML und Inline-CSS der Zielseite an:

1. Melden Sie sich im Zoom Web Portal an.
2. Klicken Sie im Navigationsmenü auf Erweitert und dann auf Branding.
3. Klicken Sie auf die Registerkarte Zielseite.
4. Folgen Sie den Abschnitten unten, um grundlegende Änderungen an der Zielseite vorzunehmen, damit sie dem Branding Ihrer Organisation entspricht.
   Hinweis: Um die unten aufgeführten Attribute schneller zu finden, drücken Sie Strg + F und geben Sie den Attributnamen ein. Folgen Sie dann den Anweisungen, um das jeweilige Attribut zu aktualisieren.

Hintergrundbild

Attributname: background-image

Um das Hintergrundbild zu ändern, aktualisieren Sie die URL zwischen den Anführungszeichen mit der URL des hochgeladenen Hintergrundbildes. Um die URL des Hintergrundbildes zu finden, gehen Sie auf die Registerkarte Bilder und kopieren Sie den Link in der Spalte Pfad.

Beispiel:

background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");

Textfarbe für Inhalte

Um die Textfarbe des Inhalts der Zielseite (ohne die Schaltflächen) zu ändern, fügen Sie das Attribut color innerhalb von .content-body { } hinzu. Verwenden Sie eine hellere Farbe, wenn Ihr Hintergrund dunkel ist.

Beispiel:

.content-body {
 display: table-cell;
 vertical-align: middle;
 color: white;
}

Seitentitel

Attributname: title

Der Seitentitel ändert das, was in einer Browser-Registerkarte als Seitenname angezeigt wird. Geben Sie Ihren eigenen Seitentitel zwischen <title> und </title> ein.

Beispiel:

<title>Videokonferenzen, Webkonferenzen, Online-Meetings, Bildschirmfreigabe</title> <!--customize landing page title-->

 

Hintergrundfarbe für Schaltflächen

Attributname: background-color (Suchen Sie nach dem Attribut background-color, das sich verschachtelt unter .button befindet.)

Um die Hintergrundfarbe der drei Schaltflächen (Teilnehmen, Durchführen und Anmelden) zu ändern, müssen Sie die Farben mit Hilfe von Farb-Hex-Werten angeben, z. B. steht #FFFFFF für Weiß. Verwenden Sie Colorpicker, um Farben anhand von Hex-Werten zu identifizieren und auszuwählen.

.button {
 width: 80px;
 background-color: #000000; /*customize button color */
 border-color: #2D8CFF;
 padding: 12px 20px;
 display: inline-block;
 text-align: center;
 margin: 10px 0;
 transition: .3s ease;
}

Hintergrundfarbe für Schaltflächen beim Hovern

Attributname: background-color (verschachtelt unter .button.hover)

Um die Farbe der Schaltfläche zu ändern, wenn Ihr Mauszeiger darüber schwebt, müssen Sie die Farben mit Hilfe von Farb-Hex-Werten angeben, z. B. steht #FFFFFF für Weiß. Verwenden Sie Colorpicker, um Farben anhand von Hex-Werten zu identifizieren und auszuwählen.

Beispiel:

.button:hover {
  background-color: #eb9834; /*customize button color */
 }

Farbe für Schaltflächentext

Attribut: color (verschachtelt unter .btn-text)

Ändern Sie die Farbe des Textes in der Schaltfläche. Wenn Sie eine dunklere Farbe als Schaltflächenhintergrund verwendet haben, setzen Sie das Attribut auf white. Wenn Sie eine hellere Hintergrundfarbe haben, setzen Sie das Attribut auf black.  Sie können auch einen benutzerdefinierten Hex-Wert angeben. Verwenden Sie Colorpicker, um Farben anhand von Hex-Werten zu identifizieren und auszuwählen.

Beispiel:

.btn-text {
 color: #008BFF; /*customize button font color */
 font-size: 17px;
}

Logo

Ändern Sie das Logo, das über den drei Schaltflächen erscheint.Um die URL des Logos zu finden, gehen Sie auf die Registerkarte Bilder und kopieren Sie den Link in der Spalte Pfad.

Hinweis: Standardmäßig wird die Größe des Logos auf 140 px mal 31,5 px angepasst. Dadurch wird Ihr individuelles Logo höchstwahrscheinlich verzerrt. Um dies zu beheben, entfernen Sie class="zoom-logo" nach der Bild-URL im HTML der Zielseite.

Beispiel:

<div class="row">
  <img src="https://zoom.us/account/branding/p/1c7dfaf5-2646-4224-92e0-5abef82036b1.png" alt="Zoom Logo"> <!--customize company logo-->
<div class="row">

Anpassen von Kopfzeile, Fußzeile und Seitenleiste des Webportals

Sie können die Kopf- und Fußzeile anpassen, die im gesamten Webportal erscheint, wenn von Ihrer Vanity-URL aus darauf zugegriffen wird.

Hinweis: Diese Einstellungen haben keinen Einfluss auf Ihre Zielseite.

1. Melden Sie sich im Zoom Web Portal an.
2. Klicken Sie im Navigationsmenü auf Erweitert und dann auf Branding.
3. Klicken Sie auf die Registerkarte Kopfzeile/Fußzeile/Seitenleiste.
4. Führen Sie die in den folgenden Abschnitten genannten Schritte durch:

• Logo-URL: Anpassen des Kopfzeilenlogos. Fügen Sie die URL eines Bildes ein, das Sie hochgeladen haben. Sie können eine externe Bild-URL einfügen, wenn Sie Ihr Bild extern speichern möchten.
• HTML der Kopfleiste: Anpassen der schwebenden Kopfleiste.
• HTML der Fußzeile: Sie können die Fußzeile mit Zoom-Informationen und Links aus Ihrer Vanity-URL entfernen. Um die Fußzeile zu entfernen, entfernen Sie den gesamten Code aus dem Abschnitt „Fußzeile“ und ersetzen Sie ihn durch den folgenden.

<div id="footer" class="container">
</div>

•  Häufig verwendete Links in der linken Seitenleiste anzeigen: Ändern Sie, welche Links im Navigationsmenü auf der linken Seite angezeigt werden.

Verwenden von benutzerdefiniertem CSS

Sie können das für das Webportal verwendete CSS anpassen.

Hinweis: Das benutzerdefinierte CSS gilt nicht für die Zielseite. Sie können das Inline-CSS für Ihre Zielseite anpassen.

1. Melden Sie sich im Zoom Web Portal an.
2. Klicken Sie im Navigationsmenü auf Erweitert und dann auf Branding.
3. Klicken Sie auf die Registerkarte Benutzerdefiniertes CSS.
4. Klicken Sie auf Bearbeiten für die CSS-Auswahl, die Sie anpassen möchten.
5. Verwenden Sie das benutzerdefinierte CSS, um andere CSS-Selektoren zu definieren. 

Anpassen von E-Mail-Vorlagen

Sie können E-Mail-Vorlagen für allgemeine administrative E-Mails anpassen, z. B. für E-Mails, die gesendet werden, wenn ein Benutzer sein Passwort zurücksetzt oder sich anmeldet.

1. Melden Sie sich im Zoom Web Portal an.
2. Klicken Sie im Navigationsmenü auf Erweitert und dann auf Branding.
3. Klicken Sie auf die Registerkarte E-Mails.
4. Klicken Sie auf Bearbeiten neben der Vorlage, die Sie bearbeiten möchten.
   Hinweis: Sie können benutzerdefinierte E-Mail-Variablen in der Vorlage verwenden.

Anpassen von E-Mail-Vorlagen für Meeting-Einladungen

Sie können die E-Mail-Vorlagen für Meeting-Einladungen auch auf Konto- oder Gruppenebene anpassen.

Hinweis: Wenn Sie nach dem 21. August 2021 ein neues Zoom Konto eröffnet haben oder für Ihr Konto die Neue Admin-Erfahrung aktiviert ist, wurde die Seite Gruppenmanagement umbenannt zu Gruppen.

1. Melden Sie sich im Zoom Web Portal an.
2. Rufen Sie im Navigationsmenü die Konto- oder Gruppeneinstellungen auf:
   • Konto: Klicken Sie auf Kontoverwaltung und dann auf Kontoeinstellungen.
   • Gruppe: Klicken Sie auf Benutzerverwaltung und dann auf Gruppenverwaltung. Klicken Sie auf den Namen der Gruppe oder erstellen Sie eine neue Benutzergruppe.
3. Klicken Sie auf die Registerkarte Meeting.
4. Klicken Sie im Abschnitt Invitation Email Branding (Einladungs-E-Mail-Branding) in der E-Mail-Vorlage, die Sie aktualisieren möchten, auf Edit (Bearbeiten). Erfahren Sie mehr über die E-Mail-Vorlage „Meeting planen“.
5. Klicken Sie auf Änderungen übernehmen dann auf Fertig.