Tabla de contenidos
A. Gestión de Contenido (Widgets Activos) #
Esta capa actúa como el panel de control estructural de la página. El usuario interactúa con una lista jerárquica que representa el orden de los elementos en el viewport móvil.
- Jerarquía Dinámica: Los widgets no están fijos; se organizan en una pila lógica donde el orden en el panel administrativo se refleja proporcionalmente en la visualización final.
- Controles de Manipulación Directa:
- Drag & Drop (Icono de Rejilla): Permite el reordenamiento intuitivo de las secciones, facilitando pruebas de A/B testing visual de forma inmediata.
- Control de Visibilidad: Un interruptor rápido permite ocultar o mostrar componentes sin necesidad de eliminarlos, ideal para ofertas temporales o cambios estacionales.
- Edición y Clonación: Acciones de un solo clic para abrir el panel de configuración específica o duplicar estructuras complejas, acelerando el flujo de trabajo de diseño.
B. Catálogo de Componentes (Añadir Widget) #
El sistema ofrece una librería robusta de 11 componentes diseñados bajo estándares de diseño atómico. Estos se agrupan en cuatro categorías funcionales:
| Categoría | Widgets Disponibles | Propósito Funcional |
| Básicos | Título, Texto, Imagen, Botón | Definición de la estructura narrativa y llamadas a la acción (CTA). |
| Social / Contacto | Redes Sociales, Perfil, Formulario, WhatsApp | Generación de leads y vinculación con el ecosistema social de la marca. |
| Multimedia | Video (YT/Vimeo), Mapas (G-Maps) | Integración de contenido dinámico y geolocalización de puntos físicos. |
| Comercial | Caja de Iconos, Lista de Precios | Presentación estructurada de servicios, productos y beneficios clave. |
C. Capa de Complementos y Diseño Global #
Más allá de los bloques individuales, el editor ofrece una capa de configuración sistémica que garantiza la Coherencia de Marca (Branding Consistency).
- Inyección de Estilos (Custom CSS): Para usuarios avanzados o agencias, el sistema permite la inserción de código CSS personalizado. Esto posibilita la modificación de fuentes, bordes o animaciones que no están predefinidas en los widgets básicos.
- Configuraciones de Cabecera (Header): Gestión de meta-etiquetas y elementos visuales superiores que afectan el posicionamiento y la identidad visual primaria de la página.
- Global Branding: Ajustes maestros que aplican paletas de colores y tipografías a todos los widgets de forma simultánea, evitando la edición manual uno por uno y asegurando que la landing sea un reflejo fiel de la identidad corporativa.
Resumen de UX del Editor #
La separación de estas tres capas permite un flujo de trabajo lógico:
- Configurar la estética global (Capa C).
- Seleccionar las herramientas necesarias (Capa B).
- Refinar el flujo y la jerarquía de la información (Capa A).
Esta arquitectura asegura que, independientemente de la complejidad del contenido, el resultado final sea siempre una página limpia, funcional y optimizada para la conversión.
