Bloques

Haz clic en Agregar bloque al final del esquema, o en el signo más entre dos bloques del lienzo, para abrir la paleta. Los bloques aparecen por nombre. Busca, o filtra por Básicos, Multimedia y Acciones; haz clic en un bloque para agregarlo. Los bloques se reordenan arrastrándolos en el esquema o en el lienzo.

Un espacio de imagen que todavía no llenaste muestra una imagen de relleno, un degradado suave de dos tonos, en el lienzo y en la página publicada, para que la página nunca tenga un hueco donde va una foto; una Galería nueva muestra tres de esos mosaicos y un bloque Productos nuevo empieza con tres productos. El esquema marca con Falta contenido cualquier bloque que todavía muestre contenido de ejemplo: una imagen de relleno, un link vacío o que apunta a example.com, o un video, audio, archivo, contenido insertado o dirección que todavía no elegiste.

Selecciona un bloque y el inspector cambia a él. Cada bloque tiene un grupo Estilo al final de su panel para la alineación, el espaciado y el aspecto; los grupos de arriba tienen el contenido. Las listas de elementos (botones, artículos del menú, productos, preguntas) son tarjetas que abres de una en una, reordenas arrastrándolas y duplicas o eliminas desde su menú.

El Encabezado es especial: cada página tiene exactamente uno, fijo arriba. Lleva el título, la introducción, un logo o una foto de perfil (la forma Círculo convierte cualquier imagen en un retrato) y la imagen de apertura de la página, con las distribuciones Simple, Portada, Sobre foto, Enmarcado y Tarjeta, cuatro alturas (Pequeña, Estándar, Alta, Completa), un relleno (foto, color, degradado, dividido, shader animado u Ondas, franjas suaves en un segundo color que se desplazan lentamente por la parte superior y se quedan quietas para los visitantes que activan el movimiento reducido) y tamaños de titular hasta Gigante, que pone un nombre corto tan ancho como lo permite la página. Color del titular pone el título en el color de texto de la página o en su acento (la distribución Tarjeta mantiene el texto blanco sobre su hoja de color de acento). Insignias de tiendas pone botones de App Store y Google Play en una fila en el encabezado (negros o blancos, con el diseño oficial): en Sobre foto, al pie de la foto, para que se vean en la primera pantalla de un encabezado de altura Completa; en las demás distribuciones, debajo del texto. Cada insignia aparece cuando tiene su link. Para poner palabras del título en cursiva, selecciónalas en la página o en el campo Titular y presiona Cmd+I (Ctrl+I en Windows), o el botón Cursiva que aparece sobre el título mientras escribes; una fuente de título con una cursiva verdadera, como Instrument Serif, las dibuja con ella. Enfoque de la foto (Arriba, Centro, Abajo) elige la parte de la foto que queda a la vista cuando el encabezado la recorta, para que una foto de grupo conserve las caras. Activa Presentación para elegir hasta cuatro fotos, y el encabezado pasa de una a otra con un fundido en la página publicada, con pequeños puntos centrados al pie de la foto que marcan la actual. Profundidad (desde Core) le da profundidad real a una sola foto: KuikCode lee de ella un mapa de profundidad una vez, y en la página publicada la foto se mueve cuando el celular se inclina o el cursor se desplaza, y las cosas cercanas se mueven más que las lejanas, como en las fotos de los iPhone más recientes. Intensidad define cuánto; la foto fija es lo que ven los visitantes cuando el movimiento está reducido, antes de que cargue el efecto o en un navegador sin WebGL. Si cambias la foto, el mapa se vuelve a crear solo; Regenerar profundidad fuerza uno nuevo. En Sobre foto, Título detrás del sujeto pone a la persona o el producto de la foto delante del título: la foto se recorta una vez, con Quitar rápido para un fondo liso o Quitar con IA para cualquier otro, y el recorte se dibuja sobre el título, mientras la introducción y el botón quedan encima; la foto se mantiene sólida y solo se difumina en su borde inferior, así que el sujeto nunca se ve transparente. Necesita una sola foto y desactiva Profundidad (una foto en movimiento se saldría de debajo del recorte). Si cambias la foto, el interruptor pide un recorte nuevo. La introducción debajo del título tiene un Estilo de la introducción: Atenuado (el gris discreto predeterminado) o Subtítulo (seminegrita, en el color del texto). En Portada y Tarjeta, Borde de la hoja decide cómo se une la foto con el texto de abajo: Redondeado (la parte superior redondeada de la hoja se superpone a la foto), Difuminado (la foto se funde con la página que tiene detrás, ya sea un fondo sólido, un degradado o una foto; en Tarjeta se funde con la hoja de color de acento) o Plano (una unión recta). Esquinas decide qué va en las esquinas superiores del encabezado, todo en un mismo Tamaño (Pequeño, Mediano o Grande) que también sigue el botón del menú. La esquina superior derecha tiene el menú en una KuikPage con más de una página; si no, el Botón Compartir. Este abre una hoja con el nombre y la imagen del encabezado (o el logo de la esquina, con sus propias proporciones, cuando el encabezado no tiene imagen), la dirección de la página, que se copia con un toque, Ver código QR y Compartir donde el celular tiene una hoja para compartir. Ver código QR cambia la vista por el código de la página, lo bastante grande para escanearlo desde el otro lado de una mesa, con una flecha para volver: el KuikCode propio de la página (consulta Publicar), con todo y su diseño, así que un escaneo desde ahí cuenta en su analítica; una página sin KuikCode propio muestra un código simple de su dirección en tu color de acento. Desactiva Ver código QR, debajo de la opción Botón Compartir, para dejar fuera el código. La vista previa también muestra y comparte la dirección pública. Arriba a la izquierda lleva un Logo o Botones, nunca los dos. Logo es una imagen propia o, con Usar el logo del encabezado, el logo del encabezado. Los Botones son redondos: Agregar a contactos guarda el nombre, el cargo, la empresa, el teléfono, el correo y el sitio web que escribas (el nombre empieza siendo el titular) directo en los contactos del celular del visitante, y cuando hay un menú arriba a la derecha, Compartir se mueve aquí, a su lado. Cambiar entre Logo y Botones conserva la configuración de la otra opción. Agregar a contactos y Compartir solo aparecen en la página de inicio: en las páginas interiores, la flecha para volver ocupa la esquina superior izquierda, con el logo justo después.

BásicosCopiar link a esta sección

Marquesina lleva tus palabras de un borde de la página al otro y las desplaza en un ciclo continuo. Entre repeticiones pone un Símbolo (✦ ★ • ♥ ✿ ◆ /), un Emoji o Nada entre una repetición y la siguiente, y Mayúsculas escribe todas las palabras en mayúsculas. El Aspecto es una Cinta (las palabras sobre una franja en Acento, Claro, Oscuro o un color Personalizado) o Solo palabras, directamente sobre la página. En una cinta, las palabras toman el color de fondo de la página cuando se lee bien sobre la franja; si no, blanco o casi negro. Solas, toman el color del texto de la página. Color de las palabras en Personalizado te deja elegir el tuyo. Tamaño del texto, Espaciado (el espacio entre repeticiones), Onda (en 0 van rectas) y Posición de la onda (desplaza la onda a lo largo de la página) le dan forma; Velocidad y Dirección (de derecha a izquierda, o de izquierda a derecha) definen el movimiento. El lienzo la muestra quieta; la vista previa y la página publicada la ponen en movimiento, y los visitantes que piden movimiento reducido la ven quieta.

Acerca de BotonesCopiar link a esta sección

Botones es el bloque más versátil. Al agregar uno, primero te pregunta qué debe hacer un toque:

Un bloque tiene un solo tipo, con hasta veinte botones; para mezclar tipos necesitas dos bloques. El tipo se puede cambiar después en Estilo, Tipo de botón y se aplica a todos los botones del bloque.

Estilo tiene las opciones de todo el bloque: Distribución como Lista (botones a todo lo ancho), Filas (ícono en un cuadro de color de acento, texto, descripción opcional y flecha), Cuadrícula (dos o tres columnas), Carrusel o, para tarjetas con foto, Banner (más abajo); Fijar abajo, que mantiene los botones en pantalla mientras los visitantes se desplazan y los deja asentarse en su lugar al final; y Textos en mayúsculas. Cada botón tiene un Texto y un Estilo, Relleno o Contorno, además de los campos de su tipo.

Los banners convierten las tarjetas con foto en tarjetas promocionales anchas, con el titular y el botón sobre la imagen, como la tarjeta "Pide ahora" de una página de campaña. Cada tarjeta es un banner, y todo el banner responde al toque. Las opciones se aplican a todos los banners del bloque, para que una pila se lea como un solo conjunto:

