Studio Editor: עיצוב תפריטים
זמן קריאה: 5 דקות
ב-Studio Editor אתם יכולים לערוך ולעצב את התפריט עד לפרטים הקטנים ביותר. היכנסו לחלונית ה-Inspector (עריכה) כדי לעצב את התפריט לכל מצב בנפרד (לדוגמה מעבר עם העכבר מעל פריט בתפריט, בחירה בפריטים בתפריט), עריכת הגדרות כמו צבע המילוי, סגנון הטקסט, ההצללה ועוד.
בעמוד זה תלמדו איך לעצב כל סוג תפריט:
משתמשים באינטראקציות של מעבר עם העכבר?
כשאתם מוסיפים אינטראקציה של מעבר עם העכבר לתפריט מסוים, היא לא מופיעה בטאבלטים ובמכשירים ניידים. אם תוסיפו אינטראקציה של קליק, היא תופיע בכל נקודות הברייקפוינט.
עיצוב תפריטים אופקיים
מחלונית העריכה, אתם יכולים לעצב תפריטים אופקיים לשלושה מצבים שונים – Regular (רגיל), Hover (מעבר עם העכבר) ו-Clicked (לחוץ) – כדי להעניק לגולשים חוויית ניווט יותר אינטראקטיבית.
בהתאם לעיצוב המוכן שבחרתם, השתמשו באפשרויות המוצעות כדי להתאים את התפריט לאתר. לדוגמה, יש תפריטים אופקיים שכוללים כפתורים או קווים מפרידים שאתם יכולים להתאים אישית.
כדי לעצב תפריט אופקי:
- בחרו בתפריט האופקי.
- ב-Editor, הקליקו מימין למעלה על חץ ה-Open Inspector (פתיחת כלי העריכה)
. - גללו מטה אל Design (עיצוב).
- בחרו מהתפריט הנפתח את האלמנט שאתם רוצים לעצב:
- Menu container (קונטיינר התפריט)
- Menu items (פריטי התפריט)
- Submenu container (קונטיינר תפריט משנה)
- Submenu items (פריטים בתפריט משנה)
- (לגבי פריטי התפריט / תפריט המשנה) בחרו את המצב הרלוונטי: Regular (רגיל), Hover (מעבר עכבר) או Current page (העמוד הנוכחי).
- עצבו את התפריט באמצעות האפשרויות הזמינות:
- Background fills (מילוי רקעים): שנו את צבע הרקע של התפריט / תפריט המשנה, ובחרו את רמת השקיפות הרצויה. אם העיצוב כולל קווים מפרידים, תוכלו לצבוע אותם מכאן.
- Borders (מסגרת): ערכו את הרוחב והצבע של מסגרת התפריט.
- Corners (פינות): כווננו את רדיוס הפינות של התפריט / תפריט המשנה כדי שיהיו עגולות יותר או מלבניות יותר.
- Shadows (הצללות): הוסיפו צל לתפריט והתאימו אישית את הזווית, הצבע, המרחק ועוד.
- Text (טקסט): התאימו את הסגנון והעיצוב של הפריטים בתפריט ובתפריט המשנה.
- Layout (פריסה): שנו את המרווח מסביב לפריטים בתפריט.
עיצוב תפריטים אנכיים
אתם יכולים לעצב תפריטים אנכיים לשני מצבים שונים – Regular (רגיל) ו-Selected (לחוץ) – כדי שהגולשים יידעו תמיד באיזה עמוד הם נמצאים. שנו את צבע המילוי של התפריט, תפריט המשנה והחץ (אם רלוונטי) וערכו אזורים אחרים כמו הטקסט, המסגרת, הצל ועוד.
הערה:
ההגדרות הזמינות תלויות בתפריט הספציפי שבחרתם מהחלונית Add Elements (הוספת אלמנטים).
כדי לעצב תפריט אנכי:
- בחרו את התפריט האנכי.
- ב-Editor, הקליקו מימין למעלה על חץ ה-Open Inspector (פתיחת כלי העריכה) .
- גללו מטה אל Design (עיצוב).
- עצבו את התפריט באמצעות האפשרויות הזמינות:
- Fill Color & Opacity (צבע ושקיפות המילוי): שנו את צבע הרקע של התפריט / תפריט המשנה, ובחרו את רמת השקיפות הרצויה. אם העיצוב כולל חץ, תוכלו לצבוע אותו מכאן.
- Border (מסגרת): בחרו סגנון למסגרת התפריט ושנו את הרוחב והצבע שלה.
- Shadow (צל): הוסיפו צל לתפריט וערכו את הזווית, הצבע, המרחק ועוד.
- Text (טקסט): התאימו את הסגנון והעיצוב של הפריטים בתפריט ובתפריט המשנה.
- Spacing (ריווח): שנו את הריווח האנכי בין הפריטים בתפריט, וגם את האופסט (offset) של הטקסט ותפריט המשנה (בפיקסלים).
טיפ:
אתם יכולים לנעוץ את התפריט האנכי בעמוד כדי שהוא ימשיך לצוף בזמן שהגולשים גוללים למעלה ולמטה.
עיצוב תפריטי עוגן
בחרו עיצוב מוכן מראש מחלונית ה-Inspector (עריכה) כדי לבחור מה להציג בתפריט העוגן. אתם יכולים להציג טקסט, כפתורים או עיצוב מוכן מראש שמשלב את שניהם. עיצוב אחד מוכן אפילו מאפשר להציג את שם העוגן כשהגולשים גוללים אל האזור הספציפי הזה.
לאחר מכן תוכלו לערוך את העיצוב לשני מצבים נפרדים – Regular (רגיל) ו-Clicked (לחוץ) – כדי שהגולשים יקבלו אינדיקציה ברורה לגבי העוגן שהם צופים בו כרגע.
כדי לעצב תפריט עוגן:
- בחרו את תפריט העוגן.
- ב-Editor, הקליקו מימין למעלה על חץ ה-Open Inspector (פתיחת כלי העריכה) .
- גללו מטה אל Design (עיצוב).
- בחרו עיצוב מוכן מראש בחלק העליון.
- בחרו את המצב הרלוונטי: Regular או Clicked.
- עצבו את התפריט באמצעות האפשרויות הזמינות:
- Fill Color & Opacity (צבע ושקיפות המילוי): שנו את צבע הרקע של התפריט / תפריט המשנה, ובחרו את רמת השקיפות הרצויה. אם העיצוב כולל חץ, תוכלו לצבוע אותו מכאן.
- Text (טקסט): התאימו את הסגנון והעיצוב של הפריטים בתפריט ובתפריט המשנה.
- Spacing (ריווח): שנו את הריווח האנכי בין הפריטים בתפריט, וגם את האופסט (offset) של הטקסט ותפריט המשנה (בפיקסלים).
עיצוב תפריטי המבורגר
תפריטי המבורגר כוללים כמה אלמנטים שאתם יכולים לעצב בהתאם לצרכים שלכם – התפריט עצמו, הקונטיינר שלו והאייקונים שפותחים וסוגרים אותו.
כדי לעצב תפריט המבורגר:
- בחרו את תפריט ההמבורגר.
- בחרו איזה אזור בתפריט אתם רוצים לעצב:
אייקון התפריט
Menu container (קונטיינר התפריט)
התפריט עצמו
הכפתור לסגירת התפריט
זה עזר לך?
|