תוכן עיניינים
הקדמה
במאמר הזה תלמדו כיצד ליצור סטיקי האדר שקוף, אשר בגלילה משנה צבע ומתכווץ ע"י הקטנת הלוגו.
על מנת לעשות זאת, יש צורך בשני דברים מקדימים:
- ידע בסיסי בפיתוח בוורדפרס (אין צורך ידע מוקדם בקוד)
- התוסף אלמנטור פרו חייב להיות מותקן – קישור להתקנה
סדר הפעולות
1. הכינו את ההאדר עליו תרצו לעבוד
2. כעת, הגדירו את האזור כ-Sticky:
- עריכת אזור
- מתקדם
- אפקטי תנועה
3. הגדירו את כל האלמנטים שבאזור (לוגו לדוגמה) בתוך השורה במרכז. עשו זאת תחת:
- עריכת אלמנט
- מתקדם
- מיקום
4. תנו Class ללוגו שלכם.
ניתן לבחור ב"logo". נעשה זאת כדי שבקוד שנטמיע נוכל לזהות את הלוגו שאותו נרצה לכווץ.
5. לבסוף העתיקו את הקוד לCustom CSS תחת:
- עריכת אזור ההאדר
- מתקדם
- Custom CSS
מוזמנים לשחק עם הקוד ולשנות את הגודל של הלוגו המכווץ, את הצבע של הרקע של ההאדר וכו'.
selector.elementor-sticky--effects {
background-color: rgba(0,0,0,0.2)!important
}
selector {
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container {
min-height: 70px;
}
selector > .elementor-container {
transition: min-height 1s ease !important;
}
.logo img {
max-width: 150px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo img {
max-width: 60px;
height: auto;
}
