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

Studio Editor: עבודה עם סדר DOM

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

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

סדר ה-DOM קובע את סדר הטעינה, הקריאה והלשוניות של אלמנטים בעמוד. כלומר, הוא עלול להשפיע על:
  • נגישות: חלק מהגולשים עשויים להשתמש בטכנולוגיות מסייעות כדי לנווט באתר, כמו קוראי מסך ו/או מקש ה-Tab. DOM של האתר קובע את סדר הקריאה על ידי קוראי מסך, וכן את סדר הטאבים. לפרטים נוספים על DOM ונגישות
  • Performance (ביצועים): ה-DOM קובע את רצף הטעינה של אלמנטים באתר. התאמת סדר ה-DOM לסדר הוויזואלי של האלמנטים יוצרת חוויית טעינה הגיונית. לפרטים נוספים על DOM וביצועים
  • דירוגים ב-SEO: מבנה מסודר ועקבי יכול לשפר את הנגישות ומהירות הטעינה של האתר, ועשוי גם להעלות את דירוג ה-SEO של האתר.
לכן, סדר DOM הגיוני הוא חשוב, כי הוא מבטיח את החוויה הטובה ביותר לגולשים. לדוגמה, תפריט האתר אמור להופיע ראשון, אחריו שאר האלמנטים שבראש העמוד, אחריהם כותרת העמוד, ואז שאר התוכן של העמוד וכו'.

סדר DOM אוטומטי

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

השבתת ה-DOM האוטומטי

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

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

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

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

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

ארגון מחדש של סדר ה-DOM

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

כדי לארגן מחדש את סדר ה-DOM של העמוד:

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

כדי לארגן מחדש את סדר ה-DOM של האלמנטים:

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

שאלות נפוצות

בחרו שאלה לפרטים נוספים על סדר ה-DOM באתר.

זה עזר לך?

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

זה עזר לך?

|