Divi: כיצד ליצור שורת תפריטים דביקה מלמטה למעלה

האם תרצה ליצור סרגל ניווט ב-Divi שהוא דביק מלמטה לראש העמוד?

בהדרכה Divi היום אנחנו הולכים להראות לכם צעד אחר צעד כיצד ליצור סרגל ניווט דביק מלמטה למעלה ב- Divi. 

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

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

נתחיל!

סקירה

כדי לעזור לך לדמיין את התוצאה שאנו מנסים להשיג, בואו נסתכל על התוצאה הסופית:

הורד את DIVI עכשיו!!!

נתחיל ביצירת דף חדש עם Divi Builder

כדי להתחיל, תצטרך לבצע את הפעולות הבאות:

מלוח המחוונים של וורדפרס, עבור אל עמודים> הוסף חדש ליצור דף חדש.

תן לזה כותרת שנראית לך הגיונית ולחץ השתמש ב- Divi Builder

לאחר מכן לחץ על התחל לבנות (בנה מאפס)

לאחר מכן יהיה לך בד ריק להתחיל בעיצוב ב- Divi.

צור סרגל ניווט דק מלמטה למעלה למעלה ב- Divi

חלק 1: יצירת הקטע והכותרת מעל קו המים

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

קראו גם: Divi: בחר בין פריסת הרשת והפריסה ברוחב המלא של מודול הפורטפוליו הניתן לסינון

הוסף שורה

כדי להתחיל, הוסף שורה לעמודה למקטע ברירת המחדל.

הגדרות קטע

לפני הוספת מודול, פתח את הגדרות המדור והוסף רקע כדלקמן:

• צבע רקע: #e9f9ff
• תמונת רקע: [הוסף תמונה]

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

• גובה מינימלי: 100 וולט (מחשב שולחני), אוטומטי (טאבלט וטלפון)
• ריפוד: 20 וולט (למעלה ולמטה)

טקסט כותרת

כדי ליצור את טקסט הכותרת, הוסף מודול טקסט חדש לשורה.

לאחר מכן עדכן את תוכן עם הכותרת H1 הבאה:

<h1>Above the Fold</h1>

הגדרות טקסט

תחת הכרטיסייה עיצוב בהגדרות מודול הטקסט, עדכן את סגנונות גופני הכותרת באופן הבא:

• כּוֹתֶרֶת:
  • גופן: רובי
  • משקל גופן: חצי מודגש
  • סגנון: TT
  • יישור טקסט: ממורכז
  • צבע טקסט: #302ea7
  • גודל: 130 פיקסלים (שולחן עבודה), 70 פיקסלים (טאבלט), 40 פיקסלים (טלפון)
  • מרווח בין אותיות: 2 פיקסלים
  • גובה קו: 1,3 אמ

חלק 2: יצירת הקטע מתחת לקו המים

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

כדי ליצור את הקטע, שכפלו את הקטע שמעל הקמט שעשינו זה עתה.

עדכן את הרקע של הקטע הכפול.

• צבע רקע: #f4def1

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

• גובה מינימלי: 200Vh

לאחר מכן עדכן את תוכן של מודול הטקסט על ידי החלפת המילה "לְהַלָן" נָקוּב "מֵעַל".

חלק 3: צור את סרגל הניווט הדביק

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

נוסף קטע ושורה חדשים

ראשית, בואו נוסיף קטע רגיל חדש ישירות מתחת לקטע שמעל לקפל.

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

רקע חתך וריפוד

פתח את הגדרות המדור ועדכן את צבע הרקע.

• צבע רקע: #302ea7

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

• ריפוד: 0px (למעלה ולמטה)

הוסף עודף גלוי

כדי להבטיח שהתפריטים הנפתחים יישארו גלויים, עדכן את אפשרויות החשיפה כדלקמן:

• גלישה אופקית: גלוי
• גלישה אנכית: גלויה

תן למדור מיקום מוחלט בנייד

התפריט הנפתח לנייד ייפתח כברירת מחדל תחת סמל ההמבורגר. אם נשאיר את סרגל הניווט בתחתית, הוא יסתיר את התפריט הנפתח אם המשתמש ילחץ עליו. 

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

לשם כך, תן למדור מיקום מוחלט בטאבלט ובטלפון.

• תפקיד: קרוב משפחה (שולחן עבודה), מוחלט (טאבלט וטלפון)

הוסף מיקום דביק למחשב שולחני ולנייד

כדי להוסיף את המיקום הדביק למקטע סרגל הניווט, עדכן את הדברים הבאים:

• מיקום דביק: היצמד למעלה ולמטה (שולחן עבודה), היצמד למעלה (טאבלט וטלפון)

עדכן ריפוד שורות

לאחר השלמת הקטע הדביק, פתח את הגדרות השורה בתוך הקטע ועדכן את הריפוד באופן הבא:

• ריפוד: 10px (למעלה ולמטה)

צור תפריט ניווט

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

התחל על ידי הוספת מודול תפריט לשורה בעלת עמודה אחת.

תוכן התפריט

עדכן את תוכן התפריט כדלקמן:

• בחר את התפריט מהרשימה הנפתחת
• הוסף תמונת לוגו
• הסר צבע רקע ברירת מחדל

תחת הכרטיסייה עיצוב, עדכן את הגדרות הטקסט והסמלים הבאים בתפריט:

• צבע קישור פעיל: #fff
• גופן תפריט: רובי
• סגנון גופן בתפריט: TT
• צבע טקסט: #fff
• גודל טקסט בתפריט: 16 פיקסלים
• יישור טקסט: ימינה
• צבע שורת התפריט הנפתח: #e19dff
• צבע טקסט של תפריט נייד: #302ea7
• צבע סמל עגלת קניות: #fff
• צבע סמל חיפוש: #fff
• סמל תפריט המבורגר צבע: #fff

שימוש בגבול לקיזוז המיקום המוחלט של סרגל הניווט בנייד

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

בדוק את גובה קטע סרגל הניווט בנייד

כדי לקבוע את גובה סרגל הניווט בנייד, פתח גרסה חיה של הדף בחלון דפדפן חדש. לאחר מכן תוכל להקטין את רוחב הדפדפן מתחת ל-980px כדי לראות את התפריט לנייד. 

ניתן גם להתייעץ: Divi: כיצד ליצור סרגל ניווט דביק

לחץ לחיצה ימנית על החלק המכיל את התפריט ובחר באפשרות בדוק את האלמנט בתפריט ההקשר של הדפדפן. אתה אמור לראות קופסה outils מתחת לסעיף המציין את מידות החתך (כולל גובה). 

עבור דוגמה זו, גובה סרגל הניווט הוא 72 פיקסלים.

הוסף קיזוז גבול עליון לחלק שמעל לקפל

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

תחת הכרטיסייה עיצוב, הוסף את הגבול העליון הבא בטאבלט ובטלפון:

• רוחב גבול עליון: 72 פיקסלים (טאבלט וטלפון)
• צבע גבול עליון: #302ea7

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

תוצאה סופית

גלה את התוצאה הסופית!

הורד את DIVI עכשיו!!!

סיכום

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

המפתח הוא לתת לקטע שמעל הקיפול גובה של 100Vh, ואז להוסיף את הקטע של סרגל הניווט למטה שנדבק לתחתית ולחלק העליון של הדפדפן. מקווה שזה עוזר להוסיף לך משהו ייחודי ומרתק יותר אתר אינטרנט.

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

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

אפשר גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט.

אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.

אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.

...