Bild mit Text

Erstellen Sie ein ansprechendes Bild-und-Text-Layout für Storytelling, Promotions und Funktionshervorhebungen.

Ausgewählte Links

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Nutzen Sie diesen Abschnitt, um ein Bild und schriftliche Inhalte in einem klaren geteilten Layout zu kombinieren. Sie können die Blöcke neu anordnen, um festzulegen, welche Seite zuerst erscheint, und anschließend Ausrichtung, Stapelung, Abstände und Farbgestaltung an verschiedene Inhaltstypen und Bildschirmgrößen anpassen. Einen umfassenderen Überblick darüber, wie dies in Ihr Storefront-Layout passt, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Diese Einstellungen bestimmen, wie sich die beiden Seiten als Layout verhalten, bevor Sie die einzelnen Blöcke gestalten.

Inhaltsausrichtung steuert, wie Bild und Text vertikal ausgerichtet werden. Eine Ausrichtung oben eignet sich meist am besten für längere Texte, während eine Ausrichtung in der Mitte für kürzere Promo-Inhalte passt.
Sticky-Inhalte halten die kürzere Seite beim Scrollen auf dem Desktop im sichtbaren Bereich. Das ist besonders nützlich, wenn eine Seite deutlich höher ist als die andere, etwa ein langer Textbereich neben einem einzelnen Bild.
Auf Mobilgeräten stapeln wandelt das Layout auf kleineren Bildschirmen in eine einspaltige Darstellung um. Verwenden Sie dies, wenn das nebeneinander angeordnete Layout beengt wirkt oder wenn Sie eine klarere Leserichtung wünschen.
Auf dem Desktop stapeln erstellt auch auf größeren Bildschirmen ein vertikales Layout. Das kann für redaktionellere Darstellungen gut funktionieren oder wenn das Bild deutlich über oder unter dem Text stehen soll.

Sticky-Inhalte sind nur auf dem Desktop verfügbar und gelten nicht, wenn das Stapeln aktiviert ist. Wenn Sie den Sticky-Effekt möchten, lassen Sie den Abschnitt auf dem Desktop nebeneinander angeordnet.

Abschnittsspezifische Einstellungen

Farbeinstellungen

Mit diesen Farbanpassungen kann dieser Abschnitt seine eigene Textdarstellung verwenden, anstatt sich vollständig auf die breiteren Theme-Farben zu stützen. Sie sind besonders nützlich, wenn das Bild, der Hintergrund oder der Inhaltston einen stärkeren Kontrast oder eine stärker markenbezogene Darstellung benötigen.

Passen Sie Symbol-, Text- und Zwischenüberschriftenfarben gemeinsam an, damit der Abschnitt weiterhin visuell stimmig wirkt.
Prüfen Sie die Lesbarkeit nach einer Farbänderung erneut, insbesondere wenn Sie auch Overlays oder ein Hintergrundbild verwenden.
Verwenden Sie Anpassungen gezielt auf der Seite, damit dieser Abschnitt aus einem bestimmten Grund heraussticht und nicht nur, weil er anders gestaltet ist.

Unterstützte Blocktypen

Bild
Rich text

Dieser Abschnitt unterstützt bis zu 4 Blöcke, ist aber in der Regel am stärksten, wenn er als einfache zweiteilige Anordnung mit einem visuellen Block und einem Textblock verwendet wird. Für die Grundlagen der Bearbeitung siehe Shopify-Dokumentation zum Anpassen von Abschnitten

Bild-Block

Der Bild-Block stellt die visuelle Seite des Layouts bereit, mit Steuerungen für Bildform, Größe, Seitenverhältnis, Bildunterschriften, Overlays und Sichtbarkeit. Siehe Company XYZ-Dokumentation zum Bild-Block.

Verwenden Sie maximale Bildbreite und Seitenverhältnis gemeinsam, um zu steuern, wie präsent das Bild wirkt.
Fügen Sie eine Bildunterschrift nur hinzu, wenn sie nützlichen Kontext ergänzt, etwa eine Beschriftung, einen unterstützenden Hinweis oder eine Quellenangabe.
Verwenden Sie Overlay-Einstellungen sparsam, wenn das Bild weiterhin klar und detailreich wirken soll.

Rich text-Block

Der Rich text-Block stellt die schriftliche Seite des Layouts bereit, einschließlich Überschriften, Fließtext, Symbolen, einer Schaltfläche und optionaler Blockhintergrund-Gestaltung. Siehe Company XYZ-Dokumentation zum Rich text-Block.

