¿Quieres que el aspecto de tu banner de consentimiento coincida con el de tu marca? La pestaña Estilo de WPConsent te ofrece un control total sobre los colores, el tamaño de la fuente y el aspecto de los botones. Esta guía te explica cómo personalizar cada detalle visual del estilo de tu banner.
Índice
- Requisitos previos
- Abrir la pestaña Estilo
- Configuración del fondo del banner y los colores del texto
- Elegir el tamaño de la fuente
- Configuración del tamaño del botón
- Configuración del radio de la esquina del botón
- Selección del tipo de botón
- Personalización de los colores de los botones individuales
- Guardar los cambios
- Verificación de la configuración
- Preguntas frecuentes
- Conclusión
Requisitos previos
- WPConsent está instalado y activado en tu sitio de WordPress.
- Tienes acceso de administrador al panel de control de WordPress.
- Ya ha elegido un diseño de banner en la pestaña Diseño (consulte Opciones de diseño de banner).
Abrir la pestaña Estilo
Para empezar, vaya a WPConsent >> Diseño de banner y haga clic en la pestaña Estilo en la parte superior de la página.
Cada cambio que realices en esta pestaña actualiza la vista previa del banner en la parte inferior de la página en tiempo real, por lo que puedes probar diferentes colores y estilos de botones y ver el resultado al instante sin necesidad de guardar primero.
Configuración del fondo del banner y los colores del texto
La primera sección se denomina Banner y contiene dos selectores de color.
- Color de fondo controla el fondo del banner. El valor predeterminado es
#FFFFFF(blanco). - Color del texto controla el color del texto del mensaje. El valor predeterminado es
#000000(negro).
Haga clic en una muestra de color para abrir el selector de colores. Puede escribir directamente un valor hexadecimal o utilizar el selector visual para seleccionar un color.
Elegir el tamaño de la fuente
Junto a los selectores de color, encontrarás un menú desplegable para el tamaño de fuente. Selecciona un valor entre 12px y 30px (en incrementos de 2px). El valor predeterminado es 16px.
Tamaños disponibles: 12 píxeles, 14 píxeles, 16 píxeles, 18 píxeles, 20 píxeles, 22 píxeles, 24 píxeles, 26 píxeles, 28 píxeles y 30 píxeles.
Configuración del tamaño del botón
Desplácese hacia abajo hasta la sección Botones. El menú desplegable Tamaño del botón ofrece 3 opciones:
| Valor | Descripción |
|---|---|
| Pequeño | Botones compactos con menos relleno. |
| Regular | Botones de tamaño estándar. Esta es la configuración predeterminada. |
| Grande | Botones con acolchado adicional para una mayor visibilidad. |
Configuración del radio de la esquina del botón
El menú desplegable Esquina del botón controla el grado de redondeo de los bordes del botón:
| Valor | Descripción |
|---|---|
| Cuadrado | Sin radio en los bordes. Los botones tienen esquinas afiladas de 90 grados. |
| Ligeramente redondeado | Un sutil radio en los bordes para un aspecto más suave. |
| Redondeado | Un radio de borde completamente redondeado. Este es el valor predeterminado. |
Selección del tipo de botón
El menú desplegable Tipo de botón determina si los botones se rellenan o se contornean:
| Valor | Descripción |
|---|---|
| Relleno | Los botones tienen un color de fondo sólido. Esta es la configuración predeterminada. |
| Esbozado | Los botones tienen un fondo transparente con un borde de color. |
Cuando seleccionas Contorneado, la configuración del color de fondo del botón actúa como configuración del color del borde.
Así es como se ven los dos tipos de botones en la vista previa del banner. El estilo Relleno da a los botones un color de fondo sólido:
El estilo «Outlined» sustituye el fondo sólido por un borde de color, manteniendo transparente el interior del botón:
Personalización de los colores de los botones individuales
Debajo de la configuración general de los botones, encontrarás una sección llamada «Color del botón» con selectores de color para cada uno de los 3 botones.
Botón Aceptar:
- Aceptar antecedentes es el color de relleno (o el color del borde si está contorneado). Predeterminado:
#E8B13A. - Color de la fuente es el color del texto del botón Aceptar. Predeterminado:
#FFFFFF.
Botón Rechazar:
- Cancelar fondo es el color de relleno (o el color del borde si está contorneado). Predeterminado:
#FFFFFF. - Color de la fuente es el color del texto del botón Rechazar. Predeterminado:
#FFFFFF.
Botón Preferencias:
- Personalizar fondo es el color de relleno (o el color del borde si está contorneado). Predeterminado:
#04194E. - Color de la fuente es el color del texto del botón Preferencias. Predeterminado:
#FFFFFF.
Si ha habilitado el botón de configuración flotante, también verá una sección Diseño del botón de configuración flotante en la parte inferior de esta pestaña. Para obtener más información sobre cómo configurar su icono, consulte la guía del botón de consentimiento flotante.
Guardar los cambios
Haga clic en Guardar y continuar para guardar y pasar a la pestaña Contenido. También puede hacer clic en Guardar en la esquina superior derecha para permanecer en la pestaña actual.
Verificación de la configuración
- Comprueba la vista previa del banner en la parte inferior de la página. Refleja todos los cambios en tiempo real, por lo que puedes confirmar que los colores, el tamaño de la fuente y los estilos de los botones se ven correctamente antes de guardar.
- Después de guardar, abre tu sitio en una nueva ventana de navegación privada o de incógnito.
- Confirma que el banner muestra el color de fondo, el color del texto y el tamaño de fuente que has elegido.
- Comprueba que el tamaño del botón, el radio de las esquinas, el tipo y los colores coincidan con tu configuración.
Preguntas frecuentes
¿Por qué no aparecen mis cambios de color en la interfaz?
Borra todas las cachés de la página y vuelve a cargar el sitio. Si utilizas un complemento de caché, purga su caché después de guardar la configuración del banner.
¿Por qué el estilo del botón contorneado tiene el mismo aspecto que el relleno?
Cuando cambias de Relleno a Contorno, el color de fondo se convierte en el color del borde. Si el fondo y el borde fueran del mismo color, la diferencia visual sería sutil. Prueba a establecer un color de borde distinto para ver claramente el efecto de contorno.
¿Por qué cambiar el tamaño de la fuente no afecta a mis botones?
El ajuste del tamaño de fuente controla el texto del cuerpo en el área del mensaje del banner. El tamaño del texto del botón se escala proporcionalmente con el ajuste del tamaño del botón, no con el menú desplegable del tamaño de fuente.
Conclusión
Ahora ya ha personalizado el estilo visual de su banner de consentimiento, desde los colores de fondo y el tamaño de la fuente hasta las formas de los botones y los colores individuales de los mismos. Todos los cambios se reflejan en la vista previa en vivo antes de publicarlos. Para continuar configurando su banner, aprenda a editar el mensaje y las etiquetas de los botones en nuestra guía sobre cómo personalizar el texto del contenido del banner.