Videolayout für Produktseite entwerfen

Beispielanwendungsfälle für Videolayouts mit mehreren Spalten

Mehrspaltige Videolayouts sind nützlich, wenn Sie mehrere Videos im selben Abschnitt anzeigen möchten. Sie können Ihre Produktseite ansprechender und informativer gestalten. Häufige Anwendungsfälle sind:

• Präsentation der Produktfunktionen: Heben Sie verschiedene Funktionen in separaten Videos hervor.
• Vergleichsansicht: Platzieren Sie 2–3 Videos nebeneinander, um Produktmodelle oder -varianten zu vergleichen.
• Kundenempfehlung: Fügen Sie mehrere Bewertungsvideos hinzu, um Glaubwürdigkeit aufzubauen.
• Tutorials und Anleitungen: Zeigen Sie Schritt-für-Schritt-Anleitungen mit kurzen Clips.
• Marketing-Kampagnen: Kombinieren Sie Markengeschichten, Lifestyle-Videos und Werbeinhalte.

Entwerfen Sie ein mehrspaltiges Videolayout mit Video Element

Um ein 3-zeiliges Videolayout für Ihre mit GemPages erstellte Produktseite zu erstellen, gehen Sie folgendermaßen vor:

Schritt 1: Zugriff auf den GemPages-Editor

• Von Ihrem Shopify-Admin-Dashboard > GemPages-Ersteller app> Seiten.
• Wählen Sie Produkt aus Ihren vorhandenen Produktseiten. Andernfalls können Sie auf Neue Seite erstellen > Produktseite um ein neues zu bauen.

Schritt 2: Ein Zeilenelement hinzufügen 

Sobald Sie den Editor geöffnet haben, ziehen Sie die Zeilenelement mit einem 3-Spalten-Layout aus der linken Seitenleiste.

Wenn Sie ein anderes Spaltenlayout für die Anzeige Ihrer Videos bevorzugen, können Sie dies im Einstellungen Registerkarte> Layout . 

Die maximale Anzahl von Spalten in einer Zeile beträgt 6.

Schritt 3: Video-/Videobanner-Elemente hinzufügen

• Zurück zu den Element in der linken Seitenleiste und scrollen Sie nach unten, bis Sie das Medien .
• Ziehen und ablegen a Videoelement or Videobanner Element in jeder Spalte Ihrer Zeile.

Schritt 4: Laden Sie Ihr Video hoch und passen Sie es an

Klicken Sie auf das Video, um die Einstellungen zu öffnen. Unter dem Videoquelle, Klicken Sie auf Typ Feld, um die Videoquelle aus dem Dropdown-Menü auszuwählen: YouTube, Vimeoden Video-Hosting.

Geben Sie dann die Video-URL in das Feld Video Link und legen Sie die Vorschauansicht Bild für jedes Video nach Wunsch.

Sie können aus allen Bildern in Ihrer Bibliothek (Shopify-Dateien) auswählen oder ein neues hochladen.

Weitere Anpassungsmöglichkeiten finden Sie in unseren Artikeln:

• Videoelement
• Video-Banner-Element

Erweitert: Benutzerdefiniertes Codeelement verwenden

Mit diesen beiden Elementen können Sie nur ein Video aus einer von drei Quellen (YouTube, Vimeo oder Video-Hosting) einfügen. Wenn Sie also lieber Videos von anderen Quellen wie TikTok hinzufügen möchten, verwenden Sie die Benutzerdefiniertes Codeelement ist die beste Option.

Folgen Sie diesen Schritten, um Ihr eigenes 3-Spalten-Videolayout mit diesem Element zu erstellen:

Schritt 1: Ziehen Sie ein 3-Spalten-Layout des Zeilenelements per Drag & Drop an die gewünschte Position auf der Seite.

Schritt 2: Eingeben "benutzerdefinierten Code” in die Suchleiste ein und verschachteln Sie dann das benutzerdefinierte Codeelement in jede Spalte.

Schritt 2: Klicken Sie auf das Element, um das Einstellungsfenster in der linken Seitenleiste zu öffnen. Unter dem Benutzerdefinierter Code Abschnitt, aktivieren Sie das Kontrollkästchen neben dem Code Feld.

Schritt 3: Der Code-Editor wird auf Ihrem Bildschirm angezeigt. Unter dem HTML Fügen Sie den Einbettungscode des Videos ein und klicken Sie dann auf Gespeichert . 

Zum Beispiel, fügen wir einen Einbettungscode eines TikTok-Videos ein.

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@gempages/video/7384328395699539217" data-video-id="7384328395699539217" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@gempages" href="https://www.tiktok.com/@gempages?refer=embed">@gempages</a> <p>🥰 Master the Art of Crafting Comparison Tables with GemPages! 🥰 _________________________ ⭐️Try GemPages for FREE: https:&#47;&#47;bit.ly&#47;appstore-Gempages #ecommerce #gempages #tipsandtricks #webdesign #landingpage #productdesign #productpage #homepage #abovethefold #mobileview #shopifydropshipping #pagebuilding #pagebuilder</p> <a target="_blank" title="♬ nhạc nền  - GemPages" href="https://www.tiktok.com/music/nhạc-nền-GemPages-7384328668371667729?refer=embed">♬ nhạc nền  - GemPages</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

Ergebnis: