Diseña un banner
Fondo, colores, espaciado, el botón de cierre y cómo hacer que toda la barra sea un enlace.
El panel Design es el icono del pincel en la barra lateral del editor. Abarca todo lo relativo al aspecto de la barra, salvo los propios elementos.
Los ajustes de Design se aplican a toda la barra, no a un solo elemento.
Aspecto y fondo
Sección titulada «Aspecto y fondo»Tres estilos de fondo:
| Style | Qué defines |
|---|---|
| Solid | Un color |
| Gradient | Un color inicial, un color final y un ángulo |
| Image | Una imagen que cubre la barra |
Colores
Sección titulada «Colores»| Ajuste | Qué abarca |
|---|---|
| Font | La tipografía. Déjala en la fuente del tema, salvo que la barra necesite una propia. |
| Text | El color del texto de la barra |
| Accent | Los botones, los códigos de descuento y la cuenta regresiva, a menos que alguno tenga su propio color |
Accent es el que conviene entender. Defínelo una vez y el botón, el contorno del código y el temporizador lo siguen. Si das a un elemento su propio color, ese elemento deja de seguirlo.
Botón de cierre y enlace
Sección titulada «Botón de cierre y enlace»Dos cosas distintas, ambas relacionadas con lo que ocurre cuando alguien interactúa con la barra.
Botón de cierre
Sección titulada «Botón de cierre»Actívalo y aparece una × al final de la barra. Define su color y su color al pasar el puntero.
Cuando alguien cierra el banner, permanece cerrado para esa persona: la aplicación lo recuerda en su navegador, así que no reaparece en la página siguiente.
Toda la barra clicable
Sección titulada «Toda la barra clicable»Actívalo y un clic en cualquier punto de la barra abre el enlace que definas debajo. Open in a new tab deja tu tienda abierta detrás.
Los clics en un botón o en un código de descuento dentro de la barra siguen haciendo lo suyo: el enlace de la barra no los absorbe.
Cómo se alinean los elementos dentro de la barra.
| Ajuste | Qué hace |
|---|---|
| Alignment | Izquierda, centrado, derecha o distribuido |
| Gap between elements | El espacio entre cada elemento |
| Wrap on small screens | Activado, la fila pasa a otra línea cuando se queda sin espacio. Desactivado, se comprime, lo que puede recortar mensajes largos. |
Espaciado
Sección titulada «Espaciado»Vertical padding es la altura de la barra. Horizontal padding es el margen en cada extremo.
Una barra fina se lee como un aviso; una alta se lee como una sección de la página. La mayoría de las barras de anuncios van mejor con la altura mínima.
CSS personalizado
Sección titulada «CSS personalizado»Al final del panel, Custom CSS (Developer Zone) admite reglas que se aplican solo dentro de este banner. No pueden afectar al resto de tu tema.
Úsalo para lo que los paneles no cubren: una sombra de texto, un espaciado entre letras, un borde distinto en un elemento.