Verwenden Sie diesen Block für die Hauptbotschaft, unterstützende Details und einen klaren nächsten Schritt.
Wenn Sie einen Blockhintergrund hinzufügen, stellen Sie sicher, dass er das Bild unterstützt, statt mit ihm zu konkurrieren.
Stimmen Sie die Schaltflächen-Gestaltung auf die Bedeutung der Aktion ab, damit das Layout nicht zu unruhig wirkt.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen fügen eine optionale Einleitung über dem Hauptlayout hinzu. Verwenden Sie sie, wenn Bild und Text vor dem Blockinhalt eine gemeinsame Überschrift, Bildunterschrift, ein Symbol oder eine Abschnittsaktion benötigen.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts. Größere Abstände helfen bildgeführten Layouts, mehr Luft zu bekommen, während engere Abstände besser funktionieren, wenn dieser Abschnitt in einer Abfolge verwandter Inhaltsblöcke steht.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem gesamten Abschnitt hinzuzufügen. Diese Einstellungen können eine stärkere visuelle Stimmung erzeugen, wirken sich aber auch auf den Kontrast und darauf aus, wie großzügig das Layout wirkt.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten im Abschnitt eine Linie hinzu. Verwenden Sie sie, um klarere Grenzen zu schaffen, wenn dieses Layout zwischen ähnlichen Inhaltsbereichen erscheint.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf dem Desktop, auf Mobilgeräten oder auf beiden angezeigt wird. Das ist besonders nützlich, wenn Sie eine eigene mobile Darstellung wünschen, statt sich überall auf ein einziges Layout zu verlassen.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die innere Inhaltsbreite als auch die äußere Abschnittsbreite. Schmalere Breiten helfen dabei, Text leichter lesbar zu machen, während breitere Einstellungen bildgeführten Layouts ein immersiveres Gefühl geben.

Die Vorschau im Editor kann einschränken, wie deutlich Breitenänderungen erscheinen, daher sollten Sie größere Breitenanpassungen auf der Live-Seite prüfen, bevor Sie sie abschließen. Weitere Details zur Bearbeitungsoberfläche finden Sie in der Shopify-Dokumentation zum Theme-Editor

Nutzungshinweise

Beginnen Sie mit der Blockreihenfolge. Platzieren Sie das Bild oder den Text zuerst, je nachdem, was die Geschichte oder Promotion anführen soll.
Verwenden Sie Sticky-Inhalte bei unausgewogenen Layouts. Das ist am wirksamsten, wenn eine Seite auf dem Desktop deutlich kürzer ist als die andere.
Halten Sie die visuelle Hierarchie klar. Wenn Sie Overlays, benutzerdefinierte Textfarben und Hintergründe zusammen verwenden, reduzieren Sie eines davon, um die Lesbarkeit zu schützen.
Passen Sie die Layoutbreite an den Inhalt an. Verwenden Sie schmalere Breiten für textlastiges Storytelling und breitere Layouts für bildgeführte Abschnitte.
Prüfen Sie gestapelte mobile Layouts. Stellen Sie sicher, dass Leserichtung, Bildausschnitt und Position der Schaltfläche auf kleineren Bildschirmen weiterhin bewusst gewählt wirken.
Überprüfen Sie beide Viewport-Größen. Desktop- und Mobile-Steuerungen können unterschiedliche Ausrichtung, Sichtbarkeit und Medienverhalten erzeugen, daher sollten Sie den Abschnitt auf beiden testen.
Behandeln Sie zusätzliche Blöcke als gestalterische Änderung. Wenn Sie weitere Blöcke hinzufügen, kann sich das Gleichgewicht des Abschnitts so stark verändern, dass das ursprüngliche einfache geteilte Layout nicht mehr im Vordergrund steht.
Wählen Sie Medien mit Blick auf den Zuschnitt. Getrennte Desktop- und Mobile-Medien können die Passung verbessern, aber auch Bildausschnitt, Ladeverhalten und Lesbarkeit verändern.
Halten Sie Formularzustände gut lesbar. Wenn Sie Inhalte verwenden, die von Kundeneingaben abhängen, stellen Sie sicher, dass leere, Fehler- und Erfolgszustände weiterhin leicht zu lesen sind.
Prüfen Sie Sticky-Inhalte im Kontext. Überprüfen Sie sie zusammen mit benachbarten Abschnitten und auf jeder Bildschirmgröße, damit sie beim Scrollen keine wichtigen Inhalte verdecken oder verdrängen.

Align v2.0