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

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

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

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

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

לפני השינוי – חיצי ניווט ברירת מחדל
אחרי השינוי – חיצי ניווט שאנחנו בחרנו

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

בשלב הראשון נעלה לטאב המדיה באתר את החץ שבחרנו ונעתיק את כתובת ה -URL שלו.
לאחר מכן נעבור לווידג'ט המלצות > מתקדם > CSS מותאם ונדביק את הקוד הבא:

CSS

selector .elementor-swiper-button-prev{
    content: url("https://your-domin/wp-content/uploads/2024/01/Arrow-15.svg");
    transform: rotate(0deg);
    width: 38px;
}

selector .elementor-swiper-button-next{
    content: url("https://your-domin/wp-content/uploads/2024/01/Arrow-15.svg");
    transform: rotate(-180deg);
      width: 38px;
}

החלפת חיצי הניווט בווידג'ט ליסטינג של ג'ט אנג'ין – קרוקובלוק

בשלב הראשון נעלה לטאב המדיה באתר את החץ שבחרנו ונעתיק את כתובת ה -URL שלו.
לאחר מכן נעבור לווידג'ט ליסטינג גריד של 'אלמנטור ג'ט אנג> מתקדם > CSS מותאם ונדביק את הקוד הבא:

CSS

selector .jet-listing-grid__slider-icon.next-arrow{
    content: url("https://your-domin/wp-content/uploads/2024/01/Arrow-15.svg");
    transform: rotate(0deg);
    width: 38px;
}

selector .jet-listing-grid__slider-icon.prev-arrow{
    content: url("https://your-domin/wp-content/uploads/2024/01/Arrow-15.svg");
    transform: rotate(-180deg);
      width: 38px;
}

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

כתיבת תגובה

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

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
חיפוש חופשי
חיפוש חכם ע"י AI (בהרצה)
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).