Buttons

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Button-Block
3. Company XYZ-Dokumentation zu Header-Einstellungen
4. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
5. Company XYZ-Dokumentation zu Abschnittsinnenabstand-Einstellungen
6. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
7. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
8. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie Buttons, um eine oder mehrere klare Aktionen dort zu platzieren, wo Kunden einen offensichtlichen nächsten Schritt benötigen. Das eignet sich gut für Call-to-Action-Elemente auf Landingpages, Gruppen mit Schnelllinks, Werbehinweise oder einfache Navigationskürzel. Einen breiteren Überblick darüber, wie Abschnitte und Blöcke im Editor funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die Haupt-Steuerelemente des Abschnitts bestimmen, wie die Schaltflächengruppe auf Desktop und Mobilgeräten angeordnet wird. Separate Ausrichtungseinstellungen ermöglichen Ihnen, eine breitere Desktop-Darstellung beizubehalten und gleichzeitig das Layout für kleinere Bildschirme zu komprimieren.

Layout schaltet die Gruppe zwischen einer horizontalen Reihe und einer vertikalen Spalte um. Reihen eignen sich am besten für eine kleine Anzahl kurzer Bezeichnungen, während Spalten leichter zu erfassen sind, wenn die Bezeichnungen länger sind oder jede Aktion mehr Platz benötigt.

Wenn Sie mehr als eine Schaltfläche hinzufügen, hilft Button width dabei, den visuellen Rhythmus zu steuern. Behalten Sie gemischte Breiten bei, wenn sich die Bezeichnungen deutlich in der Länge unterscheiden, und verwenden Sie gleiche Breiten, wenn Sie eine klarere, einheitlichere Schaltflächengruppe wünschen.

Tipp

Wenn Schaltflächen auf Mobilgeräten beengt wirken, versuchen Sie zuerst ein Spaltenlayout, bevor Sie den Schaltflächentext kürzen. Gestapelte Aktionen sind oft leichter zu erfassen und anzutippen.

Unterstützte Blocktypen

1. Button

Button-Block

Ein Button-Block fügt dem Abschnitt eine weitere Aktion mit eigenem Text, Link, Stil, Icon, Verhalten der mobilen Breite und Geräte-Sichtbarkeit hinzu. Mehr über den Schaltfläche erfahren Sie.

Verwenden Sie Button-Blöcke, wenn Sie mehrere Aktionen in derselben Gruppe benötigen, etwa primäre und sekundäre Call-to-Action-Elemente oder eine kurze Liste von Ziel-Links. Sie können einzelne Schaltflächen auch geräteabhängig ausblenden, was hilfreich ist, wenn Mobilgeräte und Desktop leicht unterschiedliche Aktionssets benötigen.

Wenn Sie mehrere Button-Blöcke zusammen verwenden, halten Sie die visuelle Hierarchie klar. Eine starke primäre Aktion und ein oder zwei unterstützende Aktionen funktionieren in der Regel besser als mehrere gleich auffällige Schaltflächen.

Abschnittsspezifische Einstellungen

Farbeinstellungen

Farbeinstellungen überschreiben die Standardfarben für Icon, Text und Unterüberschrift nur für diesen Abschnitt. Sie sind besonders nützlich, wenn Sie einen benutzerdefinierten Hintergrund hinzufügen und stärkeren Kontrast oder eine bewusstere Farbgestaltung benötigen.

Passen Sie diese Farben gemeinsam an, statt jeweils nur eine zu ändern. Wenn der Überschriftenbereich vor dem Hintergrund schwerer lesbar wird, aktualisieren Sie zuerst die Text- und Unterüberschriftenfarben, bevor Sie die Schaltflächenstile ändern.

Wenn Sie einen benutzerdefinierten Hintergrund oder ein Overlay verwenden, prüfen Sie immer, ob Überschriftentext, Icons und Schaltflächen auf einen Blick gut lesbar bleiben.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen steuern den optionalen Einleitungsinhalt oberhalb der Schaltflächengruppe. In diesem Abschnitt können sie auch eine integrierte Schaltfläche enthalten, was nützlich ist, wenn Sie ein einfaches Layout aus Überschrift und Aktion wünschen, ohne sich nur auf Button-Blöcke zu verlassen.

