Editor X: usar el panel de Capas

6 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Administra las capas de tu página desde el panel Capas en la barra superior del Editor. Muestra todos los elementos de tu página y te permite seleccionarlos, cambiar su orden, ocultarlos, etc.
En este artículo, obtén más información sobre lo siguiente:

La estructura del panel de capas

El panel Capas muestra todas las secciones en una jerarquía desde la parte superior hasta la parte inferior de la página. Si la página tiene un encabezado en la parte superior, aparecerá primero en la lista, y un pie de página aparecerá en la parte inferior en consecuencia.
Al anidar elementos dentro de otros elementos de la página, crea una relación principal/secundaria entre ellos, derivada de HTML y CSS. Por ejemplo, los elementos de texto dentro de un contenedor son sus elementos secundarios. A su vez, ese contenedor es un elemento secundario de la sección que lo muestra. 
El panel de Capas está organizado de acuerdo con esta lógica de relación, por lo que puedes hacer clic en los elementos primarios para ver los elementos secundarios que hay adentro. Si tu página tiene algún elemento Master aparecen resaltados en verde. 
Nota:
Los contenedores y elementos dentro de una sección se presentan en el orden Z; esto significa que si un elemento está encima de otro, aparece más arriba en la lista. 
El panel Capas muestra los elementos de la página seleccionada. Para ver las capas de otra página, debes seleccionar la página deseada en el menú desplegable de navegación de páginas:

Seleccionar elementos en el panel de capas

El panel de Capas es una forma útil y rápida de navegar a un determinado elemento de tu página. También es una excelente manera de encontrar un elemento, por ejemplo, si tienes elementos superpuestos y no puedes localizar o seleccionar el que necesitas.
Cuando pasas el cursor sobre una capa, se resalta en la página para que puedas encontrarla fácilmente. Si haces clic en la capa, el Editor se desplaza directamente a ese elemento. Incluso si cierras el panel en este punto, tu selección aún se guarda. 
Consejo:
Selecciona varios elementos manteniendo pulsada la tecla Shift mientras haces clic en ellos.

Administrar una capa desde el panel

¿Encontraste la capa que necesitas? Desde este panel, puedes realizar acciones como copiar la capa, moverla hacia arriba o hacia abajo en el panel, elegir en qué páginas mostrarla y mucho más.
Administra una capa haciendo una de las siguientes cosas:
  • Haz clic con el botón derecho en el nombre de la capa.
  • Pasa el cursor sobre el nombre de la capa y haz clic en el icono Mostrar más .
¿Trabajas con elementos superpuestos?
Puedes navegar entre las diferentes capas directamente en el lienzo. Haz clic con el botón derecho en el elemento que cubre el que necesitas y luego haz clic en Seleccionar una capa para acceder a él. 

Renombrar elementos en el panel de capas

Al agregar varias secciones, contenedores y elementos a tu página, puede resultar difícil distinguirlos en el panel de Capas. Puedes cambiar fácilmente el nombre de las capas para asegurarte de que sean fáciles de reconocer: haz doble clic en la capa correspondiente y asígnale un nuevo nombre en el cuadro de texto. 
¿Estás usando el modo avanzado?
Muestra los ID de los elementos en el panel de capas para identificar fácilmente los elementos en tu código. Habilita la palanca Mostrar ID para ver los ID como se definen en el panel de Propiedades. 

Reordenar elementos en el panel de capas

Usa el panel Capas para reordenar fácilmente los elementos dentro del mismo contenedor principal arrastrándolos hacia arriba y hacia abajo en la lista.
Al cambiar el orden de los elementos, se modifica el orden Z. Por ejemplo, si deseas que el texto aparezca encima de una forma, el texto debe estar arriba de la forma en el panel Capas. 

Para reordenar elementos en el panel Capas:

  1. Haz clic en el icono Capas  en la parte superior del Editor X.
  2. Haz clic en el contenedor con los elementos que deseas reordenar.
  3. Haz clic y arrastra los elementos correspondientes a la posición deseada.

Volver a mostrar elementos en el panel Capas

Cualquier elemento de tu sitio puede ocultarse con el menú que aparece al hacer clic con el botón derecho del mouse. Sin embargo, para volver a mostrar un elemento, debes hacerlo desde el panel Capas.
Aparece un elemento oculto con un icono Oculto en el panel de capas. 

Para volver a mostrar un elemento en el panel Capas:

  1. Haz clic en el icono Capas  en la parte superior del Editor X.
  2. Localiza el elemento oculto en la lista.
  3. Pasa el cursor sobre el elemento y haz clic en el icono Más acciones .
  4. Haz clic en Mostrar.
Consejo:
Al agregar un elemento a un breakpoint más pequeño (por ejemplo, móvil), siempre está oculto en los breakpoints más grandes (por ejemplo, tableta). Siguiendo los pasos anteriores, puedes hacer que el elemento aparezca también en otros breakpoints. 

¿Te ha sido útil?

|