מגה מניו ומגירת הנייד
בניית פאנל מגה מניו לקישור בתפריט הראשי, ועיצוב המגירה שנפתחת בטלפון.
המדריך הזה מסביר את שני החצאים של התפריט הגדול: התוכן — מה נפתח מתחת לקישור, שנבנה במסך התפריטים; והמראה — הצבעים, המרווחים והתנועה, שנקבעים בהתאמה האישית. הוא מיועד למי שבונה את הניווט של החנות.
חלק א׳ — התוכן: לבנות פאנל לקישור
- בתפריט הצד לחצו ״עיצוב ← תפריטים״.
- בחרו את התפריט שמשויך למיקום ״תפריט ראשי״.
- פתחו קישור ברמה הראשונה של התפריט. מתחת לשדות שלו תראו שורת מצב וכפתור ״עריכת פאנל״.
- שורת המצב אומרת מה קורה היום: ״קישור בלבד״, ״נפתח כתפריט רגיל״, או מניין של העמודות והתוספות בפאנל.
- לחצו ״עריכת פאנל״. נפתח חלון עריכה עם תצוגה מקדימה — ״איך זה ייראה״.
שים לב: כפתור ״עריכת פאנל״ מופיע רק לקישורים ברמה הראשונה, ורק בתפריט שמשויך למיקום ״תפריט ראשי״. לתת-קישור אין כפתור, ולתפריט אחר אין כפתור בכלל.
מאיפה מגיעות העמודות
העמודות של הפאנל אינן נבנות בחלון הזה. החלון עצמו אומר זאת כשהוא ריק: ״העמודות מגיעות מתתי־הפריטים של הקישור הזה, במסך שמאחור. הוסיפו כאן תמונה והן ישבו לצדה.״ כלומר: כדי שיהיו עמודות — הוסיפו תת-קישורים לקישור במסך התפריטים הרגיל.
להוסיף בלוקים
- לחצו ״הוספת בלוק״ ובחרו סוג:
- ״מוצרים״ — ״כמה מוצרים, ישירות מהחנות״. ב״אילו מוצרים״ בוחרים ״אלה שאני בוחר״, ״הכי נמכר״, ״הכי חדש״ או ״מקטגוריה״, וב״כמה״ קובעים 1 עד 6.
- ״מותגים״ — עם ״כותרת״, ״מוצג בתור״, ״נלקחים מ״, ״אילו מותגים״, ״עד כמה״ ו״׳לכל המותגים׳ מוביל אל״.
- ״תמונה״ — ״תמונה״, ״מוביל אל״, ״כותרת על התמונה״, ״שורה מתחתיה״, ״הטקסט על הכפתור״, ״צורה״, ״מוקד התמונה (%)״, ״מיקום הטקסט״ ו״פינות״.
- לכל בלוק קבעו ״רוחב״: ״לפי התוכן״, ״צר״, ״רגיל״, ״רחב״ או ״כפול״.
- קבעו ״מוצג״: ״בכל מקום״, ״דסקטופ בלבד״, ״במגירה בלבד״ או ״כבוי״.
- סדרו בעזרת ״הזזה אחורה״ ו״הזזה קדימה״, והסירו ב״הסרת הבלוק״.
- לחצו ״שמירה״ בחלון, ואז שמרו גם את התפריט עצמו במסך שמאחור.
שים לב: פאנל אחד מחזיק עד שישה בלוקים. כשמגיעים לתקרה מוצגת ההודעה ״This panel is full.״ המגבלה מכוונת — פאנל עם תריסר בלוקים הוא עמוד, ואף אחד לא מוצא בו כלום.
חלק ב׳ — המראה: שורת התפריט
- לכו ל״עיצוב ← התאמה אישית ← Header ← מגה מניו״.
- מתחת לכותרת ״שורת התפריט״ קבעו ״גודל טקסט (פיקסלים)״ (16 כברירת מחדל), ״עובי הטקסט״ (״דק״ / ״רגיל״ / ״בינוני״ / ״עבה״), ״אותיות גדולות״ (״כפי שנכתב״ או ״אותיות גדולות״), ״מרווח בין האותיות״ ו״מרווח בין הקישורים (פיקסלים)״.
- קבעו ״צבע הקישור״, ״צבע הקישורים בריחוף״ ו״רקע מאחורי הקישורים״ — האחרון ״נראה רק כשהתפריט יושב בשורה נפרדת מהלוגו״.
- ב״עומק תפריט נפתח רגיל״ בחרו ״שתיים — קישור ותתי הקישורים שלו״ או ״שלוש — כולל רמה שלישית״. ההסבר: ״חל על קישור שאין לו מגה־תפריט משלו.״
מה קורה מתחת לסמן
ב״מה קורה מתחת לסמן״ בחרו מתוך ארבעה ציורים: ״קו שמצייר את עצמו״, ״קו שחולף״, ״המילה מתרוממת״ או ״רק הצבע משתנה״.
שים לב: ״צבע הקו״ ו״עובי הקו (פיקסלים)״ מופיעים רק אם בחרתם באחת משתי אפשרויות הקו. בחרתם ״המילה מתרוממת״ — שני השדות ייעלמו, וזה תקין.
תנועה
- ״איך נפתח החלון״ — ״אחד אחרי השני״, ״הכל יחד״ או ״בלי תנועה״. ההסבר: ״משפיע גם על המגירה בנייד וגם על הפאנל בדסקטופ.״
- ״החלקים נכנסים״ ו״השהיה בין האלמנטים (אלפיות שנייה)״ — מופיעים רק כשבחרתם ״אחד אחרי השני״.
- ״הכהיית העמוד מאחורי פאנל פתוח״ — מתג.
חלק ג׳ — המגה־תפריט בדסקטופ
- ב״באיזה רוחב הוא נפתח״ בחרו ״כל רוחב העמוד״, ״רוחב התוכן״ (ברירת המחדל) או ״מתחת לקישור עצמו״.
- קבעו את המרווחים: ״רווח פנימי בפאנל (פיקסלים)״, ״מרווח בין העמודות (פיקסלים)״ ו״מרווח בין הקישורים בעמודה (פיקסלים)״.
- קבעו ״עיגול הפינות העליונות״ ו״עיגול הפינות התחתונות״. ההסבר: ״הפינות נראות כשהפאנל לא נוגע בקצוות המסך — בעיקר כשהוא נפתח מתחת לקישור.״
- קבעו את הצבעים: ״רקע הפאנל״, ״צבע כותרות העמודות״, ושני שדות צבע הקישורים בתוך הפאנל — שהתוויות שלהם מוצגות באנגלית, ״Mega panel — link colour״ ו״Mega panel — link colour on hover״.
- קבעו ״שורות בעמודה לפני שהיא מתפצלת״ — ״רשימה ארוכה יותר ממשיכה בעמודה שנייה צמודה לצדה״.
- קבעו ״גובה התמונה בפאנל (פיקסלים)״ — ״0 משווה את גובה התמונה לגובה העמודות שלצדה״.
- קבעו ״הקו שמעל הפאנל״ ו״הקו שמתחת לפאנל״.
שים לב: אם בחרתם ״רוחב התוכן״ ורוחב התוכן של האתר גדול — הפאנל עשוי להיראות זהה ל״כל רוחב העמוד״. השדה עצמו מזהיר על כך.
חלק ד׳ — המגירה בטלפון
- גללו לכותרת ״המגירה — נייד והמבורגר״.
- ״נפתחת מהצד״ — ״ימין״ (ברירת המחדל) או ״שמאל״.
- ״רוחב המגירה (פיקסלים)״ — 360 כברירת מחדל, בטווח 260–520.
- ״הכהיית העמוד מאחוריה״ — מתג.
- ״תת־קטגוריה נפתחת״ — ״במקום״ (הרשימה נפתחת כלפי מטה) או ״מעל המסך״ (מסך משלה, עם דרך חזרה).
- קבעו ״רקע המגירה״, ״צבע הטקסט״, ״צבע הקו שבין השורות״, ״גודל טקסט (פיקסלים)״ ו״גובה שורה (פיקסלים)״.
- מתחת לכותרת ״המגירה — רמה אחת פנימה״ יש סט צבעים ומידות משלו לרמה השנייה.
- מתחת לכותרת ״התמונות שליד הקישורים, במגירה״ קבעו ״גודל התמונה (פיקסלים)״ ו״פינות התמונה״.
שים לב: ההגדרה ״גובה מינימלי לשורה בלי תמונה (פיקסלים)״ מתנהגת אחרת ברגע שיש תמונות: ״כשלפחות קישור אחד נושא תמונה, שורות בלי תמונה מיישרות לגובה התמונה — כדי שהרשימה תישאר אחידה.״ אם הוספתם תמונה אחת והשורות פתאום התארכו, זו הסיבה.
קשור
- advanced-header
- advanced-customizer-map
- advanced-global-design
- advanced-catalogue-structure