Studio Editor: ארגון אלמנטים מחדש לפי סדר DOM

זמן קריאה: 3 דקות
אפשר לסדר ולארגן מחדש אלמנטים ב-Studio Editor לפי סדר ה-DOM שלהם. סידור כזה עשוי לשפר את הנגישות של האתר, מכיוון שהוא מבטיח שגולשים שמשתמשים בטכנולוגיות מסייעות (כמו קורא מסך וכו') יוכלו לנווט בתוכן האתר בהתאם לסדר התצוגה.
הנושאים בעמוד זה:
כדאי לדעת:
ארגון אלמנטים לפי סדר ה-DOM חשוב במיוחד כשמשתמשים בכלי פריסה מורכבים יותר באתר, כמו ערימות ותיבות פלקסבוקס.

החשיבות של סדר ה-DOM

חלק מהגולשים עשויים להשתמש בטכנולוגיות מסייעות כדי לנווט באתר, כמו קורא מסך ו/או מקש ה-Tab. סדר ה-DOM של האתר קובע את סדר "הקריאה" של הטכנולוגיות האלה.
לכן, חשוב להקפיד על סדר DOM הגיוני, כי הוא מבטיח שכל הגולשים יוכלו לנווט בתוכן האתר. לדוגמה, תפריט האתר אמור להופיע ראשון, אחריו שאר האלמנטים שבראש העמוד, אחריהם כותרת העמוד, ואז שאר התוכן של העמוד וכו'.
רוצים לבדוק את סדר ה-DOM של אתר?
אפשר לבדוק את סדר ה-DOM האוטומטי של האתר באמצעות מקש ה-Tab במקלדת, או קורא מסך בגרסה של האתר שבאוויר.

סידור מחדש אוטומטי של סדר ה-DOM

אתם יכולים לארגן מחדש אוטומטית את סדר ה-DOM של אלמנטים במקטע, בפלקסבוקס, בערימה, או בעמוד שלם. הסדר מותאם לסדר הוויזואלי של האלמנטים (משמאל לימין ומלמעלה למטה). 
טיפ:
ארגון מחדש של סדר ה-DOM בעמוד מבטיח את האופטימיזציה שלו, ויכול לשפר בעיות בפריסה.

בעמוד:

  1. הקליקו על Pages  (עמודים) בצד שמאל של ה-Editor.
  2. בחרו את העמוד הרלוונטי.
  3. הקליקו על אייקון הפעולות הנוספות  .
  4. הקליקו על Reorganize DOM Order (ארגון מחדש של סדר DOM).
חלונית העמודים של האתר. סמן העכבר מקליק על האפשרות לארגן מחדש את סדר ה-DOM בעמוד.

באלמנטים:

  1. הקליקו על Layers  (שכבות) בצד השמאלי של ה-Editor.
  2. בחרו את המקטע, הפלקסבוקס או הערימה הרלוונטיים.
  3. הקליקו על אייקון הפעולות הנוספות .
  4. הקליקו על Reorganize DOM Order (ארגון מחדש של סדר DOM).
חלונית השכבות של האתר. סמן העכבר מקליק על האפשרות לארגן מחדש את סדר ה-DOM של מקטע.

שינוי ידני של סדר ה-DOM

חשוב לבצע אופטימיזציה לסדר ה-DOM של האתר. עם זאת, אם שמתם לב לבעיה בסדר ה-DOM של אתר שאתם עובדים עליו, תוכלו לשנות אותו ידנית כך שיתאים לסדר הוויזואלי של האלמנטים (משמאל לימין ומלמעלה למטה).

כדי לשנות ידנית את סדר ה-DOM:

  1. הקליקו על Layers  (שכבות) בצד השמאלי של ה-Editor.
  2. בחרו מה אתם רוצים לסדר:
    • אלמנטים בתוך מקטע: 
      1. בחרו את המקטע כדי לפתוח אותו.
      2. גררו ושחררו את האלמנטים למיקום הנכון.
    • מקטעים: 
      1. עברו עם העכבר מעל החלק העליון והקליקו על אייקון הפעולות הנוספות .
      2. הקליקו על Arrange (סידור).
      3. הקליקו על Bring to Front (הבאה קדימה).
      4. חזרו על שלבים i עד iii עם כל שאר המקטעים, ועברו מלמעלה למטה בחלונית.
חלונית השכבות של האתר. סמן העכבר מקליק על האפשרות להעביר את המקטע העליון לחזית.

זה עזר לך?

|