Verwenden Sie den Überschriftenbereich, wenn die Schaltflächen Kontext benötigen, etwa eine kurze Verkaufsbotschaft oder eine Anweisung. Die integrierte Schaltfläche hat eigene Steuerungen für Stil, Icon, Link, Platzierung und mobile Breite, und diese Einstellungen gelten nur für die Schaltfläche auf Abschnittsebene.

Wenn Sie die integrierte Schaltfläche mit Button-Blöcken kombinieren, entscheiden Sie, welche Aktion führen soll. Halten Sie eine Schaltfläche visuell dominanter, damit der Abschnitt nicht wie eine Liste konkurrierender Optionen wirkt.

Hinweis

Schaltflächen nur mit Icon sind am besten für Fälle geeignet, in denen die Bedeutung eindeutig ist. Textbeschriftungen sind in der Regel klarer und leichter zu erfassen.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, die Schaltflächengruppe über einer Farbe, einem Farbverlauf, einem Bild oder einem Video zu platzieren. Dadurch kann ein einfacher Aktionsbereich zu einem stärkeren Werbeabschnitt werden, Hintergründe beeinflussen jedoch auch Lesbarkeit und Abstand.

Verwenden Sie hellere Hintergründe für textreiche Einleitungen oder erhöhen Sie die Overlay-Stärke, wenn das Hintergrundbild mit den Schaltflächen konkurriert. Hintergrundmedien speziell für Mobilgeräte können helfen, den Abschnitt auf kleineren Bildschirmen aufgeräumter zu halten.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts. Verringern Sie den Padding, wenn Buttons nahe Inhalte unterstützt, oder erhöhen Sie ihn, wenn Sie möchten, dass die Aktionen als eigenes Ziel hervorstechen.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen optional eine Linie oberhalb oder unterhalb des Abschnitts hinzu. Verwenden Sie Trennlinien, wenn Sie eine sanfte visuelle Abgrenzung wünschen, ohne eine vollständige Hintergrundgestaltung einzuführen.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der gesamte Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist hilfreich, wenn Sie einen dedizierten Aktionsabschnitt für Mobilgeräte wünschen, statt ein Layout überall erzwingen zu müssen.

Breiten-Einstellungen

Breiten-Einstellungen steuern die Inhaltsbreite und die äußere Abschnittsbreite. Schmalere Inhaltsbreiten können eine kleine Schaltflächengruppe bewusster wirken lassen, während breitere Abschnittsbreiten effektiver sind, wenn Sie den Abschnitt mit einem starken Hintergrund kombinieren.

Achtung

Breitenänderungen können im Editor anders aussehen als auf der Live-Seite, insbesondere bei Full-width- oder Full-bleed-Layouts. Sehen Sie sich die Seite selbst in der Vorschau an, bevor Sie Abstand und Ausrichtung final festlegen.

Nutzungshinweise

1. Halten Sie die Liste kurz. Verwenden Sie diesen Abschnitt für eine fokussierte Auswahl an Aktionen statt für ein langes Link-Menü.
2. Passen Sie das Layout an die Länge der Bezeichnung an. Wählen Sie eine Reihe für kurzen Schaltflächentext und eine Spalte, wenn Schaltflächen mehr Platz benötigen.
3. Führen Sie mit einer priorisierten Aktion. Machen Sie die wichtigste Schaltfläche visuell am stärksten und halten Sie sekundäre Aktionen zurückhaltender.
4. Prüfen Sie Desktop und Mobilgeräte getrennt. Ausrichtung, Breite, Sichtbarkeit und Medienauswahl können das Layout und die Lesbarkeit des Abschnitts zwischen verschiedenen Ansichten verändern.
5. Verwenden Sie die Standardgestaltung bewusst. Leere, transparente oder anderweitig neutrale Werte erhalten in der Regel die Fallback-Gestaltung, während explizite Farben oder Medien den Abschnitt eigenständiger wirken lassen.
6. Prüfen Sie das Medienverhalten vor der Veröffentlichung. Wenn Sie unterschiedliche Medien für Desktop und Mobilgeräte verwenden, bestätigen Sie Zuschnitt, Laden und Lesbarkeit des Texts auf beiden Größen.