Een banner ontwerpen
Achtergrond, kleuren, witruimte, de sluitknop en de hele balk een link maken.
Het paneel Design is het penseelpictogram in de balk van de builder. Het omvat alles over hoe de balk eruitziet, behalve de elementen zelf.
Designinstellingen gelden voor de hele balk, niet voor één element.
Appearance and background
Section titled “Appearance and background”Drie achtergrondstijlen:
| Stijl | Wat je instelt |
|---|---|
| Solid | Eén kleur |
| Gradient | Een beginkleur, een eindkleur en een hoek |
| Image | Een afbeelding die de balk bedekt |
Colours
Section titled “Colours”| Instelling | Wat het omvat |
|---|---|
| Font | Het lettertype. Laat het op het themalettertype staan, tenzij de balk een eigen lettertype nodig heeft. |
| Text | De tekstkleur van de balk |
| Accent | Knoppen, kortingscodes en de aftelling, tenzij een element een eigen kleur krijgt |
Accent is de instelling die je goed moet begrijpen. Stel hem één keer in en de knop, de omlijning van de code en de timer volgen allemaal. Geef een element een eigen kleur en dat element volgt niet meer.
Close button and link
Section titled “Close button and link”Twee afzonderlijke dingen, allebei over wat er gebeurt wanneer een bezoeker met de balk interacteert.
Close button
Section titled “Close button”Zet hem aan en aan het einde van de balk verschijnt een ×. Stel de kleur en de hoverkleur in.
Zodra een bezoeker de banner sluit, blijft hij voor die bezoeker gesloten: de app onthoudt dit in de browser, zodat hij op de volgende pagina niet terugkomt.
Whole bar clickable
Section titled “Whole bar clickable”Zet dit aan en een klik ergens op de balk opent de link die je eronder instelt. Met Open in a new tab blijft je winkel erachter open.
Klikken op een knop of kortingscode in de balk doen nog steeds hun eigen ding: de link van de balk slokt ze niet op.
Hoe de elementen in de balk worden uitgelijnd.
| Instelling | Wat het doet |
|---|---|
| Alignment | Links, gecentreerd, rechts of gespreid |
| Gap between elements | De ruimte tussen elk element |
| Wrap on small screens | Aan: de rij loopt door op een nieuwe regel als er geen ruimte meer is. Uit: hij wordt samengeperst, waardoor lange berichten kunnen worden afgekapt. |
Spacing
Section titled “Spacing”Vertical padding is hoe hoog de balk is. Horizontal padding is de marge aan elk uiteinde.
Een dunne balk leest als een mededeling, een hoge als een onderdeel van de pagina. De meeste aankondigingsbalken passen beter bij de dunne kant.
Custom CSS
Section titled “Custom CSS”Onderaan het paneel accepteert Custom CSS (Developer Zone) regels die alleen binnen deze banner gelden. Ze kunnen de rest van je thema niet bereiken.
Gebruik het voor dingen die de panelen niet dekken: een tekstschaduw, letterafstand of een andere rand op één element.