¿Quieres que el aspecto de tu banner de consentimiento coincida con tu marca? La pestaña Estilo de WPConsent te da control total sobre los colores, el tamaño de fuente y la apariencia de los botones. Esta guía te muestra cómo personalizar cada detalle visual del estilo de tu banner.
Tabla de contenidos
- Requisitos previos
- Abrir la pestaña Estilo
- Establecer los colores de fondo y de texto del banner
- Elegir un tamaño de fuente
- Configurar el tamaño del botón
- Establecer el radio de las esquinas del botón
- Elegir el tipo de botón
- Personalizar los colores individuales de los botones
- Guardar tus cambios
- Verificar su 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 WordPress.
- Ya has elegido un diseño de banner en la pestaña Diseño (consulta Opciones de diseño de banner).
Abrir la pestaña Estilo
Para empezar, navega a WPConsent >> Diseño del banner y haz 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 experimentar con colores y estilos de botones y ver el resultado al instante sin guardar primero.
Establecer los colores de fondo y de texto del banner
La primera sección se titula Banner y contiene 2 selectores de color.
- Color de fondo controla el fondo del banner. El valor predeterminado es
#FFFFFF(blanco). - Color de texto controla el color del texto del mensaje. El valor predeterminado es
#000000(negro).
Haz clic en una muestra de color para abrir el selector de color. Puedes escribir un valor hexadecimal directamente o usar el selector visual para elegir un color.
Elegir un tamaño de fuente
Junto a los selectores de color, encontrarás un menú desplegable Tamaño de fuente. Selecciona un valor entre 12px y 30px (en incrementos de 2px). El valor predeterminado es 16px.
Tamaños disponibles: 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px y 30px.
Configurar el tamaño del botón
Desplázate 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. |
| Normal | Botones de tamaño estándar. Este es el valor predeterminado. |
| Grande | Botones con relleno adicional para una mayor visibilidad. |
Establecer el radio de las esquinas del botón
El menú desplegable Button Corner controla el redondeo de los bordes de los botones:
| Valor | Descripción |
|---|---|
| Cuadrado | Sin radio de borde. Los botones tienen esquinas afiladas de 90 grados. |
| Ligeramente redondeado | Un radio de borde sutil para un aspecto más suave. |
| Redondeado | Un radio de borde completamente redondeado. Esta es la opción predeterminada. |
Elegir el tipo de botón
El menú desplegable Button Type determina si los botones están rellenos o delineados:
| Valor | Descripción |
|---|---|
| Relleno | Los botones tienen un color de fondo sólido. Esta es la opción predeterminada. |
| Delineado | Los botones tienen un fondo transparente con un borde de color en su lugar. |
Cuando selecciona Outlined, la configuración del color de fondo del botón actúa como configuración del color del borde.
Así se ven los 2 tipos de botones en la vista previa del banner. El estilo Filled da a los botones un color de fondo sólido:
El estilo Outlined reemplaza el fondo sólido con un borde de color, manteniendo el interior del botón transparente:
Personalizar los colores individuales de los botones
Debajo de la configuración general del botón, encontrará una sección Button Color con selectores de color para cada uno de los 3 botones.
Botón de aceptar:
- Accept Background es el color de relleno (o color del borde si está delineado). Predeterminado:
#E8B13A. - Font Color es el color del texto del botón de aceptar. Predeterminado:
#FFFFFF.
Botón de rechazar:
- Cancel Background es el color de relleno (o color del borde si está delineado). Predeterminado:
#FFFFFF. - Font Color es el color del texto del botón de rechazar. Predeterminado:
#FFFFFF.
Botón de preferencias:
- Customize Background es el color de relleno (o color del borde si está delineado). Predeterminado:
#04194E. - Font Color es el color del texto del botón de preferencias. Predeterminado:
#FFFFFF.
Si ha habilitado el botón de configuración flotante, también verá una sección Floating Settings Button Design en la parte inferior de esta pestaña. Para obtener detalles sobre la configuración de su icono, consulte la guía del botón de consentimiento flotante.
Guardar tus cambios
Haga clic en Save & Continue para guardar y pasar a la pestaña Content. Alternativamente, haga clic en Save en la esquina superior derecha para permanecer en la pestaña actual.
Verificar su configuración
- Compruebe la vista previa del banner en la parte inferior de la página. Refleja cada cambio en tiempo real, por lo que puede confirmar que sus colores, tamaño de fuente y estilos de botón se ven correctos antes de guardar.
- Después de guardar, abre tu sitio en una nueva ventana de incógnito o privada del navegador.
- Confirma que el banner muestra el color de fondo, el color del texto y el tamaño de fuente que elegiste.
- Verifica 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 el frontend?
Borra las cachés de la página y recarga el sitio. Si usas un plugin de caché, purga su caché después de guardar la configuración del banner.
¿Por qué el estilo de botón contorneado se ve igual que el relleno?
Cuando cambias de Relleno a Contorneado, la configuración del color de fondo se convierte en el color del borde. Si tanto el fondo como el borde tuvieran el mismo color, la diferencia visual es sutil. Intenta establecer un color de borde distinto para ver el efecto contorneado claramente.
¿Por qué cambiar el tamaño de fuente no afecta a mis botones?
La configuración 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 escala proporcionalmente con la configuración de Tamaño del botón, no con el selector de tamaño de fuente.
Conclusión
Ahora has personalizado el estilo visual de tu banner de consentimiento, desde los colores de fondo y el tamaño de fuente hasta las formas de los botones y los colores individuales de los botones. Todos los cambios se reflejan en la vista previa en vivo antes de publicarlos. Para continuar configurando tu banner, aprende a editar el mensaje y las etiquetas de los botones en nuestra guía sobre personalizar el texto del contenido del banner.