DokumentationCommercePage Builder

Medien - Video

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Benutzende

Verwenden Sie den Inhaltstyp Video , um ein auf YouTube oder Vimeo gehostetes Video zur Page Builder Bühne hinzuzufügen. Es ist einfach, Videos in eine Seite oder einen Block oder in Produkt- und Kategoriebeschreibungen einzubetten.

Video auf der Storefront-Startseite

NOTE
Wenn Sie wesentliche Änderungen am Inhalt von Page Builder vornehmen, wird empfohlen, die Lebensdauer der Admin-Sitzung zu erhöhen, um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Video-Toolbox

Video-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Verschiebt das Video an eine andere Position auf der Bühne.
(Titel)
Video
Identifiziert den aktuellen Inhalts-Container als Video. Bewegen Sie den Mauszeiger über den Bildcontainer, um die Toolbox anzuzeigen.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite "Edit Video", auf der Sie die Eigenschaften des Videos und Containers ändern können.
Ausblenden
Symbol zum Ausblenden {width="25"}
Blendet das aktuelle Video aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt das ausgeblendete Video an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert das Video.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht das Video aus der Bühne.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.

Video hinzufügen

  1. Bevor Sie beginnen, navigieren Sie zum Video YouTube oder Vimeo , das Sie einbetten möchten, und kopieren Sie den Link.

    Alternativ können Sie auch einen direkten Link in eine gültige Videodatei kopieren. Gültige Links finden Sie unter Grundlegende Videoeinstellungen .

  2. Kehren Sie im Commerce Admin zum Arbeitsbereich Page Builder zurück, in den Sie das Video einfügen möchten.

  3. Erweitern Sie im Bedienfeld Page Builder den Wert Media und ziehen Sie einen Platzhalter Video auf die Bühne.

    Ziehen eines Videoplatzhalters auf die Bühne {width="600" modal="regular"}

  4. Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

  5. Fügen Sie für "Video URL"die URL des kopierten Videos ein.

    Die URL des in diesem Beispiel verwendeten Page Builder Videos lautet: https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. Geben Sie die maximale Breite in Pixel ein, um die Maximum Width des Videos zu begrenzen.

    Wenn leer, ist das Video so breit wie vom Container erlaubt, sodass Ränder und Abstände möglich sind.

  7. Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Videoeinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

  2. Ändern Sie die Einstellungen in den folgenden Abschnitten:

  3. Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Grundlegende Videoeinstellungen

  1. Um das aktuelle Video zu ändern, aktualisieren Sie die Video URL.

    Geben Sie eine gültige Video-URL ein. Gültige Video-URLs können Links zu folgenden Elementen sein:

    • YouTube-Videos: https://youtu.be/CoDhMRUUjeI
    • Video-Videos: https://vimeo.com/190156113
    • Gültige Videodateien (.mp4 wird empfohlen): https://myvideos.com/spiral.mp4

  2. Um die für das Video zulässige Breite in der Storefront zu ändern, geben Sie den neuen Wert "Maximum Width"in Pixel ein.

    Wenn das Video leer ist, wird die gesamte Breite des Containers erweitert, wobei Ränder und Abstand weniger berücksichtigt werden.

  3. Um das Video nach dem Laden der Seite automatisch zu starten, setzen Sie Autoplay auf Yes.

    Wenn "Autoplay"auf "Yes"festgelegt ist, wird das Video bei der Wiedergabe gemäß der Richtlinie stummgeschaltet. Selbst mit dieser Einstellung können Mobilgeräte Ihre Videos jedoch nicht automatisch abspielen. Weitere Informationen zu diesen Richtlinien finden Sie in den folgenden Entwicklerressourcen:

    Wenn "Autoplay"auf "No"festgelegt ist, wird das Video nur bei Benutzeranforderungen wiedergegeben.

Advanced

  1. Um die horizontale Positionierung des Videos innerhalb des Containers zu steuern, wählen Sie einen Alignment aus:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Beschreibung
    Default Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist.
    Left Richtet den Inhalt am linken Rand des Video-Containers aus, wobei der angegebene Abstand berücksichtigt wird.
    Center Richtet den Inhalt in der Mitte des Video-Containers aus, wobei der angegebene Abstand berücksichtigt wird.
    Right Richtet den Inhalt am rechten Rand des Video-Containers aus, wobei der angegebene Abstand berücksichtigt wird.

  • Legen Sie den Border -Stil fest, der auf alle vier Seiten des Video-Containers angewendet wird:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Beschreibung
    Default Wendet den standardmäßigen Randstil an, der vom zugehörigen Stylesheet angegeben wird.
    None liefert keine sichtbare Anzeige der Containergrenzen.
    Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
    Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
    Solid Der Container-Rahmen wird als durchgehende Linie angezeigt.
    Double Der Container-Rahmen wird als doppelte Linie angezeigt.
    Groove Der Container-Rahmen wird als Rillenlinie angezeigt.
    Ridge Der Container-Rahmen wird als gekürzte Linie angezeigt.
    Inset Der Container-Rahmen wird als Inset-Zeile angezeigt.
    Outset Der Container-Rahmen wird als Ausgangspunkt angezeigt.

  • Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

    Rahmenfarbe {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Border Color Geben Sie die Farbe an, indem Sie ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
    Border Width Geben Sie die Anzahl Pixel für die Rahmenlinienbreite an.
    Border Radius Geben Sie die Anzahl der Pixel an, um die die Größe des Radius definiert wird, mit dem die einzelnen Ecken des Rands gerundet werden.

  • (Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Video-Container angewendet werden soll.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  • Geben Sie Werte in Pixel an, damit der Margins and Padding die äußeren Ränder und den inneren Abstand des Video-Containers angibt.

    Geben Sie jeden entsprechenden Wert in das Video-Container-Diagramm ein.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Container-Bereich Beschreibung
    Margins Die Menge an leerem Raum, die auf den äußeren Rand aller Seiten des Containers angewendet wird.
    Padding Die Menge an leerem Raum, die auf den inneren Rand aller Seiten des Containers angewendet wird.

Video verschieben

  1. Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Verschieben ( Verschieben-Symbol {width="20"} ).

    Verschieben eines Videos {width="500" modal="regular"}

  2. Wählen Sie das Video aus und ziehen Sie es an die neue Position, direkt unterhalb der roten Führungslinie.

    Verwenden der roten Führungslinie zum Platzieren des Videos {width="500" modal="regular"}

Entfernen eines Videos aus der Bühne

  1. Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Entfernen ( Symbol Entfernen ).

  2. Klicken Sie bei Aufforderung zur Bestätigung auf OK.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d