Constructor de lienzo – Personyze Wiki

El Constructor de lienzo es la superficie de diseño libre de Personyze. En lugar de partir de una
plantilla acabada y editar su texto, usted monta un popup, un banner o un bloque integrado a partir de elementos
— un titular, una foto, una cuenta atrás, un formulario, una franja de recomendaciones — y los coloca como quiera.

Añádalo como cualquier otra acción: en el paso Contenido de una campaña elija Constructor de lienzo.
Tiene tres pasos: Diseñe su banner o popup, Adónde van los datos (solo cuando su
diseño contiene un formulario) y Defina las reglas de visualización y la ubicación.

Ese último paso es donde elige dónde aparece y cuándo se abre, incluida la intención de salida tanto en escritorio como en móvil. Los disparadores son los mismos para todas las acciones de popup y están documentados en Disparadores: cuándo se abre el popup.

¿Constructor de lienzo o Constructor de Popup, Banner y HTML?

Ambas acciones producen los mismos tipos de contenido y comparten todo lo que viene después del paso de diseño: la ubicación, las reglas
de visualización, los contenedores y los informes son idénticos. Solo se diferencian en cómo se diseña.

	Constructor de lienzo	Constructor de Popup, Banner y HTML
Usted construye	Añadiendo y colocando elementos	Eligiendo una plantilla y rellenándola
Mejor cuando	Quiere una disposición concreta: foto partida, cuenta atrás, ruleta, recomendaciones, reglas por dispositivo	Quiere un aspecto acabado rápido, o está pegando y manteniendo HTML en bruto
Biblioteca de plantillas	15 diseños de partida	Cientos de plantillas clásicas
Editable en el panel antiguo	No	Sí

Las acciones del Constructor de lienzo solo se pueden editar en el panel nuevo. Si su equipo sigue trabajando en la
interfaz antigua, una acción creada aquí no se abrirá allí.

Partir de un diseño, o de cero

Una acción nueva se abre en Partir de un diseño. Hay 15, entre ellos Escaparate (toda la
caja de herramientas en una tarjeta), Bienvenida en la primera visita, Código de cupón, Anuncio de promoción,
Saludo personalizado, Barra de anuncios, Rescate por intención de salida, Teaser minimizable,
Recomendado para usted, Imagen junto al mensaje, Pantalla completa, Prueba social,
Últimos artículos y En blanco. Cada uno es un diseño normal una vez insertado: no hay nada bloqueado.

La biblioteca de elementos

Los elementos se agrupan en Texto · Medios · Formulario · Disposición · Dinámico en la barra Añadir elemento. Haga clic
para añadirlo al final, o arrástrelo al lienzo: suéltelo en el borde derecho de un elemento para colocar los dos uno al lado
del otro.

Texto

Chip o etiqueta — una pequeña línea a modo de insignia, por ejemplo «★ Oferta especial».
Titular y subtítulo — el titular principal más una línea de apoyo opcional.
Párrafo — un bloque de texto.
Lista de comprobación — una lista de ventajas con título y viñetas de color.
Texto rotatorio — va pasando mensajes de uno en uno, con fundido o deslizamiento hacia arriba.
Preguntas frecuentes / acordeón — una lista de preguntas y respuestas que se despliega en el sitio. Está construida sobre el propio elemento de despliegue del navegador, así que sigue abriéndose con JavaScript desactivado.
Pasos numerados — una secuencia de «cómo funciona» con círculos numerados automáticamente, en fila o en columna.
Testimonios — testimonios de clientes entrecomillados.

Medios

Imagen — una imagen con altura máxima, radio de esquina y alineación.
Icono — un solo icono, con su tamaño y su color.
Vídeo — incrusta un enlace de YouTube o de Vimeo.
Carrusel de imágenes — un carrusel deslizable; a partir de la segunda diapositiva aparecen las flechas.
Fila de logotipos — una fila de logotipos de clientes o de socios.

Formulario

Botón de llamada a la acción — la llamada a la acción.
Formulario — campos que se guardan en columnas del perfil del visitante, apilados o uno al lado del otro, con un
mensaje de agradecimiento que sustituye a los campos cuando se envía correctamente.

Disposición

Separador — una línea horizontal.
Botón de cierre (×) — un control para descartar que puede colocar donde quiera, independiente de la × propia de la esquina del popup.
Medios + texto — imagen a un lado, texto al otro, con una proporción ajustable.
Menú — una lista de navegación, en fila o en columna, opcionalmente detrás de un icono ☰.
Tabla comparativa — una tabla de dos columnas del tipo «nosotros frente a ellos»; las celdas que rellene con sí o no se muestran como una marca o una cruz.
Pestaña de minimizar — pliega todo el popup hasta dejar una pestaña con etiqueta (véase más abajo).

