מרכז התמיכה של Wix
    ראשי
  1. Studio ותוכניות לפרטנרים ולארגונים
  2. Wix Studio
  3. שימוש ב-Studio Editor
  4. תכנון מבנה האתר ב-Studio Editor
    5. Studio Editor: ארגון אלמנטים מחדש לפי סדר DOM

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

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

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

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

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

באתרים באנגלית ובשפות לועזיות אחרות אפשר לארגן אוטומטית את סדר ה-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 עם כל שאר המקטעים, ועברו מלמעלה למטה בחלונית.
חלונית השכבות של האתר. סמן העכבר מקליק על האפשרות להעביר את המקטע העליון לחזית.

זה עזר לך?

|
בעמוד מידע הזה
  • החשיבות של סדר ה-DOM
  • סידור מחדש אוטומטי של סדר ה-DOM
  • בעמוד:
  • באלמנטים:
  • שינוי ידני של סדר ה-DOM