Constructor visual

Abrir el constructor

En una página o entrada pulsa Usar el constructor de MAGO, o entra por MAGO Blocks → Constructor, que lista todas tus páginas. El contenido que guardas se publica como HTML estático, así que lo leen igual los buscadores y los plugins de caché.

El espacio de trabajo

• Panel izquierdo: Añadir (la lista de elementos) o Propiedades del elemento elegido, con pestañas Contenido, Diseño, Efectos y Avanzado, un buscador de opciones y el selector «Ir a una sección…».
• Panel derecho: Estructura (el árbol de la página, con buscador), Bloques globales y Clases.
• Lienzo: tu página real. Haz clic en un texto para escribir sobre él; arrastra elementos para moverlos, también desde la Estructura.

Secciones y diseño

Todo cuelga de una sección. Su panel Diseño trae Vertical, Horizontal, Cuadrícula y Avanzado, con alineación, separación, ancho del contenido, alto, relleno y fondo (color, degradado lineal, radial o angular, imagen o video). Cada sección y contenedor admite divisores de forma arriba y abajo. Desde «+ Añadir sección» eliges estructuras listas.

Responsive

Hay cinco dispositivos: escritorio, tablet horizontal, tablet, móvil horizontal y móvil vertical. El panel muestra el valor del dispositivo que editas y lo que no definas hereda del inmediato mayor. Junto a cada opción con estado hover hay un icono para estilizarla al pasar el cursor, con transición automática.

Elementos

El constructor trae más de 90 elementos: básicos (título, texto, imagen, botón, lista, icono, video), de estructura, interactivos (FAQ, pestañas, acordeón, carrusel, contador, popup, antes/después, galería con ampliación), de contenido dinámico (Loop, autor, tabla de contenidos, mapa), de tienda, de navegación (cabecera, menú, mega menú, buscador) y de movimiento. Los elementos HTML y Shortcode piden el permiso unfiltered_html.

Estilos reutilizables

• Clases globales (hasta 150): estilos con nombre, por dispositivo y hover, que aplicas a cualquier elemento.
• Bloques globales: convierte cualquier elemento en un bloque que reutilizas y editas en un solo lugar.
• Colores globales: la paleta del sitio se guarda como variables --mg-c-* y la Biblioteca las usa.
• Copiar y pegar estilos: clic derecho en un elemento, o en cada sección del panel (espaciado, tipografía…).

Plantillas y ajustes globales

En MAGO Blocks → Plantillas diseñas el encabezado, el pie, las entradas y los listados, con condiciones por página, tipo, categoría, rol o sesión. Los ajustes globales guardan paleta, fuentes, tamaños H1–H6, enlaces, botones y medidas, con vista previa en vivo. También puedes editar las páginas del sistema: iniciar sesión, crear cuenta, recuperar contraseña y Mi cuenta.

Efectos y movimiento

Animación al aparecer, movimiento al pasar el cursor, movimiento continuo, animaciones con el scroll, efectos de texto y de botón. Sin JavaScript todo se ve completo, y con «reducir movimiento» activado en el dispositivo del visitante no hay animación.

Fuentes e imágenes

Las fuentes de Google se descargan a tu servidor y la página publicada carga solo las que usa, sin llamar a Google. Las imágenes JPEG y PNG nuevas se convierten a WebP, y cada imagen pide su texto alternativo, con aviso de SEO si falta.

Guardado y versiones

Los cambios llegan a la página cuando pulsas Guardar; mientras trabajas, el editor guarda una copia local por si se cierra el navegador. Antes de cada guardado se crea una versión, y desde la caja Versiones MAGO del editor puedes restaurarla. Si dos personas editan la misma página, ves la selección de la otra y los cambios se combinan por elemento cada pocos segundos; no es edición letra a letra como en Google Docs.