Bild

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Header-Einstellungen
3. Company XYZ-Dokumentation zu Abschnitts-Padding-Einstellungen
4. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
5. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
6. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
7. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Nutzen Sie diesen Abschnitt, um ein einzelnes Bild mit flexiblen Anzeige-Steuerelementen und optionalen unterstützenden Inhalten zu präsentieren. Einen umfassenderen Überblick über abschnittsbasierte Theme-Inhalte finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken. Er eignet sich gut für redaktionelle Fotografie, einfache Banner, Werbehinweise und verknüpfte visuelle Trennungen zwischen anderen Abschnitten.

Bildeinstellungen

Diese Einstellungen steuern das Bild selbst, einschließlich seiner Form, Breite, Zuschnittsverhalten und optionalem Link. Die wichtigsten Entscheidungen sind in der Regel Breite und Seitenverhältnis, da sie den größten Einfluss darauf haben, wie präsent das Bild im Layout wirkt.

Verwenden Sie die Einstellung für die maximale Bildbreite, um festzulegen, ob das Bild immersiv oder zurückhaltend wirken soll. Ein Bild in voller Breite sorgt für mehr Wirkung, während eine begrenzte Breite oft sauberer wirkt und sich leichter mit umliegenden Inhalten kombinieren lässt.

Mit den Seitenverhältnis-Einstellungen können Sie eine konsistente Bildform beibehalten, auch wenn Quellbilder variieren. Wählen Sie das natürliche Verhältnis, wenn die Komposition am wichtigsten ist, und verwenden Sie ein festes Verhältnis, wenn Sie über die Seite hinweg ein gleichmäßigeres Layout wünschen. Das separate mobile Verhältnis ist besonders hilfreich, wenn ein Zuschnitt für den Desktop auf kleineren Bildschirmen zu breit oder zu eng wirkt.

Die Bilddarstellung bietet Ihnen eine schnelle visuelle Anpassung, ohne die Datei selbst zu bearbeiten. Abgerundete Ecken eignen sich meist für weichere redaktionelle Layouts, während ein kreisförmiger Zuschnitt am besten funktioniert, wenn das hochgeladene Bild bereits nahezu quadratisch ist.

Erzwingte Seitenverhältnisse können das Bild zuschneiden. Prüfen Sie sowohl die Desktop- als auch die Mobile-Ansicht, damit wichtige Bildbereiche sichtbar bleiben.

Wenn Sie einen Link hinzufügen, sollte er eng mit dem Bild verbunden sein, damit der Abschnitt bewusst gestaltet und nicht rein dekorativ wirkt.

Beschriftungseinstellungen

Verwenden Sie den Beschriftungsbereich, um oberhalb oder unterhalb des Bildes einen kurzen Hinweis hinzuzufügen. Das eignet sich gut für Fotocredits, eine kurze Beschreibung oder kleinen unterstützenden Kontext, der mit dem Medium verbunden bleiben soll.

Obere Beschriftungen helfen, das Bild einzuleiten, bevor es erscheint, während untere Beschriftungen meist besser für Credits oder sekundäre Details geeignet sind. Halten Sie den Beschriftungstext kurz, damit er das Bild unterstützt, statt mit ihm zu konkurrieren.

Overlay-Einstellungen

Overlay-Einstellungen fügen dem Bild eine Volltonfarbe oder einen Farbverlauf hinzu. Das ist nützlich, um ein unruhiges Bild abzumildern, Stimmung zu erzeugen oder den Kontrast zu verbessern, wenn das Bild in der Nähe anderer visueller Elemente liegt.

Ein dezentes Overlay erzielt oft die größte Wirkung bei den geringsten visuellen Kosten. Starke Overlays können für dramatische Bilder effektiv sein, sie können aber auch Details verdecken, wenn sie zu weit gehen.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Einstellungen, um eine Beschriftung, Überschrift, Unterüberschrift, ein Icon und optional eine Schaltfläche oberhalb des Bildbereichs hinzuzufügen. In diesem Abschnitt ist der Header nützlich, wenn das Bild Kontext benötigt oder wenn Sie den Abschnitt in einen einfachen visuellen Hinweis mit klarer Aktion verwandeln möchten.

