Editor X: הסבר על מבנה העמוד באתר (אלמנטים מסוג 'הורה', 'ילד' ו'אח')
זמן קריאה: 3 דקות
Editor X עובר ל-Wix Studio, הפלטפורמה החדשה שלנו לסוכנויות ופרילנסרים.פרטים נוספים על Wix Studio
כשאתם מסדרים את מבנה העמודים באתר, אתם בעצם מקננים אלמנטים בתוך קונטיינרים. לדוגמה, כשאתם ממקמים טקסט בתוך תיבת קונטיינר. הקינון יוצר קשר גומלין בין האלמנטים לבין קונטיינר ה'הורה' שלהם, שנגזר ממושגים של Modern HTML ו-CSS.
במדריך הזה נספק מידע על קשר הגומלין הזה ונסביר איך לרתום אותו כדי ליצור אתר רספונסיבי:
קשרי 'הורה-ילד' בין אלמנטים
כשאלמנט ממוקם בתוך קונטיינר (למשל, מקטע, תיבת קונטיינר, כלי פריסה וכדומה), האלמנט מצורף ויוצר קשר 'הורה-ילד'. לדוגמה, אם אתם מצרפים את הלוגו שלכם לראש העמוד (Header), הוא מוצמד אוטומטית לקצוות הקרובים ביותר והופך ל'ילד' של ראש העמוד.
בדומה ל-CSS, העיצוב (כלומר, הגודל, המיקום, הרווח מהשוליים וכו') של קונטיינר 'הורה' משפיע על האלמנטים ה'ילדים' שלו. לדוגמה, כשמוסיפים לקונטיינר רווחים מהשוליים, האלמנטים שבתוכו נהיים יותר קטנים כדי להתאים לגודל החדש.
הערה:
כשאתם מסדרים אלמנטים בערימה כדי לשלוט בסדר האנכי שלהם, הם ממוקמים בתוך קונטיינר 'פלקס' שמתנהג כמו ה'הורה'.
טיפ:
הקליקו כאן לפרטים נוספים על שינוי גודל אלמנטים.
יצירת מבנה העמוד
כשאתם מתכננים את עיצוב האתר, חשוב להתחיל מיצירת מבנה עם שכבות. אנחנו ממליצים ליצור קודם את הקונטיינרים ה'הורים', ואז להוסיף אלמנטים 'ילדים' על ידי גרירה ושחרור שלהם במקום הנכון.
השכבות בעמוד
ב-Editor X, המבנה שאתם יוצרים משתקף בחלונית השכבות. השכבות הבאות יוצרות את מבנה האתר:
- עמוד: מחלונית השכבות, אתם יכולים לערוך את צבע הרקע של העמוד ולהוסיף רווחים מהשוליים. כדי לשלוט בהגדרות האלה, הקליקו על אייקון הפעולות הנוספות
ליד Page. - מקטעים: כל עמוד מורכב ממקטע אחד לפחות. אתם יכולים ליצור כמה מקטעים אנכיים ואופקיים שתצטרכו. אתם יכולים גם ליצור מקטעי מאסטר שחוזרים על עצמם בין עמודים.
- קונטיינרים: קינון אלמנטים בתוך קונטיינרים יעזור לכם ליצור בקלות מבנה רספונסיבי ולהבטיח שהאלמנטים יישארו במקום. הוסיפו תיבת קונטיינר בסיסית או כלי פריסה חכמים כמו ערימה, כלי פריסה וריפיטרים.
- אלמנטים: אלה האלמנטים שאתם מוסיפים מחלונית ההוספה (כמו טקסט, כפתורים, טפסים ועוד). אתם יכולים להצמיד אלמנטים בודדים או לסדר כמה אלמנטים בערימה כדי להבטיח שהם יישארו באותו סדר ועם אותם מרווחים בכל גודל מסך.
חשוב:
גרידים הם לא חלק מהמודל ההיררכי, אבל הם בכל זאת עשויים להשפיע על הגודל והמיקום של אלמנטים. לפרטים נוספים
שינוי ה'הורה' של אלמנט (Re-Parenting)
הפעולה של העברת אלמנט 'ילד' לקונטיינר 'הורה' אחר נקראת "re-parenting". כדי לשנות את ה'הורה' של אלמנט, פשוט גררו ושחררו אותו בתוך ה'הורה' החדש.
איתור המקום של אלמנט בהיררכיה
לכל מקטע, קונטיינר ואלמנט בעמוד יש שבילי ניווט (breadcrumbs) שמציינים את המקום שלהם בהיררכיה. בהקלקה על שבילי הניווט תוכלו לנווט בקלות בין השכבות בעמוד.
יצירת אלמנטים 'אחים'
אלמנטים 'אחים' הם אלמנטים שיש להם אותו 'הורה' ישיר. לדוגמה, הטקסט והכפתור שבתוך הקונטיינר הזה הם 'אחים' כי הקונטיינר הוא ה'הורה' שלהם:
בדוגמה שלמטה, אתם יכולים לראות את השוליים שנוצרים אוטומטית בין האלמנטים ה'אחים':
שינויים מבניים בין נקודות ברייקפוינט שונות
חלונית השכבות מאפשרת לכם לראות את קשר הגומלין (כלומר, ההיררכיה) בין אלמנטים, קונטיינרים ומקטעים בעמוד ולהעביר אותם ממקום למקום, לפי הצורך.
היררכיית העמוד היא חלק ממבנה ה-HTML של האתר, מה שאומר ששינויים שתבצעו בהיררכיה ישתקפו בכל נקודות הברייקפוינט. לדוגמה, כשאתם מפרידים 'הורה' ו'ילד' (למשל, טקסט והקונטיינר שלו), ההפרדה הזו תחול על כל נקודות הברייקפוינט.
טיפ:
הקליקו כאן לפרטים נוספים על עיצוב לנקודות ברייקפוינט שונות.
זה עזר לך?
|