Zum Inhalt springen

Bildeinstellungen

Steuern Sie Bildstil, Größe, Zuschnitt, mobile Anordnung und Verlinkung an einem Ort.

Mit diesen Einstellungen steuern Sie, wie ein Bild aussieht, passt und sich verhält, überall dort, wo diese Bildgruppe verfügbar ist. Sie können das Bild auswählen, seine Form und Breite anpassen, festlegen, wie es auf dem Desktop und auf Mobilgeräten zugeschnitten wird, und es optional klickbar machen. Einen umfassenderen Überblick darüber, wie Theme-Einstellungen bearbeitet werden, finden Sie in der Shopify-Dokumentation zum Theme-Editor

Für eine visuelle Zusammenfassung dieser Steuerelemente sehen Sie sich die Referenz zu Bildeinstellungen an.

Beginnen Sie mit der Auswahl eines Bildes, das bereits zum verfügbaren Platz passt. Eine breite Datei eignet sich am besten für Banner und horizontale Layouts, während Quadrate oder Hochformat-Bilder in engeren Inhaltsbereichen meist natürlicher wirken.

Wenn Ihr Bild Text, Logos oder ein eng gerahmtes Motiv enthält, prüfen Sie es nach dem Ändern der Seitenverhältniseinstellungen erneut. Durch Zuschnitt können wichtige Details an den Rändern entfernt werden.

Der Bildstil verändert die gesamte Darstellung des Bildes. Verwenden Sie den Standardstil für eine neutrale Optik, abgerundete Ecken für eine weichere Darstellung oder einen Kreis, wenn das Bild zentriert ist und einfach genug ist, um in einen kreisförmigen Rahmen zu passen.

Die maximale Bildbreite steuert, wie groß das Bild innerhalb des verfügbaren Platzes erscheinen kann. Wenn Sie 0 festlegen, kann sich das Bild auf die gesamte verfügbare Breite ausdehnen, was für große visuelle Bereiche nützlich ist. Niedrigere Werte helfen dabei, Bilder kompakter und ausgewogener neben Text oder anderen Inhalten zu halten.

Das Seitenverhältnis steuert die Form des Bilderrahmens. Wenn Sie es auf Default belassen, bleiben die natürlichen Proportionen des Bildes erhalten, während feste Verhältnisse für ein einheitlicheres Layout über verschiedene Bilder hinweg sorgen.

Verwenden Sie feste Verhältnisse, wenn mehrere Bilder sauber ausgerichtet sein sollen oder wenn Sie einen bewussteren visuellen Rhythmus wünschen. Querformat- und Breitbild-Verhältnisse eignen sich für breite Motive, während Quadrat- und Hochformat-Verhältnisse kleineren Inhaltsbereichen ein strukturierteres Aussehen verleihen können.

Feste Seitenverhältnisse können das Bild an jeder Seite zuschneiden. Wenn der Fokuspunkt nahe an einer Kante liegt, prüfen Sie das Ergebnis in der Vorschau, bevor Sie es veröffentlichen.

Mit dem mobilen Seitenverhältnis können Sie die Bildform für kleinere Bildschirme anpassen, ohne die Desktop-Darstellung zu ändern. Das ist hilfreich, wenn ein breiter Desktop-Zuschnitt auf dem Smartphone zu flach oder unpassend wirkt.

Wenn Sie die mobile Option auf Default belassen, wird das Hauptseitenverhältnis verwendet. Wählen Sie ein separates mobiles Verhältnis, wenn das Bild auf kleineren Bildschirmen mehr vertikalen Raum oder einen einfacheren Zuschnitt benötigt.

Sie können einen Link hinzufügen, um das Bild klickbar zu machen. Das ist nützlich für Werbegrafiken, hervorgehobene Inhalte oder Markenvisuals, die zu einem bestimmten Ziel führen sollen. Verlinkte Bilder funktionieren am besten, wenn das Ziel aus dem umgebenden Inhalt klar hervorgeht.

Verwenden Sie die Option für einen neuen Tab nur dann, wenn sie das Browsing-Erlebnis verbessert, etwa bei externen Zielen. Bei den meisten internen Navigationswegen wirkt das Öffnen im gleichen Tab natürlicher.

  1. Wählen Sie das richtige Quellbild aus. Beginnen Sie mit einem Bild, das bereits zum vorgesehenen Layout passt, damit Sie weniger aggressiv zuschneiden müssen.
  2. Gleichen Sie Größe und Breitensteuerung aus. Passen Sie die maximale Breite an, wenn ein Bild zu groß wirkt, statt sich nur auf Änderungen des Seitenverhältnisses zu verlassen.
  3. Prüfen Sie Zuschnitte auf Mobilgeräten. Kontrollieren Sie kleinere Bildschirme separat, besonders wenn das Desktop-Bild breit ist oder wichtige Fokusdetails enthält.
  4. Vergleichen Sie Desktop- und mobile Einstellungen. Prüfen Sie beide Viewport-Größen, wenn Sie Zuschnitt, Ausrichtung, Sichtbarkeit oder Medienoptionen ändern, da sie unterschiedliche Ergebnisse auf dem Bildschirm erzeugen können.
  5. Bewahren Sie bei Bedarf das Fallback-Styling. Lassen Sie leere, transparente oder Standard-Stilwerte unverändert, wenn der Bildbereich das integrierte Aussehen und Verhalten des Themes beibehalten soll.
  6. Verwenden Sie Überschreibungen gezielt. Wählen Sie explizite Farben, Verläufe oder alternative Medien nur dann, wenn sich der lokale Bildbereich deutlich vom umgebenden Inhalt abheben soll.
  7. Schützen Sie wichtige Inhalte. Vermeiden Sie feste Verhältnisse bei Bildern mit randabständig gesetztem Text, Logos oder engem Zuschnitt, es sei denn, Sie haben bestätigt, dass der Zuschnitt gut funktioniert.