Studio Editor: עבודה עם קיבוע (Docking), שוליים (Margins) וריווח (Padding) | מרכז העזרה

Studio Editor: עבודה עם קיבוע (Docking), שוליים (Margins) וריווח (Padding)

זמן קריאה: 8 דקות

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

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

היכנסו ל-Wix Studio Academy כדי לצפות בוובינרים, מדריכים וקורסים נוספים בנושא Wix Studio.

כאן תוכלו לקרוא עוד על:

מיקום אלמנטים על הקנבס

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

כל עוד האלמנט נשאר תחת אותו הורה (למשל מקטע, תא), אתם יכולים להזיז אותו ממקום למקום והוא לא ישפיע על נקודות ברייקפוינט אחרות. אם תעבירו אלמנט להורה אחר (reparent), כל נקודות הברייקפוינט יושפעו.

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

נקודות ה-X וה-Y בחלוני העריכה

אתם יכולים לבדוק את מיקומי ה-X וה-Y של האלמנט כדי לראות את המיקום המדויק שלו על גודל הקנבס הנוכחי.

X: המישור האופקי, מהקצה השמאלי לקצה הימני של אלמנט ההורה (לדוגמה, מקטע, קונטיינר, ערימה).
Y: המישור האנכי, מהחלק העליון לתחתית של אלמנט ההורה.

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

קובץ GIF שמראה אלמנט טקסט זז מחוץ לתא ההורה ויוצר ערך X שלילי בחלונית העריכה

מה זה px*?

px* היא יחידת מידה ב-Studio Editor, שמציגה את ה"פיקסלים על הקנבס". ערך ה-px* שאתם רואים שווה ערך לפיקסלים, בהתאם לגודל הקנבס הנוכחי. עברו לנקודת ברייקפוינט אחרת כדי לראות איך ערך ה-px* משתנה אוטומטית.

קיבוע אוטומטי וידני (docking)

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

הקליקו על כל נושא לפרטים נוספים.

קיבוע אוטומטי ב-Editor

שינוי הקיבוע באופן ידני

שימוש בשוליים כשמקבעים אלמנטים

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

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

קובץ GIF שמראה סמן עבר עובר מעל השוליים העליונים והימניים בחלונית העריכה, ואת האופן שבו הם מודגשים על קנבס

כדי ליצור או לערוך שוליים:

בחרו את האלמנט הרלוונטי.
הקליקו על האייקון לפתיחת כלי העריכה מימין למעלה ב-Editor.

צילום מסך של פתיחת חלונית ה-Inspector ב-Studio Editor.

גללו למטה אל Position (מיקום).
הקליקו על שוליים (למשל, top, left) תחת Docking, margins and padding (קיבוע, שוליים ומרווח).
(לא חובה) הקליקו על אייקון העריכה בנפרד כדי לערוך רק את הצד שבחרתם.
הכניסו ערך עבור השוליים.
טיפ: הקליקו על המידה (לדוגמה, *px, %) כדי לשנות אותה.

צילום מסך של תיבת המיקום, בה אפשר ליצור שוליים מסביב לאלמנט

יחידות השוליים:

אפשר להגדיר את השוליים ב-*px, בפיקסלים (px), באחוזים (%), בגובה אזור התצוגה (vh) וברוחב אזור התצוגה (vw). לכל יחידה יש תוצאה שונה כשגודל המסך משתנה. כדי לראות את ההבדל בהתנהגות של היחידות, גררו את הקנבס כדי לשנות את הגודל שלו.

הוספת ריווח מסביב לקונטיינרים רספונסיביים

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