ימים
שעות
דקות
שניות
הזדרזי! המבצע בתוקף עד 04.04.2024

איך מוסיפים אייקון לכל קישור בוידג’ט תפריט ניווט של אלמנטור?

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

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

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

  1. חשוב מאוד! לחצי על וידג’ט תפריט ניווט > תוכן > מצביע (או Pointer) > None. כלומר, את בוחרת שלא להוסיף אנימציה לכפתור במעבר עכבר.
  2. לחצי על וידג’ט תפריט ניווט > מתקדם > 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') 
  1. העלי לאתר את התמונות או האייקונים שברצונך להוסיף לתפריט הניווט, והחליפי את הקישור בקוד לקישור לתמונה שלך (להחליף את הקוד הנמצא בתוך ‘המרכאות’).
  2. הוסיפי לקוד תמונות נוספות לפני הקישור השני, הקישור השלישי וכן הלאה. את יכולה לשכפל את הקוד לפי הצורך, רק אל תשכחי לשנות את המספר בסוגריים
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;
}
  1. כעת הוסיפי מרווח בפיקסלים בין התמונה לפריט בתפריט
selector .elementor-item{
    gap: 10px !important;
}

עכשיו יש לך אייקון משלך בכל פריט בתפריט הניווט של אלמנטור!

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

תצליחי :)
חגית

2 תגובות

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

כתיבת תגובה

הדרכות נוספות שיכולות לעזור לך

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

איך אפשר להוסיף כפתור סגירה או כפתור חזרה בתוך עמוד רגיל, כך שיראה כמו פופאפ?

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

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

אלופה, יש לך רעיונות מבריקים?

האם יש אפשרות ליצור בלוג אחד המכיל בתוכו גם פוסטים רגילים וגם פוסטים מוגנים בסיסמה?

אני בונה את האתר ורוצה לבחור שהפוסט יהיה מאת מישהו אחר. איך אפשר לבחור כותב אחר לפוסט?

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

כלים אלופים

10 כלים מומלצים
שיעזרו לך לעבוד מהר יותר
דילוג לתוכן