Studio Editor: איך לשנות את הפריסה של התפריטים החדשים

באמצעות רכיב התפריטים החדש שלנו ניתן להתאים את הפריסה ברמת התפריט הבודד עבור כל נקודת ברייקפוינט בנפרד. זה מאפשר לעצב בקלות רבה יותר אתרים שיתאימו למסכים בגדלים שונים.

אחרי שבחרתם סוג תפריט (פריסה), השתמשו באפשרויות העריכה כדי לגרום לתפריט להיראות בדיוק כמו שאתם רוצים.

עריכת הפריסה של תפריטים אופקיים

תפריטי סרגל ניווט אופקיים מגיעים עם מגוון גדול של אפשרויות עריכה שמאפשרות שליטה מלאה בעיצוב היצירתי. תוכלו לבחור איך יוצגו פריטים ש'גולשים' מהתפריט כשנגמר בו המקום, להוסיף אייקון לפריטים נפתחים ועוד.

כדי לשנות את הפריסה של תפריט אופקי:

הקליקו על התפריט ב-editor.
הקליקו על אייקון הפריסה .
הקליקו על Navigation bar (סרגל ניווט) תחת Menu type (סוג תפריט).
מהתפריט הנפתח Orientation (כיוון), בחרו באפשרות Horizontal (אופקי).
השתמשו באפשרויות הזמינות כדי לשנות את הפריסה:

פריטים שגולשים מהתפריט

קווים מפרידים וריווח

אייקון של רשימה נפתחת

כיוון ויישור

חלונית הפריסה של תפריט אופקי פתוחה. סמן העכבר מקליק על הכיוון Left to right (משמאל לימין).

עריכת הפריסה של תפריטים אנכיים

תפריטים אנכיים מתאימים במיוחד לנקודות ברייקפוינט של מסכים קטנים כמו טאבלטים. ניתן לשנות אפשרויות כמו הריווח והכיוון כדי שהתפריט ישתלב בעיצוב הכללי של האתר.

כדי לשנות את הפריסה של תפריט אנכי:

הקליקו על התפריט ב-editor.
הקליקו על אייקון הפריסה .
הקליקו על Navigation bar (סרגל ניווט) תחת Menu type (סוג תפריט).
מהתפריט הנפתח Orientation (כיוון), בחרו באפשרות Vertical (אנכי).
ערכו את הפריסה בעזרת האפשרויות הזמינות:
- Dividers (קווים מפרידים): ניתן להציג או להסתיר את הקווים המפרידים באמצעות המתג Add dividers ולשנות את הריווח שלהם:
  - במצב מופעל: שנו את המרווחים בין הקווים המפרידים ופריטי התפריט.
  - במצב כבוי: שנו את הריווח בין הפריטים.
- Padding: השתמשו באפשרויות הזמינות כדי להגדיל או להקטין את הריווח מסביב לתפריט ולפריטי התפריט.
- Dropdown icon spacing: ערכו את הריווח בין פריטי התפריט שפותחים רשימה נפתחת לבין האייקון המוצג עליהם.
- Direction (כיוון): בחרו אם התפריט יוצג משמאל לימין או להיפך.
- Alignment (יישור): בחרו אם ליישר את פריטי התפריט לימין, למרכז או לשמאל הקונטיינר, או ליישר אותם לשני הצדדים (justified).

חלונית הפריסה של תפריט אנכי פתוחה. סמן העכבר מקליק על אפשרות הריווח האנכי.

הערות:

האפשרות Dropdown icon spacing תופיע רק אם:

אתם עורכים תפריט אופקי והפעלתם את האפשרות של הצגת אייקון של רשימה נפתחת (בתפריטים אנכיים אין כלל אפשרות להציג את האייקונים האלה).
התפריט שלכם מיושר לשמאל, למרכז או לימין הקונטיינר.

עריכת הפריסה של תפריטי המבורגר

בתפריטי המבורגר אפשר לבחור מה יוצג על אייקון התפריט (טקסט, אייקון או שניהם) ולהגדיר את היישור.

