header-logo
איך לבנות את האתר והעסק שלכם עם Wix
עיצוב וניהול האתר בעזרת הפיצ'רים האינטואיטיביים של Wix
ניהול המנויים, התוכניות והחשבוניות
ניהול העסק והלקוחות ישירות מהנייד
איך קונים דומיין ומחברים או מעבירים אותו לאתר
כלים לפיתוח העסק והנוכחות שלכם אונליין
כלי שיווק ו-SEO להגדלת החשיפה של העסק
פיצ'רים מתקדמים לייעול העבודה שלכם
פתרונות לבעיות, עדכונים על תקלות ויצירת קשר עם Wix
placeholder-preview-image
שיפור המיומנויות שלכם בעזרת קורסים ומדריכים מוכנים
טיפים ועצות בעיצוב אתרים, שיווק ועוד
איך להגדיל את התנועה האורגנית לאתר דרך מנועי החיפוש
בניית אתר עם פלטפורמת ה-full-stack שלנו
במאגר שלנו תוכלו למצוא מומחי Wix בתשלום שיעזרו לכם להשיג את היעדים שלכם
placeholder-preview-image

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

10 דקות
בעולם המכשירים שמשתנה ומתחדש כל הזמן, חשוב לשלוט במיקום של האלמנטים כדי שהם ייראו בדיוק כמו שאתם רוצים במסכים שונים. ב-Studio Editor, האלמנטים מוצמדים אוטומטית כדי לוודא שזה יקרה.
זה נותן לכם חופש להזיז אלמנטים ממקום למקום, בלי שתצטרכו לדאוג לגבי המיקום שלהם בין נקודות הברייקפוינט. עם זאת, אתם תמיד יכולים להגדיר את המיקום, הקיבוע והשוליים בעצמכם דרך חלונית ה-Inspector (עריכה).
px* (Scale) היא יחידת המידה המשמשת כברירת מחדל עבור קיבוע, שוליים וריווח. ערך ה-px*‎ שאתם רואים הוא שווה ערך לפיקסלים, ביחס לגודל הקנבס הנוכחי. עברו לנקודת ברייקפוינט אחרת כדי לראות איך ערך ה-px*‎ משתנה אוטומטית בהתאם לגודל.

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

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

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

אתם יכולים לבדוק את מיקומי ה-X וה-Y של האלמנט כדי לראות את המיקום המדויק שלו על גודל הקנבס הנוכחי. 
  • X: המישור האופקי, מהקצה השמאלי לקצה הימני של אלמנט ההורה (לדוגמה, מקטע, קונטיינר, ערימה).
  • Y: המישור האנכי, מהחלק העליון לתחתית של אלמנט ההורה.
בדוגמה שלמטה, אתם יכולים לראות את הערך px*‎ ליד Y הופך לשלילי בזמן שאנחנו מזיזים את הכפתור מחוץ לאלמנט ההורה שלו - התא. 
גרירת כפתור מחוץ לתא ההורה שלו על הקנבס, עם ערך ה-Y השלילי בחלונית ה-Inspector

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

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

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

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

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

  1. בחרו את האלמנט הרלוונטי.
  2. הקליקו על האייקון לפתיחת כלי העריכה  מימין למעלה ב-Editor.
צילום מסך של פתיחת חלונית ה-Inspector ב-Studio Editor.
  1. גללו למטה אל Position (מיקום).
  2. הזינו ערך עבור השוליים הרלוונטיים (שמאל, ימין, למעלה או למטה).
קונטיינר ב-editor ובחלונית ה-Inspector (עריכה), עם סימון של אזור השוליים בחלונית
טיפ:
ה-Responsive Checker יכול לעזור לכם לזהות שוליים מיותרים שעלולים להגביל את היכולת שלכם לשנות את גודל ההורה. 

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

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

כדי להוסיף ריווח:

  1. בחרו את האלמנט הרלוונטי.
  2. הקליקו על האייקון לפתיחת כלי העריכה  מימין למעלה ב-Editor.
צילום מסך של פתיחת חלונית ה-Inspector ב-Studio Editor.
  1. גללו למטה אל Layout (פריסה).
  2. בחרו איזה ריווח אתם רוצים לערוך:
    • צד ספציפי : הקליקו על האייקון והזינו את הערך עבור הצדדים הרלוונטיים – שמאל, ימין, למעלה או למטה.
    • ריווח אופקי : הזינו ערך עבור הריווח משמאל ומימין.
    • ריווח אנכי : הזינו ערך עבור הריווח למעלה ולמטה.
צילום מסך של קונטיינר על הקנבס, ליד הגדרות הריווח בחלונית ה-Inspector

מנעו מהאלמנטים להסתיר זה את זה

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

שאלות נפוצות

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