Hallo Freunde,
ich nutze das Refresh Theme (https://better-naps.de/) und würde nun gerne über mein looping Video auf der Startseite eine Banner legen mit einem kleinen Text sowie Button. Derzeit befindet sich dieses element unter dem Video. Hat da jemand Erfahrung?
Hey @BlackBird030
Vorsicht denn dein Shop mit dem Looping Video ganz oben sieht eigentlich ganz gut so und, Tbh, meiner Meinung nach, sähe es komisch aus mit dem Text direkt über dem Video.
Oder meinst du den Text als Overlay Text samt Call-to-Action Button die direkt auf dem Video schweben/platziert sind?
Wenn ja, der Video HTML Code (siehe unten) im theme.liquid nach unten rutschen, was aber messy werden kann vor allem auf Mobile:
Um den bereitgestellten Text samt Call-to-Action-Button direkt über das Video als Overlay zu positionieren, musst du das Video und das Overlay-Element innerhalb desselben Container-Elements positionieren und CSS verwenden, um das Overlay korrekt auszurichten. Im Folgenden findest du einen angepassten Ansatz, basierend auf deinem Video- und Overlay-Code.
Integriere das Overlay-Element (deinen Text und den Button) direkt nach dem <video>-Tag innerhalb des gleichen Containers, um sicherzustellen, dass sie zusammengehören:
##
Schlafprobleme verstehen und beheben. Endlich besser schlafen.
Herzlich Willkommen bei **better naps**. Wir versuchen Menschen dabei zu unterstützen, auf natürliche Weise einen gesunden und regelmäßigeren Schlaf zu erlangen. Neben einer vielzahl von Produkten finden Sie auf unserer Seite Informationen über die Ursachen von Schlaflosigkeit, Meditation und Folgen von Schlafproblemen. Viel Spaß beim Entdecken und hoffentlich bald angenehme Träume.
zu den Produkten
Ich habe bereits Inline-CSS im Overlay-Container (<div class="isolate overlay-content" style="...">) hinzugefügt, um es über das Video zu positionieren. Du kannst jedoch auch separates CSS hinzufügen oder anpassen, um das Design weiter zu verfeinern.
Stelle sicher, dass das Overlay-Element (overlay-content) und das Video sich im selben relativen Container (video-banner-container) befinden, damit die absolute Positionierung des Overlays relativ zu diesem Container erfolgt. Die Eigenschaft display: flex; align-items: center; justify-content: center; im Overlay-Container zentriert den Inhalt sowohl horizontal als auch vertikal über dem Video.
pointer-events: none; zum Overlay-Container hinzufügen und pointer-events: auto; zu den interaktiven Elementen innerhalb des Overlays, um Klicks auf den Button zu ermöglichen.Dies sollte dir einen soliden Ausgangspunkt bieten, um ein Overlay mit Text und einem Call-to-Action-Button direkt über deinem Looping-Video zu platzieren. Anpassungen an spezifische Designanforderungen und Responsiveness sollten ebenfalls berücksichtigt werden.
Wenn du es selber auf deiner Homepage programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Hallo Gabe,
vielen Dank für deine schnelle und aufschlussreiche Antwort. Deine Annahme, ich würde das Ganze als Overlay-Element darstellen wollen, ist absolut korrekt! Am liebsten unten links bündig mit dem Rahmen, so etwa wie bei der ordinary-website (https://theordinary.com/en-de). Somit sieht das Video eingebundener aus und bildet quasi einen schönen Hintergrund wie ich finde.
Hört sich super an und bin gespannt wie du das lösen wirst!
Mit Video kannst du einen richtigen Sense of Lifestyle rüberbringen, sprich, deine Produkte mit Modells in den 4 Lifestyles anzeigen: zuhause beim chillaxen, in der Arbeit mit den Arbeitskollegen, draussen in der Natur oder beim outdoor sporteln, und beim Ausgehen in der Stadt, zu Partys, Events, Konzerte, Restaurants usw. Das sind alles Dinge die vom Problem der Schlafstörung so richtig gedämmt werden können.
Hast du dir Gedanken gemacht wie du den Shop mehr ansprechend und engaging machen kannst? Dein Hauptthema im Shop ist ja ein wichtiges Thema - die Schlafstörung, und somit hat dein Shop sehr viel Potential ein Leader zu werden in diesem Sektor!
VG,
Ich bin selbst auch gespannt.
Du hast die Message, die ich vermitteln möchte, absolut richtig erkannt. Leider stoße ich bei den Themen “mehr ansprechend und engaging machen” an meine Grenzen. Habe versucht durch die Drop-Down-Menüs die Kunden zum “mitmachen” zu motivieren. Hast du noch weitere Ideen?
Leider bin ich zu unerfahren um deiner Anleitung Folge zu leisten. Wie kann ich Zwei Elementeinnerhalb desselben Container-Elements integrieren? Was muss wo rein und wo muss ich den Code wie anpassen? Bin völlig überfragt. Kannst du eine Anfänger-freundliche Schritt-für-Schritt Anleitung geben? Habe Angst, dass ich am Ende mehr verkehrt mache als richtig 
Hey @BlackBird030
Wie wäre es wenn du mit einem Experten arbeitest der dir helfen kann dein Store zu optimieren? Das sage ich weil 1) ich bloß der Community Moderator bin und nur generelle Tipps abgeben kann und darf oder kann keine Shops optimieren, und 2) weil ein Experte in dein Shop gehen und dir helfen kann, es von Grund auf zu optimieren. Das sage ich auch weil dein Produkt grosses Potenzial hat, da Schlafstörungen fast zur Volkskrankheit geworden sind. Da hast du schonmal ein sehr breites Publikum was die meisten Produkte ja nicht geniessen.
So wie dein Shop Better-Naps aber jetzt ist, ist es noch nicht da wo es sein könnte. Ein Beispiel, wie so ein Shop aussehen könnte? Nur um dir eine Idee zu geben, scrolle mal diese Shop Demo runter um zu sehen, wie dein Shop sein könnte.
Features die diese Shop Demo u.a. hat:
Schau dir mal alleine diesen Video Abschnitt an der auch einen tollen Overlay Text und Call-To-Action Button hat:
So muss dein Shop aussehen und mit so einem Theme wie das Broadcast Theme kannst du das auch ohne einen Experten erreichen. Da brauchst du bloß eins - deine eigene Fantasie und kreatives Denken!
Hoffe das hilft dir weiter - lass wissen falls nicht!
Ich werde mich nochmal an die Chromleisten setzen, vielen Dank für die spannenden Anregungen.
Wärst du so lieb und würdest mir nochmal eine kleine ANleitung für den Text als Overlay Text samt Call-to-Action Button die direkt auf dem Video geben?
Schönes und sonniges Wochenende wünsche ich dir!
Hey @BlackBird030
Einen Text als Overlay Text in
Weitere Möglichkeiten:
Erstelle eine Container-Div: Um alles ordentlich zu verwalten, solltest du zuerst eine Container-Div um dein Video herum erstellen. Diese Container-Div wird als relative positioniert, was bedeutet, dass alle absolut positionierten Kind-Elemente sich relativ zu diesem Container bewegen.
Positioniere deine Texte und den Button mit CSS: Du kannst position: absolute; verwenden, um deine <h1>, <h2> Texte und den Button über dem Video zu positionieren. Die bottom und right Eigenschaften helfen dir dabei, sie unten rechts zu positionieren.
Hier ist ein Beispiel, das auf dem vorhandenen HTML-Code deines Videos basiert:
Wichtige Punkte:
z-index stellt sicher, dass dein Text und Button über dem Video erscheinen.bottom und right Werte kannst du anpassen, um die genaue Positionierung deiner Elemente zu steuern.color und background-color für den Text und den Button können nach deinem Design angepasst werden.Weitere Ressourcen per einer Google Suche gefunden:
Eine Google Suche und die Community bieten verschiedene Lösungen, um Texte und klickbare Call-to-Action (CTA) Buttons direkt auf Videos zu platzieren. Hier sind einige Kernpunkte basierend auf den Informationen, die ich gefunden habe:
Text über Video platzieren: Eine Methode besteht darin, das Video in einem Container mit position: relative; zu platzieren und den Overlay-Text oder -Button mit position: absolute; zu positionieren. Dies ermöglicht es, den Text oder Button relativ zum Videocontainer zu positionieren. Du kannst den Text in einem <div> mit der Klasse overlay platzieren und diesen dann mit CSS entsprechend anpassen, um ihn über das Video zu legen (CodeWithRandom).
CSS für Overlay-Play Button: Für das Hinzufügen eines Overlay-Play-Buttons über einem HTML5-Video kannst du ebenfalls position: absolute; für den Button verwenden, um ihn über das Video zu legen. Dabei ist wichtig, die z-index Eigenschaft zu nutzen, um sicherzustellen, dass der Button über dem Video angezeigt wird. JavaScript kann verwendet werden, um den Play/Pause-Status des Videos beim Klick auf den Button zu steuern (Codeconvey).
Allgemeine Overlay Erstellung: W3Schools bietet ein Tutorial, wie man ein allgemeines Overlay mit CSS erstellt, das die Grundlagen der Positionierung und Gestaltung eines Overlays über einem anderen Element erläutert. Dies kann auf Texte und Buttons, die über Videos schweben sollen, angewendet werden (W3Schools).
Hoffe das hilft dir weiter - lass wissen falls nicht!
Hallo @Gabe ,
schau mal, https://better-naps.de/, es geht voran. Leider wird das Video nun nicht über die ganze Breite dargestellt was sehr schade ist. Zeitgleich wird das Video auf der Mobil-Ansicht viel zu groß angezeigt (siehe unten) Hast du da eine Idee wie das Video responsive über die ganze breite angezeigt werden kann?
Habe das Ganze nun mit deinem Code über ein Benutzerdefiniertes Liquid umgesetzt.
Herzlich Willkommen bei better naps. Wir versuchen Menschen dabei zu unterstützen, auf natürliche Weise einen gesunden und regelmäßigeren Schlaf zu erlangen. Neben einer vielzahl von Produkten finden Sie auf unserer Seite Informationen über die Ursachen von Schlaflosigkeit, Meditation und Folgen von Schlafproblemen. Viel Spaß beim Entdecken und hoffentlich bald angenehme Träume.
Hey @BlackBird030
Ja das ist in der Tat blöd. Wird das auch so auf dem Google Chrome Browser gerendert, denn ich sehe du verwendest Safari? Kannst du es mal auf Chrome probieren?
Das ganze ist auch nicht so einfach denn jegliche CSS Code Ergänzung werden einen Dominoeffekt auf andere Bereich haben. Dagegen können wir nicht viel tun.
Das responsive Design von Videos ist auch ziemlich knifflig, vor allem, wenn du unterschiedliche Verhaltensweisen auf Desktop- und Mobilgeräten erreichen möchtest. Hier sind einige Vorschläge, wie du das Video so einstellen kannst, dass es auf beiden Gerätetypen korrekt dargestellt wird.
Verwendung von CSS-Media-Queries: Mit Media-Queries kannst du bestimmte Stile anwenden, abhängig von der Bildschirmgröße des Geräts. Du könntest die Höhe und Breite des Videos für Mobil- und Desktopansichten entsprechend anpassen.
Relative Einheiten: Verwende relative Einheiten wie Prozent (%) statt fester Pixelwerte für die Breite und Höhe, um die Skalierung auf verschiedenen Bildschirmgrößen zu verbessern.
Viewport Units: Verwende Viewport-units (vw für viewport width und vh für viewport height), um das Video responsiv zu gestalten.
CSS-Eigenschaft object-fit: Diese Eigenschaft kann auf das <video>-Element angewandt werden, um anzugeben, wie das Video innerhalb des Containers passen soll.
Hier ist ein Beispiel, das diese Maß-Typen verwendet:
/* CSS-Grundlagen für das Video-Element */
.video-section__media video {
width: 100%; /* Breite auf 100% für volle Breite */
height: auto; /* Höhe automatisch für das Beibehalten des Seitenverhältnisses */
object-fit: cover; /* Video deckt den gesamten Container ab */
}
/* Anpassungen für Mobilgeräte */
@media (max-width: 768px) {
.video-section__media video {
height: 50vh; /* Stelle eine maximale Höhe ein, um das Video auf Mobilgeräten nicht zu groß anzuzeigen */
}
}
Das object-fit: cover; sorgt dafür, dass das Video den Container vollständig abdeckt, ohne sein Seitenverhältnis zu verlieren. Die Media Query begrenzt dann die Höhe des Videos auf Mobilgeräten, um zu verhindern, dass es zu groß dargestellt wird.
Hoffe das hilft dir weiter - lass wissen falls nicht!