Editor de Wix Studio: reorganizar elementos por orden DOM

4 min de lectura
Puedes reorganizar y cambiar el orden de los elementos en un sitio del Editor de Wix Studio por su orden DOM. Esto puede mejorar la accesibilidad del sitio, ya que garantiza que los visitantes que usan tecnologías de asistencia (como lectores de pantalla, etc.) puedan navegar por el contenido del sitio según su orden de visualización.
En este artículo, obtén más información sobre lo siguiente:
Es bueno saber lo siguiente:
Organizar los elementos por orden DOM es especialmente importante cuando se utilizan herramientas de estilo más complejas en un sitio, como las pilas y las flexboxes.

La importancia del orden DOM

Puede que algunos visitantes utilicen tecnologías de asistencia para navegar por los sitios, como lectores de pantalla o la tecla de tabulación. El orden DOM del sitio determina el orden de "lectura" para estas tecnologías.
Por lo tanto, un orden DOM lógico es importante, ya que garantiza que todos los visitantes puedan navegar por el contenido del sitio. Por ejemplo, el menú del sitio debe ir primero, seguido del resto de los elementos del encabezado, luego el título de la página, luego el contenido de la página, etc.
¿Quieres verificar el orden DOM del sitio?
Puedes probar el orden DOM automático de un sitio usando la tecla Tab de tu teclado o un lector de pantalla en la versión online del sitio.

Reorganizar automáticamente el orden DOM

Puedes reorganizar automáticamente el orden DOM de los elementos en una sección, una flexbox, una pila, o en una página completa. El orden está optimizado para que coincida con el orden visual de los elementos (de izquierda a derecha y de arriba a abajo). 
Consejo:
Reorganizar el orden DOM de una página garantiza que esté optimizada y puede mejorar los problemas de estilo.

De una página:

  1. Haz clic en Páginas  a la izquierda del Editor.
  2. Selecciona la página correspondiente.
  3. Haz clic en el icono Más acciones .
  4. Haz clic en Reorganizar orden DOM.
El panel Páginas de un sitio. El cursor hace clic en la opción para reorganizar el orden DOM de una página.

De los elementos:

  1. Haz clic en Capas  a la izquierda del Editor.
  2. Selecciona la sección, la flexbox o la pila correspondiente.
  3. Haz clic en el icono Más acciones .
  4. Haz clic en Reorganizar orden DOM.
El panel Capas de un sitio. El cursor hace clic en la opción para reorganizar el orden DOM de una sección.

Cambiar el orden DOM de forma manual

El orden DOM del sitio debería estar optimizado de por sí. Sin embargo, si has notado un problema con el orden DOM de un sitio en el que estás trabajando, puedes cambiarlo manualmente para que coincida con el orden visual de los elementos (de izquierda a derecha y de arriba a abajo).

Para cambiar manualmente el orden DOM:

  1. Haz clic en Capas  a la izquierda del Editor.
  2. Elige lo que deseas organizar:
    • Elementos dentro de una sección: 
      1. Selecciona una sección para abrirla.
      2. Arrastra y suelta los elementos a la posición correcta.
    • Secciones: 
      1. Pasa el cursor sobre la sección superior y haz clic en el icono Más acciones .
      2. Haz clic en Ordenar.
      3. Haz clic en Poner al frente.
      4. Repite los pasos i-iii con todas las demás secciones, de arriba a abajo en el panel.
El panel Capas de un sitio. El cursor hace clic en la opción para traer la sección superior al frente.

¿Te ha sido útil?

|