¿Quieres que tu banner de cookies parezca parte de tu sitio en lugar de algo añadido? La pestaña Estilo dentro de Diseño del banner controla los colores del banner, el tamaño del texto y la forma y color de sus tres botones. Todo lo que necesitas es WPConsent instalado y activado.
Esta guía recorre cada configuración de esa pestaña y muestra cómo comprobar tu trabajo en la vista previa en vivo antes de guardar.
Tabla de contenidos
- Configuración de los colores y el tamaño del texto del banner
- Dar forma a los botones
- Colorear los tres botones
- Vista previa del banner
- Guardar tus estilos
- Preguntas frecuentes
Antes de empezar, asegúrate de que WPConsent esté instalado y activado en tu sitio de WordPress.
Configuración de los colores y el tamaño del texto del banner
Para empezar, abriremos la pestaña que contiene los colores y el tamaño del texto del banner.
Desde la barra lateral de administración de WordPress, vaya a WPConsent » Diseño del banner.
Diseño del banner se abre en la pestaña Diseño. En la parte superior de la página hay tres pestañas en orden: Diseño, luego Estilo, luego Contenido. Para acceder a la configuración de estilo, haz clic en Estilo.
Las tres pestañas dividen el banner en tres trabajos. Diseño decide la forma del banner y dónde se sitúa, y nuestra guía sobre opciones de diseño del banner lo cubre. Contenido contiene cada palabra que dice el banner, cubierto en nuestra guía sobre contenido y texto del banner. Estilo, la pestaña en la que estamos, se encarga de cómo se ve todo.
Cada configuración de esta pestaña alimenta una vista previa en vivo que se abre desde un botón en la cabecera de la página. Puedes probar un color o una forma de botón y ver el resultado antes de comprometerte.
La primera sección del panel se llama Banner y contiene las tres configuraciones que dan forma al banner en sí.
Color de fondo rellena el panel del banner y Color de texto se aplica al mensaje del banner. El par también colorea el botón de configuración flotante, si lo tienes activado. Tamaño de fuente establece el tamaño del texto del mensaje.
WPConsent dibuja el banner dentro de su propio contenedor aislado, por lo que los colores que elijas aquí son los colores que ven los visitantes, independientemente de lo que haga la hoja de estilos de tu tema.
Para cambiar un color, haz clic en el campo Color de fondo.
El selector te ofrece un área degradada para el tono, un control deslizante vertical para el matiz y una fila de preajustes en la parte inferior. También puedes escribir un valor hexadecimal directamente en el campo, que es la ruta más rápida cuando ya conoces el color de tu marca. Color de texto y los seis colores de los botones más abajo abren el mismo selector.
Hacer clic en cualquier lugar fuera del selector lo cierra, y el pequeño cuadrado junto al campo sigue mostrando el color que has elegido.
Para el texto del mensaje, abre el menú desplegable Tamaño de fuente.
La lista va de 12px a 30px en pasos de 2px. Esta configuración rige el texto del mensaje del banner. El texto del botón se dimensiona con Tamaño de botón en su lugar, que la siguiente sección cubre.
Dar forma a los botones
Un grupo de configuraciones da forma a todos los botones del banner a la vez, por lo que el tamaño y la forma se establecen una vez en lugar de botón por botón.
Debajo de un divisor, la sección Botones contiene tres menús desplegables. Empieza con Tamaño de botón.
Tamaño de botón establece la altura y el tamaño del texto juntos. Pequeño da un botón de 30px con texto de 14px, Normal da 45px y 15px, y Grande da 60px y 18px.
Pequeño es adecuado para un banner que quieres que no moleste, y Grande es adecuado para uno sobre el que quieres que los visitantes actúen de inmediato.
Esquina del botón establece cuán redondeadas son las esquinas. Cuadrado da esquinas afiladas, y Ligeramente Redondeado un pequeño radio de 4px. Redondeado da un radio de 20px, que se lee como una píldora en los tamaños de botón más pequeños.
El que debes elegir es el que coincida con los botones que tu tema ya utiliza. Cuadrado se adapta a un diseño editorial afilado y Redondeado a uno más suave, con Ligeramente Redondeado en medio de los dos.
Tipo de botón es el que vale la pena previsualizar. Para verlo, abre Tipo de botón y elige Contorneado.
Relleno da a cada botón un relleno sólido. Contorneado hace que el interior del botón sea transparente y dibuja un borde de 2px con el color que Relleno usa como relleno.
Los botones contorneados se ven más discretos en una página ocupada, y los botones rellenos se leen como más claramente clickables.
Los tres ajustes llegan también a los botones del panel de preferencias. Los botones que los visitantes ven después de abrir su configuración de cookies coinciden con los del banner. Nuestra guía sobre el panel de preferencias cubre esa pantalla.
Colorear los tres botones
Debajo de otro divisor, la sección Color del botón empareja un color de fondo y un color de fuente para cada uno de los tres botones del banner. Empieza con Fondo de Aceptar.
Las tres filas siguen a los tres botones del banner. Fondo de Aceptar y su Color de Fuente dan estilo al botón de aceptar. Fondo de Rechazar y su Color de Fuente dan estilo al botón de rechazar. Fondo de Personalizar y su Color de Fuente dan estilo al botón de preferencias.
Dar al botón de aceptar el color más fuerte y dejar los otros dos más discretos es una opción común. Mantiene el banner legible de un vistazo.
Nota: Con Tipo de botón establecido en Contorneado, cada color de fondo se convierte en el color del borde de ese botón. Un botón contorneado no tiene relleno detrás de su texto, por lo que cada Color de Fuente debe leerse contra el fondo de tu banner en lugar de contra el botón.
Si has activado el botón flotante de configuración, una sección Diseño de Botón Flotante de Configuración sigue a esta con un selector de iconos. Nuestra guía sobre el botón flotante de consentimiento cubre esa configuración.
Vista previa del banner
WPConsent puede mostrar tu banner sobre la página de administración a tamaño completo. Esa es la forma más rápida de juzgar una elección de color antes de que salga en vivo.
En la parte superior derecha de la página, haz clic en Vista previa.
La superposición utiliza la configuración actual en pantalla en lugar de la última guardada, por lo que los cambios no guardados se muestran en ella. Con Tipo de botón establecido en Relleno, cada botón lleva un fondo sólido.
Con Tipo de botón establecido en Contorneado, los mismos tres botones mantienen un borde y pierden su relleno.
Esa vista previa también muestra por qué el Color de fuente importa más una vez que desaparece el relleno. Cada botón conserva el color de fuente que se le dio para el estilo de relleno, y al quitar el relleno, ese color ahora se asienta sobre el fondo del banner. Cambiar a Contorno es, por lo tanto, un buen momento para revisar los tres campos de Color de fuente.
La vista previa permanece abierta mientras sigues trabajando y sigue cada cambio que haces en la pestaña. El mismo botón la oculta de nuevo.
Guardar tus estilos
Nada en esta pestaña se guarda hasta que guardas, así que el último paso es confirmar lo que has configurado.
Cuando tu banner tenga el aspecto que deseas, desplázate hasta el final del panel. Luego haz clic en Guardar y continuar.
Ese botón guarda tus estilos y te lleva a la pestaña Contenido, que es el siguiente paso en la secuencia de tres pestañas. El enlace Atrás a su lado regresa a Diseño sin guardar.
El botón Guardar en la parte superior derecha de la página guarda la misma configuración y te deja en la pestaña Estilo. Esa es la que debes usar cuando el estilo es lo único que viniste a cambiar aquí.
¡Eso es todo! Tu banner de consentimiento ahora lleva tus propios colores, tamaño de fuente y formas de botón.
A continuación, echa un vistazo a nuestra guía sobre contenido y texto del banner para establecer el mensaje y las etiquetas de los botones que muestra tu banner.
Preguntas frecuentes
Mis nuevos colores no se muestran en mi sitio
Limpia tus cachés y vuelve a cargar el sitio. Los estilos del banner forman parte de la página que WPConsent renderiza. Un plugin de caché o una caché de página a nivel de host pueden seguir sirviendo la versión anterior a tu cambio. Nuestra guía sobre gestión de bases de datos y cachés cubre las cachés que WPConsent mantiene por sí mismo.
¿Por qué el texto de mi botón de contorno se ve invisible?
Un botón de contorno tiene un interior transparente, por lo que su texto se asienta directamente sobre el fondo del banner y conserva el Color de fuente que le hayas dado. El texto blanco sobre un banner blanco es la causa habitual. Dale a cada botón un Color de fuente que contraste con tu Color de fondo, o vuelve a establecer el Tipo de botón en Relleno.
¿El Tamaño de fuente cambia también el texto del botón?
No. El Tamaño de fuente se aplica al mensaje del banner. El texto del botón se dimensiona mediante el Tamaño de botón, que empareja texto de 14px con Pequeño, 15px con Normal y 18px con Grande.
¿Se aplican estos estilos al panel de preferencias?
En parte. El Color de fondo, el Color del texto y los tres pares de colores de los botones se trasladan al panel de preferencias, al igual que el Tamaño de botón, la Esquina del botón y el Tipo de botón. El Tamaño de fuente se aplica al mensaje del banner.
¿Sobrescribirá mi tema los estilos del banner?
No. WPConsent renderiza el banner dentro de una shadow root, que mantiene el CSS de tu tema y el CSS del banner separados entre sí. Esa es también la razón por la que un estilo de banner necesita cambiarse aquí en lugar de en la hoja de estilos de tu tema.
¿Puedo estilizar algo que la pestaña Estilo no cubra?
Sí. WPConsent expone los colores y tamaños del banner como variables CSS que puedes establecer tú mismo, y acepta tu propio CSS para cualquier cosa más detallada. Nuestras guías sobre personalización del banner con variables CSS y personalización del banner con CSS cubren ambas vías.
¿La vista previa guarda algo?
No. La vista previa lee la configuración actual en pantalla, por lo que muestra tanto los cambios sin guardar como los guardados. Si sales de la página sin guardar, se descartará lo que estabas intentando.
¿Puedo usar diferentes estilos en diferentes páginas?
La pestaña Estilo establece una apariencia para todo el sitio, por lo que cada página muestra el mismo banner. Para un control más detallado del que ofrece la pestaña, nuestra guía sobre cómo personalizar el banner con CSS cubre la ruta manual.