Studio Editor: Mit DOM Orders arbeiten | Hilfe-Center

Studio Editor: Mit DOM Orders arbeiten

6 Min. Lesezeit

Das Document Object Model (DOM) bezieht sich auf die Strukturierung von Website-Seiten und bestimmt die Tab-Reihenfolge und die Ladereihenfolge der Elemente. Die DOM Order einer Website zu organisieren, kann die Barrierefreiheit und Leistung verbessern und Besuchern ein besseres Erlebnis bieten.

In diesem Artikel erfährst du mehr über folgende Themen:

Gut zu wissen:

Elementen nach DOM Order anzuordnen ist besonders wichtig, wenn du komplexere Layout-Tools auf einer Website verwendest, zum Beispiel Stapel und Flexboxen.

Die Bedeutung der DOM Order

Die DOM Order bestimmt die Reihenfolge, in der Elemente auf einer Seite geladen, gelesen und mit der Tab-Taste aufgerufen werden. Das bedeutet, dass sie sich auf Folgendes auswirken kann:

Barrierefreiheit: Einige Website-Besucher verwenden möglicherweise unterstützende Technologien, um auf Websites zu navigieren, beispielsweise Screenreader und/oder die Tab-Taste. Die DOM Order einer Website bestimmt die Reihenfolge, in der sie von Screenreadern gelesen wird, sowie die Tab-Reihenfolge. Mehr erfahren über DOM und Barrierefreiheit

Performance: Die DOM Order bestimmt die Reihenfolge, in der Elemente auf einer Website geladen werden. Daher wird die DOM Order an die visuelle Reihenfolge der Elemente angepasst, um ein logisches Ladeerlebnis zu schaffen. Erfahre mehr über DOM und Performance

SEO-Rankings: Da eine ausgerichtete, logische Struktur die Barrierefreiheit und das Laden der Website verbessern kann, kann sie auch die SEO-Rankings der Website verbessern.

Daher ist eine logische DOM Order wichtig, da sie das beste Erlebnis für Website-Besucher gewährleistet. Zum Beispiel sollte das Website-Menü an erster Stelle stehen, gefolgt von den restlichen Elementen in der Kopfzeile, dann dem Seitentitel, dann dem Seiteninhalt usw.

Automatische DOM Order

Die automatische (auto) DOM Order basiert auf der visuellen Reihenfolge der Elemente auf einer Seite – von links nach rechts und von oben nach unten. Die DOM Order wird automatisch neu angeordnet, wenn du Elemente hinzufügst, ausrichtest und ihre Größe änderst. Sie ist daher stets optimiert.

Automatische DOM Order deaktivieren

Wenn du ein Problem mit der DOM Order einer Website bemerkst, an der du arbeitest, kannst du sie auf der gesamten Website deaktivieren. Wenn es ein Problem mit bestimmten Elementen gibt, kannst du sie für einzelne Abschnitte und Container sowie für Rasterzellen innerhalb eines Abschnitts deaktivieren.

Wähle eine Option, um zu erfahren, wie du die automatische DOM Order deaktivierst:

Die gesamte Website

Abschnitte und Container

Rasterzellen in einem Abschnitt

Die DOM Order von Elementen manuell ändern

Nachdem du die automatische DOM Order deaktiviert hast, kannst du sie manuell ändern, damit sie mit der visuellen Reihenfolge der Elemente übereinstimmt (von links nach rechts, von oben nach unten).

Um die DOM Order manuell zu ändern:

Klicke links im Editor auf Ebenen .
Wähle aus, was du reorganisieren möchtest:
- Elemente innerhalb eines Abschnitts:
  1. Wähle einen Abschnitt aus, um ihn zu öffnen.
  2. Ziehe die Elemente per Drag-and-Drop an die richtige Position.
- Abschnitte:
  1. Fahre mit der Maus über den oberen Abschnitt und klicke auf das Symbol für Weitere Aktionen .
  2. Klicke auf Anordnen.
  3. Klicke auf In den Vordergrund.
  4. Wiederhole die Schritte i bis iii für alle anderen Abschnitte und gehe dabei von oben nach unten im Panel vor.

Das Ebenen-Panel einer Website. Der Cursor hat auf den „Anordnen“-Tab eines Abschnitts geklickt und die Optionen angezeigt.

Die DOM Order neu organisieren

Du kannst die DOM Order von Elementen in einem Abschnitt, einer Flexbox, einem Stapel oder auf einer gesamten Seite mit einem einzigen Klick neu organisieren. Die Reihenfolge wird optimiert, sodass sie der visuellen Reihenfolge der Elemente entspricht (von links nach rechts und von oben nach unten).