Paleta · Lienzo · Inspector
Cómo Se Comporta el Lienzo de Arrastrar y Soltar
La portada muestra una maqueta de arrastrar y soltar y sigue adelante. Esta página es la mecánica detrás de eso: tres paneles, qué llega a cada uno, el gesto que coloca un bloque en la página, y qué cambia una vez que está seleccionado —cómo un ajuste de estilo se limita a un solo ancho de pantalla, cómo se deshace un paso, y cómo encajan el recorrido guiado y las pestañas de ajustes alrededor de todo eso.
Tres paneles, tres funciones
El editor se organiza como una paleta a un lado, el lienzo en el centro y un inspector al otro lado, y ese diseño necesita ancho suficiente para mostrar los tres a la vez: este sitio bloquea la ruta por debajo de los 960 píxeles y explica el motivo en vez de mostrar un diseño que se superpondría sobre sí mismo. La paleta es donde viven los bloques antes de existir en la página; el lienzo es la página misma, mostrada en vivo; el inspector está vacío hasta que se selecciona algo en el lienzo, y entonces se llena con los controles propios de ese elemento.
Encima del lienzo hay una barra de herramientas, separada de los otros dos paneles, con dos interruptores que pesan más de lo que su tamaño sugiere: uno alterna entre editar y una vista previa de la página tal como la vería quien visita el sitio, y el otro elige cuál de los cinco anchos de pantalla está mostrando el lienzo en ese momento. El guardado automático corre desde esa misma cabecera, así que no hay un paso de guardar aparte entre colocar un bloque y que quede fijado.
El gesto: arrastrar desde la paleta, soltar sobre el lienzo
El movimiento central es un arrastre directo: se toma un bloque de la paleta y se suelta sobre el lienzo, dentro del contenedor que quede bajo el puntero al soltar. Ese único gesto es la forma en que cualquier tipo de bloque llega a una página; no hay un menú de inserción aparte ni una vía de añadir con un clic documentada para ello, así que si se quiere el bloque en la página, arrastrarlo hasta ahí es el camino.
Una vez que un bloque está en el lienzo, dos acciones más se aplican a lo que esté seleccionado en ese momento: duplicarlo, que produce una copia junto al original, y eliminarlo, que lo quita. Reposicionar un bloque ya colocado se hace del mismo modo en que se añadió: arrastrándolo. El propio recorrido guiado de Builder42 dedica un paso entero al arrastre de la paleta al lienzo, señal de lo central que es ese movimiento en todo el flujo de trabajo, no un detalle secundario escondido en un menú de ajustes.
Seleccionar un bloque abre el inspector, en tres pestañas
El inspector es donde un bloque seleccionado deja de estar solo colocado y empieza a configurarse, y está organizado en tres pestañas: Contenido, para el texto, la imagen u otro dato que lleva el bloque; Estilo, para su apariencia visual; e Interactividad, para asignarle un comportamiento. Qué pestaña se necesita depende de lo que se esté cambiando, pero el bloque sigue seleccionado al moverse entre ellas, así que un ajuste de contenido y otro de estilo sobre el mismo elemento quedan a una pestaña de distancia, no a dos visitas separadas al lienzo.
La pestaña de Estilo es donde vive el control por punto de ruptura, y merece explicación aparte porque es fácil subestimarla: un cambio de estilo que se hace queda limitado al ancho de pantalla que el lienzo está mostrando en ese momento, no se aplica a todos a la vez. Un título que se encoge con el lienzo puesto en el ancho de móvil no cambia cómo se ve ese mismo título en el ancho de escritorio, a menos que se cambie el selector de vista a escritorio y se repita el ajuste ahí. Asignar un comportamiento —un acordeón, un modal, un efecto al hacer scroll— es un ajuste dentro de la pestaña de Interactividad, no un apartado propio; qué contiene ese catálogo de comportamientos es tema de la guía sobre trabajar sin código.
Cinco anchos con nombre propio, no una media query escrita a mano
El selector de vista en la barra de herramientas nombra cinco anchos en vez de dejar la cifra a la memoria: móvil como base, y luego móvil grande, tableta, portátil y escritorio. Cambiar el selector vuelve a mostrar el lienzo en ese ancho y limita a él cualquier cosa que se edite después, lo que hace concreto el punto anterior sobre la pestaña de Estilo: cinco anchos significan cinco conjuntos independientes de ajustes por elemento, y ninguno se escribe a mano como CSS.
La forma práctica de trabajar con esto es: elegir el ancho en el que algo no se ve bien, corregir ese elemento en concreto, y pasar al siguiente ancho solo si también necesita un cambio. Una maqueta que ya se ve bien en cuatro anchos y mal en uno no necesita cuatro ajustes repetidos: necesita exactamente uno, en el ancho donde se rompe.
Deshacer, rehacer, y las pestañas alrededor del lienzo
Cada arrastre, duplicado, borrado y cambio de estilo queda en un historial que se puede recorrer hacia atrás con Ctrl o Cmd más Z, y hacia delante otra vez añadiendo Mayús a esa misma combinación. Los dos atajos se desactivan mientras el cursor está dentro de un campo de texto, precisamente para que una tecla normal usada al escribir no rebobine por accidente un cambio que se quería conservar.
Tres pestañas más viven en una zona de ajustes fuera del lienzo: Capas, para la estructura de la página como un árbol en vez de como una superficie renderizada; Páginas, para añadir, renombrar y cambiar entre las páginas de un sitio de varias páginas; e Idiomas, para los idiomas de contenido del sitio. Las tres forman parte de la misma interfaz de tres paneles descrita arriba, a las que se llega sin salir del editor. Un recorrido guiado lleva a quien entra por primera vez por todo este diseño: la cabecera y el guardado automático, el interruptor de editar y vista previa, el selector de vista, deshacer y rehacer, la paleta, el lienzo, duplicar y eliminar, las tres pestañas del inspector y las pestañas de ajustes para capas, páginas e idiomas. El recorrido define 18 pasos en total; dos desaparecen en este montaje embebido, los ligados a un menú que este sitio no muestra, y quedan 16 pasos que sí se recorren aquí.
Cuatro plantillas con suficiente densidad para desmontar
Una página de agencia creativa, un estudio de arquitectura, una página de equipo y una tienda de ropa: elegidas porque cada una apila suficientes bloques distintos y puntos de ruptura como para mostrar cómo es de verdad seleccionar, arrastrar y reestilizar un elemento entre muchos.
Lo que se pregunta primero
¿Cómo se coloca en realidad un bloque en la página?
Se arrastra desde la paleta y se suelta sobre el lienzo, dentro del contenedor que quede bajo el puntero al soltar. Ese arrastre es la forma en que cualquier tipo de bloque llega a una página; no hay un paso de inserción aparte.
Si cambio el tamaño de un título para móvil, ¿cambia también en escritorio?
No. Un cambio de estilo hecho en el inspector se aplica solo al ancho de pantalla que el lienzo está mostrando en ese momento. Al cambiar el selector de vista a otro ancho, ese mismo elemento puede llevar un ajuste distinto ahí.
¿Para qué sirven las tres pestañas del inspector?
Contenido guarda el texto, la imagen u otro dato que lleva un bloque. Estilo guarda su apariencia visual, limitada por punto de ruptura. Interactividad es donde se asigna un comportamiento al bloque, como un acordeón o un modal.
¿Se puede mover un bloque después de haberlo colocado?
Sí, arrastrándolo de nuevo: reposicionar usa el mismo gesto que colocarlo la primera vez. Duplicar y eliminar el bloque seleccionado son acciones aparte, disponibles una vez que está seleccionado.
¿Deshacer retrocede más de un paso?
Sí. Ctrl o Cmd más Z retrocede a través de un historial de cambios, y añadir Mayús rehace un paso hacia delante. Ambos atajos se ignoran mientras se está escribiendo en un campo de texto.
¿Por qué el editor bloquea las ventanas pequeñas en vez de encoger el diseño?
La paleta, el lienzo y el inspector se colocan uno junto al otro y necesitan al menos 960 píxeles de ancho para seguir siendo utilizables; por debajo de eso se superpondrían, así que este sitio muestra una explicación en vez de un diseño de tres paneles roto.