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

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

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

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

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

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

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

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.