Panel de edición

El panel de edición está a la derecha del editor y muestra los controles de lo que hayas seleccionado. Si no hay nada seleccionado, permite ajustar los estilos de la página.

Presiona ⌘E / Ctrl+E para mostrarlo u ocultarlo. Cuando esté oculto, haz clic en la flecha del borde derecho de la ventana para volver a mostrarlo. El panel no se muestra mientras estén abiertos Ajustes, Datos o el editor de código.

Cada cambio que hagas aquí se aplica directamente al código de tu sitio web y el lienzo se actualiza al instante.

Panel flotante

Arrastra el control de puntos de la parte superior del panel (Arrastra para separar) para dejarlo flotando sobre el lienzo. Luego muévelo donde te resulte cómodo. Arrastra su borde inferior para ajustar la altura.

Para volver a acoplarlo, arrástralo al borde derecho de la ventana. Una franja resaltada muestra dónde se colocará (Suelta en el borde derecho para acoplar). El editor recuerda si el panel está flotante y dónde lo dejaste.

Estilos de la página

Si no hay nada seleccionado, el panel muestra los estilos de toda la página: Fondo, Tipografía, Espaciado, Efectos, Transiciones y Avanzado. El espaciado define el relleno de la página.

Los valores coinciden con lo que ves, incluso cuando el color de la página proviene de los estilos globales de tu sitio web y no de la propia página.

Pestaña Estilo

Selecciona un elemento en el lienzo o en el panel de capas y el panel mostrará dos pestañas: Estilo y Propiedades. El panel recuerda la última pestaña que usaste.

La fila de botones de la parte superior ancla un elemento con posición absoluta, fija o sticky a la izquierda, al centro o a la derecha, y arriba, en medio o abajo. Para los demás elementos, estos botones aparecen desactivados. Debajo hay secciones que puedes abrir y cerrar. El panel recuerda cuáles dejas abiertas.

Si seleccionas varios elementos, los cambios de Estilo se aplican a todos.

Distribución

Elige una opción de Visualización: bloque, flex, cuadrícula o ninguna. Las opciones de abajo cambian según tu elección:

• Bloque: Desbordamiento y Flotante (con Limpiar cuando es flotante).
• Flex: Dirección, Justificar, Alinear, Ajustar y Espacio.
• Cuadrícula: Columnas, Filas y Espacio.

Posición permite elegir entre estática, relativa, absoluta, fija o sticky. Las posiciones absoluta y fija añaden un campo para cada lado: arriba, derecha, abajo e izquierda.

Tamaño

Usa Dimensiones para alternar entre ancho y altura. Define Ancho, Ancho mínimo y Ancho máximo (o sus equivalentes de altura) con valores predefinidos como Automático, Completo, Pantalla y fracciones, o escribe tu propio valor. Desbordamiento controla qué ocurre cuando el contenido no cabe.

Espaciado

Alterna entre Relleno (espacio dentro del elemento) y Margen (espacio fuera de él). Luego ajusta cada lado en el recuadro.

Tipografía

Familia, Tamaño, Grosor, Altura (altura de línea), Espaciado (espacio entre letras), Color, Alinear, Estilo (cursiva), Transformación (mayúsculas, minúsculas, iniciales en mayúscula) y Decoración (subrayado, tachado).

Fondo, borde y más

• Fondo: elige Color o Imagen como tipo. El selector de color permite usar colores sólidos y degradados. Las imágenes tienen ajustes de Posición, Tamaño, Repetir y Adjuntar.
• Borde: Color, Ancho, Radio (todas las esquinas o cada una por separado), Estilo (sólido, discontinuo, punteado) y Contorno, para todos los lados o uno solo.
• Efectos: Opacidad, Sombra y su color, Desenfoque, Brillo, Contraste, Saturar, Tono y un Filtrar (escala de grises, sepia, invertir).
• Transiciones: Propiedad, Duración, Temporización y Retraso, para animar con suavidad cambios como los efectos al pasar el cursor.
• Cursor: la forma del puntero sobre el elemento.
• Avanzado: otras clases de estilo del elemento. Escribe una clase y presiona Enter para añadirla, o elimina una de la lista.

Pestaña Propiedades

La pestaña Propiedades contiene el contenido y los ajustes del elemento. Todos los elementos tienen General y Accesibilidad, seguidos de secciones según su tipo.

• General: la etiqueta del Elemento (por ejemplo, cambia un h2 por un h3), ID, Información emergente y Atributos de datos. Haz clic en Añadir atributo para añadir uno.
• Accesibilidad: Etiqueta, Descrito por, Rol, Índice de tabulación y Visibilidad para lectores de pantalla.

Las secciones para elementos específicos incluyen:

Sección	Qué puedes ajustar
Texto	El texto, además de la fuente, el tamaño, el grosor, la alineación, la altura de línea, el espacio entre letras y el color. Mejorar con IA reescribe el texto por ti.
Botón	Etiqueta, Tipo (Botón, Enviar, Restablecer), Desactivado, Nombre, Valor
Enlace	URL, Abrir en (Misma pestaña, Nueva pestaña), Relación, Descargar
Imagen	Origen, Texto alternativo (déjalo vacío si la imagen es decorativa), Cargando
Campo de entrada	Tipo, Nombre, Texto de ejemplo, Valor, límites como Mín, Máx, Longitud máxima y Patrón, y Obligatorio, Desactivado, Solo lectura
SVG	Icono, Ancho, Altura, Relleno, Trazo, Grosor del trazo

Las áreas de texto, los selectores, los formularios, las listas, las tablas, los videos, el audio y las imágenes de fondo también tienen sus propias secciones, al igual que las inserciones de YouTube, Vimeo, Google Maps, Calendly, Typeform, Stripe y PayPal.

Texto que proviene del código

Parte del texto de una página no se escribe directamente en ella. Proviene de una lista, una prop o un archivo de datos, como el título de una tarjeta en una fila de tarjetas. La sección Texto te indica cuándo ocurre esto:

• Este texto proviene de datos o de una prop. Al guardar, se actualiza allí. Escribe como siempre. Solo cambia el valor de este elemento, en el lugar donde está definido.
• Compartido por todos los elementos de esta lista. El texto entre {braces} es código. Un cambio aquí modifica todos los elementos. Deja las partes entre llaves tal como están.
• Definido por código, seguido del código. El texto se calcula mediante código, por lo que el campo es de solo lectura. Pídele a la IA que lo cambie.
• Contiene elementos anidados. Selecciónalos para editarlos por separado. Haz clic en el elemento interior en el lienzo para editar su texto.

Copiar y pegar estilos

Copia el estilo de un elemento y aplícalo a otro:

1. Selecciona el elemento que te guste y presiona ⌘⌥C / Ctrl+Alt+C.
2. Selecciona el elemento que quieras cambiar y presiona ⌘⌥V / Ctrl+Alt+V.

Copiar estilo y Pegar estilo también están en el menú del clic derecho.

Mientras la IA trabaja

El panel muestra La IA está editando y desactiva temporalmente sus controles mientras la IA modifica tu sitio web. Se desbloquea en cuanto la IA termina.