• Estilo del banner: Foto (las palabras sobre la foto, oscurecida detrás de ellas para que se lean bien), Dividido (un panel de color junto a la foto), Difuminado (la foto se funde con el panel), Panel (una imagen recortada, como una foto de producto con fondo transparente, sobre el color), Recuadro (una tarjeta clara dentro de un marco de color) o Enmarcado (la foto dentro del panel de color, con un margen alrededor y sus propias esquinas redondeadas).
• Posición del texto: Izquierda, Derecha, Arriba a la izquierda, Abajo o Centro en Foto; Izquierda o Derecha en los estilos con panel, donde la foto ocupa el otro lado.
• Alternar lados: con las palabras a la Izquierda o a la Derecha, un banner de por medio cambia de lado, así que una pila de banners baja en zigzag por la página.
• Ancho del texto: Automático ajusta la columna al titular más largo del conjunto, para que todos los banners compartan una misma división y las fotos queden alineadas. Un titular largo recibe una columna más ancha (y un texto un poco más pequeño) en lugar de apretarse. Angosto y Ancho lo fijan.
• Tamaño del titular (de S a XL) y Color del titular (Automático, Acento o Personalizado). Textos en mayúsculas también pone el titular en mayúsculas. Cuando un titular de color Acento o Personalizado sería difícil de leer, una advertencia lo indica: medido con exactitud sobre un panel, y estimado sobre una foto a partir de la parte de la foto donde van las palabras.
• Botón: Texto, Flecha (un botón solo con flecha), Contorno, Esquinas cortadas (un contorno con las esquinas superior izquierda e inferior derecha cortadas), Vidrio (una píldora esmerilada) o Ninguno (una flecha; el banner sigue siendo el link).
• Deslizar pone los banners uno al lado del otro en una fila que los visitantes deslizan, con el siguiente asomándose, en lugar de apilarlos.
• Altura: Baja, Estándar o Alta.
• Color del panel (Acento, Oscuro, Claro o Personalizado) y un Patrón impreso encima (Semitono, Rayas o Puntos), para los estilos con panel.

Por banner: la Foto, su Enfoque de la foto (Izquierda, Centro o Derecha, para que el recorte conserve al sujeto), un Logo opcional en la esquina superior izquierda, el Titular, una Descripción opcional, el Texto del botón y lo que Abre: un Sitio web (su link), otra Página de la KuikPage o un Cajón que se desliza hacia arriba con su propio título, texto, imagen y link, igual que un botón de tipo Cajón.

CajonesCopiar link a esta sección

Un botón de cajón lleva su propio contenido, que se edita en Dentro del cajón: un Título, un Texto enriquecido con títulos, negrita, links y listas, una Imagen opcional y un link opcional hacia afuera. Es el lugar para los detalles que no merecen una página propia, como ingredientes, horarios de atención, una historia o las condiciones de una oferta.

En Vista previa y en la página publicada, al tocar el botón la tarjeta se desliza hacia arriba sobre la página; el botón de cerrar o un deslizamiento la cierran.

MultimediaCopiar link a esta sección

AccionesCopiar link a esta sección

Los eventos se mantienen al día solos. La página publicada revisa las fechas en cada visita, así que un evento pasa a Eventos pasados (o sale de la página, si los eventos pasados están desactivados) al día siguiente de terminar, sin volver a publicar. Los visitantes en Android reciben un link de Google Calendar desde el botón de calendario; todos los demás reciben un archivo de calendario.

Acerca de InsertarCopiar link a esta sección

Pega el link para compartir de una herramienta compatible y el bloque la muestra dentro de la página en un marco aislado: Google Forms, Typeform, Tally y Jotform para formularios, Calendly y Cal.com para reservas. Elige Compacta, Estándar o Alta según la herramienta. Solo se aceptan estos proveedores, porque se sabe que cada uno permite insertarse de forma segura; los formularios y las reuniones de HubSpot, Eventbrite y Luma todavía no están en la lista. Para citas, el bloque indicado es Insertar con un link de Calendly o Cal.com; Agregar al calendario es para un evento fijo que los visitantes guardan en su propio calendario.

Acerca de MenúCopiar link a esta sección

Un menú de restaurante se puede escribir o importar. Plantilla descarga un CSV con una fila por artículo (sección, nombre, descripción, precio); Subir CSV arma todo el menú de una vez. Cada artículo puede llevar una foto, una descripción más larga y un tiempo de preparación, y cada sección se convierte en una pestaña en la parte superior del bloque.

PlanesCopiar link a esta sección

Basic incluye los bloques de link en la bio: Encabezado, Botones, Redes sociales, Texto enriquecido, Título, Imagen, Divisor, Marquesina y Mapa y dirección. Core agrega todos los demás bloques (Formulario, Galería, Video, Audio, Cita, Testimonio, Línea de tiempo, Antes y después, Gráfico, Insignias de apps, Productos, Detalles, Lista de verificación, Menú, Preguntas frecuentes, Cuenta regresiva, Cupón, Descarga de archivo, Agregar al calendario, Insertar) y la barra de anuncios. PRO agrega Fotos de invitados (con el almacenamiento que incluye el plan), Link de música y Embudo de reseñas, y permite que un Formulario envíe sus respuestas a un webhook. Los bloques restringidos muestran un punto en la paleta y explican el plan al hacer clic. Después de bajar de plan, los bloques que ya están en una página se siguen guardando; para publicar, quita los que el plan ya no incluye.