Text auf Bildern verschwommen / Schatten

[LachendeKoralle]

Hallo ihr Lieben,

ich verwende das Theme "Debut", und dort erscheint der Text auf Bildern unscharf bzw. wie mit einem Schatten. Ich habe mal ein paar Screenshots angefügt.

Im Moment ist die Schrift noch weiß. Ich würde gern eine andere Textfarbe auswählen (über die Theme-Einstellungen), jedoch wird das Problem dann noch krasser (siehe Screenshots). Es sieht wirklich schrecklich und alles andere als professionell aus...

Hat jemand eine Idee, woran das liegen könnte?

Danke 🙂
Johanna

[Gabe]

Hey Johanna! @LachendeKoralle 

Schöner Shopname! Unc ich kann auch verstehen, dass die Bilder 100% stimmen müssen denn die sind das A und O eines Shops. 

An erster Stelle, wenn du die Overlay Opazität meinst, dies ist ein Feature des Debut Themes und da 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 hier und unser Theme Team kann das anschauen wenn du diesen Overlay Text Effekt nicht haben möchtest.

• Vielleicht hilft auch dieser Leitfaden in unserer Englischen Community.

Bzgl. deinen Bilder die verschwommen aussehen - das kann mehrere Ursachen haben, wie z. B. der Browser selber. Wenn du mir die Shop URL oder ein Link zum betroffenen Bild schickst, kann ich diese Bilder mal anschauen um zu sehen was da Sache ist. Und welchen Bildeditor verwendest du um die Bilder zu bearbeiten? Änderst du da die Bildauflösung irgendwie bevor du das Bild zu Shopify hochlädst?

Vielleicht hilft dir diese Anleitung bzgl. Produktfotografierichtlinien wenn du da runterscrollst -> das mit Handshake kannst du ignorieren aber die Infos in dieser Anleitung dürften auch für dich zutreffen.

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:

• GIMP
• Adobe Photoshop
• Fotor
• Pixlr

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

• Produktbilder
• Hochladen von Bilder
• Was ist das Bildseitenverhältnis?

[r8r]

@LachendeKoralle – ja, das ist ein Textschatten. Wenn Du den in einer Kontrastfarbe verwendest, dann funktioniert der Effekt gut, je weniger Kontrast zwischen Schrift und Schatten besteht, desto mehr erzielst Du einen "Blur"-Effekt. Das ganze lässt sich – wenn nicht per Customizer – im Handumdrehen per CSS entfernen, sofern Du uns den Link zum Store verrätst.

Mario

[LachendeKoralle]

Danke für die Antwort! Ich hab mir das jetzt mal selbst angeschaut und die Stellen im CSS verändert (habe nach "text-shadow" gesucht und alle dahinterstehenden Zahlen auf 0 gesetzt).

Der Schatten ist nun weg.

[r8r]

@LachendeKoralle das ist zwar die Holzhammer-Methode und die Behebung sollte in einer Zeile Code möglich gewesen sein, aber wenn die Lösung für Dich passt, dann power to you 😉

[LachendeKoralle]

@r8rWie hätte die einfachere Lösung genau ausgesehen?

Eine andere Lösung hatte ich vorher ausprobiert, nämlich alle diese Stellen einfach zu löschen. War nicht so geschickt 😄

[r8r]

@LachendeKoralle das kann ich nicht im Detail sagen, da ich den Link zum Store noch nicht habe 😉

[LachendeKoralle]

@r8r Hier der Link: https://goodmoon.de/

[r8r · Accepted solution]

@LachendeKoralle das hier am ende der theme CSS-Datei sollte das gewünschte Ergebnis erzielen, ohne alle anderen Schatten zu killen:

.hero .mega-title, .hero .mega-subtitle { text-shadow: none; }

LG, Mario