Usar el Inspector avanzado y el panel de Capas

Cuando quieres entender cómo está construida una sección por dentro o ajustar cada propiedad con precisión, cuentas con el panel Capas a la izquierda y el Inspector de las Opciones avanzadas a la derecha.

Navegar la estructura de la página desde el panel Capas (Layers) y desde la ruta de migas inferior

A veces un elemento está dentro de varios contenedores (por ejemplo: Sección → Grid → Tarjeta → Bloque → Título) y hacer clic en el contenedor exacto sobre el lienzo cuesta trabajo. Tienes dos formas directas de seleccionarlo:

1. Panel Capas (raíl izquierdo): muestra el árbol completo de la página, separado entre las piezas globales (Menú del sitio, Banner, Pie del sitio) y el Contenido de la página actual. Usa las flechas para desplegar o colapsar niveles y haz clic en cualquier fila para seleccionarla.
2. Ruta de edición (barra contextual / migas): al seleccionar un elemento en el lienzo, puedes pulsar Seleccionar contenedor en el menú contextual para subir un nivel hacia su bloque padre o hacia la sección que lo envuelve.

Reordenar, agrupar en un bloque, envolver, bloquear, renombrar o eliminar elementos

Tanto desde Capas como haciendo clic derecho sobre un elemento en el lienzo puedes organizar la estructura:

• Reordenar: arrastra las filas hacia arriba o abajo en Capas, o usa Mover arriba / Mover abajo (Subir capa / Bajar capa).
• Agrupar en un bloque / Envolver en: selecciona uno o varios elementos y elige Agrupar en un bloque (Envolver en → Bloque o Sección) para meterlos dentro de un contenedor común y alinearlos juntos.
• Renombrar: haz doble clic sobre el nombre de cualquier capa en el panel Capas para ponerle un nombre claro (por ejemplo, Tarjeta Precio Pro).
• Bloquear elemento: pulsa el icono de candado en Capas (Bloquear elemento) para que esa pieza no se pueda mover ni seleccionar por error en el lienzo hasta que la desbloquees.
• Ocultar o eliminar: oculta el elemento en el dispositivo actual o elimínalo con Supr / Backspace.

Grupo Diseño (Layout): disposición en bloque, fila/columna (Flex) o cuadrícula (Grid), alineación, dirección, espaciado entre hijos (Gap), relleno (Padding) y margen (Margin)

Con las Opciones avanzadas encendidas, el primer grupo del inspector derecho es Diseño:

• Tipo de disposición:
  • Fila o Columna (Flex): ordena los elementos hijos uno al lado del otro (Fila) o uno debajo del otro (Columna). Permite elegir la Alineación de hijos, la Distribución (Espacio entre, Espacio alrededor, Espacio uniforme) y si los elementos hacen Salto de línea (Wrap).
  • Cuadrícula (Grid): define cuántas columnas y filas tiene el contenedor. Si seleccionas un elemento hijo de un Grid, verás además los controles Columnas que ocupa y Filas que ocupa (Span) para que una tarjeta destacada abarque, por ejemplo, 2 columnas.
• Espaciado entre hijos (Gap): la separación automática entre los elementos que viven dentro del contenedor. También puedes arrastrarla directamente sobre el lienzo.
• Relleno (Padding) y Margen (Margin): el espacio Interior (entre el borde de la caja y su contenido) y Exterior (fuera de la caja). Puedes editarlos por eje (vertical y horizontal) o abrir Editar cada lado para ajustar arriba, derecha, abajo e izquierda por separado.
• Posición: Estático, Relativo, Absoluto, Fijo o Pegajoso (Sticky), además del control de orden de superposición (Z-Index).

Grupo Tamaño (Size): ancho y alto (Fijo, Adaptar al contenido, Llenar espacio), mínimos, máximos y desbordamiento (Overflow)

En el grupo Tamaño defines cómo crecen o se encogen las cajas:

• Modos de Ancho y Alto:
  • Ajustar al contenido (Fit content): la caja mide exactamente lo que ocupe su texto o sus hijos.
  • Llenar espacio (Fill): estira el elemento para ocupar todo el espacio disponible dentro de una fila, columna o celda de cuadrícula (Llenar celda).
  • Fijo (px), Relativo (%) o Pantalla (vw / vh): asigna una medida exacta en píxeles, porcentaje del contenedor o porcentaje de la ventana.
• Límites: añade Ancho mínimo, Ancho máximo, Alto mínimo o Alto máximo para que un bloque sea flexible sin descontrolarse en monitores grandes.
• Desbordamiento (Overflow): decide qué ocurre si el contenido interno supera el tamaño de la caja (Visible, Oculto, Recorta o Recorre con scroll).

Grupos Visual y Efectos: capas de relleno (sólido, degradado, imagen/vídeo de fondo), bordes por lado, radio por esquina, sombras externas/internas, opacidad y desenfoque (Blur)

• Relleno (Fill): puedes apilar varias capas de relleno sobre un mismo elemento (por ejemplo, una imagen de fondo abajo y un Degradado lineal o radial semitransparente encima) y reordenarlas arrastrándolas.
• Borde y Redondeo: elige el grosor, el estilo (Sólido, Rayas, Puntos) y el color del borde (en todos los lados o lado por lado), así como el radio de redondeo (Igualar todas las esquinas o Editar cada esquina).
• Sombras y Efectos: añade Sombra exterior, Sombra interna, ajusta la Opacidad (%), aplica Filtro o añade Desenfoque de fondo (Backdrop blur) para lograr efectos de cristal esmerilado.
• Estados de interacción (Normal, Hover, Pulsado, Con foco): arriba en el inspector puedes cambiar el selector de Estado para definir qué cambia visualmente cuando el visitante pasa el ratón por encima o hace clic en el elemento.

Grupo Animación: animaciones individuales de entrada, salida y al pasar el ratón (Hover), disparadores, velocidad y retraso

Si quieres que un elemento concreto tenga una animación especial distinta al movimiento general de tu marca, abre el grupo Animación:

• Pestaña Entrada: elige entre efectos de Desvanecer (Aparecer, Subir, Bajar, Desde la izquierda/derecha), Escala (Acercar, Alejar, Rebote, Enfocar), Movimiento (Voltear, Girar), Revelar, animaciones de Letras (Letra a letra, Palabras, Máquina de escribir) o máscaras de Imagen (Iris, Zoom de cine).
• Pestaña Ritmo y Cuándo: define si empieza Al aparecer en pantalla (scroll) o Al cargar, si se reproduce Una vez o Cada vez, su Duración, Retraso, Curva (Suave, Ágil, Elástica, Lineal) y si anima El elemento entero o Su contenido, uno a uno con un Intervalo (Stagger) entre cada tarjeta o letra.
• Pestaña Hover: añade un micro-efecto al pasar el ratón (Elevar, Agrandar, Hundir, Brillo, Atenuar, Sombra, Contorno o Inclinación).

Editar componentes interactivos desde su pestaña propia

Cuando seleccionas un componente compuesto —o cualquier pieza que viva dentro de él—, aparece tanto en la barra contextual del Modo esencial como en la primera pestaña del Inspector un panel con el nombre y el icono propios de ese componente:

• Preguntas (FAQ) y Reseñas: añade, reordena o edita preguntas y testimonios, activa o desactiva las estrellas, la foto del autor o el botón Ver más.
• Galería, Carrusel (Slider), Slider de tarjetas y Tabs: administra las diapositivas o pestañas, el número de tarjetas visibles a la vez, la reproducción automática y las flechas o puntos.
• Cuenta regresiva (Countdown): elige la fecha y hora objetivo y qué pasa al terminar.
• Antes / Después: cambia las fotos de Antes y Después y la Posición inicial del divisor.
• Ventana emergente (Modal) y Popover: pulsa Abrir ventana / Abrir popover para editar para ver y diseñar en el lienzo el contenido oculto que se muestra al hacer clic.