בפוסט וידאו זה נלמד כיצד ליצור הדר משתנה בגלילה, באמצעות אלמנטור + אלמנטור פרו.
כמו כן, נצלול טיפה יותר לעומק בכל הקשור להתאמה למובייל ונלמד כיצד להשתמש בקוד על מנת להכיל אפקטים מסויימים לפי גודל המסך בו צופים באתר.
כדי ליצור את ההאדר, תצטרכו 2 תוספים: אלמנטור ואלמנטור פרו.
אם עדיין לא רכשתם אלמנטור פרו, תוכלו לעשות זאת מהקישור הנ"ל (זהו קישור אפילייט, מה שאומר שכאשר אתם רוכשים דרכו, אני מרוויח כמה שקלים): https://be.elementor.com/visit/?bta=8704&nci=5383
התבנית בה השתמשתי היא hello ועיצוב העמוד הוא מערכת נושא בשם Dog Grooming אותה הורדתי בחינם באמצעות התוסף Envato Elements.
זה הקוד אשר עשיתי בו שימוש בסרטון:
@media (min-width: 768px) {
selector{
transition: all 1s ease !important;
opacity : 0;
height: 0;
}
selector.elementor-sticky--effects{
background-color: #fff !important;
opacity: 1;
height: auto;
}
}
/**RESIZE LOGO IMG **/
selector .logo img {
transition: all 0.5s ease;
}
selector.elementor-sticky--effects .logo img {
max-width: 60%;
margin: auto;
}
5 תגובות. Leave new
וואו, מדהים!
הבהירות שלך נדירה
תודה רבה רפאל
מתנצל, אבל רק עכשיו ראיתי את התגובה..
היי עופר,
עשיתי כהדרכתך, אבל החלטתי להחיל את ההדר המשתנה גם על המובייל, ככה שזה יעבוד על כל הכלים.
הכל עובד פיקס, תודה רבה!
בעיה קטנה: בהדר יש לי ווידג'ט של רשימת אייקונים שאמורים למעשה לשמש כלינקים. בעוד שבהדר הראשי הכל עובד יופי, בהדר הנסתר (הסטיקי), זה פשוט לא עובד. האייקונים לא הופכים להיות קליקביליים?
מה יכולה להיות הבעיה?
ושוב תודה על הכל! אתה מחכים בהדרכותיך
היי עופר!!!!
כנראה שהסתדרתי!!! איזה כיף!!!!
נתתי לווידג'ט של רשימת האייקונים z-index גבוה ופתאום זה הפך להיות קליקבילי.
לא חשבתי על זה מההתחלה משום שזה לא נדרס, האייקונים היו נראים אבל לא הגיבו.
שרפתי על זה אתמול יום שלם….
אלוף! בדיוק באתי לכתוב לך שתשלח את הקישור כדי לבדוק.
זה מאוד מתסכל לשרוף על הדברים האלו כל כך הרבה זמן, יחד עם זאת זו הדרך הכי טובה ללמוד. והסיפוק במציאת פיתרון לבד שווה את זה.
כל הכבוד!