אפשר גם לבחור אם פריטי התפריט יוצגו בצורה אופקית או אנכית ולשנות את ההגדרות.

כדי לשנות את הפריסה של תפריט ההמבורגר:

הקליקו על התפריט ב-editor.
הקליקו על אייקון הפריסה .
הקליקו על Hamburger תחת Menu type (סוג התפריט).
עכשיו צאו מהחלונית Layout או הישארו בה – תלוי איזה חלק של התפריט שאתם רוצים לערוך:
- אייקון התפריט:
  1. הישארו בחלונית Layout.
  2. ערכו את הפריסה בעזרת האפשרויות הזמינות:
    - Choose what displays: בחרו אם על הכפתור של תפריט ההמבורגר יופיע טקסט, אייקון או שניהם.
      הערה: אפשר גם לבחור לא להציג כלום על כפתור התפריט. עם זאת, מומלץ לבחור באחת מהאפשרויות האחרות כדי שהגולשים יוכלו להבחין בתפריט.
    - Alignment: ישרו את אייקון התפריט לימין, למרכז או לשמאל הקונטיינר.
- התפריט עצמו:
  1. צאו מהחלונית Layout.
  2. הקליקו על Edit Menu (עריכת התפריט).
  3. בחרו את פריטי התפריט.
  4. הקליקו על אייקון הפריסה .
  5. בחרו אם הפריטים יוצגו בצורה אופקית או אנכית וערכו את האפשרויות הזמינות:

Horizontal (אופקי)

Overflow (גלישה): בחרו איך להציג את הפריטים שלא נכנסים לתפריט בגלל חוסר מקום:
- Wrap (גלישה): תתווסף שורה נוספת לתפריט שבה יוצגו שאר הפריטים.
- Scroll (גלילה): הגולשים יוכלו לגלול כדי לראות את שאר הפריטים. בחרו אם להפעיל או להשבית את המתג Show scroll button (הצגת כפתור גלילה):
  - במצב מופעל: כפתור גלילה יוצג בתפריט. ניתן להקטין או להגדיל את הריווח מסביבו.
  - במצב כבוי: לא יוצג כפתור גלילה והגולשים יוכלו להחליק על התפריט כדי לראות את שאר הפריטים.
    הערה: מומלץ להשתמש במצב הכבוי רק בנקודות ברייקפוינט קטנות, למכשירים עם מסך מגע.
Dividers (קווים מפרידים): ניתן להציג או להסתיר את הקווים המפרידים באמצעות המתג Add dividers ולשנות את הריווח שלהם:
- במצב מופעל: שנו את המרווחים בין הקווים המפרידים ופריטי התפריט.
- במצב כבוי: שנו את המרווח האופקי והמרווח האנכי בין פריטי התפריט.
Padding: השתמשו באפשרויות הזמינות כדי להגדיל או להקטין את הריווח מסביב לתפריט ולפריטי התפריט.
Show dropdown icon (הצגת אייקון של רשימה נפתחת) הפעילו או השביתו את המתג:
- במצב מופעל: אייקון יופיע ליד פריטים שנפתחים לרשימה. אפשר להגדיל או להקטין את הריווח בין האייקון לפריטים.
- במצב כבוי: לא יופיעו אייקונים ליד פריטים שנפתחים לרשימה.
Direction (כיוון): בחרו אם התפריט יוצג משמאל לימין או להיפך.
Alignment (יישור): בחרו אם ליישר את פריטי התפריט לימין, למרכז או לשמאל הקונטיינר, או ליישר אותם לשני הצדדים (justified).

חלונית הפריסה של תפריט המבורגר אנכי פתוחה. סמן העכבר מקליק על האפשרות Space between items (המרווח בין הפריטים).

Vertical (אנכי)

חלונית הפריסה של האייקון של תפריט ההמבורגר פתוחה. סמן העכבר מקליק על אפשרות היישור למרכז.