Studio Editor: הסבר על מבנה העמוד (אלמנטים ברמת 'הורה', 'צאצא' ו'אח')
3 דקות
כשאתם בונים את עמודי האתר, אתם למעשה ממקמים רכיבים בתוך מקטעים או קונטיינרים וכלי פריסה. לדוגמה, כאשר אתם מציבים טקסט בתוך תיבת קונטיינר, נוצר קשר בין הטקסט לקונטיינר, הנגזר ממושגי HTML ו-CSS מודרניים.
במדריך זה תמצאו פרטים נוספים על מבנה העמוד, כולל קשרי הורה-צאצא בין אלמנטים, שכבות בעמוד ועוד.
קשרי הורה-צאצא (Parent-child) בין אלמנטים
כשאתם ממקמים אלמנט בתוך קונטיינר או כלי פריסה, הוא מתחבר לאותו כלי או קונטיינר ונוצר קשר הורה-צאצא. לדוגמה, הוספת לוגו בראש העמוד (header) הופכת את הלוגו ל'צאצא', ואת ה-header ל'הורה'.
בדומה ל-CSS, העיצוב (כלומר, הגודל, המיקום, המרחק מהשוליים וכו') של קונטיינר 'הורה' משפיע על האלמנטים ה'צאצאים' שלו. לדוגמה, כשמוסיפים לקונטיינר רווחים מהשוליים, האלמנטים שבתוכו נהיים יותר קטנים כדי להתאים לגודל החדש. לפרטים נוספים על שינוי גודל האלמנטים
כדאי לדעת:
- אלמנטים חדשים שתוסיפו יתקבעו אוטומטית בראש העמוד ומימין / משמאל לאלמנט ה'הורה'. אתם יכולים להשבית את הקיבוע האוטומטי (auto docking) כדי לקבוע ידנית את מיקום אלמנט ה'צאצא'.
- כשאתם מסדרים אלמנטים בערימה, הם ממוקמים בתוך תיבת פלקסבוקס שמתנהגת כמו ה'הורה'.
יצירת מבנה של עמוד
כשאתם מתכננים את עיצוב האתר, חשוב להתחיל מיצירת מבנה עם שכבות. אנחנו ממליצים ליצור קודם את הקונטיינרים ה'הורים', ואז לגרור אלמנטים 'צאצאים' למקומות הרצויים.
השכבות בעמוד
ב-Studio Editor, המבנה שאתם יוצרים משתקף בחלונית Layers (שכבות). השכבות הבאות יוצרות את מבנה האתר:
- עמוד: מחלונית השכבות, אתם יכולים לערוך את צבע הרקע של העמוד ולהוסיף רווחים מהשוליים. כדי לשלוט בהגדרות האלה, הקליקו על אייקון הפעולות הנוספות שליד שם העמוד .
- מקטעים: כל עמוד מורכב ממקטע אחד לפחות ואתם יכולים לייצר כמה שיידרשו ללקוחות שלכם. רוב המקטעים מכילים כלי פריסה וקונטיינרים (למשל תאים, ערימות, וכו').
- קונטיינרים וכלי פריסה: הציבו אלמנטים בתוך קונטיינרים כדי ליצור בקלות מבנה רספונסיבי ולהבטיח שהם יישארו במקום. הוסיפו קונטיינרים או כלי פריסה כמו רפיטרים ותיבות פלקסבוקס.
- אלמנטים: אלה האלמנטים שאתם מוסיפים מחלונית הוספת האלמנטים (לדוגמה, טקסט, כפתורים, מדיה, וכו'). באפשרותכם לקבע אלמנטים בודדים או לערום אלמנטים מרובים כדי להבטיח שהם יישארו באותו סדר ועם אותם מרווחים בכל גודל מסך.
שליד שם העמוד .
החלפת ה'הורה' של אלמנטים (Re-Parenting)
הפעולה של העברת אלמנט 'צאצא' לאלמנט 'הורה' חדש נקראת re-parenting". כדי לשנות את ה'הורה' של אלמנט, פשוט גררו את האלמנט אל ה'הורה' החדש.
איתור המקום של אלמנט בהיררכיה
לכל מקטע, קונטיינר ואלמנט בעמוד יש נתיבי ניווט (breadcrumbs) שמציינים את המקום שלהם בהיררכיה. בהקלקה על נתיבי הניווט בקנבס תוכלו לנווט בקלות בין השכבות בעמוד.
הגדרת המבנה של אלמנטים 'אחים' (sibling)
אלמנטים 'אחים' הם אלמנטים שיש להם אותו 'הורה' ישיר. לדוגמה, הטקסט והגרפיקה הווקטורית בתמונה שלמטה הם אחים, והקונטיינר הוא ההורה שלהם:
אם אלמנטים אחים נמצאים בכלי פריסה מסוימים (למשל, ערימות, רפיטרים, וכו'), הם עשויים להשפיע זה על גודלו ומיקומו של זה. עיצוב קשרים אלו עשוי להועיל ביצירת אתר רספונסיבי, מכיוון שאתם יכולים למנוע חפיפת אלמנטים במסכים קטנים יותר.
בדוגמה שלמטה, אתם יכולים לראות את השוליים שנוצרים אוטומטית בין האלמנטים ה'אחים':
שינויים מבניים בין נקודות ברייקפוינט
חלונית ה-Layers(שכבות) מציגה את ההיררכיה של התוכן בעמוד (מקטעים, קונטיינרים / כלי פריסה ואלמנטים) ומאפשרת לכם לערוך אותם לפי הצורך.
היררכיית העמוד היא חלק ממבנה ה-HTML של האתר, מה שאומר ששינויים שתבצעו בהיררכיה ישתקפו בכל נקודות הברייקפוינט. לדוגמה, כשאתם מפרידים בין 'הורה' ו'צאצא' (למשל, טקסט והקונטיינר שלו), הפרדה זו תחול על כל נקודות הברייקפוינט. למידע נוסף על עיצוב בנקודות ברייקפוינט שונות