הדרך הטובה ביותר לשנות את צבע הרקע של הheader לשקוף בגלילה, היא על ידי שינוי צבע הרקע מצבע אטום לצבע שקוף למחצה.
השלבים להוספת קוד CSS שיהפוך את צבע הרקע של האזור של ההדר לשקוף בגלילה
- קודם כל – בדקי שהוספת הגדרת Sticky נכונה להדר.
- בCSS מותאם אישית של האזור של ההדר, הדביקי את הקוד הבא:
.elementor-sticky--active{
transition: all 0.5s ease !important;
}
.elementor-sticky--effects{
background-color: #FFFFFF80 !important;
transition: all 0.5s ease !important;
}
- כעת צבע הרקע (background-color) של האזור של ההדר יתחלף לך ללבן שקוף למחצה.
- את יכולה לבחור שצבע הרקע ישתנה לכל צבע שקוף שאת רוצה, או שקוף לגמרי.
- כדי לבחור צבע אחר, את צריכה את הקוד ההקסדצימלי שלו + קוד שקיפות (השתמשי בכלי להוספת שקיפות בקוד על מנת להוסיף שקיפות לצבע).
לדוגמה, הקוד ההקסדצימלי הבא מתאים לצבע שחור אטום:
#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 תגובות
הקוד הפך לי לשקוף את ההדר עוד לפני הגלילה (ושהוא הופך לסטיקי)
אני רוצה שיהפוך לשקוף אחרי גלילה של 100פיקסלים שזה הגובה של האזור של ההדר.
היי ברכי :)
תבדקי שהגדרת נכון את האפקט הסטיקי של ההדר. פה יש לך הדרכה מלאה: https://alufot.co.il/professional-answers/%d7%90%d7%99%d7%9a-%d7%90%d7%a4%d7%a9%d7%a8-%d7%9c%d7%92%d7%a8%d7%95%d7%9d-%d7%9c%d7%aa%d7%a4%d7%a8%d7%99%d7%98-%d7%94%d7%a2%d7%9c%d7%99%d7%95%d7%9f-header-%d7%91%d7%90%d7%aa%d7%a8-%d7%9c%d7%94/
תצליחי,
חגית