El lienzo es una superficie infinita y con zoom. Cada página se muestra como tres mesas de trabajo lado a lado, escritorio, tablet y teléfono, y cada una es un render en vivo de la misma página. Edita en una y las demás se actualizan al instante.
Moverte por el lienzo
| Para | Cómo |
|---|---|
| Desplazarte | Desplázate con dos dedos, mantén presionado Space y arrastra, o usa la herramienta Hand H. |
| Hacer zoom | Pellizca, o ⌘ + scroll. El zoom se mantiene centrado en el cursor. |
| Acercar / alejar | ⌘= / ⌘- |
| Ajustar a la pantalla | ⇧1 |
| Zoom al 100% | ⇧0 |
Las mesas de trabajo son navegadores reales
Cada mesa de trabajo es un frame aislado tan ancho como su punto de quiebre (1440, 768 y 390 px). Las media queries, position: fixed, los efectos de scroll y las fuentes se comportan exactamente como en el sitio en vivo. Las mesas de trabajo de página crecen con su contenido.
Seleccionar y editar
- Un clic selecciona el elemento de nivel superior bajo el cursor; doble clic entra a sus hijos. Haz doble clic en un texto para editarlo en su lugar.
- ⇧ + clic agrega a la selección. ⌘A selecciona todo, Esc quita la selección, ⇧↵ selecciona el padre.
- Arrastra un elemento seleccionado para moverlo. Dentro de un stack, un indicador muestra dónde va a caer. Arrastra los controladores para cambiar el tamaño; la etiqueta de tamaño muestra el resultado.
- Las flechas mueven el elemento poco a poco, ⌥↑ / ⌥↓ lo mueven entre sus hermanos.
- Haz clic derecho para abrir el menú contextual: copiar, cortar, pegar, pegar aquí, duplicar, envolver en frame, envolver en enlace (quitar enlace en un link block), crear componente, ocultar, bloquear y eliminar.
Insertar elementos
Usa una tecla de herramienta, el menú de inserción o el menú contextual. Desde el menú de inserción o el menú contextual, los elementos nuevos van dentro del frame seleccionado, o en el cuerpo de la página. Con una herramienta, los dibujas donde los quieres (ver abajo).
Dibujar para insertar
Las herramientas Frame F, Text T e Image I insertan al presionar, arrastrar y soltar: presiona sobre una mesa de trabajo, arrastra para trazar una caja y suelta. El elemento nuevo queda seleccionado y la herramienta vuelve a Select.
Dónde cae el elemento depende de sobre qué dibujas:
- El contenedor. El elemento va dentro del contenedor desbloqueado más profundo que está bajo el punto donde presionaste y que la caja no cubre por completo. Si dibujas alrededor de toda una tarjeta, se inserta junto a ella, no adentro.
- Stacks y grids. El elemento se inserta en el flujo en la posición bajo la caja, y un indicador muestra dónde. La caja define su ancho y su alto (un texto solo recibe ancho). Una caja que abarca todo el ancho de contenido de un stack vertical recibe
width: 100%. - Frames libres. El elemento se posiciona de forma absoluta, exactamente donde dibujaste la caja.
- Envolver lo que ya está. Un frame dibujado alrededor de hermanos existentes los envuelve, en un solo paso de deshacer. En un frame libre conservan su lugar en pantalla.
- Un clic sin arrastrar inserta el elemento con su tamaño por defecto.
Mientras arrastras, mantén ⇧ para dibujar un cuadrado, ⌥ para dibujar desde el centro, o ⌘ para desactivar el ajuste. Presiona Esc para cancelar. La herramienta Text empieza a editar de inmediato con el texto de ejemplo seleccionado, para que escribas encima.
Enlaces
Inserta un Link para un enlace de texto, o un Link block para hacer clicable un grupo de elementos. Para convertir elementos existentes en un enlace, selecciónalos (solo hermanos), haz clic derecho y elige Wrap in link. En un link block, Remove link devuelve sus hijos a su lugar.
Selecciona un enlace o un botón y abre la sección Link del inspector:
| Campo | Qué hace |
|---|---|
| Text | La etiqueta de un enlace de texto. Los link blocks muestran su propio contenido en su lugar. |
| Bound URL | Presiona para enlazar la URL a una expresión. Dentro de una lista de colección o en una página plantilla, las opciones rápidas incluyen Item page, la página plantilla del propio ítem, y las páginas de sus campos de referencia, como Author page. Consulta enlazar los ítems de una lista. |
| Target | None, Page o URL. Los enlaces nuevos empiezan en None y no llevan a ningún lado hasta que eliges un destino. |
| Page | La página que se abre. El enlace sigue a la página cuando la renombras o cambias su ruta. |
| URL | Cualquier dirección https://, mailto: o tel:. Activa New tab para abrirla en una pestaña nueva. |
Un botón con destino se convierte en un enlace con estilo de botón. Un botón dentro de un formulario siempre envía el formulario, así que su sección Link solo lo indica: para ir a una página desde un formulario, agrega un enlace fuera del formulario.
Capas y páginas
La pestaña Layers refleja el árbol de la página. Arrastra filas para reordenar o cambiar de padre, presiona ↵ para renombrar y usa los botones de la fila para ocultar (⇧⌘H) o bloquear (⇧⌘L) una capa. Las capas bloqueadas no se pueden seleccionar en el lienzo.
La pestaña Pages lista las páginas del sitio. Una página tiene un título y una ruta. Las páginas plantilla de las colecciones del CMS renderizan una página por ítem; consulta Páginas plantilla del CMS.
Copiar y pegar
⌘C, ⌘X y ⌘V funcionan con elementos, entre páginas y entre sitios. Pegar texto plano crea un elemento de texto; pegar una imagen primero la sube a tus recursos. ⌘D duplica en el mismo lugar.
Vista previa
Presiona ⌘↵ para la vista previa. Las interacciones se reproducen, los enlaces de datos se resuelven con datos en vivo y los flujos de trabajo de cliente se ejecutan, directamente en las mesas de trabajo. Al hacer clic en un enlace, lo sigue: un enlace a una página abre esa página, un enlace a la página de un ítem del CMS (como /blog/hello) también previsualiza ese ítem, y una URL externa se abre en una pestaña nueva. Mientras diseñas, hacer clic en un enlace solo lo selecciona.