ימים
שעות
דקות
שניות
הנחות בלאק פריידי על כל הקורסים באתר!

אפקט גלילה להדר – שקיפות בגלילה

הדרך הטובה ביותר לשנות את צבע הרקע של הheader לשקוף בגלילה, היא על ידי שינוי צבע הרקע מצבע אטום לצבע שקוף למחצה.

השלבים להוספת קוד CSS שיהפוך את צבע הרקע של האזור של ההדר לשקוף בגלילה

  1. קודם כל – בדקי שהוספת הגדרת Sticky נכונה להדר.
  2. בCSS מותאם אישית של האזור של ההדר, הדביקי את הקוד הבא:
.elementor-sticky--active{
    transition: all 0.5s ease !important;
}

.elementor-sticky--effects{
    background-color: #FFFFFF80 !important;
    transition: all 0.5s ease !important;
}
  1. כעת צבע הרקע (background-color) של האזור של ההדר יתחלף לך ללבן שקוף למחצה.
  2. את יכולה לבחור שצבע הרקע ישתנה לכל צבע שקוף שאת רוצה, או שקוף לגמרי.
  3. כדי לבחור צבע אחר, את צריכה את הקוד ההקסדצימלי שלו + קוד שקיפות (השתמשי בכלי להוספת שקיפות בקוד על מנת להוסיף שקיפות לצבע).

לדוגמה, הקוד ההקסדצימלי הבא מתאים לצבע שחור אטום:

#000000

ואם תוסיפי לו קוד 80 בסופו, הוא יהפך לשקוף למחצה:

#00000080

ואז עלייך להחליף בקוד CSS לעיל את הbackground-color לצבע השחור השקוף למחצה שיצרת, ככה:

.elementor-sticky--active{
    transition: all 0.5s ease !important;
}

.elementor-sticky--effects{
    background-color: #00000080 !important;
    transition: all 0.5s ease !important;
}

את יכולה להפוך את צבע הרקע של האזור של ההדר לשקוף לגמרי, על ידי שימוש בצבע רקע עם שקיפות מלאה כמו

#FFFFFF00

רק שעלייך לשים לב שההדר עדיין יהיה קריא וברור בגלילה על גבי העמודים באתר.

תצליחי,
חגית

2 תגובות

כתיבת תגובה

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

דילוג לתוכן