Ein Banner gestalten
Hintergrund, Farben, Abstände, die Schließen-Schaltfläche und wie die ganze Leiste zum Link wird.
Der Bereich Design ist das Pinselsymbol in der Leiste des Builders. Er umfasst alles zum Aussehen der Leiste, abgesehen von den Elementen selbst.
Die Design-Einstellungen gelten für die ganze Leiste, nicht für ein einzelnes Element.
Appearance and background
Abschnitt betitelt „Appearance and background“Drei Hintergrundstile:
| Stil | Was Sie festlegen |
|---|---|
| Solid | Eine Farbe |
| Gradient | Eine Startfarbe, eine Zielfarbe und ein Winkel |
| Image | Ein Bild, das die Leiste ausfüllt |
Colours
Abschnitt betitelt „Colours“| Einstellung | Was sie abdeckt |
|---|---|
| Font | Die Schriftart. Lassen Sie sie auf der Theme-Schrift, sofern die Leiste keine eigene braucht. |
| Text | Die Textfarbe der Leiste |
| Accent | Buttons, Rabattcodes und den Countdown – sofern keiner eine eigene Farbe hat |
Accent ist die Einstellung, die man verstehen sollte. Legen Sie sie einmal fest, und Button, Code-Rahmen und Timer folgen ihr. Geben Sie einem Element eine eigene Farbe, folgt dieses Element nicht mehr.
Close button and link
Abschnitt betitelt „Close button and link“Zwei getrennte Dinge, beide dazu, was passiert, wenn die Kundschaft mit der Leiste interagiert.
Close button
Abschnitt betitelt „Close button“Aktivieren Sie ihn, und am Ende der Leiste erscheint ein ×. Legen Sie seine Farbe und seine Hover-Farbe fest.
Sobald jemand das Banner schließt, bleibt es für diese Person geschlossen – die App merkt es sich im Browser, sodass es auf der nächsten Seite nicht wieder erscheint.
Whole bar clickable
Abschnitt betitelt „Whole bar clickable“Aktivieren Sie dies, und ein Klick irgendwo auf die Leiste öffnet den Link, den Sie darunter festlegen. Open in a new tab lässt Ihren Shop dahinter geöffnet.
Klicks auf einen Button oder einen Rabattcode in der Leiste tun weiterhin ihr eigenes Ding – der Link der Leiste schluckt sie nicht.
Wie sich die Elemente in der Leiste ausrichten.
| Einstellung | Was sie bewirkt |
|---|---|
| Alignment | Links, zentriert, rechts oder verteilt |
| Gap between elements | Der Abstand zwischen den einzelnen Elementen |
| Wrap on small screens | Aktiviert, bricht die Zeile in eine weitere Zeile um, wenn der Platz ausgeht. Deaktiviert, wird sie gestaucht, was lange Nachrichten abschneiden kann. |
Spacing
Abschnitt betitelt „Spacing“Vertical padding bestimmt, wie hoch die Leiste ist. Horizontal padding ist der Rand an jedem Ende.
Eine schmale Leiste wirkt wie ein Hinweis; eine hohe wie ein Abschnitt der Seite. Die meisten Ankündigungsleisten wollen das schmale Ende.
Custom CSS
Abschnitt betitelt „Custom CSS“Am Ende des Bereichs nimmt Custom CSS (Developer Zone) Regeln auf, die nur innerhalb dieses Banners gelten. Sie können den Rest Ihres Themes nicht erreichen.
Nutzen Sie es für das, was die Bereiche nicht abdecken – einen Textschatten, einen Buchstabenabstand, einen anderen Rahmen bei einem Element.