במדריך זה נראה לכם כיצד ליצור לחצן תפריט נפתח באמצעות מודול התפריט ברוחב מלא. לשם כך ניצור תחילה תפריט בוורדפרס. לאחר מכן נשתמש במודול התפריט של רוחב מלא של Divi כדי להציג תפריט זה עם סגנונות מותאמים אישית באמצעות Divi Builder וקצת CSS מותאם אישית. התוצאה היא כפתור תפריט נפתח מעשי ומסוגנן.
בואו נתחיל.
סקירה
להלן סקירה של לחצן התפריט הנפתח שנשלב בהדרכה זו.
מה שאתה צריך כדי להתחיל
כדי להתחיל, אם עדיין לא עשית זאת, התקן והפעל את נושא דיווי מותקן (או תוסף Divi Builder אם אינך משתמש ב- נושא דיווי). בהתחלה נשתמש בבונה Divi כדי לעצב את כפתור התפריט הנפתח.
זהו זה !
צור תפריט בוורדפרס
לפני שנתחיל ליצור את התפריט הנפתח עם Divi Builder, ראשית עלינו ליצור תפריט WordPress בו נרצה להשתמש עבור מודול התפריט ברוחב מלא. לשם כך עבור אל לוח המחוונים של וורדפרס ועבור למראה> תפריטים. לאחר מכן צור תפריט חדש על ידי לחיצה על קישור יצירת תפריט חדש, הזנת שם תפריט ולחיצה על כפתור "תפריט צור".
לעת עתה, תוכל ליצור קישורים מותאמים אישית עם "#" כמציין מיקום עבור ה- URL יחד עם טקסט הקישור.
בנה את פריטי התפריט כך שלפריט התפריט ברמה העליונה יש את הקישור "למידע נוסף" עם שלושה פריטי תפריט משנה.
לאחר מכן, הקפידו לשמור את התפריט.
כיצד ליצור לחצן תפריט נפתח עם מודול התפריט ברוחב המלא של Divi
לאחר יצירת התפריט, נוכל להתחיל לעצב את לחצן התפריט הנפתח עם Divi. כדי להתחיל את הפרויקט, צור דף חדש בוורדפרס והשתמש ב- Divi Builder לעריכת הדף בממשק הקדמי (בונה חזותי).
לאחר מכן יהיה לך בד ריק להתחיל בעיצוב ב- Divi.
צור תוכן מזויף
ראשית, הוסף שורה של עמודה אחת למקטע הסטנדרטי המוגדר כברירת מחדל.
הוסף מודול טקסט
לאחר מכן הוסף מודול טקסט לשורה עם התוכן הבא:
תפריט דיווי התוכן שלך הולך לכאן. ערוך או הסר טקסט זה בשורה או בהגדרות התוכן של המודול. ניתן גם לעצב כל היבט בתוכן זה בהגדרות העיצוב של המודול ואף להחיל CSS מותאם אישית על טקסט זה בהגדרות המתקדמות של המודול.
ואז עדכן את פרמטרי העיצוב באופן הבא:
קטע ריפוד
לאחר מכן, עדכן את הגדרת המקטע עם הפריטים הבאים:
- ריפוד: 0px למטה
ריווח קו וגבול
לאחר עדכון מילוי החלק, פתח את הגדרות השורה והקצה לו מילוי וגבול קל.
- ריפוד: 10vw בחלקו העליון, 10vw בתחתית, 5vw משמאל, 5vw מימין
- רוחב הגבול: 1px
יצירת לחצן התפריט הנפתח
על מנת ליצור את לחצן התפריט הנפתח, נשתמש במודול תפריט ברוחב מלא. זה יאפשר לנו להוסיף את התפריט שנוצר בעבר.
הוספת תפריט רוחב מלא
ליצירת מודול התפריט ברוחב המלא, הוסף קטע רוחב מלא חדש תחת החלק הסטנדרטי הנוכחי.
ואז להוסיף קו מודול ברוחב מלא לקו.
בחלון הקופץ של הגדרות התפריט ברוחב מלא (מתחת לתוכן), השתמש בתפריט הנפתח כדי לבחור את התפריט שברצונך להציג. זה אמור להיות אותו תפריט שיצרנו קודם בשם "תפריט לחצנים נפתח".
לאחר מכן, הסר את צבע רקע ברירת המחדל הלבן עבור התפריט.
לאחר שהוספת את התפריט עם מודול התפריט ברוחב מלא, שמור את ההגדרות. נחזור מעט למודול זה כדי לסיים את העיצוב. אבל בינתיים נוסיף רקע למקטע הרוחב המלא.
עדכן את העיצוב של חלק הרוחב המלא
פתח את ההגדרות עבור החלק ברוחב המלא ועדכן את הדברים הבאים:
- שיפוע רקע שמאלי: # 0047d6
- צבע שיפוע רקע ימני צבע: # 45b2ff
- רוחב מרבי: 240px
- יישור החלק: מרכז
הגדרתי את רוחב החלקים המקסימלי ל -240 פיקסלים, מכיוון שזה תואם את רוחב רוחב התפריט הנפתח המוגדר כברירת מחדל ב- Divi. זה גם גודל טוב לכפתור בשולחן העבודה ובנייד.
- פינות מעוגלות: 5px
בכרטיסיה מתקדם, הוסף את מדד CSS, הצפה ואינדקס ה- CS הבאים.
- כיתת CSS: כפתור הנפתח
- הצפה אופקית: גלויה
- הצפה אנכית: גלויה
- מדד Z: 14
יש צורך בכיתת CSS כדי שנוכל למקד את CSS החיצוני שלנו בחלק זה בהמשך. יש להגדיר את הצפת הגלוי כך שנוכל לראות את התפריט הנפתח. ואינדקס Z יעזור לך לשמור על התפריט הנפתח מעל כל התוכן האחרים בדף.
תכנן את תפריט ה- Fulwidth
כעת אנו מוכנים לעצב את מודול התפריט Fulwidth. פתח את הגדרות תפריט רוחב מלא ועדכן את הדברים הבאים:
- צור קישורי תפריט ברוחב המלא: YES
- צבע טקסט נפתח: #ffffff
- צבע טקסט התפריט הנייד: #ffffff
- יישור הטקסט: מרכז
- צבע רקע של התפריט הנפתח: # 45b2ff
- צבע שורת התפריט הנפתח: #ffffff
- צבע רקע בתפריט: #45b2ff
- תפריט גופנים: קידוד ללא עיבוי למחצה
- משקל תפריט גופן: חצי מודגש
- צבע טקסט בתפריט: #ffffff
- גודל טקסט בתפריט: 16px
- מרווח תפריט: 2px
- הנפשה של התפריט הנפתח: הרחב
מקם את הלחצן הנפתח
כדי שהכפתור יחפוף את הגבול התחתון, עלינו להוסיף שוליים עליונים שליליים שהם בדיוק חצי מגובה הכפתור.
- שולי: -40.5px גבוה
כפי שאתה יכול לראות, מרחב הרחף עדיין לא תופס את כל אזור הכפתורים והתפריט הנפתח עדיין בצד ימין. כדי לפתור בעיה זו, אנו יכולים להוסיף CSS מותאם אישית.
הוספת CSS מותאם אישית
לפני הוספת ה- CSS המותאם אישית, הקפד להוסיף את מזהה ה- CSS "נפתח" לקטע הרוחב המלא (ולא למודול).
ללא מזהה CSS, CSS למטה לא יעבוד.
כדי להוסיף את ה- CSS המותאם אישית, פתח את הגדרות העמוד והדבק את הקוד הבא בתיבת הקלט המותאמת אישית של CSS.
כפתור. נפילה .et_pb_fullwidth_menu. fullwidth-menu-nav> ul {padding-top: 0px! חשוב; }. כפתור נפילה. תפריט fullwidth li> a {padding-bottom: 0px; קו גובה: 81 פיקסלים; } כפתור נפילה. תפריט fullwidth li li a {ריפוד: 6px 0px; קו גובה: 1.6em; }. כפתור נפילה .et_mobile_menu li a: רחף, .nav ul li a: רחף,. כפתור נפילה. תפריט רוחב מלא a: רחף {אטימות: 1; }. כפתור נפילה .et_pb_fullwidth_menu_fullwidth .et_pb_row {ריפוד: 0 0! חשוב; } כפתור נפילה. תפריט מלא רוחב li {תצוגה: חסום; }. כפתור נפילה. תפריט מלא רוחב. תפריט-יש-ילדים> a: ילד ראשון: אחרי {ימין: 20 פיקסלים; }
הנה התוצאה הסופית
מחשבות אחרונות
יצירת לחצן תפריט נפתח באמצעות מודול התפריט ברוחב מלא של Divi כוללת כמה שלבים מרכזיים. ראשית, אנו יוצרים את התפריט בוורדפרס אותו אנו רוצים לשלב במודול. לאחר מכן אנו משתמשים בבונה Divi עבור ומעצבים את מודול התפריט ברוחב מלא לפי טעמנו. לאחר מכן אנו מוסיפים CSS מותאם אישית לליטוש העיצוב הן על שולחן העבודה והן על הנייד. התוצאה היא תפריט נפתח יפהפה (ושימושי) המגולגל לרחף שולחני ולחיצה ניידת. מקווה שתמצאו בכך תוספת שימושית לערכת הכלים העיצובית שלכם.
