KuikCodeDocs
KuikPages

Fuentes, colores y forma

El panel de configuración de la KuikPage da estilo a todas las páginas a la vez. Los bloques lo heredan y pueden cambiar su propio tono.

Cambia el inspector a KuikPage. Una fila de muestras de tema en la parte superior cambia el estilo de toda la página con un clic; los grupos de abajo lo afinan.

La configuración de la KuikPage en el inspector: muestras de tema, Fuentes y Color
La configuración de la KuikPage en el inspector: muestras de tema, Fuentes y Color

Fuentes

Título y Texto se eligen entre seis familias del sistema y más de cien fuentes web de licencia abierta alojadas por KuikCode, que se sirven desde kuik.page para que los visitantes nunca carguen fuentes de terceros. Las fuentes para títulos van desde letras condensadas de póster y serif de moda hasta art déco, góticas, pixel y caligráficas tipo firma. El selector tiene búsqueda. Ver combinaciones abre más de setenta combinaciones seleccionadas, ordenadas por estilo (Serif, Sans, Display y A mano), cada una con un nombre según su carácter (Editorial, Limpia, Audaz, Cálida...). La opción predeterminada, Fuente de la marca, hereda las fuentes guardadas en tu Brand Kit. Las fuentes display que vienen en un solo peso, como Instrument Serif, conservan ese peso en los títulos en lugar de una imitación engrosada de la negrita.

Color

  • Fondo: sólido, degradado (hasta seis paradas que puedes arrastrar) o imagen. Las imágenes admiten saturación, brillo, un color de tinte con su intensidad y opacidad sobre el color base, y puedes elegir entre fotos de stock.
  • Acento: el color de los botones, los links y los resaltados.
  • Texto: Automático elige texto claro sobre un fondo oscuro y texto oscuro sobre uno claro. Desactívalo para elegir tu propio color; aparece una advertencia cuando el contraste baja de 4.5 a 1.
  • Tono del bloque: Automático, Claro, Oscuro o Acento para tarjetas y paneles. El texto siempre se lee sobre el bloque.

No hay un modo claro u oscuro aparte: la página lo deduce del fondo que elegiste. En una KuikPage de varias páginas, el ámbito Página puede cambiar el color del texto de una sola página.

Forma

  • Esquinas de los bloques: el redondeo de tarjetas, imágenes y paneles.
  • Esquinas de los botones: el redondeo de los botones, que quedan totalmente redondos al 100%. Se hace a un lado mientras hay un borde de botón activo, porque los bordes mantienen las esquinas cuadradas.
  • Borde de los botones: Recto, Ondulado, Rasgado, Festoneado o Zigzag en la parte superior e inferior de cada botón, con lados rectos y esquinas cuadradas. Llega a todos los botones de la página: el bloque Botones, el botón del encabezado, los botones de formularios y de Fotos de invitados, los cupones, los links de calendario, mapa y descarga, y los botones de los banners con foto (Vidrio y Esquinas cortadas conservan su propia forma). Los botones rellenos conservan las sombras Sólida y En relieve y el Borde, que siguen esa forma; los botones con contorno dibujan su contorno siguiendo esa forma. Los textos, los íconos y los tamaños de los botones se quedan como estaban.
  • Sombra: cuánto se elevan las tarjetas sobre el fondo.
  • Estilo de sombra: Suave es una elevación difuminada bajo las tarjetas. Sólida es un bloque desplazado y nítido en el color del texto, en tarjetas, botones, banners con foto y la barra inferior. En relieve mantiene las tarjetas y los botones en el color de la página y los hace sobresalir con un borde de luz y una sombra suave, el estilo soft UI; los botones se hunden al tocarlos y el control de Borde se oculta, porque ese borde lo dibujan la luz y la sombra.
  • Borde: un contorno en el color del texto alrededor de tarjetas y botones.
  • Espaciado entre bloques.
  • Márgenes laterales: el espacio entre los bloques y el borde de la página.

Movimiento

Animar al desplazarse hace que las piezas de cada bloque aparezcan con un fundido y suban a su lugar, una tras otra, a medida que los visitantes llegan a ellas: las líneas del encabezado, cada botón, cada tarjeta de producto, cada pregunta. Los carruseles, la marquesina, los controles de Antes y después, los gráficos y las tarjetas se mueven como una sola pieza, y un botón fijo nunca se oculta. El lienzo se queda quieto mientras editas; activa Vista previa para verlo. Los visitantes que le piden a su celular reducir el movimiento ven la página sin la animación.

Computadora

Las KuikPages están hechas para celulares, y una computadora muestra la misma página como una tarjeta en el centro de la ventana, un poco más ancha que en un celular, sobre un tono más oscuro de tu fondo. En una página con fondo de imagen, la tarjeta muestra la foto como lo hace un celular, y la foto continúa alrededor de ella, más oscura y desenfocada. Mientras los visitantes se desplazan, los botones de compartir y de contacto suben con la tarjeta y se quedan cerca de la parte superior de la ventana; luego desaparecen cuando el encabezado pasa por debajo de ellos y vuelven al subir. El botón del menú siempre se queda.

Mostrar el KuikCode pone el KuikCode propio de la página en la esquina inferior de la ventana, en la página de inicio, para que un visitante en una computadora pueda escanearlo y seguir leyendo en su celular. Esos escaneos cuentan en el código como cualquier otro. Aparece cuando la página ya tiene su propio KuikCode, que se vincula por ti al publicar, y nunca se muestra en celulares ni tablets. Los cambios llegan a la página publicada la próxima vez que publiques.

Idioma

Idioma de la página define el idioma de los textos que la página agrega por su cuenta: Agregar a contactos, Compartir y Ver código QR, el menú, los mensajes de formularios y de subida de fotos, las fechas y horas, las unidades de la cuenta regresiva y el visor de fotos. Una página nueva empieza en el idioma que usa tu cuenta, y puedes elegir inglés o español. Los textos que conservan su valor predeterminado, como Enviar en un formulario o Comprar en un producto, cambian con el idioma; lo que escribiste se queda tal como lo escribiste. Los cambios llegan a la página publicada la próxima vez que publiques.

Un link a una KuikPage que no existe, o a una que está en pausa, muestra su aviso en el idioma del visitante, inglés o español.

Tu analítica

El último grupo del ámbito KuikPage acepta un ID de medición de Google Analytics, un ID de Meta Pixel y un contenedor de Tag Manager, que se cargan solo en la página publicada (PRO). KuikCode cuenta escaneos, visitas, clics y contactos por su cuenta; estos campos suman tus propias herramientas.

Brand Kit

Cuando el espacio de trabajo tiene un Brand Kit (PRO), las páginas nuevas empiezan con sus fuentes, y sus colores aparecen primero en cada selector de color.

En esta página