Primeros pasos con el editor de Landing Pages

Este editor visual te permite diseñar y publicar landing pages optimizadas mediante una interfaz intuitiva de arrastrar y soltar.

1. Barra lateral izquierda: elementos y estructura

La barra lateral izquierda reúne todos los componentes necesarios para crear una página desde cero o añadir bloques de contenido.

• Pestañas de navegación superior:

Elemento: muestra los componentes de contenido individuales.

 Capa: te permite gestionar la jerarquía y las capas de los elementos superpuestos.

 Página: configuración básica de la página actual.

• Biblioteca de componentes (Elemento):

Texto y estética: Texto (párrafos/encabezados), Imagen (imágenes), Divisor (líneas separadoras), Separador (espacios vacíos).

Interacción y navegación: Botón (botones de acción), Barra de navegación (menú superior con enlaces), Social (iconos de redes sociales).

• Contenido avanzado: Sección Hero (bloque destacado de la página principal), Video (reproductor de video), Código (inserción de código HTML/JS personalizable), Cuenta regresiva (temporizador de cuenta regresiva), Tabla (tablas de datos).

• Captación de leads: Formulario de registro (formularios de registro), Código QR (códigos QR para escanear).

• Secciones y diseño:

• 1 columna: bloque de ancho completo (100 %).

• 2 columnas / 3 columnas: estructuras de cuadrícula divididas para organizar el contenido en columnas paralelas.

2. Bloque central: vista previa en directo y edición

El área central ofrece una vista previa en tiempo real de la landing page.

• Barra de control superior:

Vista de dispositivo: cambia entre las vistas de escritorio y móvil para comprobar que el diseño sea responsivo.

Deshacer/Rehacer: flechas para revertir o aplicar los cambios recientes.

• Área de trabajo: muestra la estructura interactiva de la página. Puedes hacer clic en cualquier bloque, por ejemplo, un bloque de texto para editarlo, o un botón de llamada a la acción para editar sus propiedades y añadir o editar imágenes.

3. Barra lateral derecha: estilos y configuración (Estilo)

Te permite personalizar la apariencia y la configuración técnica del elemento seleccionado o de la página en su conjunto.

• Atributos de página:

Nombre de la página / Título de la página: define el nombre interno y el título público visible en la pestaña del navegador.

URL slug: personaliza la dirección web final (p. ej., /webinar-transformation).

Publicado: interruptor para publicar o despublicar la página al instante.

• Configuración general:

Fondo de plantilla / Fondo del contenido: selecciona el color de fondo del lienzo global y del contenedor de contenido mediante códigos HEX (p. ej., #FFFFFF).

Ancho: ajusta el ancho del contenedor en píxeles (p. ej., 700 px).

Márgenes: controla los márgenes superior (Margen superior) e inferior (Margen inferior).

• Menús desplegables de estilo avanzado:

TEXTOS Y ENCABEZADOS: tipografía, tamaño de fuente, alineación y colores de texto.

Botones: estilos de borde, relleno, color del botón y color del texto al pasar el cursor.

Enlaces: comportamiento y estilo de los hipervínculos.

4. Publicar la landing page

Haz clic en Publicar para que el enlace de la landing page esté disponible y, después, haz clic en Guardar.

Añadir un formulario a tu landing page

Haz clic y arrastra el icono Formulario en el editor de landing pages y elige el formulario que quieras desde el panel derecho.

 Si usas una plantilla, comprueba si ya incluye un formulario y selecciona el que quieras mostrar.

Flujo de trabajo recomendado

1. Estructura: arrastra una sección de columnas desde el panel izquierdo hasta el lienzo.

2. Insertar: coloca los elementos que quieras (imágenes, títulos, botones o formularios) dentro de las columnas.

3. Personalizar: selecciona cada elemento para ajustar sus márgenes, fuentes y colores desde el panel derecho.

4. Comprobar: cambia a la vista móvil para verificar la legibilidad y publica activando el interruptor Publicado.