בוידג’ט תפריט ניווט באלמנטור אין אפשרות לשים תמונה לכל קישור בתפריט הניווט.
אם את רוצה לבחור תמונה לכל פריט בתפריט או רק לחלק מהם, אפשר פשוט להוסיף קצת קוד CSS לוידג’ט תפריט הניווט.
השלבים להוספת תמונה לכל פריט בוידג’ט תפריט באלמנטור
- חשוב מאוד! לחצי על וידג’ט תפריט ניווט > תוכן > מצביע (או Pointer) > None. כלומר, את בוחרת שלא להוסיף אנימציה לכפתור במעבר עכבר.
- לחצי על וידג’ט תפריט ניווט > מתקדם > CSS מותאם אישית > הדביקי את הקוד הבא
selector .elementor-item:before{
opacity: 1 !important;
position: relative !important;
}
selector .menu-item:nth-child(1) .elementor-item:before{
content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img1.svg') !important;
}
כעת יופיע לך בפריט הראשון בתפריט הניווט אייקון של בית. (האייקון מוצג מתוך אתר בו אני מקליטה קורסים)
שימי לב שבתוך הקוד יש מספר בסוגריים (בצבע סגול). המספר קובע לאיזה פריט בתפריט תתווסף התמונה
:nth-child(1)
בתוך הקוד מופיע גם URL לתמונה
url('https://chagitcourses.ussl.co.il/wp-content/uploads/img1.svg')
- העלי לאתר את התמונות או האייקונים שברצונך להוסיף לתפריט הניווט, והחליפי את הקישור בקוד לקישור לתמונה שלך (להחליף את הקוד הנמצא בתוך ‘המרכאות’).
- הוסיפי לקוד תמונות נוספות לפני הקישור השני, הקישור השלישי וכן הלאה. את יכולה לשכפל את הקוד לפי הצורך, רק אל תשכחי לשנות את המספר בסוגריים
selector .menu-item:nth-child(2) .elementor-item:before{
content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img2.svg') !important;
}
selector .menu-item:nth-child(3) .elementor-item:before{
content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img3.svg') !important;
}
selector .menu-item:nth-child(4) .elementor-item:before{
content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img4.svg') !important;
}
- כעת הוסיפי מרווח בפיקסלים בין התמונה לפריט בתפריט
selector .elementor-item{
gap: 10px !important;
}
עכשיו יש לך אייקון משלך בכל פריט בתפריט הניווט של אלמנטור!
טיפ: את יכולה להוסיף אייקון רק לפריט מסויים בתפריט הניווט. פשוט כתבי בסוגריים את המספר הנכון שלו בסדר של התפריט.
תצליחי :)
חגית
2 תגובות
יש אפשרות להוסיף איקון רק שהפריט בתפריט במצב פעיל?
כלומר שאם אני עכשיו לדוגמא בעמוד אודות רק ליד אודות בתפריט יופיע איקון? וכך כל פריט פעיל? ובמצב רגיל או מעבר עכבר לא יהיו איקונים בכלל?
תודה רבה!
שלום שרי.
יש אפשרות להוסיף אייקון לפריט בתפריט רק במצב פעיל, עם קוד CSS מותאם.
את האפשרויות הללו את יכולה ללמוד במועדון האלופות.
תצליחי המון,
חגית