Wenn du benutzt hast Shopify, Sie kennen das Dawn-Thema. Es ist eines der beliebtesten kostenlosen Themes für neue Unternehmer und eine hochgradig anpassbare Option für die Gestaltung einer einzigartigen Storefront.
Das Dawn-Theme enthält zahlreiche Module, wie den Standard-Video-Upload-Block und ein Bildbanner.
Beim Bildbanner können Schaltflächen und Text als Vordergrund dienen, während das Bild den Hintergrund bildet. Leider lässt das Videomodul diese Art von Vordergrund nicht zu. Es gibt jedoch Möglichkeiten, das Beste aus beiden Welten zu erhalten, indem man ein Videobanner erstellt, bei dem das Video den Hintergrund bildet und der Text im Vordergrund steht.
In dieser Anleitung zeigen wir Ihnen, wie Sie einen bauen Thema Morgendämmerung Video-Banner, um Aufmerksamkeit auf Ihrer Homepage zu erregen!
Überblick über das Dawn-Thema
Das Dawn-Theme ist kostenlos Shopify Thema Das wird häufig von E-Commerce-Händlern verwendet. Mit seinem schlichten Design und den geradlinigen Einstellungen bleibt es eine beliebte Wahl für die Einrichtung eines optisch ansprechenden und elegant aussehenden Ladens.
Was ist ein Videohintergrund/Banner und warum sollten Sie einen auf Ihrer Website verwenden?
Ein Videobanner ist ein Bereich einer Webseite, der ein Video als Hintergrund in voller Breite zusammen mit anderen Elementen im Vordergrund, wie Schaltflächen und Text, präsentiert.
Ein Modul wie ein Dawn-Theme-Videobanner bietet zahlreiche Vorteile, um das gesamte Website-Erlebnis für Besucher zu verbessern. Hier sind einige wichtige Vorteile:
- Angereicherte visuelle Elemente: Durch die Einbindung fesselnder Videos wird die Website optisch ansprechender und erregt die Aufmerksamkeit der Besucher.
- Dynamische und ansprechende Inhalte: Videos vermitteln Informationen effektiv. Sie können Produktfunktionen präsentieren, Anleitungen demonstrieren oder eine fesselnde Markengeschichte erzählen und so das Interesse der Besucher wecken.
- Verbessertes Benutzerengagement: Videos können bei Besuchern einen bleibenden Eindruck hinterlassen. Die Kombination aus Bildern, Audio und Bewegung erregt Aufmerksamkeit und regt Benutzer dazu an, weiter zu erkunden.
- Effektive Markenkommunikation: Ein Videohintergrund oder Banner kann den Kunden die Botschaft der Marke vermitteln. Es ermöglicht Unternehmen, ihr einzigartiges Wertversprechen hervorzuheben, Produkte oder Dienstleistungen zu präsentieren und eine starke Markenidentität zu etablieren.
Indem Sie die Leistungsfähigkeit von Videos in Ihrem Website-Design nutzen, können Sie Ihre Website spannender gestalten und die Conversions steigern.
Schritt-für-Schritt-Anleitung zum Hinzufügen eines Videohintergrunds/Banners zum Dawn-Theme
Technisch gesehen gibt es vier Möglichkeiten, ein Dawn-Themen-Videobanner hinzuzufügen (nicht alle davon sind ideal):
- Konvertieren des Videos in das WebP-Video-/Bildformat.
- Einstellen der Shopify Code für ein normales Bildbanner, damit es Videos unterstützt.
- Konvertieren des Videos in ein GIF-Format.
- Laden Sie einfach ein Video in den Videoblock hoch Shopify, wobei die Idee von Vordergrundelementen übersprungen wird (es wäre also kein echtes Banner).
Es ist nicht besonders schwierig, das zu ändern Shopify Code für ein Standardbildbanner, aber der Vorgang ist unnötig langwierig, wenn man bedenkt, dass Sie Zugriff auf ein Dateiformat wie WebP haben. GIFs verringern die Videoqualität erheblich und Option 4 liefert uns kein echtes Videobanner.
Daher empfehlen wir, Ihr Videoformat (.mp4, .mov, .wmv) in das WebP-Format zu konvertieren. WebP kombiniert die Vorteile hochauflösender JPEG-Bilder, Videos und GIFs, sodass Sie schöne bewegte Videos ohne große Masse und ohne großen Auflösungsverlust erstellen können. Und Sie können WebP-Videos/-Bilder auf eine Shopify Bildbanner.
Hier ist, wie:
Schritt 1: Nehmen Sie Ihr Video und konvertieren Sie es in die WebP-Datei Format
Es gibt online verschiedene kostenlose „Video-zu-WebP“-Konverter. Versuchen Sie es mit einer Online-Suche oder verwenden Sie einen der von uns getesteten Konverter:
Laden Sie Ihr Video in das kostenlose Konvertierungstool hoch und konvertieren Sie es anschließend in das WebP-Format. Speichern Sie die neue Datei auf Ihrem Computer.
Schritt 2: Finden Sie das Dawn-Thema in Shopify
Gehen Sie zu „Online-Shop“ > „Themen“.
Wenn Sie es noch nicht haben, installieren Sie das Dawn-Theme. Andernfalls sollten Sie das Dawn-Theme unter Shopifyist „Aktuelles Thema“. Klicken Sie auf die Schaltfläche „Anpassen“, um fortzufahren.
Schritt 3: Fügen Sie den Bildbannerblock hinzu und wählen Sie ihn aus
Der Block „Bildbanner“ wird standardmäßig im Dawn-Design hinzugefügt. Sie sollten also in der Lage sein, auf dieses Modul zu klicken, um seine Einstellungen im linken Bereich zu öffnen. Es ist auch möglich, in der visuellen Vorschau rechts auf das Bildbanner selbst zu klicken. Verwenden Sie den Link „Block hinzufügen“, wenn Sie das „Bildbanner“ von Grund auf einfügen müssen.
Schritt 4: Laden Sie die WebP-Videodatei hoch
Klicken Sie im Abschnitt „Erstes Bild“ auf die Schaltfläche „Bild auswählen“.
Dadurch wird ein Bereich zum Hochladen von Bildern in die Medienbibliothek Ihres Geschäfts geladen. Es ist auch möglich, Video-URLs einzufügen, wir verwenden jedoch die Upload-Funktionalität. Wählen Sie die Schaltfläche „Bilder hinzufügen“ und wählen Sie die zuvor erstellte WebP-Datei aus. Markieren Sie die neu hochgeladene Datei mit einem Häkchen und klicken Sie dann auf die Schaltfläche „Fertig“.
Dadurch wird die WebP-Videodatei im Bildbanner abgelegt, sodass Sie auch alle Inhalte im Vordergrund bearbeiten können. Klicken Sie auf „Speichern“.
Herzlichen Glückwunsch, Sie haben erfolgreich ein Dawn-Themen-Videobanner hinzugefügt!
Schritt 5: Vorschau des Videos
Aber warten Sie: Es ist ratsam, eine Vorschau des Videos im Frontend anzuzeigen, um sicherzustellen, dass es richtig aussieht, reibungslos läuft und die richtige Auflösung hat.
Klicken Sie im Hauptbildschirm des Dashboards auf das Augapfelsymbol, um „Ihren Online-Shop anzeigen“ anzuzeigen. Diese finden Sie neben „Online-Shop“ unter dem Abschnitt „Vertriebskanäle“.
Success!
Anpassen Ihres Dawn-Themen-Videobanners: Machen Sie es einzigartig
Durch die Personalisierung wird sichergestellt, dass Ihr Video perfekt zu Ihrer Marke und der Ästhetik Ihres Geschäfts passt. Also, krempeln wir die Ärmel hoch und tauchen ein, ja?
Sie müssen immer das Bildbanner auswählen, um dessen Einstellungen anzuzeigen. Dort können Sie die Deckkraft der Bildüberlagerung ändern und die Bannerhöhe ändern. Anschließend können Sie die Position des Desktopinhalts ändern und so die Position des Überlagerungstexts ändern.
Durch das Verschieben des Inhalts und der Schaltflächenpositionen können Sie den Text und die Schaltfläche über einem Bereich des Videos anzeigen, in dem sie am besten sichtbar sind.
Für weitere Anpassungen haben Sie Zugriff auf den Abschnitt „Benutzerdefiniertes CSS“.
Und natürlich ist es möglich, den Inhaltstext oder die Schaltfläche auszuwählen, um zu ändern, was sie sagen und wie sie angezeigt werden.
Tipps zur Optimierung Ihrer Videodatei für maximale Geschwindigkeit und Kompatibilität
Ein beeindruckendes Video spielt keine Rolle, wenn es die Geschwindigkeit Ihrer Website erheblich verlangsamt oder auf bestimmten Geräten nicht richtig angezeigt wird.
Deshalb ist die Optimierung Ihrer Videodatei für maximale Geschwindigkeit und Kompatibilität eine nicht verhandelbare Aufgabe. In diesem Abschnitt geben wir einige praktische Hinweise, um sicherzustellen, dass Ihre Videoinhalte für ein effizientes Laden und eine universelle Wiedergabe optimiert werden.
- Verwenden Sie Videodateiformate (wie WebP), die mit den meisten Webbrowsern weitgehend kompatibel sind.
- Halten Sie die Größe der Videodatei so klein wie möglich. WebP leistet hervorragende Arbeit beim Komprimieren von Videos, ohne an Qualität zu verlieren.
- Stellen Sie das Seitenverhältnis des Videos so ein, dass es gut zur Bildschirmgröße passt.
- Entscheiden Sie sich für ein Video mit ausgewogenen Farben und Kontrasten, das die Persönlichkeit des Geschäfts widerspiegelt.
Behebung häufiger Probleme beim Hinzufügen eines Videohintergrunds/Banners zum Dawn-Design
Manchmal können beim Hinzufügen eines Dawn-Themen-Videobanners immer noch Probleme auftreten, egal wie vorsichtig Sie waren. Hier sind einige Tipps zur Fehlerbehebung, wenn Probleme auftreten:
Inkompatibilitätsprobleme
Versuchen Sie, das Video in ein kompatibles Dateiformat wie WebP zu konvertieren, oder verwenden Sie den Link zum Einbetten des Videos.
Die Videogröße ist zu groß
Schneiden Sie das Video zu oder komprimieren Sie es, um die Dateigröße zu reduzieren und gleichzeitig die Qualität beizubehalten.
Das Video wird nicht automatisch abgespielt
Überprüfen Sie, ob Sie in den Theme-Einstellungen die Option „Autoplay“ aktiviert haben.
Unser Fazit zum Hinzufügen eines Dawn-Theme-Videobanners
Wenn Sie unserer Schritt-für-Schritt-Anleitung und Tipps zur Fehlerbehebung folgen, sollten Sie in der Lage sein, ein Dawn-Theme-Videobanner hinzuzufügen Shopify mit Leichtigkeit.
Was sind deine Gedanken? Teilen Sie uns in den Kommentaren mit, ob es Ihnen beim Hinzufügen eines Dawn-Themenvideobanners gelungen ist!
Ihre Nachricht 0 Antworten