Zum Hauptinhalt gehen

Anpassungen auf Vimeo OTT

CSS ist eine Codierungssprache, mit der Sie Stile hinzufügen können, um das Erscheinungsbild Ihrer Website individuell anzupassen. Wenn Sie jemanden in Ihrem Team haben, der sich mit Code auskennt, können Sie Ihrer Vimeo OTT-Website im Bereich „Benutzerdefinierte Stile“ in der Seitenleiste Ihres Theme-Editors CSS hinzufügen, um das Erscheinungsbild Ihrer Vimeo OTT-Website anzupassen.  

Wichtig zu beachten ist, dass benutzerdefiniertes CSS nicht von unserem Support abgedeckt wird. Dies bedeutet, dass wir Ihnen bei der Einrichtung oder Fehlerbehebung nicht weiterhelfen können und die volle Funktionalität nicht garantieren können, wenn Sie den Code implementieren. Dies umfasst die Kompatibilität mit unseren Website-Themes, insbesondere die Darstellung auf mobilen Geräten. Es liegt in Ihrer Verantwortung, Ihr CSS zu pflegen, falls es durch zukünftige Aktualisierungen unserer Plattform beeinträchtigt werden sollte. 

Bei Fragen zu Supportoptionen für Enterprise-Kunden wenden Sie sich bitte an unser Vertriebsteam. Wenn Sie bereits Enterprise-Kunde sind, wenden Sie sich bitte an Ihre Kundenbetreuende.

In diesem Artikel:

Wie verwende ich CSS?

Wenn Sie noch keine Erfahrung mit CSS haben, aber es nutzen möchten, um visuelle Anpassungen an Ihrer OTT-Website vorzunehmen, haben wir einige hilfreiche Ressourcen für Sie zusammengestellt.

CSS-Selektoren definieren die Elemente, auf die Ihre CSS-Regeln angewendet werden. Sie müssen Ihre CSS-Selektoren identifizieren, um Ihre Vimeo OTT-Website anzupassen. 

Eine vollständige Liste der in CSS verfügbaren Selektoren finden Sie in dieser W3Schools-Ressource.

Um CSS auf Ihre Vimeo OTT-Website anzuwenden, melden Sie sich an und navigieren Sie dann zu Ihrem Theme-Editor, indem Sie im Menü „Einstellungen“ die Option „Website“ auswählen. Dort angekommen, klicken Sie in der linken Seitenleiste auf „Themes“, dann auf „Design auswählen“ und anschließend auf „Design bearbeiten“.

Sobald Sie sich im Bearbeiten-Modus befinden, scrollen Sie in der linken Seitenleiste zum Abschnitt „benutzerdefinierte Stile“ und fügen Sie Ihr CSS hinzu. Vergessen Sie nicht, Ihre Arbeit zu speichern. 

⚠️Hinweis: Wenn Sie das Design Ihrer Website auf eine neue Vorlage ändern, werden Ihre CSS-Einstellungen nicht gespeichert.

Um zu sehen, wie wir Elemente identifizieren und spezifisches CSS in Vimeo OTT anwenden, schauen Sie sich dieses Video an:

 

Gängige Anpassungen

Bitte beachten Sie, dass Sie den Selektor für jede dieser Regeln durch einen Selektor von Ihrer Website ersetzen sollten.

Größenänderungstasten

Um die Größe eines Elements zu ändern, versuchen Sie es mit einer „width“-Regel.

Aktualisierung der Größe der Trailer-Schaltfläche:

basic.png

trailerbuttonsize.png

Dies ist das CSS:

.secondary-actions a.btn-transparent {
 width: 150%;
}

Schriftgröße ändern

Um Schriftarten zu skalieren, verwenden Sie eine schriftartspezifische „Schriftgrößenregel“. Diese Regel akzeptiert verschiedene Einheiten. Informationen zu den jeweiligen Zwecken finden Sie hier.

Vergrößern der Schriftgröße des Titels:

basic__1_.png

increasetitle.png

Dies ist das CSS:

h1.gigantic.uppercase {
 font-size: 5em;
}

Hinzufügen von Farben zu einem Element

Um einem Element eine Farbe zuzuweisen, verwenden Sie eine „Farb“-Regel. Sie können verschiedene Formate für den Wert verwenden, über die Sie hier mehr erfahren können.

