Da estilo, copia y redimensiona elementos a mano
Define tú mismo colores, tamaño de texto, espaciado, bordes, ancho y sombra, copia y mueve elementos, y arrástralos para cambiar su tamaño — al instante, sin IA y sin créditos.
Necesitarás: Un sitio web ya generado por el AI Builder, abierto en el editor en su idioma principal.
Cuando sabes exactamente lo que quieres — este relleno, ese color, la misma tarjeta otra vez — puedes hacerlo tú en lugar de describírselo a la IA. Todo lo que hay aquí es instantáneo, gratis y se puede deshacer.
Estas herramientas están en la fila al pie del panel que se abre cuando haces clic en un elemento. Consulta Edita tu sitio web haciendo clic para el resto de ese panel.
#Cambia el aspecto con el panel Estilo
- Haz clic en el elemento en la vista previa.
- Elige 🎨 Estilo. El panel Estilo se abre junto a la página.
- Cambia lo que quieras. La vista previa se actualiza a medida que avanzas, pero todavía no se guarda nada.
- Elige Aplicar para conservar los cambios, o Deshacer para descartarlos.
12- Todas las pantallas o Solo este dispositivo
- Colores
El panel está agrupado en secciones que puedes desplegar y plegar:
| Sección | Qué puedes definir |
|---|---|
| Colores | Color de Texto, Fondo y Borde |
| Texto | Tamaño en píxeles, Peso desde Ligera hasta Black, y Alineación — Izquierda, Centro, Derecha o Justificado |
| Espaciado | Relleno (dentro) y Margen (fuera) en píxeles, para cada lado |
| Borde | Grosor, Estilo (Sólido, Discontinuo, Punteado o Ninguno) y Redondeo de las esquinas |
| Tamaño y sombra | Ancho, Ancho máx. y Sombra desde Pequeña hasta Extra grande |
Una ✕ junto a un valor lo devuelve a su estado original (Volver al predeterminado).
#Colores
Cada color ofrece muestras de la paleta de tu propio sitio, más Color personalizado para cualquier otro.
#Espaciado
El botón 🔗 mantiene el Mismo valor en los cuatro lados. Desactívalo para definir Arriba, Derecha, Abajo e Izquierda por separado.
#Ancho
Ancho y Ancho máx. aceptan píxeles (320), un porcentaje (50%), o
full / auto. Los porcentajes se encogen con la pantalla; los píxeles no, así
que usa un porcentaje para cualquier cosa que tenga que caber en un teléfono.
#Todas las pantallas, o solo esta
En la parte superior del panel:
- Todas las pantallas — el cambio se aplica en computadoras, tabletas y teléfonos.
- Solo este dispositivo — el cambio se aplica solo al ancho de vista previa que estás usando, que aparece junto al botón (por ejemplo Solo este dispositivo · móviles). Cambia primero la vista previa a 📱 para arreglar algo que solo se ve mal en un teléfono. Tu diseño de escritorio queda como estaba.
#Conviene saber
- Un Aplicar es un solo paso en ↶ Deshacer, cambies cuantos valores cambies.
- Si haces clic en otro elemento con cambios todavía sin aplicar, se te pregunta si quieres Descartar esos cambios.
- Si un valor no se puede usar, no se aplica nada: Uno de esos valores no se pudo usar. Revisa los campos e inténtalo de nuevo.
- El panel Estilo solo se ofrece en el idioma principal del sitio. El diseño es compartido por todos los idiomas, así que una traducción no se puede estilizar por separado.
#Copiar, cortar y pegar
| Botón | Qué hace |
|---|---|
| 📋 Copy | Copia el elemento |
| ✂ Cut | Toma el elemento para moverlo |
| ⧉ Duplicate | Añade una copia idéntica justo después |
| 📥 Pegar | Aparece cuando hay algo copiado. Haz clic donde debe ir y pega |
| ✨ Match style | Da al elemento seleccionado el formato del elemento copiado, conservando sus propias palabras |
Los botones Copy (copiar), Cut (cortar), Duplicate (duplicar) y Match style (igualar estilo) aparecen en inglés en la aplicación.
#Pega en algún lugar
- Selecciona un elemento y elige 📋 Copy o ✂ Cut. Una etiqueta arriba de la fila de herramientas muestra Copiado: o Moviendo: y lo que contiene.
- Haz clic en el elemento junto al que quieres pegar, o dentro del cual quieres pegar.
- Elige 📥 Pegar dentro o 📥 Pegar después — lo que corresponda a lo que hayas seleccionado — o abre ▾ para Pegar dentro de este, Pegar después de este, Pegar antes de este y Reemplazar este.
Para soltar algo al final de una sección, haz clic en el fondo de la sección y elige 📥 en el panel Edit section. La × de la etiqueta vacía el portapapeles.
Copiar y pegar funciona entre secciones y páginas del mismo sitio, no entre dos sitios distintos.
#Haz que una tarjeta combine con las demás
Las reescrituras con IA solo ven el elemento en el que hiciste clic, nunca sus vecinos, así que una tarjeta que la IA rehace puede no combinar del todo con las tarjetas de al lado. Para ir a lo seguro:
- ¿Necesitas otra tarjeta? Selecciona una que se vea bien y elige ⧉ Duplicate, y después cambia sus palabras.
- ¿Una tarjeta se desvió? Usa 📋 Copy sobre una tarjeta que se vea bien, selecciona la que desentona y elige ✨ Match style. Sus palabras se quedan; su formato pasa a ser el de la tarjeta copiada.
#Redimensiona arrastrando
Selecciona una caja o una imagen y aparecen controles en sus bordes. Arrastra uno.
- Los elementos dentro de una cuadrícula se ajustan a sus columnas — por ejemplo, 2 de 3 columnas.
- Las imágenes y las cajas sueltas se ajustan a pasos como un cuarto, un tercio, la mitad o el ancho completo.
- Una insignia muestra el tamaño y los tamaños de pantalla a los que se aplica.
Se ajusta a propósito: un ancho fijo en píxeles que se ve bien en tu monitor se desborda en el primer teléfono que abre la página. El elemento sigue seleccionado después de soltarlo, así que puedes volver a arrastrar.
El texto simple no tiene controles — para agrandar un texto, usa Tamaño en el panel Estilo.
#Si un cambio no se ve
- Falta el botón Estilo — estás editando una traducción. Vuelve a poner el menú de idioma de la barra de herramientas en el idioma principal.
- El cambio se ve en escritorio pero no en el teléfono (o al revés) — lo aplicaste con Solo este dispositivo. Vuelve a aplicarlo con Todas las pantallas.
- El sitio en línea no cambió — presiona Republicar. Los cambios del editor no llegan a las páginas publicadas hasta que lo haces.
Actualizado: