Auswahl und Anpassung des Themes meiner ZenVideo OTT-Website

ZenVideo OTT bietet derzeit eine verschiedene Website-Themes, die alle anpassbar sind. 

In diesem Artikel:

• Wie wähle oder wechsle ich das Theme meiner Website?
• Anpassung des Themes Ihrer Website

Wie wähle oder wechsle ich das Theme meiner Website?

Folgen Sie diesen Schritten, um ein Theme für Ihre Website auszuwählen:

1. Um ein Theme auszuwählen und zu bearbeiten, müssen Sie zunächst ein Abonnementprodukt mit erstellten Videos und Ihre Auszahlungsmethode verbunden haben.
2. Navigieren Sie im ZenVideo OTT-Adminbereich zu Distribution > Plattforms > Website settings. 
3. Auf dieser Seite der Website-Einstellungen sehen Sie das aktuell ausgewählte Theme. Klicken Sie auf Change Theme, um zur Themes-Seite zu gelangen.
4. Wählen Sie das gewünschte Theme aus. Eine Beschreibung dessen, was jedes Theme umfasst, wird neben dem Miniaturbild angezeigt. Sie können eine Vorschau anzeigen, indem Sie auf Live preview klicken.
5. Klicken Sie auf die Schaltfläche Select Theme, um es festzulegen.
6. Anschließend können Sie das ausgewählte Theme über die Schaltfläche Edit Theme bearbeiten.

Wenn Sie ein Theme auswählen und es bearbeiten und später zu einem anderen Theme wechseln, gehen alle zuvor vorgenommenen Änderungen verloren.

Wie kann ich das Theme meiner Website anpassen?

Damit die im Theme-Editor vorgenommenen Änderungen angezeigt werden, muss das Produkt veröffentlicht werden. Außerdem muss jeder Punkt in der Liste „Getting started“ (die Sie oben rechts im Adminbereich finden) erfüllt werden.

Nachdem Sie das Theme Ihrer Website ausgewählt haben, können Sie es mit dem Theme-Editor weiter anpassen. Navigieren Sie zu Manage > Theme Editor.

Auf der linken Seite befindet sich ein Panel, in dem Sie verschiedene Komponenten Ihrer Website bearbeiten können, während der Rest des Fensters eine Vorschau Ihrer Website darstellt. 

Sie können auf Exit klicken, um den Theme-Editor jederzeit zu verlassen, ohne Ihre Änderungen zu speichern. Wenn Sie auf Publish klicken, werden alle vorgenommenen Änderungen auf Ihre Live-Website übertragen.

Unter diesen Optionen befindet sich Preview, das einen Entwurf Ihrer Website öffnet, der alle vor der Veröffentlichung vorgenommenen Änderungen enthält. Sollten Sie mit den Änderungen nicht zufrieden sein, klicken Sie auf Revert, um Ihre Website auf die zuletzt veröffentlichte Version zurückzusetzen.

Unter diesen finden Sie verschiedene Einstellungen für unterschiedliche Bereiche Ihrer Website. Klicken Sie auf den Pfeil nach unten auf der rechten Seite jedes Panels, um es zu erweitern (klicken Sie erneut darauf, um das Panel zu schließen).

Viele der schriftlichen Einstellungen (d. h. Titel und Beschreibungen) werden ein Menü Add translations unter sich haben. Klicken Sie darauf und wählen Sie eine Sprache, um eine Übersetzung für diese Option hinzuzufügen. Jeder Benutzer, der mithilfe der Sprachauswahl unten auf Ihrer Website die entsprechende Sprache auswählt, sieht diesen Text anstelle des standardmäßigen Englischen. Stellen Sie sicher, dass Sie in Ihren Site-Einstellungen Übersetzungen aktiviert haben, damit dies funktioniert.

Site Settings

Diese Einstellungen sind normalerweise das, was Nutzer sehen, wenn sie in Suchmaschinen wie Google nach Ihrer Website suchen.

• Site title – Der Titel wird in Suchmaschinen und oben im Browserfenster angezeigt, wenn jemand Ihre Website besucht.
• Site description – Die Beschreibung wird angezeigt, wenn Ihre Website in den Suchergebnissen erscheint.
• Facebook page– Ein Link zu einer Facebook-Seite kann eingefügt werden, wenn Ihre Website in den Suchergebnissen erscheint.
• Twitter username– Ein Twitter-Profillink kann eingefügt werden, wenn Ihre Website in den Suchergebnissen erscheint.
• Primary site color – Geben Sie die Farbe Ihrer Marke an, die für Buttons und Player-Steuerungen verwendet werden soll.

Global Options

• Browser tab icon (square) – Dies ist das Symbol, das im Browser-Tab neben dem Titel Ihrer Website angezeigt wird.
• Bookmark icon (square) – Dies ist das Symbol, das auf Mobilgeräten erscheint, wenn jemand Ihre Website auf dem Startbildschirm seines Geräts speichert.
  • ⚠️Hinweis: Die akzeptierten Dateiformate für die beiden oben genannten Symbole sind .jpeg, .png, und .gif; .ico Dateien werden derzeit nicht unterstützt.
