Studio Editor: איך לפתור הבדלים בין ה-Editor לאתר הפעיל

כשאתם מסתכלים על גרסת האונליין של אתר Studio Editor, יכול להיות שתבחינו בהבדלים בינה לבין הגרסה שב-editor. ההבדלים האלה בדרך כלל מזעריים, אבל יכולים לגרום ליישור לא נכון או לחיתוך מוחלט של אלמנטים.

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

נקודות ברייקפוינט הן טווחי גודל מסך שמשמשים לעיצוב אתר למכשירים שונים. אתם יכולים להגדיר גודל מסך עריכה ספציפי בטווח הזה – לדוגמה, בנקודת ברייקפוינט של 320‏-750 פיקסלים, תוכלו להגדיר את גודל מסך העריכה ל-500 פיקסלים.

אזורי התצוגה מתייחסים לגודל המסך של הגולשים. אם האתר הפעיל נראה שונה באזור תצוגה ספציפי, תוכלו להגדיר את גודל מסך העריכה כך שיתאים לאזור התצוגה ולבצע התאמות.

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

אלמנטים של הורים וצאצאים עם התנהגויות רספונסיביות סותרות עלולים לגרום לבעיות בתוכן שבאתר הפעיל.

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

כדי לפתור את הבעיה הזאת, מומלץ לערוך את ההתנהגויות הרספונסיביות של האלמנטים.

יכול להיות שתראו שאלמנט מופיע בגדלים מסוימים של מסכים, אבל באחרים לא. בדרך כלל הסיבה לכך היא שהאלמנט הוסתר מנקודות ברייקפוינט מסוימות. אתם יכולים להשתמש בחלונית Layers כדי לאתר את האלמנט ולהציג אותו באזורי התצוגה הרצויים.