FROM CACHE - de_header

Vollbild Bild wird zu groß angezeigt

Gelöst
Holzis24
Neues Mitglied
3 0 0

Hallo,

ich benutze das Theme Venture und auf dem Homescreen Slider habe ich ein Bild mit einem Text drauf, der Text wird in der mobilen Version und Desktop Version so gezeigt wie ich ihn eingefügt habe aber in der Vollbild Version ist das Bild zu groß und der Text ist oben und unten abgeschnitten, d.h. man sieht nur den Mittelteil von dem Text das Bild ist auch vergrößert, also man sieht nicht den ganzen Inhalt von dem Bild.

Kann mir jemand helfen wie ich das gleiche Bild hinbekomme, sowohl in der Desktop Ansicht als auch in der Vollbild Ansicht?

Würde mich sehr über Hilfe freuen, vielen Dank schon mal im Voraus!

Manuel Sicora

2 AKZEPTIERTE LÖSUNGEN

Anerkannte Lösungen
Gabe
Shopify Staff
Shopify Staff
7516 1202 1954

Erfolg.

Hey Ryfe! @Ryfe95 

Kein Grund dich zu entschuldigen! Dein Frust ist sehr verständlich! 

Also schauen wir mal was wir machen können. Wie wäre es wenn du erstmals die Shop URL hier postest, so dass ich das Verhalten der Folien der Narrative Slideshow betrachten kann? Du kannst die URL danach selbstverständlich wieder löschen. Ich kann die Homepage dann auf Windows, Note 20 Ultra, Mac Airbook, sowie Pixelbook testen. Ggf. kann unser Experte Mario auch dann einen Blick hinein werfen und mit dir über ein kleines Projektchen reden ( @r8r ).

Apropos im neuen Dawn Theme gibt es eine neue "Quadratische Einstellung in den Grids": Wenn du unvollkommene Assets und Bilder hast (z. B. Bilder in verschiedenen Größen), sieht das Grid jetzt nicht mehr unausgewogen aus. Das Raster passt sich besser den Bildern an und erzwingt kein Cropping mehr. Somit wenn die Bilder unterschiedliche Größenverhältnisse haben, wurde dieses Problem jetzt behoben. Dawn geht intelligenter mit den verschiedenen Arten von Assets um bzgl. dem "Produktbildverhältnis". 

Noch ein oder zwei Punkte die gegen Slideshows sprechen:

Wir wollen Händler generell nicht dazu ermutigen, Slideshows zu verwenden, weil es eine Menge UX-Literatur gibt, die zeigt, dass Slideshows in den meisten Fällen nicht zu Konversionen führen. Außerdem ist der Code sehr umfangreich und verlangsamt somit die Loading Speed und generelle Leistung der Homepage. Siehe unseren Leitartikel auf Medium wo das auch erwähnt wird hier.

  • N.B.: Ein Slider-Bereich kann vom Theme Support als Teil deiner Designzeit ggf. implementiert werden. Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Viele Experten empfehlen, wie gesagt, keine Slideshow anstelle des Hero-Banners zu verwenden. Oft versucht man so viel wie möglich in die Slideshow hineinzupacken, um Aufmerksamkeit auf das Shop und die tollen Angebote zu erzeugen. Aber die Slider können genau das Gegenteil bewirken.

Psychologisch gesehen können sie ein "Interessens- oder Sparkkiller" sein. Unser Gehirn ist von der Evolution so programmiert, dass es die "white noise" Informationen, wie zu viele wechselnde Eindrücke herausfiltert, und deshalb kann der Besucher des Shops einen "Filter- und Ausblendeffekt" erleben und den Fokus, die Aufmerksamkeit und das Interesse verlieren.

Deshalb ist ein einzelnes Bild als Hero Image oft besser geeignet, um die Aufmerksamkeit des Besuchers zu erregen und zu fesseln. Idealerweise sollte es ein Bild sein, das deinen Laden und deine Produkte sowie den "Lifestyle" und "Wow-Faktor", den die Produkte dem Besucher bieten, wirklich repräsentiert. Auch ein professionell erstelltes Video, das in einer Endlosschleife läuft und deine Produkte "in Aktion" zeigt, kann die Aufmerksamkeit der Besucher/innen auf sich ziehen. Wenn du einen oder zwei CTA-Buttons in das Hero-Banner oder am Ende des Videos einfügst, löst das dann eine echte Interaktion beim Nutzer aus.

Das ist dann sehr einladend und ermutigt den Nutzer, weiter zu "stöbern", d.h. 1) auf der Homepage nach unten zu scrollen und 2) tiefer in den Verkaufstrichter zu klicken.