Den Text der Schaltfläche „Ansehen starten“ blau färben:

basic__2_.png

bluebuttontext.png

Dies ist das CSS:

.primary-actions a.btn-brandon {
 color: blue;
}


Farben hinzufügen - Hintergrund

Um eine Hintergrundfarbe hinzuzufügen, verwenden Sie eine „background-color“-Regel.

Die Hintergrundfarbe des Buttons auf Rot ändern:

basic__3_.png

redbutton.png

 

Dies ist das CSS:

.primary-actions a.btn-brandon {
 color: blue;
}

Elemente verbergen

Um etwas auszublenden, das standardmäßig hinzugefügt wurde, verwenden Sie eine „Anzeige“-Regel.

Entfernen beider Heldenbuttons:

basic__4_.png

removebuttons.png

Dies ist das CSS:

.row-actions {
 display: none;
}


Benutzerdefinierte Schriftarten

Im Theme-Editor können Sie aus einer Liste benutzerdefinierter Schriftarten (darunter ca. 100 der beliebtesten Google-Schriftarten) auswählen und auf Ihrer gesamten Website anwenden. Sollte die gewünschte Schriftart nicht in dieser Liste enthalten sein, empfehlen wir Ihnen, eine andere verfügbare Schriftart von Google Fontszu wählen. Wählen Sie zunächst Schriftart und -stil aus. Google stellt Ihnen anschließend Anweisungen zum Hinzufügen zu Ihrer Website bereit. Klicken Sieauf „Importieren“, um eine CSS-Regel zum Einbinden der Schriftartstile in Ihre Seite zu erhalten. Hier ist ein Beispiel:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

Nach dem Import fügen Sie eine CSS-Regel hinzu, um die Schriftart auf Ihrer Seite zu verwenden. Hier ist ein Beispiel:

h1,h2,h3,h4,h5,h6,p,span,div,a,strong, .site-font-primary-color {
 Schriftfamilie: 'Roboto', serifenlos!important;
}
Bitte beachten Sie: Die Verwendung eines universellen Selektors (*) sollte vermieden werden. Für optimale Ergebnisse empfehlen wir, jeden Ihrer Selektoren aufzulisten. 

Seitenspezifische Stile

Obwohl die Seiten Ihrer OTT-Website dieselbe Basisvorlage verwenden, können Sie auch Stile für bestimmte Seitentypen hinzufügen. Sie können beispielsweise einen übergeordneten Selektor zu Ihrem Selektor hinzufügen, um eine Regel ausschließlich auf Sammlungsseiten zu beschränken. 

Auf Ihren OTT-Seiten hat das <body> -Element eine Klasse, die speziell für diese Seite gilt. Die Sammlungsseiten heißen „.collections“. Fügen Sie daher „body.collections“ in Ihre Regel ein, bevor Sie Ihren Selektor verwenden, um die Suche auf bestimmte Sammlungsseiten zu beschränken. Hier ist ein Beispiel:

body.collections .benutzerdefiniert-btn-action-share {
 display: none;
}

Anpassungen für verschiedene Browsergrößen

Wir können die volle Funktionalität in allen Browsern nicht garantieren, wenn Sie den Code implementieren. Wir könnenIhnen jedoch einen Vorschlag zur Anpassung der Stile in verschiedenen Browsern machen: Sie können Ihre CSS-Regeln in eine Media Query einbetten. Hier ist ein Beispiel:

@media only screen and (max-width: 640px) {
 .hero-short-desc {
 display: none;
 }
}

Was sich nicht ändern lässt

CSS ist zwar ein großartiges Werkzeug zum Gestalten, aber nicht alle Komponenten lassen sich modifizieren. Einige Komponenten der Website können nicht mit CSS gestaltet werden, darunter die Checkout-Seite und der Video-Player.

Vermeiden Sie die Verwendung von Universalselektoren.

Universelle Selektoren können Probleme mit bestimmten Formularen und Seiten verursachen, die auf Ihrer Website verwendet werden. Sie werden durch das *-Symbol gekennzeichnet. Wir empfehlen, alle Selektoren aufzulisten, die verwendet werden sollen.
VERMEIDEN SIE FOLGENDES BEISPIEL:
* {
 key: value
}
Verwenden Sie stattdessen Folgendes:
h1,h2,h3 {
 key: value
}
 

Verwandte Beiträge