• Primary button colors – Dies ist die Farbe, die verschiedene Schaltflächen auf Ihrer Website haben werden, z. B. „Kostenloses Probeabo starten“ oder „Mit dem Anschauen beginnen“.
• Nav background color – Dies bezieht sich auf die Farbe der Navigationsleiste, die sich am oberen Rand Ihrer Website befindet.
• Nav text color – Die Farbe des Textes in Ihrer oberen Navigationsleiste, die auf andere Bereiche Ihrer Website verweist (z. B. „Durchsuchen“, „Foren“, „Suche“) sowie auf andere Links, die Sie hinzufügen können (siehe unten).
• Nav logo image – Laden Sie ein Bild Ihres Logos hoch, das oben links auf Ihrer Website erscheinen soll. Wir unterstützen PNG-Dateien mit transparenten Hintergründen. Die Website passt die Größe des Bildes automatisch an den zur Verfügung gestellten Platz an; horizontale Bilder funktionieren am besten. 
• Nav background image – Anstelle einer Farbe können Sie ein Bild hochladen, das Ihr Hauptnavigationsmenü ersetzt. JPG-, PNG- und GIF-Dateien werden akzeptiert. Standardmäßig formatieren wir dieses Bild so, dass es den gesamten Navigationsbereich ausfüllt. 
• Tile background image – Wenn Sie möchten, dass Ihr Navigationshintergrundbild wiederholt gekachelt wird, wählen Sie diese Option. 
• Show gifting link – Beinhaltet einen Link, um ein Abonnement direkt auf der Startseite zu verschenken.
• Add nav link – Wenn Sie Ihrer oberen Navigation benutzerdefinierte URLs hinzufügen möchten, wie z. B. einen Onlineshop oder Ihre Social-Media-Seiten, klicken Sie auf + Add und geben Sie den Titel (der in der Navigation erscheint) und die vollständige URL ein, um darauf zu verlinken (einschließlich „http://“ oder „https://“, je nachdem, welches Protokoll Ihre Website verwendet). Sie können so viele Einträge hinzufügen, wie Sie möchten, aber bedenken Sie, dass das Menü bei mehr als drei Einträgen unübersichtlich wird. 

• *NEU* Customize Font – damit können Sie aus einer Liste von über 100 der beliebtesten Google-Schriftarten auswählen, um sie auf Ihrer Website anzuwenden.

Die verbleibenden Anpassungsoptionen im Theme-Editor variieren je nach dem von Ihnen gewählten Theme. Die Themes, in denen jeder Abschnitt verfügbar ist, sind in Klammern angegeben.

Site Banner

Hier können Sie ein benutzerdefiniertes Banner erstellen, das auf allen Seiten Ihrer Website angezeigt wird. Damit können Sie wichtige Website-Updates hervorheben, Feiertagsaktionen kennzeichnen und mehr! 

In diesem Abschnitt können Sie Folgendes tun:

• Ein- und Ausschalten des Banners
• Einstellen eines Überschrifttextes und eines Untertextes
• Optionales Einstellen einer URL, auf die das gesamte Banner verlinkt wird
• Auswählen spezifischer Farben für den Bannerhintergrund

💡Tipp: Das Banner kann zusätzlich mit benutzerdefiniertem CSS gestaltet werden. Die Klassen für die Bannerelemente sind:

.custom-banner--container, .custom-banner--header, .custom-banner--subtext

Optionen durchsuchen (Bullion, Moonstone, Obsidian, Onyx, Topaz)

Hier können Sie festlegen, ob automatisch erstellte Kategorien für Ihre Film- und Serienkollektionen angezeigt werden sollen. Sie können diese hier sowie in Ihren allgemeinen Website-Einstellungen ein- und ausschalten.

⚠️Hinweis: Beim Moonstone-Theme wird der Inhalt auf der Startseite unter dem Tab Content angezeigt, wo nur Ihre Sammlungen präsentiert werden.

Hero Promotion (Bullion, Obsidian, Onyx, Topaz)

Dies wird den oberen Bereich Ihrer Website anpassen und kann Elemente wie ein Hintergrundbild, einen Titel, eine Beschreibung und Preise enthalten.

Hero options (Moonstone)

Ähnlich wie bei der Hero Promotion für andere Themes, mit mehr Optionen für den Hintergrund Ihrer Homepage und weniger Text. 

⚠️Hinweis: Dieses Theme verwendet das Vorschaubild Ihres Abonnementprodukts als Hauptbild, das auf Ihrer Startseite erscheint. Um dies zu ändern, müssen Sie die Miniaturansicht Ihres Produkts ändern.

More info (Onyx)

Eine Beschreibung des von Ihnen angebotenen Inhalts, mit einem optionalen Feld zur Erfassung von E-Mail-Adressen.

Carousel tab 1, 2, 3 (Topaz)

Die drei (3) Karussell-Tabs enthalten Werbeinhalte für Ihre Website, z. B. welche Art von Inhalten die Betrachter sehen werden. Alle Tabs enthalten eine Schaltfläche, die zu Ihrer Checkout-Seite verlinkt; Karussell-Tab 3 bietet Ihnen zusätzlich die Möglichkeit, Geräte anzuzeigen (z. B. „Überall ansehen“). Bei allen können Sie den Text, das Hintergrundbild und das Farb-Overlay anpassen.

Mailing list (Obsidian, Topaz)

Wählen Sie, ob eine Anmeldung zur Mailingliste angezeigt werden soll, und passen Sie den angezeigten Text an.

Promotions (Obsidian)

Schalten Sie einen Werbebereich auf Ihrer Homepage ein und aus. Hier können Sie beschreiben, was Ihr Produkt bietet und warum man es abonnieren sollte. Sie können so viele hinzufügen, wie Sie möchten. 

Content sections 1, 2, 3, 4, 5 (Onyx)

Fügen Sie der Startseite Ihrer Website bis zu fünf (5) Werbeabschnitte hinzu, die ein Bild, einen Titel, eine Beschreibung oder eine Schaltfläche zu einem bestimmten Teil Ihrer Website (z. B. „/browse“) enthalten können. Auf diese Weise erhalten Ihre Besucher beim Herunterscrollen eine Unternavigation, die den Kurztitel des jeweiligen Bereichs enthält.

Schedule (Obsidian)

Sie können wählen, ob Sie einen Zeitplan für Ihre Inhalte anzeigen möchten, z. B. wann neue Episoden veröffentlicht werden.

Content preview (Bullion, Obsidian)

Zeigen Sie einige Ihrer Videos auf der Startseite Ihrer Website an. Sie können dann wählen, ob Sie Video-Miniaturansichten, Sammel-Miniaturansichten oder benutzerdefinierte Bilder und Links anzeigen möchten. Die Miniaturansichten von Sammlungen führen zu einer Vorschauseite des Inhalts der Sammlung, und Besucher der Website können sich den dazugehörigen Trailer ansehen, falls verfügbar. Bei benutzerdefinierten Bildern können Sie manuell einen Link hinzufügen, der mit einem bestimmten Bild verknüpft wird. Video-Miniaturansichten werden nirgendwo verlinkt.

Devices (Bullion, Obsidian, Onyx)

Wenn Sie Marken-Apps haben, möchten Sie vielleicht damit werben, dass Ihre Zuschauenden von jedem Gerät aus zusehen können. Dieser Bereich hilft Ihnen, dies mit einem benutzerdefinierten Titel und einer Beschreibung zu bewerben. Sie können dann für jedes angezeigte Gerät (TV, Tablet, Telefon, Laptop) individuelle Miniaturbilder hochladen, wenn Sie diesen Bereich anzeigen lassen. Wenn Sie keine Miniaturansicht hochladen, wird standardmäßig das Hero-Hintergrundbild auf Ihrer Website verwendet. (💡Tipp: Das Topaz-Theme enthält dies im Abschnitt „Carousel tab 3“)

Purchase products (Onyx, Topaz)

Ihre TVOD-Produkte, sofern Sie welche haben, werden automatisch in diesem Bereich angezeigt. Passen Sie den Titel und die Farben des Bereichs an, oder blenden Sie ihn aus.

Footer (Obsidian)

Ein abschließender Header (z. B. „Jetzt abonnieren!“) und eine Beschreibungszeile (z. B. „Sind Sie bereit, loszulegen?“) am unteren Rand Ihrer Homepage.

Contact (Bullion)

Ein zusätzlicher Bereich zur Aufnahme von Kontaktinformationen (z. B. „Haben Sie Fragen? Kontaktieren Sie [e-mail]“) mit der Möglichkeit, die Hintergrundfarbe des Bereichs anzupassen und ein Bild hinzuzufügen.

Footer links (Bullion, Moonstone, Obsidian, Onyx, Topaz)

Fügen Sie zusätzlich zu den Standardlinks, die ganz unten auf der Seite erscheinen, benutzerdefinierte Links zu beliebigen Stellen im Web hinzu (Foren, Hilfe, Nutzungsbedingungen, Datenschutz, Cookies, Abmelden).

⚠️Note: Achten Sie darauf, die vollständige URL zu verwenden, einschließlich „http://“ oder „https://“, je nachdem, welches Protokoll Ihre Website als Präfixe für Ihre Links verwendet, um sicherzustellen, dass sie angezeigt werden. Wenn Sie das Protokoll nicht angeben, wird der Link nicht funktionieren.

Custom styles (Bullion, Moonstone, Obsidian, Onyx, Topaz)

Sie können benutzerdefiniertes CSS auf Ihre Website in das Textfeld hier anwenden.