Studio Editor: ניהול והתאמה אישית של פריטי פלקסבוקס (Flexbox)
זמן קריאה: 4 דקות
כדי ליצור חוויה ייחודית לגולשים, אתם יכולים לערוך ולהתאים את פריטי הפלקסבוקס לצרכים שלכם: לשנות את גודל הפריטים כך שיתאימו למבנה העמוד, לשנות את הגדרות התצוגה ולהוסיף, למחוק ולסדר מחדש פריטים.
הנושאים בעמוד הזה:
ניהול פריטי פלקסבוקס
יש לכם אפשרויות שונות לשכלל את הפרסונליזציה של פריטי הפלקסבוקס שלכם ולוודא שהם יישארו מעודכנים. ניתן להסתיר פריטים מנקודות ברייקפוינט מסוימות, לשנות את הסדר שלהם ועוד.
כדי לנהל את פריטי הפלקסבוקס דרך חלונית ה-Inspector (עריכה):
- הקליקו על הפלקסבוקס שלכם.
- ב-Editor, הקליקו מימין למעלה על החץ לפתיחת חלונית ה-Inspector (עריכה)
. - (בחלונית ה-Inspector) הקליקו על Manage (ניהול) ליד מספר הפריטים.
- בחרו מה אתם רוצים לעשות עם הפריטים שלכם:
- סידור מחדש:
- לחצו לחיצה ממושכת על אייקון הסידור מחדש
ליד הפריט הרלוונטי וגררו אותו למיקום הרצוי.
- לחצו לחיצה ממושכת על אייקון הסידור מחדש
- ניהול:
- הקליקו על אייקון הפעולות הנוספות
ליד הפריט הרלוונטי. - בחרו את האפשרות הרצויה:
- Duplicate: ליצור עותק של פריט ספציפי.
- Rename: לתת לכל פריט שם שיהיה לכם קל לזהות.
- Delete: למחוק את הפריט לגמרי.
- Hide: להסתיר את הפריט מנקודת הברייקפוינט הספציפית שעליה אתם עובדים.
- הקליקו על אייקון הפעולות הנוספות
התאמה אישית של תצוגת הפלקסבוקס שלכם
בחרו תצוגת פלקסבוקס שתתאים למבנה העמוד. בהתאם לתצוגה שתבחרו, תוכלו להמשיך ולערוך את המראה שלה: הרווחים, הכיוון, הרוחב ועוד.
כדי להתאים אישית את התצוגה:
- הקליקו על הפלקסבוקס שלכם.
- ב-Editor, הקליקו מימין למעלה על החץ לפתיחת חלונית ה-Inspector (עריכה) .
- בחרו בטאב Design (עיצוב)
. - הקליקו על Layout (פריסה).
- (לא חובה) הקליקו על Display type (סוג תצוגה) ובחרו סוג מהתפריט הנפתח.
- ערכו את הפלקסבוקס שלכם בהתאם לסוג התצוגה שבחרתם:
- Direction (כיוון): החליטו אם הפריטים יהיו מסודרים משמאל לימין או מימין לשמאל.
- Item proportions (פרופורציות הפריטים): הקליקו על Equalize (יצירת שוויון) כדי שהגדרות הגודל יהיו זהות לכל פריטי הפלקסבוקס.
- Item width (רוחב פריטים): בחרו את רוחב פריטי הפלקסבוקס באחוזים, או הגדירו את כולם לרוחב המקסימלי של פריט.
- Gaps (רווחים): הכניסו ערך (ב-px, vh, vw או בקנה מידה) עבור הרווחים האופקיים והאנכיים בין פריטי הפלקסבוקס. הערה: אם תבחרו בתצוגת הסליידר או השקפים, האפשרויות הזמינות (אופקי או אנכי) יהיו תלויות בכיוון הסליידר שתבחרו.
- Item alignment (יישור הפריטים): בחרו איך ליישר ולמקם את הפריטים. בהתאם למראה שאתם רוצים להשיג, אתם יכולים ליישר את הפריטים לקצוות הפלקסבוקס (התחלה או סוף), או ליצור רווח בין הפריטים או סביבם.
- Overflow content (גלישת תוכן): בחרו אם להסתיר או להציג תוכן שגולש.
- Slider direction (כיוון הסליידר): הציגו את הפריטים על סליידר אופקי או אנכי.
- Scroll snap align: הקליקו על המתג כדי להפעיל אותו. כשגוללים בין השקפים של הפלקסבוקס, כל פריט (שקף) "מוצמד" כדי שהגולשים לא יפספסו אותו.
- Items per slide (מספר פריטים לשקף): הגדירו כמה פריטים יוצגו בכל פעולה בשקף.
- Navigation (ניווט): הוסיפו חיצים, כפתור או טקסט כדי לעזור לגולשים לנווט בין הפריטים.
- Show scrollbar (הצגת פס הגלילה): הציגו או הסתירו פס גלילה כדי שהגולשים יוכלו לגלול בין הפריטים.
הערות:
- אפשרויות ההתאמה האישית המוצגות תלויות בסגנון התצוגה שבחרתם.
- יש דפדפנים ישנים יותר שלא תומכים ברווחים (למשל, Chrome 76-83, Safari 12-14 ו-Edge 79-83). המשמעות היא שגולשים שנכנסים לאתר מהדפדפנים האלה לא רואים את הרווחים שהגדרתם בין פריטי פלקסבוקס.
עבודה עם נקודות ברייקפוינט:
- אתם יכולים להגדיר פריסה שונה לכל נקודת ברייקפוינט.
- אנחנו ממליצים על פריסת העמודות או הסליידר במסכים קטנים יותר כמו מכשירים ניידים.
שינוי הגודל של פריטי פלקסבוקס
אתם יכולים לשנות את הגודל של כל פריט פלקסבוקס בנפרד כדי שהוא יהיה גדול או קטן יותר מהאחרים. השתמשו בחלונית Inspector (עריכה) כדי לשנות את הרוחב והגובה של כל פריט, כמו גם את השוליים האופקיים והאנכיים מסביב לפריטים.
כדי לשנות את הגודל של פריט:
- הקליקו על הפלקסבוקס שלכם.
- בחרו את הפריט שאתם רוצים לשנות את גודלו.
- ב-Editor, הקליקו מימין למעלה על החץ לפתיחת חלונית ה-Inspector (עריכה) .
- הקליקו על הטאב Design (עיצוב) ובחרו איך לערוך את הפריט:
- Size (גודל): הכניסו את הגודל שבחרתם לשדה, ובחרו את יחידת המידה.
- Position (מיקום): בחרו את אפשרות ה-Margins / Padding הרלוונטית (שוליים) והכניסו את הסכום הרצוי לשדה.
זה עזר לך?
|