E-Mail-Anmeldung

Ausgewählte Links

1. Company XYZ-Dokumentation zu Header-Einstellungen
2. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
3. Company XYZ-Dokumentation zu Abschnitts-Padding-Einstellungen
4. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
5. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
6. Company XYZ-Dokumentation zu Breiten-Einstellungen für das Layout
7. Shopify-Dokumentation zu Abschnitten und Blöcken
8. Shopify-Dokumentation zum Anpassen von Abschnitten

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um einen fokussierten Newsletter-Anmeldebereich dort einzufügen, wo Sie Interesse wecken, eine Aktion unterstützen oder Ihre E-Mail-Liste vergrößern möchten. Er funktioniert am besten, wenn die Botschaft kurz ist, der Nutzen klar erkennbar ist und das Formular genügend visuellen Abstand zum umliegenden Inhalt hat.

Abschnittsspezifische Einstellungen

Farbeinstellungen

Mit diesen Farbsteuerungen können Sie die übergeordneten Theme-Farben nur für diesen Abschnitt überschreiben. Verwenden Sie sie, wenn der Anmeldebereich stärkeren Kontrast, einen kampagnenspezifischen Look oder eine bessere Abgrenzung vom umgebenden Seiteninhalt benötigt.

Achten Sie besonders auf die Lesbarkeit, wenn Sie ein Hintergrundbild, einen Farbverlauf oder ein Video hinzufügen. Starker Kontrast zwischen Hintergrund, Überschrift und unterstützendem Text ist meist wichtiger als dekorative Farbauswahl.

Wenn Sie Hintergrundmedien verwenden, prüfen Sie den Abschnitt sowohl auf Desktop als auch auf Mobilgeräten, damit Überschrift, Text und Formular gut lesbar bleiben.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen steuern den einleitenden Inhalt oberhalb des Anmeldeformulars, einschließlich Icon, Beschriftung, Überschrift, Überschriftenebene und unterstützendem Text. Verwenden Sie diesen Bereich, um zu erklären, warum sich jemand anmelden sollte und was ihn erwartet.

Halten Sie den Text knapp und nutzen Sie eine nutzenorientierte Formulierung. Das Icon ist optional, daher lohnt es sich, es zu entfernen, wenn es visuelles Rauschen erzeugt oder die Botschaft nicht unterstützt.

Tipp

Wählen Sie den Überschriftentyp anhand Ihrer Seitenstruktur und nicht nur nach dem Erscheinungsbild, damit sich der Abschnitt sauber in die übrige Seitenhierarchie einfügt. Einen breiteren Überblick darüber, wie Abschnitte im Theme-Editor angeordnet sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Einstellungen für den Abschnittshintergrund

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, den Anmeldebereich auf einem Hintergrund aus Farbe, Farbverlauf, Bild oder Video zu platzieren. Overlay-Einstellungen helfen, den Kontrast zu verbessern und Text über Medien leichter lesbar zu machen.

Wenn Sie sowohl eine Farbe als auch einen Farbverlauf verwenden, hat der Farbverlauf Vorrang. Das gilt auch für Overlay-Farbverläufe. Prüfen Sie daher die endgültige Kombination, statt davon auszugehen, dass beide zusammen erscheinen.

Padding-Einstellungen

Padding-Einstellungen passen den Abstand oberhalb und unterhalb des Anmeldeinhalts an. Größere Abstände lassen den Abschnitt eher wie einen hervorgehobenen Callout wirken, während engere Abstände helfen, ihn natürlich zwischen anderen Inhalten einzuordnen.

Prüfen Sie den Abstand auf Mobilgeräten separat. Anmeldeabschnitte können auf kleineren Bildschirmen schnell gedrängt wirken, besonders wenn die Zwischenüberschrift länger ist.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oberhalb oder unterhalb des Abschnitts eine optionale Linie hinzu. Das ist nützlich, wenn der Anmeldebereich zwischen ähnlichen Abschnitten liegt und eine dezente visuelle Abgrenzung benötigt.

Wenn der Abschnitt bereits einen starken Hintergrund oder ausreichend Abstand hat, sind Trennlinien möglicherweise nicht nötig. Halten Sie sie dezent, damit sie das Layout unterstützen, ohne mit dem Formular zu konkurrieren.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob dieser Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist besonders nützlich, wenn Sie für kleinere Bildschirme eine andere Anmeldepräsentation wünschen.

Blenden Sie den Abschnitt nur auf einem Gerät aus, wenn Sie an anderer Stelle eine klare Alternative haben. Entfernen Sie eine wichtige Anmeldemöglichkeit auf Mobilgeräten nicht ohne einen anderen sichtbaren Weg zur Anmeldung.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Breite des Inhalts und die Gesamtbreite des Abschnitts-Containers. Verwenden Sie sie, um das Formular leichter scannbar zu machen oder um ein breiteres kampagnenartiges Banner zu erstellen.

Für die meisten Anmeldeabschnitte sorgt eine moderate Inhaltsbreite für einen fokussierten und gut lesbaren Text. Wenn Sie die Abschnittsbreite bei verwendetem Hintergrund ändern, sehen Sie sich die Live-Seite ebenso wie den Editor an, um die Wirkung genauer zu beurteilen. Hinweise zum Einrichten und Bearbeiten von Abschnitten im Theme-Editor finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

Nutzungshinweise

1. Starten Sie mit dem Nutzen. Verwenden Sie Überschrift und Unterüberschrift, um Besucherinnen und Besuchern genau zu sagen, warum sich eine Anmeldung lohnt, etwa exklusive Angebote, früher Zugang oder Produktaktualisierungen.
2. Halten Sie den Abschnitt lesbar. Kombinieren Sie Hintergrundmedien mit ausreichend Overlay und Textkontrast, damit der Anmeldebereich auf einen Blick klar bleibt.
3. Nutzen Sie die Breite zur Steuerung des Fokus. Schmalere Inhaltsbreiten passen meist zu einfachen Anmeldeaufforderungen, während breitere Layouts für Banner-artige Aktionen besser geeignet sind.
4. Passen Sie den Abstand an die Wichtigkeit an. Erhöhen Sie den Innenabstand, wenn dies eine primäre Handlungsaufforderung ist, und reduzieren Sie ihn, wenn sich die Anmeldung in einen längeren Seitenverlauf einfügt.
5. Prüfen Sie Mobilgeräte vor der Veröffentlichung. Kontrollieren Sie Überschriftlänge, Abstand und Lesbarkeit des Hintergrunds auf kleineren Bildschirmen, damit der Abschnitt übersichtlich und einfach nutzbar bleibt.
6. Prüfen Sie beide Ansichtsbereiche. Desktop- und Mobilsteuerungen können Ausrichtung, Sichtbarkeit und Medienpräsentation unterschiedlich verändern. Prüfen Sie den Abschnitt daher vor der Veröffentlichung in beiden Größen.
7. Halten Sie Formularzustände gut lesbar. Stellen Sie sicher, dass Erfolgs- und Fehlermeldungen weiterhin leicht zu lesen sind, insbesondere wenn stärkere Hintergrundgestaltung oder Medienauswahl den Kontrast verringern.