Studio Editor: עריכת גריד של מקטע
זמן קריאה: 5 דקות
ב-Studio Editor, מקטעים מגיעים עם גריד מובנה של תא אחד בלבד (שמאכלס את כל המקטע). את המקטע אפשר לפצל לתאים נוספים כדי לתת לתוכן מבנה רספונסיבי. לרשותכם עומד מגוון פריסות שניתן להמשיך ולערוך.
כאן תוכלו לקרוא על:
רוצים להוסיף תאים לקונטיינר?
אתם יכולים להחיל גריד CSS מתקדם על הקונטיינר.
הוספת תאים למקטע
הוסיפו תאים למקטע כדי ליצור פריסה רספונסיבית ומאורגנת. שמירת האלמנטים בתאים נפרדים מבטיחה שהם יישארו במקום בכל המסכים. בחרו פריסה, ואז העבירו אלמנטים לתאים - אתם תמיד יכולים לפצל את התאים או להוסיף תאים חדשים בהמשך.
כדי להוסיף תאים למקטע:
- בחרו את המקטע הרלוונטי ב-Editor.
- הקליקו על התפריט הנפתח Blank (ריק) בחלק העליון של המקטע.
- בחרו פריסה: Rows (שורות), Columns (עמודות), Collage (קולאז') וכו'.
טיפ: אתם יכולים לשנות את הפריסה דרך התפריט הנפתח בכל שלב - זה לא יזיז את האלמנטים. - (לא חובה) גררו אלמנטים לתאים הרלוונטיים.
החלפת תאים בגריד (Swapping)
החליפו תאים כדי לארגן מחדש את גריד המקטע במהירות וביעילות. עם גרירה ושחרור, אתם יכולים להחליף בין 2 תאים באופן מיידי – הם תופסים אחד את המקום של השני בגריד.
כדי להחליף תאים:
- בחרו את המקטע הרלוונטי ב-Editor.
- בחרו את התא הראשון.
- החזיקו את אייקון הגרירה
בחלק העליון של התא תוך כדי גרירה אל התא השני.
טיפ: כשאתם רואים אינדיקציה ל-Swap content (החלפת תוכן), זה אומר שאתם יכולים לשחרר את התא.
עריכת גריד המקטע
עצבו את התאים והגריד בצורה שאתם רוצים. אתם יכולים לפצל או למזג תאים קיימים, להוסיף תאים חדשים ולגרור את קווי הגריד כדי לשנות את הגודל שלהם. אתם יכולים גם להוסיף מרווחים כדי ליצור מרווח בין התאים.
כדי לערוך את גריד המקטע:
- בחרו את המקטע הרלוונטי ב-Editor.
- בחרו איך אתם רוצים לעצב את הגריד:
פיצול תא קיים
או פיצול אנכי 
.
הוספת תא חדש
מיזוג תאים
שינוי גודל התא
הוספת רווחים בין תאים
מחיקת תא
.הערה:
כרגע אי אפשר לשכפל תאים.
מעבר לגריד CSS מתקדם
מעבר לגריד CSS מתקדם מאפשר שליטה מדויקת יותר בפריסה לכל ברייקפוינט. אפשר לבחור את מספר השורות והעמודות ולהגדיר את הגודל שלהן באמצעות מידות רספונסיביות (למשל fr, Min/max, %).
כדי לעבור מגריד מקטעים לגריד CSS:
- בחרו את המקטע הרלוונטי ב-Editor.
- הקליקו על חץ ה-Open Inspector (פתיחת כלי העריכה)
בפינה הימנית העליונה של ה-Editor. - גללו למטה אל Layout (פריסה).
- הקליקו על Switch (מעבר) ליד Advanced CSS grid (גריד CSS מתקדם).
- הקליקו על Switch to CSS Grid (מעבר לגריד CSS).
זה עזר לך?
|