Skip to main content
El panel Layers muestra la estructura completa de tu página en una vista de árbol clara.
Te ayuda a entender cómo está organizado todo y facilita seleccionar, gestionar y reordenar los elementos.

​
Dónde encontrarlo

  1. Abre tu página en el editor
  2. Haz clic en el icono de Layers de la barra lateral izquierda

​
Qué ves

  • Una estructura jerárquica (en árbol) de tu página
  • Secciones, contenedores y elementos anidados unos dentro de otros
  • Cada elemento de la lista representa un bloque de tu lienzo
Ejemplo:
  • Wrapper
    • Section
      • Container
        • Text
        • Image
        • Button

​
Qué puedes hacer

​
Seleccionar elementos fácilmente

Haz clic en cualquier elemento del panel Layers para seleccionarlo al instante en el lienzo.

​
Entender la estructura

Ve cómo están agrupados los elementos:
  • Qué elementos están dentro de contenedores
  • Cómo están construidas las secciones
  • Dónde encaja cada elemento

​
Reordenar elementos

Puedes arrastrar y reordenar elementos dentro del mismo elemento padre. Por ejemplo:
  • Mover un botón por encima de un texto dentro del mismo contenedor
  • Reordenar los elementos dentro de una sección

​
Limitación importante

No puedes mover elementos entre distintos elementos padre desde el panel Layers.
  • Puedes reordenar dentro del mismo contenedor
  • Pero no puedes arrastrar un elemento de un contenedor o sección a otro

​
Por qué es útil

  • Encuentras rápidamente elementos ocultos o difíciles de clicar
  • Mantienes tu diseño organizado
  • Corriges problemas de estructura con facilidad
  • Trabajas más rápido en páginas complejas
La navegación en árbol (que suele aparecer como una ruta de navegación en la parte inferior del editor) es una función clave del editor visual: te ayuda a seleccionar y moverte entre los distintos elementos anidados que forman el diseño de tu landing page. Es imprescindible porque los diseños actuales se basan en colocar elementos dentro de otros contenedores (como secciones, boxes o columnas).

​
Cómo funciona la navegación en árbol

La navegación aparece como una lista horizontal de nombres de elementos en la parte inferior del lienzo, y muestra el elemento que tienes seleccionado y todos sus contenedores padre, desde el más amplio (como la sección) hasta el más concreto (como un texto o una imagen).

​
Usos principales de la navegación en árbol

​
1. Seleccionar contenedores padre

Cuando trabajas con elementos dentro de un box horizontal o vertical, puede ser difícil seleccionar el contenedor en sí haciendo clic en el lienzo. La navegación en árbol lo hace fácil.

​
2. Identificar el anidamiento y la estructura

La ruta te da un mapa visual inmediato de la estructura de tu página.

​
3. Saltos rápidos entre componentes

La navegación te permite saltar rápidamente entre componentes anidados sin tener que hacer clic con precisión en elementos diminutos del lienzo.