Editor visual sin código

El editor carga su sitio real dentro de un iframe y le permite señalar cualquier cosa en él. Seleccionar un elemento abre un panel de propiedades agrupado como lo haría una herramienta de diseño: contenido, tipografía, fondo, borde, espaciado, tamaño y posición. Cada cambio se registra sobre la variante que está editando, nunca sobre la página.

Un árbol jerárquico corre junto al lienzo para cuando señalar no es lo bastante preciso, con unas migas de pan que muestran exactamente qué nodo está seleccionado. Un campo de selector CSS está ahí por la misma razón: cuando ya conoce el selector, escribirlo es más rápido que buscarlo.

Una lista de cambios muestra todo lo que hace la variante, en orden, y cada entrada se puede eliminar por su cuenta. Esa lista es la variante. Es lo que se aplica en la página del visitante y lo que la entrega de implementación lee después para decirle a un desarrollador qué fijar en el código.

Dos controles más pequeños importan más de lo que parece. Un interruptor de interactividad alterna entre seleccionar elementos y usar la página de verdad, así que puede abrir un menú o una ventana modal y editar lo que hay dentro. Un selector de dispositivo reencuadra el lienzo a los anchos que usa su tráfico, porque una variante que solo funciona en ancho de escritorio no está terminada.