Editor X: שימוש בקונטיינרים

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

הראו לי איך


איך מוסיפים קונטיינרים?

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

כדי להוסיף קונטיינר:

  1. הקליקו על Add בראש ה-Editor.
  2. הקליקו על Layout Tools.
  3. הקליקו על Container Boxes / Grids.
  4. גרו את אחד הקונטיינרים לעמוד.
  5. הוסיפו לקונטיינר אלמנטים על ידי גרירה.
  6. (לא חובה, מחלונית העריכה ) הקליקו על אייקון העיצוב כדי לעצב את הקונטיינר.
טיפ:
אתם יכולים גם להוסיף גריד לקונטיינרים ריקים. הקליקו על הקונטיינר ואז על Apply Grid כדי לבחור פריסה.

איך מחברים אלמנטים לקונטיינרים?

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

איך מתאימים את הקונטיינר לנקודות ברייקפוינט?

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

איך משנים את הגודל של הקונטיינר?

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

איך יוצרים קונטיינרים גמישים באמצעות ערימות?

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

זה עזר לך?

|