Erfolgreich
Banner-Farbeinstellungen
Passen Sie Bannerfarben, Verläufe und Overlays an, um klarere und markantere Bannerinhalte zu erhalten.
Verwenden Sie diese Einstellungsgruppe, um bannerbasierten Inhalten eine eigene Farbbehandlung zu geben, ohne die restliche Palette Ihres Themes zu verändern. Diese Steuerelemente überschreiben die Standard-Theme-Farben für Banner und eignen sich daher für Aktionen, Ankündigungen, Hero-Inhalte und andere Bereiche, die einen markanteren Look benötigen. Informationen dazu, wo diese Einstellungen angepasst werden, finden Sie in der Shopify-Dokumentation zum Theme-Editor. Einen allgemeinen Überblick darüber, wie Bannerbereiche aufgebaut sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Bannerfarben
Abschnitt betitelt „Bannerfarben“Die wichtigsten Farbsteuerungen definieren die Bannerfläche und die darauf angezeigten Inhalte. Sie können den Gesamteindruck mit Hintergrund- und Rahmenfarben gestalten und anschließend die Inhaltsstruktur mit separaten Farben für Überschriften, Unterüberschriften, Text und Symbole verfeinern.
Für das sauberste Ergebnis wählen Sie zuerst die Hintergrund- und die Haupttextfarbe. Die Banner-Textfarbe dient als Fallback für Banner-Textinhalte, wenn keine spezifischere Textfarbe angewendet wird. Sie ist daher der beste Ausgangspunkt, um einen gut lesbaren Kontrast zu schaffen.
Erstellen Sie Bannerfarben als Set und nicht eine Einstellung nach der anderen. Wenn Hintergrund, Text, Symbole und Rahmen keinem klaren Kontrastmuster folgen, kann das Banner schwerer zu erfassen und weniger bewusst gestaltet wirken.
Verläufe und visuelle Tiefe
Abschnitt betitelt „Verläufe und visuelle Tiefe“Sie können dem Banner-Hintergrund einen Verlauf hinzufügen, wenn eine flache Farbe zu schlicht oder zu schwer wirkt. Das eignet sich gut für Banner, die mehr visuelle Tiefe benötigen, ohne auf zusätzliche Bilder angewiesen zu sein.
Ein dezenter Verlauf wirkt in der Regel ausgefeilter als ein dramatischer. Wenn das Banner bereits kräftigen Text, starke Bilder oder mehrere Inhaltsebenen enthält, hilft ein zurückhaltender Verlauf dabei, die Botschaft im Fokus zu halten.
Overlay und Opazität
Abschnitt betitelt „Overlay und Opazität“Overlay-Steuerungen fügen dem Bannerbereich eine getönte Schicht hinzu, die helfen kann, Text vom Hintergrund abzuheben. Das ist besonders nützlich, wenn Bannerinhalte über Bildern oder anderen visuell unruhigen Flächen liegen.
Die Overlay-Opazität steuert, wie sichtbar diese Schicht wird. Eine Einstellung von 0% macht das Overlay vollständig transparent, während die Fallback-Einstellung die Opazität verwendet, die bereits in Ihren Haupteinstellungen für Farben definiert ist. Dieser Fallback ist hilfreich, wenn Banner-Overlays mit dem übergeordneten Styling Ihrer Website abgestimmt bleiben sollen.
Rahmen, Symbole und unterstützende Details
Abschnitt betitelt „Rahmen, Symbole und unterstützende Details“Rahmen- und Symbolfarben runden den Bannerstil ab, funktionieren aber am besten als unterstützende Akzente. Wenn sie dem Hintergrund zu nahe kommen, können sie verschwinden. Wenn sie deutlich stärker sind als der Text, lenken sie möglicherweise von der Hauptbotschaft ab.
Ein guter Ansatz ist es, Rahmen dezent zu halten und die Symbolfarbe zur Unterstützung der Inhaltsstruktur zu verwenden. Lassen Sie Überschriften und primäre Aktionen den größten Teil der visuellen Betonung tragen, sofern das Banner nicht symbolgeführt sein soll.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Beginnen Sie mit dem Kontrast. Legen Sie zuerst die Hintergrund- und Haupttextfarbe fest, damit alle anderen Bannerfarben auf einer gut lesbaren Basis angepasst werden können.
- Verwenden Sie Verläufe sparsam. Halten Sie Verläufe dezent, wenn Banner bereits starke Bilder, fette Typografie oder mehrere Inhaltsebenen enthalten.
- Passen Sie Overlays an, bevor Sie die Palette neu schreiben. Ein stärkeres Overlay verbessert die Textklarheit oft schneller als das Ändern mehrerer Text- und Akzentfarben.
- Halten Sie Akzente sekundär. Rahmen- und Symbolfarben sollten den Bannerstil unterstützen, ohne zum Hauptfokus zu werden.
- Verwenden Sie Fallbacks bewusst. Leere, transparente oder Standardwerte erhalten in der Regel das umgebende Banner-Styling, während explizite Farben und Verläufe den Bannerbereich eigenständiger wirken lassen.