Cambia tu aplicación
Vista previa
La aplicación funcionando junto al chat: la barra de encima, editar una palabra en el sitio, el tema, moverte entre páginas y secciones, y verla en tamaño de teléfono, tableta o escritorio.
La vista previa es tu aplicación, funcionando, a la derecha del chat. Todo lo que hay en ella funciona como lo hará una vez publicada: los botones, los formularios, las páginas.
La barra de encima
De izquierda a derecha:
| Qué hace | |
|---|---|
| Preview, el icono de código, el icono de capas | La aplicación, su código y Manage. |
| Edit | Haz clic en una palabra de la vista previa y reescríbela, o en un elemento para cambiar cómo se ve. La (i) junto a él explica cómo. Mira más abajo. |
| Theme | Los colores y las fuentes de toda la aplicación, en un solo lugar. |
| El cuadro del medio | La página o sección que estás viendo. Ábrelo para ir a cualquier otra. La flecha a su izquierda recarga la vista previa. |
| El cuadrado con una flecha | Abre la aplicación publicada, una vez que está publicada. |
| Las flechas de ida y vuelta | Deshacer y rehacer. Aparecen después del primer cambio, y cada clic es un paso, hasta donde llega esta sesión. |
| El menú de tamaño | No frame, Desktop, Tablet o Mobile. Mira más abajo. |
| Las cuatro esquinas | Pantalla completa, y volver. |
| × | Cierra la vista previa, para que el chat tenga todo el ancho. |
En un teléfono
Un teléfono tiene espacio para un solo panel a la vez. Dos botones abajo, Chat y Preview, te mueven entre la conversación y tu aplicación. La × que cierra la vista previa solo está en una pantalla más grande, y Split view (consulta Código) solo está en un ordenador.
En cada tamaño
El menú de tamaño muestra la aplicación tal como se verá en cada pantalla.
- No frame llena el panel, como en la imagen de arriba.
- Desktop la pone en una ventana de navegador, con su dirección publicada arriba.
- Tablet y Mobile la ponen en una tableta o en un teléfono, con su ancho real.
Toda aplicación está construida para los tres, y se mide al ancho de un teléfono después de cada construcción y de cada cambio. Aun así, mirarla aquí es la forma más rápida de ver lo que verá un visitante en un teléfono.
Edita en el sitio
Con Edit activado, el botón dice Editing, y la vista previa deja de ser una página para usar y se convierte en una página para cambiar. Señala un texto y aparece Edit text encima: haz clic y escribe. Haz clic en cualquier elemento y se resalta con un contorno, con una barra de herramientas al pie de la vista previa.
| Herramienta | Qué hace |
|---|---|
| Edit Element | Describe en una frase un cambio para este elemento, y la IA lo reescribe. |
| Text | Reescribe el texto. |
| Background, Text color, Text style | Sus colores, y el tamaño, el grosor, la alineación y el aspecto de su texto. |
| Opacity, Spacing | Cuánto se transparenta, y el espacio a su alrededor y dentro de él. |
| Image, Video | Cambia o quita la imagen o el vídeo que contiene. En una imagen, Adjust size & fit define cómo llena su lugar. |
| El icono de código | Edit code: el código propio de este elemento, en un panel, para cambiarlo a mano. |
| Duplicate, Delete | Una copia justo después de él, o eliminarlo. |
| Cancel, Save | Descartar los cambios, o escribirlos en el código. |
La flecha del final pliega la barra, y × suelta el elemento. Haz doble clic en un botón para ir a la página que abre.
Los cambios hechos con las herramientas no cuestan créditos. Edit Element lo escribe la IA, así que usa unos pocos, como una respuesta del chat. Para algo más grande que un elemento, una sección nueva, un formulario, una página, pídelo en el chat.
Theme
Theme reúne los colores y las fuentes que usa toda la aplicación, en un panel a la derecha. Cambia uno y todos los lugares que lo usan lo siguen, en todas las páginas.
- Colors enumera cada color, para qué sirve y cuántas veces lo usa la aplicación. Haz clic en una muestra para elegir otro.
- Fonts enumera cada fuente, con cuántas veces se usa. Elige otra de la lista.
La vista previa muestra cada cambio a medida que lo haces. Save & Apply los escribe en el código, y Cancel lo deja todo como estaba. Un tema no cuesta créditos, y la versión anterior se conserva en History.
Deshacer e History
Deshacer y rehacer recorren los cambios de esta sesión, uno por clic. Para algo más antiguo, cada cambio se conserva en History, arriba en el editor, con el nombre de lo que hizo, y puedes volver a cualquier versión. Volver atrás también se conserva como una versión, así que puedes avanzar de nuevo.
¿Te ha sido útil esta página?