Was denkst du dazu?

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

r8r
Shopify Expert
2350 305 834

Erfolg.

@Ryfe95 – wenn Du Schwierigkeiten damit hast, Deine detaillierten Wünsche von den bestehenden Sections abgedeckt zu bekommen, kannst Du eine entsprechende Section, zugeschneidert auf Deine Bedürfnisse, jederzeit selbst ergänzen (lassen). Sollte Dich das interessieren und Du dabei Unterstützung beiziehen wollen, kannst Du Dich gerne bei mir melden.

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

Lösung in ursprünglichem Beitrag anzeigen

6 ANTWORTEN 6
Gabe
Shopify Staff
Shopify Staff
7516 1202 1954

Hi Manuel! @Holzis24 

Danke für deine Frage und ich kann das voll verstehen, dass es etwas fummelig ist mit den Bilder Aspekte in der Venture Slideshow auf Desktop, auf Responsive UI und auf dem Handy. Aber lass uns schauen was alles möglich ist.

Hier haben wir zwei Optionen und zwar 1) es selber DIY (do-it-yourself) versuchen bis die Bilder genau richtig sind, oder 2) andere Themes zu testen die das einfach besser können mit den Bilder. Eine Sammlung von Themes die das einfach besser können mit der Bildqualität und den Aspekten, ist hier zu sehen (https://bit.ly/3uNxVzu) und ich rate sehr ein paar dieser Theme zum Shop hinzuzufügen und testen. Das kostet nichts.

Das kann ich aber trotzdem verstehen, dass das frustrierend sein kann und wie die Bilder auf Desktop und auf Handy aussehen hängt stark von den Bildern selber ab und wie sie 'geschnitten' wurden. Hier handelt es sich um das sog. "Aspect ratio" (Aspekt) des Bildes. Dieses muss dem Aspekt des Platzhalter Rahmens angepasst sein indem das Bild im Hero Banner z. B. auf der Kategorieseite eingefügt wird, ansonsten wird das Bild gecroppt. So nach dem Prinzip "square peg into a round hole". 🙂

Hast du unsere Anleitungen dazu schon geprüft? Siehe diese hier:

Die Bilder brauchen das richtige Bild-Aspekt und das muss man im Bildeditor zuerst zusammenschneiden. Die Platzhalter im Debut Theme als Beispiel haben einen bestimmten Aspekt Ratio und wenn das Bild, dass du im Platzhalter einfügst, nicht das gleiche Aspekt hat dann wird es entweder auf Desktop oder Mobile wie verschoben aussehen. Ich rate einfach mehrere Bildproben da hochladen bis du die beste Version findest auf Desktop und Mobile. 

Einige Themes haben eine Einstellung für die Bildposition, mit der du festlegen kannst, welcher Teil eines Bilds das Zentrum ist. Wenn dein Theme keine solche Einstellung hat, stelle sicher, dass das Zentrum jedes Bilds in der Mitte liegt. Wenn deine Bilder auf einigen Bildschirmen abgeschnitten werden, ist das Zentrum sichtbar, während Bereiche um es herum verborgen sind.

Breite Bilder können links und rechts abgeschnitten werden, wenn das verwendete Gerät einen hohen Bildschirm hat (wie z. B. ein Handy oder Tablet). Hohe Bilder werden möglicherweise oben und unten abgeschnitten, wenn das für die Anzeige verwendete Gerät einen breiten Bildschirm hat (wie z. B. ein Laptop oder ein PC).

Das Seitenverhältnis eines Bildes ist das Verhältnis seiner Breite zu seiner Höhe. Ein Bild mit 200 x 400 Pixel hat beispielsweise ein Seitenverhältnis von 1:2. Ein Bild, das 150 x 450 Pixel groß ist, hat ein Seitenverhältnis von 1:3. Bilder können unterschiedlich groß sein und immer noch das gleiche Seitenverhältnis haben. Um zu berechnen, ob Bilder das gleiche Seitenverhältnis haben, teile die Breite jedes Bildes durch seine Höhe und vergleiche dann die Ergebnisse. Mit einem einheitlichen Seitenverhältnis für alle Bilder eines bestimmten Typs können diese besser nebeneinander angezeigt werden, da sie alle dieselbe Größe aufweisen. Sollen beispielsweise deine Produktbilder innerhalb einer Kategorie alle in derselben Größe angezeigt werden, müssen sie über dasselbe Seitenverhältnis verfügen. Mit dem Bildeditor kannst du deine Bilder auf das gleiche Seitenverhältnis zuschneiden.

Weitere Infos

Shopify nimmt bis zu 20Mb an Bildgrößen an aber das reicht eigentlich für ein sehr hochqualitatives Foto. Fotos auf der Webseite verschlechtern sich nur wenn man versucht die Bildauflösung in einem externen Bildeditor künstlich aufzubauschen. Das kann dazu führen, dass die Bilder sog. "Pixel Artefakte" zeigen auf der Webseite und das sieht dann nicht mehr so toll aus. Also rate ich nur Original Bilder in der Größe 2048 x 2048 Pixel zu verwenden.

Die Kategorieseiten im Theme stellen die Bilder in deren originalen Formate und "Bildseitenverhältnisse" dar wie man in unseren Anleitungen hier und hier nachlesen kann.

Man sollte also für ein ausgefeiltes und konsistentes Aussehen aller Produktbilder, die Bilder auf eine quadratische oder zumindest eine einheitliche Form zuschneiden. Aus dem Grund das deine Bilder verschiedene Aspekte (Bildseitenverhältnisse) haben, werden die in versch. Größen dargestellt.

Es gibt es leider keinen "Quick Fix" oder schnellen Weg, das zu machen ausser man bearbeitet alle einzelne Bilder in einem Bildeditor - wie im Produktmedium im Produktstamm innerhalb Shopify, und schneidet sie alle zu einem einheitlichen Bilderformat. Oder man wählt nur Bilder aus die ähnliche Größen wie die anderen haben. Andernfalls wäre eine Größenänderung der betroffenen Bilder die beste Lösung.

Ich rate in diesem Zusammenhang, die von dir demonstrierten Bilder in einem Bildbearbeitungsprogramm zuzuschneiden und das alte Bild durch das neu gespeicherte/umbenannte Bild zu ersetzen. Nachstehend ein paar Apps die für Bildbearbeitung ganz toll sind:

Siehe auch unsere Bildbearbeitungs-Apps in Shopify hier die es erlauben, verschiedene Bilder innerhalb der App-Schnittstelle zu bearbeiten. Siehe mehr dazu hier:

Ich hoffe ich habe damit etwas helfen können das Problem zu lösen. Unsere Experten wie Taskhusky sind da sehr beliebt und den findest du hier.

Nicht vergessen, dass unsere Hilfe hier nicht endet, also lass gerne wissen wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business, indem du direkt auf dieses Message antwortest oder einen neuen Leitfaden startest. Dafür ist die Community ja da.

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Ryfe95
Entdecker
14 0 3

Hallo zusammen,

ich weiß, der Beitrag ist etwas älter, aber ich kommentiere hier mal, statt einen neuen Thread zu erstellen, da ich das gleiche Problem habe.

Ich benutze das Narrative Theme und wäre selbst zufrieden, wenn ich es schaffen würde nur ein Bild, quasi eine Folie in die Slideshow einzufügen, die nicht abgeschnitten wird. Auf einem Macbook und in der mobilen Version passt es wunderbar, aber bei meinem Laptop (Windows mit NUM Block -> breiter Bildschirm) werden immer die Füße oder Köpfe unserer Models abgeschnitten.

Wieso ist es nicht möglich, die Bilder in voller Breite anzuzeigen und dabei nicht die Bilder abzuschneiden? Wieso richtet man es nicht so ein, dass ich dann halt auf einem Gerät mit breitem Bildschirm einfach weiter scrollen muss?

Entschuldigung, falls etwas Frust herauszulesen ist ... Ich wäre wirklich sehr dankbar über eine gute Lösung oder zumindest über einen aktzeptablen Work-Around. Ich habe es auch schon versucht statt Slider ein einzelnes Bild einer Galerie hinzuzufügen, aber da habe ich genau das gleiche Problem.

Viele Grüße,

Ryfe

 

Gabe
Shopify Staff
Shopify Staff
7516 1202 1954

Erfolg.

Hey Ryfe! @Ryfe95 

Kein Grund dich zu entschuldigen! Dein Frust ist sehr verständlich! 

Also schauen wir mal was wir machen können. Wie wäre es wenn du erstmals die Shop URL hier postest, so dass ich das Verhalten der Folien der Narrative Slideshow betrachten kann? Du kannst die URL danach selbstverständlich wieder löschen. Ich kann die Homepage dann auf Windows, Note 20 Ultra, Mac Airbook, sowie Pixelbook testen. Ggf. kann unser Experte Mario auch dann einen Blick hinein werfen und mit dir über ein kleines Projektchen reden ( @r8r ).

Apropos im neuen Dawn Theme gibt es eine neue "Quadratische Einstellung in den Grids": Wenn du unvollkommene Assets und Bilder hast (z. B. Bilder in verschiedenen Größen), sieht das Grid jetzt nicht mehr unausgewogen aus. Das Raster passt sich besser den Bildern an und erzwingt kein Cropping mehr. Somit wenn die Bilder unterschiedliche Größenverhältnisse haben, wurde dieses Problem jetzt behoben. Dawn geht intelligenter mit den verschiedenen Arten von Assets um bzgl. dem "Produktbildverhältnis". 

Noch ein oder zwei Punkte die gegen Slideshows sprechen:

Wir wollen Händler generell nicht dazu ermutigen, Slideshows zu verwenden, weil es eine Menge UX-Literatur gibt, die zeigt, dass Slideshows in den meisten Fällen nicht zu Konversionen führen. Außerdem ist der Code sehr umfangreich und verlangsamt somit die Loading Speed und generelle Leistung der Homepage. Siehe unseren Leitartikel auf Medium wo das auch erwähnt wird hier.

  • N.B.: Ein Slider-Bereich kann vom Theme Support als Teil deiner Designzeit ggf. implementiert werden. Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Viele Experten empfehlen, wie gesagt, keine Slideshow anstelle des Hero-Banners zu verwenden. Oft versucht man so viel wie möglich in die Slideshow hineinzupacken, um Aufmerksamkeit auf das Shop und die tollen Angebote zu erzeugen. Aber die Slider können genau das Gegenteil bewirken.

Psychologisch gesehen können sie ein "Interessens- oder Sparkkiller" sein. Unser Gehirn ist von der Evolution so programmiert, dass es die "white noise" Informationen, wie zu viele wechselnde Eindrücke herausfiltert, und deshalb kann der Besucher des Shops einen "Filter- und Ausblendeffekt" erleben und den Fokus, die Aufmerksamkeit und das Interesse verlieren.

Deshalb ist ein einzelnes Bild als Hero Image oft besser geeignet, um die Aufmerksamkeit des Besuchers zu erregen und zu fesseln. Idealerweise sollte es ein Bild sein, das deinen Laden und deine Produkte sowie den "Lifestyle" und "Wow-Faktor", den die Produkte dem Besucher bieten, wirklich repräsentiert. Auch ein professionell erstelltes Video, das in einer Endlosschleife läuft und deine Produkte "in Aktion" zeigt, kann die Aufmerksamkeit der Besucher/innen auf sich ziehen. Wenn du einen oder zwei CTA-Buttons in das Hero-Banner oder am Ende des Videos einfügst, löst das dann eine echte Interaktion beim Nutzer aus.

Das ist dann sehr einladend und ermutigt den Nutzer, weiter zu "stöbern", d.h. 1) auf der Homepage nach unten zu scrollen und 2) tiefer in den Verkaufstrichter zu klicken.

