Todos los elementos tienen algunos atributos que se pueden cambiar para personalizar el diseño del elemento. Los atributos pueden cambiarse seleccionando un elemento en la pantalla central. Los atributos se pueden cambiar en el lado derecho.
Contenedor
El contenedor es el bloque de construcción del personalizador de banners de cookies. Una buena práctica es añadir cada elemento a un contenedor. Puede arrastrar otros elementos en el contenedor y construir estructuras complejas.
- Dimensiones: Añade una anchura y una altura al contenedor. Los valores posibles son píxeles (px), porcentajes (%) y auto. Con auto el navegador calculará el valor y se ajustará en su mayoría a los elementos del contenedor.
- Colores
- Fondo: Cambia el color de fondo del contenedor. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Texto: Cambia el color del texto del contenedor. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Margen: Añade un margen a la parte superior, inferior, derecha o izquierda del contenedor en píxeles.
- Relleno: Añade un relleno a la parte superior, inferior, derecha o izquierda del contenedor en píxeles.
- Decoración
- Radio: Añade un radio al contenedor en píxeles.
- Sombra: Añade una sombra al contenedor en píxeles.
- Alineación
- Dirección de flexión: Por defecto la dirección de flexión será una Columna. Esto colocará todos los elementos añadidos al contenedor uno debajo del otro. La otra opción es Fila, esto colocará todos los elementos en el contenedor uno al lado del otro.
- Rellenar espacio: Por defecto esto será no. El contenedor tendrá la anchura y la altura indicadas. Al cambiar esto a sí, el contenedor se envolverá alrededor de sus elementos y cambiará a la anchura y altura mínimas necesarias.
- Alinear elementos: Por defecto esto es Flex start. Flex start alineará todos los elementos dentro del contenedor a la izquierda, Center alineará todos los elementos dentro del contenedor al centro y Flex end alineará todos los elementos dentro del contenedor a la derecha.
- Justificar contenido: Por defecto es Flex start. Flex start comenzará en la parte superior con todos los elementos, Center alineará todos los elementos dentro del contenedor a la mitad de la altura del contenedor y Flex end alineará todos los elementos hasta el final del contenedor.
- Visibilidad: Puede encontrar más información sobre la visibilidad aquí.
Texto
El elemento texto puede, por supuesto, contener texto. Puede cambiar el texto visible haciendo clic en el elemento de texto y empezar a editar el contenido.
- Tipografía
- Tamaño de la fuente: el tamaño de la fuente en píxeles.
- Alineación: Por defecto el texto se alineará a la izquierda. Otras opciones son centrado o a la derecha.
- Peso: Esto cambia la negrita del texto. De menor a mayor: Regular (por defecto), Medio, Negrita.
- Margen: Añade un margen a la parte superior, inferior, derecha o izquierda del contenedor en píxeles.
- Aspecto
- Texto: Cambia el color del texto. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Sombra: Añade una sombra al texto en píxeles.
- Visibilidad: Puede encontrar más información sobre la visibilidad aquí.
Botón
Puede vincular ciertas acciones a un botón para aceptar todas las cookies, denegar todas las cookies, etc. También se puede cambiar el texto dentro del botón haciendo clic en el texto.
- Colores
- Fondo: Cambia el color de fondo del botón. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Texto: Cambia el color del texto del botón. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Fondo en el hover: Cambia el color de fondo del botón cuando se pasa por encima de él. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Margen: Añade un margen a la parte superior, inferior, derecha o izquierda del botón en píxeles.
- Relleno: Añade un relleno a la parte superior, inferior, derecha o izquierda del botón en píxeles.
- Decoración
- Estilo: Por defecto el estilo es completo por lo que todo el fondo del mismo será del color que le hayas dado. Cuando el estilo es outline sólo el borde del botón se mostrará en el color elegido.
- border-radius: El radio en píxeles del botón.
- Tipografía
- Tamaño de la fuente: el tamaño en píxeles del texto del botón.
- Alineación: Por defecto el texto se alineará a la izquierda del botón. Otras opciones son centrado o a la derecha.
- Peso: Esto cambia la negrita del texto dentro del botón. De menor a mayor: Regular (por defecto), Medio, Negrita.
- Acción: Puedes añadir una acción a un botón con esta opción. Las opciones son aceptar todas las cookies, guardar la selección, ajustar la configuración, denegar todas las cookies y ninguna. Ninguna no añadirá ninguna acción al botón. La acción "aceptar todas las cookies" añadirá la acción de aceptar todas las cookies. La acción "guardar selección" guardará los toggles seleccionados. Sobre la acción "ajustar la configuración" puede leer más en este enlace aquí. La acción "Denegar todas las cookies" denegará todas las cookies excepto las necesarias.
- Visibilidad: Puede encontrar más información sobre la visibilidad aquí.
Imagen
Una imagen para mostrar en su banner de cookies personalizado.
- Dimensiones: Añade un ancho y un alto a la imagen. Los valores posibles son píxeles (px), porcentajes (%) y auto. Con auto el navegador calculará el valor y se ajustará en su mayoría a los elementos del contenedor.
- Imagen
- Url de la imagen: El enlace a la imagen
- Ajuste de la imagen: Por defecto relleno. Rellenar llenará la dimensión de la imagen y, si es necesario, la imagen se estirará o aplastará para ajustarse. La opción "contener" mantendrá su relación de aspecto y se redimensionará para ajustarse a la dimensión.
- Visibilidad: Puede encontrar más información sobre la visibilidad aquí.
Alternar
A la alternancia se le puede añadir una categoría de cookies para que los usuarios puedan alternar su preferencia de cookies. Al lado de la palanca se puede cambiar un texto haciendo clic en el texto.
- Colores
- Texto: Cambia el color del texto del toggle. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Alternar: Cambia el color de la esfera cuando se selecciona el toggle. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- ToggleBar: Cambia el color de la barra cuando se selecciona el toggle. El color se puede elegir en el selector de color o se puede añadir un valor HEX, RGBA o HSLA.
- Margen: Añade un margen en píxeles a la parte superior, inferior, derecha o izquierda del toggle.
- Tipografía
- Lado del texto: Por defecto Derecha. La opción Derecha colocará el texto a la derecha del toggle. La otra opción Izquierda colocará el texto a la izquierda del toggle.
- Tamaño de la fuente: el tamaño en píxeles del texto junto al toggle.
- Alinear: Por defecto el texto se alineará a la izquierda en el campo de texto. Otras opciones son centrado o a la derecha.
- Peso: Esto cambia la negrita del texto junto al toggle. De menor a mayor: Regular (por defecto), Medio, Negrita.
- Grupo de conmutación: A un toggle se le puede añadir un grupo de toggle. Estas son las categorías de las cookies. Si el usuario hace clic en un botón con la acción "Guardar selección", se guardarán los grupos de cookies de los toggles seleccionados. Además, cuando el usuario vuelva a ver el banner de cookies, se seleccionarán los grupos correspondientes a su consentimiento.
- Visibilidad: Puede encontrar más información sobre la visibilidad aquí.
