Constructor de páginas
Constructor de páginas de Atomicat es el editor visual utilizado para crear y editar landing pages dentro de Atomicat.
Utilice el creador para agregar secciones de página, organizar contenedores, insertar elementos, editar contenido y estilos, configurar ajustes de página, obtener una vista previa de diseños responsivos, guardar cambios y publicar la página.
Qué puedes hacer en el constructor de páginas
El constructor de páginas combina estructura de página, diseño, configuración y controles de publicación en un espacio de trabajo.
| Área | Propósito |
|---|---|
| Lienzo | Muestra la página que se está editando y le permite seleccionar secciones, contenedores y elementos. |
| Barra lateral | Abre grupos de elementos, controles de estilo global, configuración de página, resumen de página y acciones de publicación. |
| Cajón | Muestra los componentes, el navegador o la interfaz de edición del elemento seleccionado. |
| Encabezado | Contiene el nombre de la página, vista previa, controles responsivos, acciones de deshacer y rehacer, guardar, descargar y publicar. |
| Navegador | Muestra la estructura de la página para que pueda seleccionar, expandir, contraer y reorganizar secciones y contenedores anidados. |
| Configuración | Controla los metadatos de SEO, el retraso, pixels, el código personalizado, las funciones de la página, la velocidad de la página y las revisiones cuando estén disponibles. |
Diseño del constructor
El espacio de trabajo del constructor está organizado alrededor del lienzo de la página.
- Utilice la barra lateral izquierda para elegir lo que desea editar.
- Agregue elementos del cajón de componentes.
- Seleccione un elemento en el lienzo o en el navegador.
- Edite contenido, estilo, opciones avanzadas o plantillas desde el cajón.
- Obtenga una vista previa de la página en todos los dispositivos antes de guardarla o publicarla.
Opciones de la barra lateral principal
La barra lateral del constructor incluye estas áreas principales:
| Opción de barra lateral | Lo que abre |
|---|---|
| Texto | Párrafo, títulos, texto animado y elementos de texto avanzados. |
| Medios | Imágenes, videos, audio, íconos, controles deslizantes, pestañas, gráficos, alertas, testimonios y elementos visuales relacionados. |
| Botón | Elementos de botón y botón de redireccionamiento. |
| Bloques | Elementos estructurales y de conversión como contenedores, formularios, cuentas regresivas, divisores, acordeones, menús, HTML, iframe, producto y otros bloques de páginas. |
| Singulares | Elementos flotantes o a nivel de página como Cookie, WhatsApp, Notificación y ScrollUp. |
| Estilo global | Controles de estilo visual a nivel de página. |
| Configuración | Configuraciones de página como SEO, seguimiento, código personalizado, velocidad de página y revisiones. |
| Resumen de página | Una vista resumida de la configuración y el contenido de la página. |
| Publicar | Abre el flujo de trabajo de publicación para la página actual. |
Guías importantes del builder
Empieza con estas guías cuando estés revisando una página para lanzarla:
| Guía | Úsala cuando |
|---|---|
| Elementos | Necesites elegir el elemento correcto de contenido, medios, formulario, producto, quiz o conversión. |
| Secciones y Contenedores | Estés estructurando el layout de la página o corrigiendo contenido anidado. |
| Estilo global | Quieras consistencia amplia de tipografía, color y diseño antes de editar elementos individuales. |
| Vista previa y vistas responsivas | Necesites probar layouts en escritorio, tablet y móvil. |
| Resumen de página | Quieras revisar rápidamente estructura, ajustes, scripts, píxeles y comportamiento de modales. |
| Configuración | Necesites SEO, tracking, código personalizado, funciones de página, velocidad o revisiones. |
Editando un elemento
Cuando selecciona un elemento, el cajón de edición puede mostrar diferentes pestañas según el elemento seleccionado.
| Pestaña Editar | Úselo para |
|---|---|
| Contenido o Diseño | Texto, URLs, medios, campos de formulario, diseño de contenedor y contenido específico de elementos. |
| Estilo | Estilo visual como espaciado, colores, tipografía, bordes, fondos y alineación cuando sea compatible. |
| Avanzado | Opciones adicionales de configuración y comportamiento de elementos. |
| Plantilla | Opciones de plantilla de elemento cuando el elemento seleccionado admite plantillas. |
| Página o Lógica | Controles específicos del quiz al editar páginas quiz o opciones quiz. |
Algunos elementos, como los elementos personalizados HTML, iframe, espaciador y comentarios, tienen controles de estilo limitados porque su comportamiento está controlado por su contenido o estructura.
Guardar, obtener vista previa y publicar
El encabezado del generador incluye los controles que se utilizan con más frecuencia durante la edición:
- Vista previa: alterna el modo de vista previa para ver la página sin superposiciones de edición normales.
- Controles responsivos: cambia el ancho del dispositivo y comprueba cómo se adapta la página.
- Deshacer y rehacer: retrocede o avanza a través de estados de edición recientes.
- Guardar: guarda manualmente la página actual.
- Descargar: Descarga la página HTML cuando tu cuenta tenga acceso.
- Publicar: abre el flujo de trabajo de publicación de páginas.
Atomicat también guarda automáticamente las ediciones de páginas elegibles cuando cambia el contenido, pero aun así debes usar Guardar antes de salir del creador o publicar cambios importantes.
Flujo de trabajo recomendado
Para un proceso de creación de páginas confiable:
- Comience con la estructura de la página: secciones y contenedores.
- Agregue elementos de contenido como encabezados, texto, imágenes, videos, formularios y botones.
- Utilice Estilo Global para lograr una coherencia visual amplia.
- Edite estilos de elementos individuales solo cuando la página necesite ajustes específicos.
- Utilice el Navegador para revisar el anidamiento y la selección.
- Verifique las vistas de escritorio, tableta y dispositivo móvil.
- Configure los metadatos, el seguimiento, el código personalizado y las funciones de la página de SEO en Configuración.
- Guarde la página.
- Publique o descargue la página cuando esté lista.
Mejores prácticas
- Mantenga la anidación de secciones y contenedores simple para que la página sea más fácil de mantener.
- Utilice los títulos en orden lógico para facilitar la lectura y SEO.
- Obtenga una vista previa de los diseños móviles antes de publicarlos.
- Guarde antes de probar pixels, formularios o scripts personalizados.
- Utilice el Navegador al seleccionar elementos profundamente anidados.
- Evite agregar código personalizado innecesario a menos que sea necesario para seguimiento, cumplimiento o integraciones.
Documentación relacionada
- Secciones y Contenedores
- Elementos
- Vistas previas y receptivas
- Navegador y Capas
- Guardar automáticamente y guardar
- Configuración
- SEO y metadatos
- Formularios
- Elemento Producto
- Quiz interactivo
Preguntas frecuentes
¿Qué debo revisar antes de publicar una página del builder?
Revisa la estructura, el layout móvil, los metadatos SEO, formularios, botones, píxeles, código personalizado, productos, pasos de quiz y la URL publicada final. Usa Resumen de página para una revisión rápida a nivel de página.
¿Por qué algunos elementos tienen pestañas de edición diferentes?
Atomicat muestra pestañas según el elemento seleccionado. Los contenedores usan Layout, la mayoría de elementos usan Contenido y Estilo, y los elementos de quiz pueden mostrar controles de Página o Lógica.
¿Dónde configuro SEO y tracking?
Abre Configuración del Constructor de páginas. Los metadatos SEO, píxeles, código personalizado, retraso, funciones de página, AtomicTracker y opciones relacionadas viven allí, no dentro de la mayoría de cajones de elementos.
¿Cómo soluciono problemas del builder?
Empieza por Problemas de guardado en Builder si los cambios no persisten, Problemas de publicación si la página en vivo está desactualizada, y Solución de problemas de píxeles o formularios si el problema está relacionado con tracking o envíos.