Halten Sie die Schaltfläche eng mit der Bild- oder Überschriftenbotschaft verbunden. Auf Mobilgeräten können die Position der Schaltfläche und das Verhalten bei voller Breite dazu beitragen, dass der Call-to-Action leichter wahrgenommen und angetippt werden kann.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Einstellungen, um den Abstand oberhalb und unterhalb des Abschnitts zu steuern. Mehr Innenabstand hilft einem hervorgehobenen Bild, für sich zu stehen, während engere Abstände dazu beitragen, dass es sich mit Inhalten in der Nähe verbunden anfühlt.

Es lohnt sich oft, Desktop- und Mobile-Abstände getrennt anzupassen, da große Bilder auf dem Desktop ausgewogen wirken können, auf kleineren Bildschirmen aber übermäßig hoch.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Abschnittshintergrund-Einstellungen, um Farbe, Farbverläufe, Bilder oder Video hinter dem Abschnitt hinzuzufügen. Das kann helfen, das Bild als gestalteten Inhaltsblock statt als eigenständiges Asset zu rahmen.

Leere oder transparente Hintergrundoptionen bewahren in der Regel das umliegende Theme-Styling. Deutlichere Hintergrundfarben, Farbverläufe oder Medienoptionen lassen den Abschnitt stärker in sich geschlossen wirken.

Wenn das Hauptbild bereits visuell unruhig ist, setzen Sie Hintergrundeffekte sparsam ein, damit der Abschnitt nicht überladen wirkt.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Einstellungen, um oben oder unten im Abschnitt eine Linie zu platzieren. Das ist eine einfache Möglichkeit, das Bild von umliegenden Inhalten abzugrenzen, ohne zusätzliches visuelles Gewicht hinzuzufügen.

Dezente Trennlinien-Stile funktionieren meist am besten, wenn das Bild selbst der Hauptfokus ist.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeitseinstellungen, um den Abschnitt je nach Gerät ein- oder auszublenden. Das ist nützlich, wenn Sie für den Desktop eine andere Bilddarstellung und für Mobilgeräte einen anderen Zuschnitt oder einen Ersatzabschnitt verwenden möchten.

Gerätespezifische Sichtbarkeit und Medienoptionen können Layout, Ausrichtung und Lesbarkeit verändern. Prüfen Sie daher beide Viewport-Größen, bevor Sie veröffentlichen.

Blenden Sie den Abschnitt auf einem Gerät nur dann aus, wenn dort ein anderer Abschnitt oder eine andere Layout-Entscheidung die Aufgabe eindeutig besser erfüllt.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Einstellungen, um die Inhaltsbreite und die äußere Abschnittsbreite zu steuern. In diesem Abschnitt beeinflusst die Inhaltsbreite, wie breit das Bild und der Header-Inhalt erscheinen können, während die Abschnittsbreite vor allem dann wichtig ist, wenn Sie einen Hintergrund hinzufügen oder möchten, dass sich der Abschnitts-Wrapper weiter erstreckt.

Eine schmalere Breite kann den Abschnitt redaktioneller wirken lassen, während breitere Einstellungen eine immersivere Darstellung erzeugen. Prüfen Sie Breitenänderungen nach Möglichkeit auf der Live-Seite, da der Editor das endgültige Layout nicht immer exakt wiedergibt.

Nutzungshinweise

1. Schützen Sie die Komposition. Prüfen Sie Zuschnitte auf Desktop und Mobilgeräten immer dann, wenn Sie ein erzwungenes Seitenverhältnis verwenden.
2. Passen Sie die Breite an den Zweck an. Verwenden Sie breitere Breiten für mehr Wirkung und schmalere Breiten für einen zurückhaltenderen, redaktionellen Look.
3. Halten Sie Beschriftungen kurz. Kurze Beschriftungen geben Kontext, ohne vom Bild abzulenken.
4. Setzen Sie Overlays sorgfältig ein. Verwenden Sie nur so viel Overlay-Stärke, wie nötig ist, um Stimmung oder Klarheit zu verbessern, ohne das Bild zu flach wirken zu lassen.
5. Vereinfachen Sie konkurrierende Elemente. Wenn Bild, Header, Schaltfläche und Hintergrund alle Aufmerksamkeit verlangen, reduzieren Sie ein oder zwei davon, damit der Abschnitt einen klaren Fokus hat.