Was denkst du dazu?

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Ryfe95
Entdecker
14 0 3

Hi Gabe,

Wie gesagt, ein einzelnes Bild wäre bei uns für den Anfang auch ok (vielleicht sogar besser), langfristig wollen wir eher wie Du vorgeschlagen hast ein eigenes Video drehen und schneiden. An ersten Versuchen sind wir dran.

Gibt es denn eine Möglichkeit das Bild (egal ob als Slideshow, Gallerie, Foto mit überlagertem Text oder sonst etwas) in seiner vollen Größe anzuzeigen? Kurz vor dem Footer siehst Du weitere Versuche das Bild anzuzeigen. Auf meinem Laptop finde ich das "Foto mit überlagertem Text" sehr gut, das zerschießt die mobile Ansicht allerdings wieder komplett...

Viele Grüße

Ryfe

 

PS: Ich habe es mittlerweile so hinbekommen, dass bei mir alle Köpfe und Füße drauf sind, allerdings nur sehr knapp. Hätte einer unserer Models keine Glatze wäre das schon schwierig... Und so direkt über dem Kopf wollen wir den Header auch nicht haben. 

Gabe
Shopify Staff
Shopify Staff
7516 1202 1954

Hey @Ryfe95 

Hat sich das für euch jetzt geklärt? Falls es weitere Probleme mit der Rendierung des Hero Banner Bildes gibt lass es mich hier wissen. Wenn das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail (siehe oben) und unser Theme Team wird das anschauen können.

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

r8r
Shopify Expert
2350 305 834

Erfolg.

@Ryfe95 – wenn Du Schwierigkeiten damit hast, Deine detaillierten Wünsche von den bestehenden Sections abgedeckt zu bekommen, kannst Du eine entsprechende Section, zugeschneidert auf Deine Bedürfnisse, jederzeit selbst ergänzen (lassen). Sollte Dich das interessieren und Du dabei Unterstützung beiziehen wollen, kannst Du Dich gerne bei mir melden.

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte