Erfolgreich
Bild
Fügen Sie ein eigenständiges Bild mit flexiblen Steuerelementen für Größe, Zuschnitt, Beschriftung, Overlay und mobiles Layout hinzu.
Verwenden Sie diesen Block, um ein eigenständiges Bild mit flexiblen Anzeigeoptionen hinzuzufügen. Sie können Form, Breite, Zuschnittverhalten, Beschriftung, Overlay-Behandlung, Ausrichtung und Linkverhalten anpassen, damit es zum umliegenden Layout passt. Einen umfassenderen Überblick darüber, wie dies in die Theme-Inhalte passt, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Bildeinstellungen
Abschnitt betitelt „Bildeinstellungen“Diese Gruppe steuert das Bild selbst und seine Darstellung. Allgemeinere Hinweise zu bildbezogenen Steuerelementen finden Sie in der Referenz zu Bildeinstellungen.
Wählen Sie zuerst das Bild aus und verfeinern Sie dann seine Darstellung. Der Bildstil verändert die visuelle Form, während die maximale Bildbreite es Ihnen ermöglicht, das Bild einzuschränken oder über den verfügbaren Platz zu strecken. Wenn Sie die maximale Bildbreite auf 0 setzen, nutzt das Bild die volle verfügbare Breite.
Das Seitenverhältnis ist hilfreich, wenn Sie ein einheitlicheres Layout wünschen, insbesondere wenn mehrere Bilder zusammen erscheinen. Das Standardverhältnis erhält die natürlichen Proportionen des Bildes, während feste Verhältnisse ein ordentlicheres Raster erzeugen, aber das sichtbare Bild zuschneiden können.
Das mobile Seitenverhältnis kann dem Hauptverhältnis folgen oder eine eigene Einstellung verwenden. Das ist hilfreich, wenn ein breiter Zuschnitt auf dem Desktop auf kleineren Bildschirmen zu kurz oder zu eng wirkt.
Wenn Sie einen Link hinzufügen, wird das Bild anklickbar. Das Öffnen in einem neuen Tab ist vor allem für externe Ziele oder Downloads nützlich.
Feste Seitenverhältnisse können die Ränder des Bildes zuschneiden. Prüfen Sie sowohl Desktop als auch Mobilgerät, wenn das Bild Gesichter, Produktdetails oder Text enthält.
Beschriftungseinstellungen
Abschnitt betitelt „Beschriftungseinstellungen“Verwenden Sie die Beschriftung, wenn das Bild eine Bezeichnung, eine kurze Erklärung oder eine Quellenangabe benötigt. Sie können sie oberhalb oder unterhalb des Bildes platzieren und dann Ausrichtung und Textgröße an ihre Funktion anpassen.
Kurze Beschriftungen sind in der Regel am besten geeignet. Wenn die Beschriftung stärker hervorgehoben werden soll, erhöhen Sie die Textgröße, aber halten Sie sie kurz, damit das Bild im Mittelpunkt bleibt.
Overlay-Einstellungen
Abschnitt betitelt „Overlay-Einstellungen“Overlay-Einstellungen fügen dem Bild eine Volltonfarbe oder einen Verlauf hinzu. Das kann helfen, einen stärkeren visuellen Stil zu erzeugen oder den Kontrast der Beschriftung vor unruhigen Fotos zu verbessern.
Die Deckkraft steuert, wie stark das Overlay das Bild beeinflusst. Eine geringere Deckkraft erhält mehr Bilddetails, während eine höhere Deckkraft einen dramatischeren getönten Effekt erzeugt.
Einstellungen zur Ausrichtung
Abschnitt betitelt „Einstellungen zur Ausrichtung“Diese Einstellungen steuern, wie der Block im verfügbaren Platz auf Desktop und Mobilgeräten sitzt. Sie sind besonders wichtig, wenn das Bild nicht die volle Breite ausfüllt.
Eine zentrierte Ausrichtung ist für eigenständige Bilder oft die sicherste Wahl. Eine Ausrichtung nach links oder rechts kann gut funktionieren, wenn das Bild Teil eines stärker redaktionellen Layouts ist oder mit benachbarten Inhalten kombiniert wird.
Standard-Block-Einstellungen
Abschnitt betitelt „Standard-Block-Einstellungen“Farbeinstellungen
Abschnitt betitelt „Farbeinstellungen“Mit diesen Steuerelementen können Sie die üblichen Farben für diesen Block überschreiben, einschließlich Rahmen- und Textfarbe. Verwenden Sie sie, wenn sich dieses Bild vom umliegenden Layout abheben soll oder wenn die Beschriftung einen klareren Kontrast benötigt. Siehe die Referenz zu Farbeinstellungen.
Sichtbarkeitseinstellungen
Abschnitt betitelt „Sichtbarkeitseinstellungen“Verwenden Sie die Sichtbarkeitssteuerungen, um diesen Block je nach Gerät ein- oder auszublenden. Das ist nützlich, wenn Sie separate Bilddarstellungen für Desktop- und Mobile-Layouts wünschen. Siehe die Referenz zu Sichtbarkeitseinstellungen.
Editor-Einstellungen
Abschnitt betitelt „Editor-Einstellungen“Editor-Einstellungen helfen Ihnen, den Block in der Seitenleiste des Editors klar zu kennzeichnen. Ein benutzerdefinierter Editor-Titel ist besonders hilfreich, wenn Sie mehrere Bildblöcke im selben Bereich haben. Für die Block-Bearbeitungsoberfläche siehe Shopify-Dokumentation zum Theme-Editor
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Prüfen Sie Desktop und Mobilgeräte getrennt. Layout, Ausrichtung, Sichtbarkeit und Medienverhalten können je nach Viewport unterschiedlich sein. Prüfen Sie daher vor der Veröffentlichung beide Ansichten.
- Behalten Sie nach Möglichkeit die Fallback-Gestaltung bei. Leere oder Standard-Farboptionen erhalten in der Regel die umgebende Gestaltung, während explizite Farben, Verläufe oder Medien-Overrides den Block eigenständiger wirken lassen.
- Behandeln Sie separate Medien als bewusste Entscheidung. Unterschiedliche Desktop- und Mobile-Bilder können die Passung verbessern, aber auch Zuschnitt, Ladeverhalten, Fallback-Verhalten und Lesbarkeit verändern.
- Achten Sie auf wichtige Bildinhalte. Wenn das Bild Gesichter, Produktdetails oder Text enthält, prüfen Sie, ob der gewählte Zuschnitt das Motiv auf beiden Bildschirmgrößen weiterhin gut lesbar macht.