מדריך: הדרך הפשוטה לייצר כותרת דביקה (Sticky Header) באמצעות אלמנטור

sticky-header-gif

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

אם הגעת לכאן כנראה שסיימת בהצלחה! במקרה ומצאת בעיה או נתקעת בשלב מסוים מוזמן לפנות אלינו

פוסטים נוספים

מה חשבת על הכתבה?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

השאר תגובה

גלילה למעלה