Diseño del banner
Personaliza el aspecto de tu banner de cookies para que encaje con tu web
Dónde configurar el diseño
Puedes configurar el diseño del banner de cookies en el panel de Consentio, en la sección Diseñador de tu web. Los cambios se aplican de inmediato en tu sitio.
Diseños disponibles
Elige entre varios diseños predefinidos:
Caja (modal)
Una ventana modal clásica en el centro de la pantalla. Adecuada para webs que quieren asegurarse de que los usuarios reparen en el banner.
Barra (banner)
Una barra horizontal en la parte inferior o superior de la pantalla. Una opción menos intrusiva que no interrumpe la navegación por el contenido.
Nube (flotante)
Una ventana flotante compacta en una esquina de la pantalla. Una opción minimalista para webs que prefieren un diseño discreto.
Posición
Según el diseño elegido, puedes definir la posición:
| Diseño | Posiciones disponibles |
|---|---|
| Caja | Centro de la pantalla |
| Barra | Superior, Inferior |
| Nube | Inferior izquierda, Inferior derecha, Superior izquierda, Superior derecha |
Combinación de colores
Personaliza los colores del banner para que encajen con tu marca:
Temas predefinidos
- Claro - Fondo claro, texto oscuro
- Oscuro - Fondo oscuro, texto claro
- Automático - Según la configuración del sistema del usuario
Colores personalizados
Define colores personalizados para cada elemento:
- Fondo - Color de fondo del banner
- Texto - Color principal del texto
- Botón principal - Color del botón "Aceptar todo"
- Botón secundario - Color del botón "Rechazar"
- Enlaces - Color de los enlaces
Tipografía
Define las fuentes para el texto del banner:
- Familia tipográfica - Elige entre Google Fonts o usa una fuente del sistema
- Tamaño del texto - Tamaño del texto principal
- Tamaño del título - Tamaño del título del banner
Animaciones
Define la animación para mostrar y ocultar el banner:
- Desvanecido - Aparición y desaparición graduales
- Deslizamiento - Entra desde el borde de la pantalla
- Ninguna - Sin animación
Radio de bordes
Define el radio de los bordes del banner y de los botones:
- Ninguno - Esquinas rectas (0px)
- Pequeño - Redondeo ligero (4px)
- Medio - Redondeo medio (8px)
- Grande - Redondeo pronunciado (16px)
- Completo - Redondeo máximo (999px)
Limitaciones según el plan
Algunas opciones de personalización solo están disponibles en planes de pago:
| Función | Gratis | Pro |
|---|---|---|
| Diseños | Solo Barra | Todos |
| Temas de color | Claro/Oscuro | Colores personalizados |
| Fuentes | Del sistema | Google Fonts + personalizadas |
| Insignia "Powered by" | Obligatoria | Opcional |
Texto del banner
Edita el texto que se muestra en el banner:
- Título - Título principal del banner
- Descripción - Texto explicativo sobre las cookies
- Botón de aceptar - Texto del botón para aceptar todas las cookies
- Botón de rechazar - Texto del botón de rechazo
- Enlace de configuración - Texto para abrir las preferencias
Previsualizar cambios
En el diseñador puedes ver una vista previa en vivo del banner. Puedes:
- Alternar entre las vistas de escritorio y móvil
- Probar los distintos estados (primera visualización, centro de preferencias)
- Comprobar el aspecto en modo claro/oscuro
Personalización con CSS
Para una personalización avanzada, puedes usar CSS propio. El widget utiliza variables CSS:
/* Ejemplo de sobrescritura de estilos */
.consentio-banner {
--consentio-bg: #ffffff;
--consentio-text: #1a1a1a;
--consentio-primary: #10b981;
--consentio-primary-hover: #059669;
--consentio-border-radius: 12px;
}