Editor de páginas
El editor se abre en la sección «Editor» del menú de la landing. En el centro está la página dentro del marco de un teléfono; a un lado aparece el panel de configuración de la página o del bloque seleccionado.
Los cambios se guardan automáticamente: no hay un botón de guardar aparte. Lo que se guarda es un borrador: los visitantes solo ven los cambios después de que hagas clic en «Publicar». Esto se explica en la página Publicación y dominio propio.
El botón «Ayuda de IA», junto a «Publicar», abre el chat de IA sobre esta página: consulta Crear una landing en el chat de IA.
Páginas de la landing
Una landing puede tener varias páginas. La primera, «Inicio», se abre en la dirección de la landing, y las demás, en la dirección de la landing con un añadido, por ejemplo …/price.
Encima del marco del teléfono están el nombre de la página abierta y unos iconos:
| Icono | Qué hace |
|---|---|
| Engranaje | Abre la «Configuración de la página» |
| Lista | Abre el panel «Páginas» |
| Flecha hacia fuera | Abre la página publicada en una pestaña nueva. El icono solo se muestra en una página publicada |
El panel «Páginas»
El panel tiene una lista de páginas con sus direcciones y un buscador. Al hacer clic en una página se abre en el editor.
- «Crear página»: la ventana «Creación de página» con los campos «Nombre de la página» y «Dirección de la página». La dirección admite letras latinas, dígitos, guion y guion bajo.
- El menú «⋯» de una página: «Editar» (nombre y dirección), «Duplicar», «Eliminar».
Una copia recibe un nombre con la marca «(copia)» y una dirección que termina en -copy. La última página de una landing no se puede eliminar.
Advertencia
No elimines «Inicio» desde el menú «⋯» si la landing tiene otras páginas: tu cuenta lo permite, pero sin la página de inicio la dirección de la landing deja de abrirse.
Configuración de la página
| Ajuste | Qué define |
|---|---|
| «Nombre de la página» | El nombre de la página. También sirve como título de la pestaña del navegador hasta que se rellene el título en «Configuración SEO» |
| «URL» | La dirección de la página dentro de la landing. Para la página de inicio es / |
| «Margen de la página en los bordes» | Márgenes en los bordes: sin margen o un tamaño de XS a LG |
| «Color de fondo» | El fondo de la página, por separado para el tema claro y el oscuro |
| «Fuente por defecto» | La fuente de todos los bloques de la página que no tienen una propia |
| «Configuración SEO» | «Título», hasta 80 caracteres; «Palabras clave», hasta 250; «Descripción», hasta 170 |
Los campos SEO van a la parte de servicio de la página publicada: los leen los buscadores y los servicios que generan vistas previas de enlaces. La imagen para redes sociales es el icono de la landing: no hay un campo aparte para esa imagen. Los campos se actualizan en el sitio con la siguiente publicación.
El botón «Eliminar» en la parte inferior del panel elimina la página. La página de inicio no lo tiene.
Bloques
Una página se compone de bloques que van de arriba abajo. Hay cinco bloques: «Bloque de texto», «Imagen», «Botones», «Formulario», «HTML».
- Añadir. Haz clic en «+» debajo del último bloque y elige el tipo de bloque. Para insertar un bloque encima de uno existente, haz clic en la línea que está sobre él y elige el tipo de bloque.
- Configurar. Al hacer clic en un bloque se abre su panel de configuración.
- Mover. Arrastra un bloque por el icono de su izquierda.
- Eliminar. El botón «Eliminar» en la parte inferior del panel de configuración del bloque.
Bloque de texto
El texto se escribe directamente en la página. Selecciona parte del texto y aparece una barra de herramientas: negrita, cursiva, subrayado, tachado, enlace, cita. La tecla Enter empieza un párrafo nuevo y Shift + Enter hace un salto de línea.
En el panel de configuración:
- alineación y color del texto;
- «Tipo de texto»: de «Título 1» a «Título 4» o «Texto normal»;
- «Fuente», «Tamaño de fuente», «Grosor de fuente», «Interlineado», «Espaciado entre letras»;
- «Margen superior e inferior», «Margen izquierdo y derecho».
Imagen
Haz clic en «Elegir foto» y sube una imagen: JPG, PNG o GIF. Puedes mover la imagen dentro del marco con el cursor o con el dedo para elegir la parte visible.
El panel de configuración tiene cinco opciones de marco:
| Opción | Cómo se ve |
|---|---|
| Con márgenes | La imagen con sus propias proporciones, con margen alrededor |
| Ancho completo | La imagen con sus propias proporciones, sin margen |
| Cuadrado | Un cuadrado con margen |
| Cuadrado a ancho completo | Un cuadrado sin margen |
| Círculo | Un círculo con margen |
Debajo están «Radio» (esquinas redondeadas), «Tamaño» (para las opciones con margen), «Escala» (zoom del 100 al 300 %) y los márgenes del bloque.
Botones
Un bloque con uno o varios botones de enlace. Así se crean los enlaces al chatbot, a apps de mensajería, a redes sociales o a un sitio web.
Debajo del bloque seleccionado están los botones «Añadir botón» y «Configuración». Un botón nuevo repite el diseño del anterior.
La configuración del bloque define lo que es común a todos los botones: «Tamaño por defecto», «Radio por defecto», «Fuente por defecto» y «Diseño», es decir, cómo se colocan los botones: cada uno a ancho completo en su propia línea, de forma compacta o unidos en un grupo (se necesitan al menos dos botones). En la primera opción, los botones se reordenan arrastrándolos.
La configuración del botón se abre al hacer clic en el botón:
| Ajuste | Qué define |
|---|---|
| «Nombre del botón» | El texto del botón |
| «Enlace» | La dirección que se abre al pulsar. Para una llamada, tel: y el número, por ejemplo tel:+15550000000; para un correo, mailto: y la dirección, por ejemplo mailto:hello@example.com. Estos enlaces abren el teléfono o la app de correo, no una pestaña nueva |
| «Abrir en una pestaña nueva» | Abrir el enlace en una pestaña nueva del navegador |
| «Icono» | Un icono de app de mensajería o de YouTube junto al texto, o «Sin icono»; «Posición del icono»: «Izquierda» o «Derecha» |
| «Tamaño», «Fuente», «Tamaño de fuente», «Grosor de fuente», «Espaciado entre letras», «Estilo», «Radio» | El aspecto del texto y del propio botón. «Predeterminado» toma el valor de la configuración del bloque |
| «Color» | «Color del texto» y «Color de fondo»; «Color al pasar el cursor» y «Color al pulsar» se activan por separado |
| «Degradado», «Borde», «Sombra» | Se activan con interruptores; cada uno tiene sus propias variantes para el paso del cursor y la pulsación |
El interruptor «Aplicar a todo el bloque» de la fila «Configuración del diseño» aplica el diseño de este botón a los demás botones del bloque. Los botones «Copiar estilo» y «Pegar estilo» llevan el diseño de un botón a otro, incluso a otra página.
Consejo
Para que un botón lleve al chatbot, pega en el campo «Enlace» el enlace general o adicional del bot de la sección «Enlaces al chatbot». Así las visitas entran en las estadísticas del bot. Dónde obtener el enlace se explica en la sección Enlaces al chatbot.
Formulario
Un formulario recoge los datos del visitante y los pasa al chatbot. Un formulario nuevo ya contiene un campo de entrada, una casilla de consentimiento y un botón «Enviar».
Debajo del bloque seleccionado están «Añadir elemento» y «Configuración». Hay cuatro elementos:
| Elemento | Qué es |
|---|---|
| «Campo de entrada» | Un campo con etiqueta. «Tipo de campo»: «Teléfono», «E-Mail», «Texto», «Números», «Texto de varias líneas», «Fecha», «Hora», «Fecha y hora». Tiene «Texto de ejemplo» y el interruptor «Campo obligatorio» |
| «Texto» | Una explicación dentro del formulario |
| «Casilla» | Una marca con texto, por ejemplo el consentimiento a la política. «Nombre del campo»: el nombre con el que el valor llega al bot; tiene «Marcada por defecto» y «Campo obligatorio» |
| «Botón» | El botón de envío. El enlace al bot se pega en el campo «Enlace al chatbot» |
Al hacer clic en un elemento se abre su configuración; los elementos se reordenan arrastrándolos. La configuración común del bloque es «Tamaño del formulario por defecto», los márgenes, «Radio por defecto» y «Fuente por defecto».
Cómo pasa los datos el formulario.
- El visitante rellena el formulario y pulsa el botón. La plataforma comprueba los campos obligatorios y el formato: email, teléfono, número, fecha.
- El visitante sigue la dirección del campo «Enlace al chatbot» y llega a la app de mensajería.
- El bot recibe los valores de los campos como variables del contacto. El nombre de la variable es la etiqueta del campo («Nombre» en la configuración del campo) o el «Nombre del campo» de la casilla. Si no hay etiqueta, la variable se llama
Input 1,Checkbox 1, etc. Una casilla llega como ✅ o ❌.
Por ejemplo, un campo con la etiqueta «Teléfono» llega al bot como la variable Teléfono con el valor +1 555 010-0123. Cómo usar variables en los mensajes se explica en la sección Plantillas.
Importante
El formulario no guarda las solicitudes por sí mismo. El botón debe tener un enlace a un chatbot de esta plataforma, general o adicional, de la sección «Enlaces al chatbot». Sin él, los datos introducidos no van a ningún sitio.
Para no perder solicitudes, guárdalas en el flujo del bot: en variables del contacto, en una lista o en el CRM.
HTML
Un bloque para tu propio código: el panel de configuración tiene un editor donde pegas HTML. En el editor de páginas, el resultado se muestra al instante.
Advertencia
«El bloque solo funciona con un dominio conectado»: en una página con la dirección de la plataforma, el código de este bloque no se ejecuta. Cómo conectar un dominio se explica en la página Publicación y dominio propio.
Colores para el tema claro y oscuro
Cada color de la página (fondo, texto, botones, campos del formulario) tiene dos valores. La ventana del selector de color tiene dos pestañas: «Tema claro» y «Tema oscuro». El botón del selector de color muestra ambos valores uno al lado del otro, con un icono de sol y otro de luna.
La versión oscura de la página se activa en la configuración de la landing con el interruptor «Tema oscuro». Mientras está desactivado, basta con definir los colores del tema claro.
En el editor, la página se muestra con el tema de tu cuenta: en una cuenta clara ves los colores claros y en una oscura, los colores oscuros.
Fuentes
La lista de fuentes tiene «Del sistema» y 14 fuentes: Amatic SC, Caveat, Comfortaa, Kelly Slab, Lobster, Merriweather, Montserrat Alternates, Open Sans, Open Sans Condensed, Oswald, Pacifico, Pangolin, PT Mono, Roboto. La opción «Predeterminado» de un bloque toma la fuente de la página.
Lo que no tiene el editor
- Un bloque de chat. Para que un visitante pueda escribir al bot, añade un botón con un enlace al bot. Un chat directamente en un sitio web se hace con un widget.
- Bloques de video, mapa, cuenta regresiva y pago.
Si algo no funciona
- «Esta dirección de página ya existe.» Dos páginas de una misma landing no pueden tener la misma dirección.
- «La dirección de la página no es correcta»: en la dirección solo se permiten letras latinas, dígitos, guion y guion bajo.
- «No puedes eliminar la última página.» Una landing siempre conserva al menos una página.
- El bot no recibió los datos del formulario. Comprueba que el botón del formulario tenga un enlace al bot de la sección «Enlaces al chatbot» y que los campos tengan etiquetas. Los datos del formulario no esperan mucho la visita: si el visitante abrió el enlace y no pasó enseguida a la app de mensajería, puede que los valores no lleguen.