Dinámico

Cuenta atrás — una fecha fija, o por visitante o por sesión, con estilo de Casillas, Píldoras o Minimalista.
Cupón — un código de descuento que se copia con un clic.
Recomendaciones de productos / Recomendaciones de contenido — selecciones en vivo para cada visitante, en carrusel o en cuadrícula.
Prueba social — contadores reales o líneas de «alguien acaba de comprar», nunca inventados, ocultos por debajo del umbral que usted fije.
Barra de progreso — el progreso hacia un objetivo a partir de un campo del perfil, como el total del carrito o los puntos.
Ruleta de premios — una ruleta ponderada con premios y códigos por sector.
HTML / incrustado — HTML arbitrario, servido tal cual se escribe.
Valoración con estrellas — una fila de estrellas que muestra las fracciones con honestidad (un 4,3 se ve como 4,3, no como 4), opcionalmente leída de una columna del catálogo.
Urgencia de stock — una insignia de «solo quedan 3» alimentada por una columna del catálogo o un campo del perfil, con un umbral para que aparezca solo cuando el stock es realmente bajo.
Placeholder de Personyze — un hueco vacío que rellena otra acción, de modo que un diseño se pueda montar a partir de varias acciones en lugar de un único documento enorme.
JavaScript personalizado — código que se ejecuta cuando se muestra el popup; no muestra nada.

Los elementos que dependen de datos se previsualizan con datos de ejemplo: en el sitio real los rellenan su catálogo, los campos de perfil y las
estadísticas. Un elemento de prueba social sin historial detrás sencillamente no se muestra a
ese visitante.

Dar forma al contenedor

El panel Contenedor controla el marco en el que va todo: el ancho (ajustar a la ubicación,
ancho completo o un máximo fijo), el color o la imagen de fondo, el radio de las esquinas, el relleno y qué ocurre
cuando es más alto que la pantalla: salirse de la pantalla o desplazarse dentro del popup.

Partir con un panel de foto coloca una foto en un lateral, con un ancho de panel ajustable y un punto
focal de mantener a la vista para que no se recorten las caras. En móvil se apila automáticamente.

Las fuentes son una lista curada que no descarga nada: del sistema, Helvetica/Arial, humanista, geométrica, Georgia, serif de palo
o monoespaciada, además de la que use la página. Esa última es la adecuada para bloques integrados y suele ser la equivocada
para un popup flotante, que tiene que parecer deliberado sobre una página desconocida.

Control por elemento

Dando estilo a un elemento en el Constructor de lienzo de Personyze — La pestaña Estilo de un titular: los estilos preajustados arriba y, debajo, cada propiedad por separado, con un botón de **Variaciones** junto a cada una, para que un mismo valor pueda cambiar según la audiencia sin duplicar el diseño. Haga clic para ampliar.

Al seleccionar un elemento se abre su propio panel a la derecha, con dos pestañas:

Contenido — qué dice y qué hace. Una cuenta atrás cuenta hasta una fecha fija, hasta una cookie por visitante o en cada visita, y elige qué ocurre al llegar a cero; un botón lleva su etiqueta, su enlace y si sus clics cuentan. La etiqueta de un botón, el enlace que abre o el JavaScript
que ejecuta, y si son sus clics los que cuentan para esta acción.
Estilo — primero los estilos preajustados (un titular ofrece Negrita centrada,
Editorial a la izquierda, Declaración) y después cada propiedad por separado: colores, tamaños, grosor de fuente,
alineación.

Casi todos los campos llevan un botón de Variaciones. Así es como un mismo diseño sirve a varias
audiencias: un color de titular distinto o una etiqueta distinta por segmento, sobre el mismo elemento, en lugar de un
diseño duplicado que hay que mantener sincronizado.

El pie del panel repite las tres acciones que ofrece también el esquema: Duplicar,
Ocultar (permanece en el esquema y se omite al mostrarse) y Eliminar.

Dispositivos — mostrar un elemento en todos los dispositivos, en escritorio y tableta, o solo en móviles.
Animación — una animación de entrada (fundido, ascenso, zoom, deslizamiento) y una animación de atención opcional
(pulso, sacudida ocasional). Los visitantes que piden movimiento reducido lo siguen viendo, sin la animación.
Tamaño y posición — ancho, alineación, espaciado y colocar junto al elemento
anterior para formar una fila.
Fondo y borde — fondo por elemento, relleno, borde, radio, sombra y colores al pasar el ratón.
Avanzado — CSS propio, más un CSS aparte para móvil, hasta pantallas de 767 px.

