שתפו את הפוסט

Facebook
LinkedIn
Twitter
Email

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

שינוי אייקון לטקסט חי

שינוי אייקון המבורגר למילה ״תפריט״.

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

.elementor-menu-toggle i:before {
content: 'תפריט';
}

שינוי אייקון פתיחה של אלמנטור למילה ״תפריט״

שינוי אייקון X למילה ״סגירה״

.elementor-menu-toggle.elementor-active i:before {
content: 'סגירה';
}

שינוי אייקון המבורגר לאייקון מותאם אישית

שימו לב, במידה ותרצו לשנות האייקון ברירת מחדל אשר מגיע עם אלמנטור באייקון שלכם, יש לעלות אותו למדיה דרך ממשק הניהול.
במידה ואתם מעלים קובץ SVG, יש לרשום גובה ורוחב כפי הקוד למטה. כמובן ממליץ להתאים את הגובה והרוחב לפי העיצוב שלכם.
*לא לשכוח לשנות את כתובת הURL בהתאם לאתר שלכם.

.elementor-menu-toggle i:before {
display: block;
width: 28px; /* רוחב האייקון */
height: 28px; /* גובה האייקון*/
background: url(https://itdesign.co.il/wp-content/uploads/2019/07/menu-filled.svg); /* קישור ישיר לקובץ שלנו*/
background-size: cover;
background-repeat: no-repeat;
}

שינוי כפתור הX לאייקון מותאם אישית

.elementor-menu-toggle.elementor-active i:before {
display: block;
width: 26px; /* רוחב האייקון */
height: 26px;  /* גובה האייקון*/
background: url(https://itdesign.co.il/wp-content/uploads/2019/07/menu-filled.svg); /* קישור ישיר לקובץ שלנו*/
background-size: cover;
background-repeat: no-repeat;
}
שינוי אייקון תפריט באלמנטור

סיכום

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

תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

דילוג לתוכן