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

במדריך זה נלמד כיצד בעזרת התוסף 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;
}
				
			

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

אבטחת אתר תמונה ראשית
עיצוב ופיתוח אתרים

אבטחת אתרי אינטרנט

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

עיצוב ופיתוח אתרים

בדיקות שעלינו לעשות לפני העלאת אתר לאוויר

מזל טוב! סיימתם בהצלחה את תהליך האפיון, העיצוב והפיתוח של האתר שלכם.
אבל מה עכשיו? מה עוד צריך לעשות כדי להשיק את האתר בצורה המיטבית ביותר?