מדריך ליצירת האדר מתכווץ בגלילה באמצעות אלמנטור

במדריך זה נלמד כיצד בעזרת התוסף Elementor Pro בלבד ניתן לייצר סטיקי האדר עם לוגו מתכווץ.

תוכן עיניינים

הקדמה

במאמר הזה תלמדו כיצד ליצור סטיקי האדר שקוף, אשר בגלילה משנה צבע ומתכווץ ע"י הקטנת הלוגו.

על מנת לעשות זאת, יש צורך בשני דברים מקדימים:

  • ידע בסיסי בפיתוח בוורדפרס (אין צורך ידע מוקדם בקוד)
  • התוסף אלמנטור פרו חייב להיות מותקן – קישור להתקנה
 

סדר הפעולות

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;
}
				
			

מדריכים נוספים חמים מהתנור