Usar la Vista de Capas de Divi

La Vista de Capas de Divi proporciona una forma eficiente de navegar por los elementos de tu página mientras diseñas.

La Vista de Capas de Divi añade una manera muy rápida y sencilla de ver, reorganizar, editar y renombrar tus elementos.

Esto es especialmente útil cuando tienes elementos con efectos de transición o márgenes negativos que normalmente serían difíciles de seleccionar de la manera tradicional.

El Poder de la Vista de Capas de Divi

La Vista de Capas de Divi te da acceso fácil a cualquier elemento dentro de tu página. Es pequeña, por lo que puedes mantenerla abierta en una esquina o donde te resulte más conveniente durante el proceso de diseño.

Además, la vista de capas funciona muy bien para ayudarte a acceder a elementos en diseños complejos con elementos superpuestos o controles de transformación modificados.

Cuando la vista de capas está activa, puedes hacer clic en cualquier sección, fila, columna o módulo para editarlo fácilmente.

Acceder al Panel de Vista de Capas

Hay dos maneras de acceder al panel de vista de capas de Divi:

Opción 1

Opción 2

1. Haz clic derecho en cualquier elemento de la página para abrir el menú de opciones.
Haz clic en Ir a la capa”
2. Cuando aparezca el panel, tendrás acceso a cada sección y a todos los elementos dentro de la página.

Cómo Usar el Panel de Vista de Capas

La interfaz del panel de vista de capas de Divi es fácil de navegar y permite muchas acciones, incluyendo:

• Expandir capas

• Colapsar capas

• Arrastrar y soltar

• Filtrar

• Selección múltiple de capas

• Buscar Capas: Busca elementos, capas nombradas o cualquier elemento de la página.

• Filtrar Capas: Filtra por elemento, módulo, filas y más, escribiendo en el campo de filtro.

• Abrir/Cerrar Todas las Capas: Haz clic para abrir o cerrar todas las capas a la vez para una vista más clara.

• Alternar Sección de Capa: Haz clic en el ícono de alternar para expandir o cerrar una sola sección.

• Editar: Haz clic en el ícono de engranaje para editar el elemento.

• Duplicar Capa: Haz clic en el ícono de duplicar para duplicar secciones, filas, columnas o módulos.

• Eliminar Capa: Haz clic en el ícono de papelera para eliminar la capa seleccionada.

• Menú de Capas: Haz clic en el ícono de tres puntos para abrir el menú extendido de la capa, que incluye opciones para:

  • Guardar en la biblioteca o en Divi Cloud

  • Prueba A/B

  • Deshabilitar

  • Bloquear

  • Expandir sección

  • Copiar sección

  • Copiar estilos

  • Ver estilos modificados

  • Extender estilos

  • Opciones de preestablecido

Expandir y Colapsar Capas

Puedes expandir y colapsar capas fácilmente. Haz clic en el ícono para abrir/cerrar todas o en capas individuales para controlar los elementos dentro de cada sección.

Arrastrar y Soltar Capas

Dentro de la vista de capas de Divi, puedes arrastrar y soltar elementos, filas o secciones para reorganizarlos en tu página. Esto facilita mucho más mover elementos que arrastrarlos directamente en el Constructor Visual.

Arrastrar una Capa al Constructor Visual

Puedes agregar una capa a tu página arrastrando muchos tipos de archivos desde tu escritorio al Constructor Visual. Archivos de texto, imágenes, código personalizado, video y audio se importan fácilmente.

Cuando tus archivos son importados, Divi creará automáticamente una sección en la parte inferior de tu página y la asignará al módulo correspondiente dentro de una sección.

Consulta nuestra documentación escrita para obtener más información sobre la carga de archivos mediante arrastrar y soltar en Divi.

Usar la Opción de Filtro

El panel de vista de capas de Divi te permite filtrar el contenido en tus páginas Divi.

Esto es útil para localizar un módulo o elemento específico, especialmente en páginas con mucho contenido. Para usar la opción de filtro:

1. Haz clic en el botón de filtro + para activar el campo de filtro.
2. Puedes explorar los elementos disponibles o escribir tus criterios en el campo proporcionado.
Divi filtrará todos los elementos de la página para mostrar solo lo que cumpla con tu criterio.

Selección Múltiple de Capas

Cuando necesitas seleccionar más de una capa en el panel, es bastante sencillo:

• Para seleccionar varias capas no consecutivas: mantén presionado Shift + Option (en Mac) o Shift + Ctrl (en PC), luego haz clic en las capas.

• Para seleccionar capas consecutivas: mantén presionado Shift + Command (en Mac) o Shift + Alt (en PC), luego haz clic para seleccionar.

Renombrar Elementos

Para renombrar elementos en la vista de capas de Divi:

• Haz clic en un elemento

• Escribe el nombre que desees

• Presiona la tecla Enter para guardar los cambios
  

Buscar Elementos

Buscar elementos funciona de forma similar a la opción de filtrado. Sin embargo, solo necesitas escribir el nombre del elemento que deseas buscar.

Divi mostrará únicamente aquellas capas que contengan el elemento buscado.
Por ejemplo, una búsqueda de texto mostrará todos los módulos de texto en la página.

Eliminar, Duplicar y Agregar Nuevos Elementos

Como en otras funciones de la vista de capas, eliminar elementos es muy fácil:

• Haz clic en el ícono de papelera para eliminar un elemento o capa

• Haz clic en el ícono de duplicar para duplicar un elemento. El nuevo elemento aparecerá justo debajo

• Haz clic en el ícono + junto a un elemento existente. Alternativamente, puedes agregar un elemento a la manera tradicional haciendo clic en el ícono + dentro del constructor. De cualquier forma, el nuevo elemento aparecerá en la vista de capas

Consejos y Buenas Prácticas para Usar la Vista de Capas

Editar Elementos Superpuestos

El panel de vista de capas es muy útil cuando trabajas con diseños complejos y elementos superpuestos.

Si ya tienes experiencia usando Divi, sabes que hacer clic en una capa con posición absoluta o con márgenes negativos puede ser frustrante.
Con la vista de capas, editar estos elementos es mucho más fácil. Activa el panel para seleccionar y editar la capa directamente.

Reposicionar Filas y Secciones

Arrastrar secciones y filas en el Constructor Visual puede ser tedioso y, a veces, provocar resultados no deseados.
Usar la vista de capas hace que mover elementos dentro de tu diseño sea mucho más sencillo.

Considera usarla para reorganizar tus filas y secciones. Ahorrarás tiempo y tendrás mayor control sobre el diseño.

Nombrar Tus Elementos

La mayoría de los usuarios de Divi ya saben cómo usar las etiquetas de administrador para nombrar sus módulos.
Desde el lanzamiento del Constructor Visual de Divi, existen nuevas formas de hacerlo.

La vista de capas te permite renombrar fácilmente tus módulos y elementos.
Además, darles nombre a tus elementos es importante para diferenciarlos sin necesidad de ir directamente al módulo.

Además de hacer clic en tu sección, fila, columna o módulo para asignar una etiqueta de administrador, también puedes cambiar el nombre desde la vista de capas.
Sin embargo, es mejor no hacer doble clic en la etiqueta, ya que esto abrirá la sección correspondiente.