Studio Editor: עיצוב רשימות נפתחות בתפריט האתר
7 דקות
אחרי שתוסיפו ותגדירו תפריט נפתח, תוכלו לשנות את העיצוב שלו כרצונכם, כולל שינוי המראה והיישור של הקונטיינר והתפריט, כדי ליצור מראה מותאם אישית עבור הלקוחות ולחזק את המותג שלהם.
לפני שמתחילים:
את התפריט הנפתח אפשר להוסיף רק בתפריטים חדשים ב-Studio Editor. אם יש לכם תפריט מגרסה קודמת, אתם יכולים ליצור תפריטי משנה ולהוסיף מגה-תפריטים (mega menus).
עריכת הפריסה של תפריטים נפתחים
בהתאם לסוג התפריט שלכם (סרגל ניווט, המבורגר וכו'), אתם יכולים להשתמש בחלונית Layout (פריסה) כדי להגדיר את התצוגה או הרוחב של התפריט הנפתח ולהתאים את הריווח והיישור למראה של התפריט הראשי.
כדי לשנות את הפריסה של תפריטים נפתחים:
- עברו ל-editor.
- הקליקו על התפריט או על כפתור בתפריט.
- (תפריטי המבורגר) הקליקו על Edit Menu (עריכת התפריט) כדי לפתוח את מצב עריכת תפריט ההמבורגר, ובחרו את התפריט.
- הקליקו על אייקון הפריסה .
- בחרו בלשונית Dropdown (תפריט נפתח).
- השתמשו באפשרויות כדי לשנות את הפריסה:
- Container width: בחרו את רוחב הקונטיינר הנפתח ועצבו אותו כרצונכם:
- Stretch: הקונטיינר ייפתח ברוחב המלא של המסך. אתם יכולים לשנות את הרוחב שלו על ידי הגדרת השוליים (בפיקסלים).
- Fit to menu: הקונטיינר הנפתח ייפתח ברוחב זהה לרוחב תפריט ההורה הראשי.
- Hug content: הקונטיינר "חובק" את הכפתורים בתפריט הנפתח. אתם יכולים לבחור אם ליישר אותו לשמאל, למרכז או לימין של התפריט הראשי.
- Item display: בחרו אם הכפתורים בתפריט הנפתח יהיו מכווצים או שיוצגו תמיד.
- Space above container: הגדילו או הקטינו את המרווח בין התפריט הנפתח לתפריט הראשי.
- Number of columns: בחרו כמה עמודות יוצגו בתפריט הנפתח.
- Spacing: ערכו את ריווח הכפתורים בתפריט הנפתח. אם הוספתם כפתורי משנה, אתם יכולים לשנות גם את הריווח ביניהם ומעליהם.
- Space between items: הגדירו את המרווח האופקי והאנכי בין הכפתורים בתפריט הנפתח.
- Space between sub-items: הגדילו או הקטינו את הרווח בין כפתורי משנה.
- Space above sub-items: הגדירו את המרווח מעל כפתורי המשנה בתפריט.
- Padding: הגדירו את הרווח מסביב לכל חלק בתפריט הנפתח כרצונכם:
- Item padding: הגדילו או הקטינו את הרווח מסביב לכפתורים בתפריט הנפתח.
- Sub-item padding: שנו את הרווח מסביב לכפתורי המשנה בתפריט הנפתח.
- Container padding: הגדילו או הקטינו את הרווח מסביב לקונטיינר הנפתח כרצונכם.
- Alignment: ישרו את הכפתורים ואת כפתורי המשנה לשמאל, לימין, או למרכז של הקונטיינר.
- Container width: בחרו את רוחב הקונטיינר הנפתח ועצבו אותו כרצונכם:
.
שימו לב:
האפשרויות המוצגות תלויות בסוג התפריט (סרגל ניווט או המבורגר), ובכיוון (אופקי או אנכי) שתבחרו.
עריכת העיצוב של התפריטים הנפתחים
אתם יכולים לעצב כל חלק בתפריט הנפתח, מהקונטיינר ועד לכפתורים וכפתורי המשנה, כדי להתאים אותו למראה ולתחושה של התפריט הראש.
כדי לערוך את העיצוב של התפריטים הנפתחים:
- עברו ל-editor.
- הקליקו על התפריט או על כפתור בתפריט.
- (תפריטי המבורגר) הקליקו על Edit Menu (עריכת התפריט) כדי לפתוח את מצב עריכת תפריט ההמבורגר, ובחרו את התפריט.
- הקליקו על החץ לפתיחת חלונית ה-Inspector מימין למעלה ב-editor.
- גללו למטה אל Design (עיצוב).
- בחרו את האלמנט שאתם רוצים לעצב:
- Dropdown container (הקונטיינר הנפתח)
- Dropdown menu container (קונטיינר של תפריט נפתח)
- Dropdown items (כפתורים בתפריט הנפתח)
- Dropdown sub-items (כפתורי משנה בתפריט הנפתח)
- (כפתורים / כפתורי משנה בתפריט הנפתח) בחרו את המצב הרלוונטי: Regular (רגיל), Hover (מעבר עם העכבר) או Current page(העמוד הנוכחי).
- ערכו את העיצוב של הקונטיינר הנפתח באמצעות האפשרויות הזמינות:
- Background fills: שנו את צבע הרקע של התפריט הנפתח, או הוסיפו גרדיאנט (מעבר צבע) שמושך את העין, כולל התאמת רמת האטימות והוספת מספר שכבות בהתאם לצורכי העיצוב שלכם.
- Borders: שנו את הרוחב והצבע של מסגרת הקונטיינר הנפתח.
- Corners: שנו את הרדיוס של הפינות של התפריט הנפתח כדי להפוך אותן לעגולות או או מרובעות יותר.
- Text: שנו את הסגנון והעיצוב של הכפתורים וכפתורי המשנה בתפריט הנפתח.
- Shadow: הוסיפו הצללות לתפריט הנפתח ושנו את הזווית, הצבע, המרחק ועוד.
מימין למעלה ב-editor.
מה ההבדל בין קונטיינרים?
- קונטיינר נפתח: מציג את כל האלמנטים והתפריטים שהוספתם לכפתור בתפריט הנפתח.
- קונטיינר של תפריט נפתח: מציג רק את הכפתורים של התפריט הנפתח. הוא מקונן בתוך הקונטיינר הנפתח.
עיצוב תפריטים נפתחים בנפרד
שינויים בעיצוב ובפריסה של תפריט נפתח חלים על כל התפריטים הנפתחים בתוך תפריט. עם זאת, אתם יכולים "לנתק" תפריטים נפתחים בסרגל ניווט אופקי כדי לערוך אותם בנפרד.
שימו לב:
האפשרות הזו לא זמינה בתפריטי המבורגר או בתפריטים בסרגל ניווט אנכי.
כדי לנתק ולערוך תפריטים נפתחים נפרדים:
- הקליקו על התפריט האופקי ב-editor.
- הקליקו על Manage Menu (ניהול התפריט).
- עברו עם העכבר מעל התפריט הנפתח הרלוונטי והקליקו על Edit (עריכה).
- בחרו איך לעצב את התפריט הנפתח:
לערוך את הפריסה של הקונטיינר
לשנות את פריסת התפריט הנפתח
לערוך את העיצוב של הקונטיינר
לערוך את עיצוב התפריט:
שימו לב:
מתג Edit this dropdown only (עריכת התפריט הנפתח הזה בלבד) בחלונית ה-Inspector (עריכה) מחובר אל אותו מתג בחלונית Layout (פריסה), ולכן השבתת / הפעלת אחד מהמתגים הללו משביתה / מפעילה את השני באופן אוטומטי.