La pestaña de minimizar

Añada una pestaña de minimizar y el popup se pliega hasta quedar en una pestaña con etiqueta en lugar de cerrarse: siempre a un
clic de volver. Usted controla la etiqueta y el icono en ambos estados, dónde se sitúa la pestaña, si empieza minimizado
y si ese estado se recuerda entre páginas.

La pestaña Contenido de un elemento de cuenta atrás en el Constructor de lienzo de Personyze — Contenido de una cuenta atrás: hasta qué cuenta —una fecha fija, una cookie por visitante o un reinicio en cada visita— y qué ocurre al llegar a cero: quedarse en ceros, mostrar un mensaje o desaparecer. Haga clic para ampliar.

Variaciones: un diseño, varias audiencias

Casi todos los campos de ambas pestañas llevan un botón de ⚡ Variaciones, con una insignia que indica cuántas
alternativas contiene. Así es como un mismo diseño sirve a varias audiencias sin un segundo diseño que mantener sincronizado: un
titular distinto para los visitantes recurrentes, una etiqueta de botón distinta en un país, una imagen distinta para quienes
ya han comprado.

Al abrirlo aparece una lista de casos. Cada caso es una audiencia —construida con el mismo constructor de reglas
que usa el paso de segmentación, así que puede variar por cualquier cosa que pueda segmentar— y el contenido que recibe esa audiencia.
Debajo está el valor por defecto: lo que ve quien no coincide con ningún caso.

Los casos se prueban en orden y gana el primero que coincide. Un caso amplio por encima de uno más específico deja
muerto al específico: nunca se llegará a él, y nada en la lista lo indica. Ponga primero sus audiencias
más concretas.

Como eso es fácil de equivocar leyendo una pila de editores, el cuadro de diálogo reformula el conjunto en lenguaje claro:
“qué recibe realmente cada visitante”, en el orden en que el motor los prueba, deducido de los propios
valores. Señala además las cuatro trampas:

Un caso sin condición se descarta al pulsar Listo: póngale una o elimínelo.
Un caso con el contenido vacío significa que esa audiencia no ve nada. Correcto si su intención era ocultar el
elemento para ellos; un error en caso contrario.
Un valor por defecto vacío significa que todo el que no coincida con ningún caso no ve nada.
Una condición escrita como SQL en bruto no se puede comprobar aquí. Se ejecuta exactamente tal cual está escrita.

El campo que ve en el panel es siempre el valor por defecto, de modo que un campo con variaciones nunca aparece
vacío. Las alternativas viven detrás del botón, y la insignia es la única señal de que están ahí: merece la pena mirarla
antes de preguntarse por qué un cambio que hizo no le ha llegado a alguien.

Versiones y edición con IA

La barra de versiones construye diseños específicos por audiencia dentro de una sola acción: un valor por defecto que ve todo el mundo,
más versiones con nombre que se evalúan a primer-caso-que-coincide contra todo su vocabulario de audiencias: rasgos del visitante, geografía,
comportamiento, campos del CRM, la página actual.

Editar este popup con IA reescribe el diseño o le cambia el estilo a partir de una instrucción en lenguaje natural. Haga clic primero en un
elemento del lienzo para centrar la IA en él y pulse después Aplicar los cambios de la IA.

Conviene saber

Un botón solo contabiliza clics si es una llamada a la acción de verdad. Los botones añadidos desde los diseños vienen
preparados para informar; si construye un enlace a mano y sus clics no aparecen nunca, este es el motivo.
Lo que se informa lo decide el tipo de acción, no lo que usted meta dentro. Un elemento de formulario dentro de un
popup normal del Constructor de lienzo informa de los envíos como clics. Los informes específicos de formularios —el informe de Formularios,
las audiencias de «ha enviado un formulario», los emails de seguimiento— vienen del tipo de acción dedicado de formulario de leads.
Vídeo incrusta YouTube y Vimeo. Otros servicios no se incrustan.
El CSS propio se depura. Se descartan las declaraciones que contienen comillas, corchetes angulares, llaves o
javascript: . Una regla que «no hace nada» suele ser esto.
Oculto no es eliminado. El icono del ojo mantiene un elemento en su diseño pero lo omite para los visitantes.
Borrar todo el contenido pregunta dos veces, y deshacer todavía puede recuperarlo.

Relacionado

Guía de la acción Popup y Banner — el constructor basado en plantillas.
Insertar variables dinámicas — personalice el texto dentro de cualquier elemento.
Pruebas A/B — compare dos diseños.