חשבתם פעם למה הגולשים נוטשים דפי נחיתה? לפעמים זה לא התוכן, אלא ה"חיכוך" הוויזואלי. במדריך הזה נלמד איך להפוך את תפריט ה-Off-Canvas של אלמנטור למהיר, חד ומקצועי.
כל מי שבונה אתרים באלמנטור מכיר את התסכול: עיצבתם תפריט צד (Off-Canvas) מושלם, הוספתם לו את כל האפשרויות, אבל ברגע האמת – הלחיצה על הכפתור מרגישה כמו תנועה בתוך דבש. האנימציה המובנית של אלמנטור נמשכת לעיתים מעל שנייה, ובעולם שבו כל מילי-שנייה קובעת, זה פשוט לא מספיק טוב.
הבעיה: כשהאנימציה נלחמת בחוויית המשתמש
כברירת מחדל, אלמנטור מגדירה זמני אנימציה ארוכים יחסית כדי ליצור תחושת "ריכוך". אבל בדפי נחיתה מודרניים, ובעיקר כאלו המבוססים על קישורי עוגן (Anchor Links), האיטיות הזו יוצרת בעיה: הגולש לוחץ על קישור בתפריט, הדף מתחיל לגלול למטה, אבל התפריט עדיין שם – חוסם את הנוף ומייצר תחושה של אתר "כבד".
הפתרון: CSS "עצבני" ואופטימיזציה חכמה
כדי להפוך את האתר שלנו למהיר באמת, אנחנו צריכים לעקוף את הגדרות ה-JS של אלמנטור ולהכריח את הדפדפן לעבוד בקצב שלנו. אנחנו מכוונים ל-200ms (0.2 שניות) – זהו "תור הזהב" שבו התנועה מרגישה מיידית אבל עדיין חלקה לעין.
שלב 1: הזרקת ה-CSS המאיץ
העתיקו את הקוד הבא אל הגדרות האתר (Site Settings) > CSS מותאם:
/* האצה דרמטית של פאנל התפריט - כניסה ויציאה */
.e-off-canvas__main {
-webkit-animation-duration: 200ms !important;
animation-duration: 200ms !important;
-webkit-transition-duration: 200ms !important;
transition-duration: 200ms !important;
/* תזמון תנועה חד ומדויק */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* האצת השקיפות של הרקע הכהה */
.e-off-canvas__overlay {
transition-duration: 200ms !important;
}
CSSשלב 2: סגירה אוטומטית בלחיצה (לדפי נחיתה)
כדי שהתפריט לא רק יהיה מהיר אלא גם חכם, נוסיף סקריפט קטן שסוגר אותו ברגע שלוחצים על קישור פנימי בדף. זה קריטי למניעת מצב שבו התפריט נשאר פתוח מעל התוכן:
JavaScript
jQuery(document).ready(function($) {
$(document).on('click', '.e-off-canvas a[href^="#"]', function() {
let $offCanvas = $(this).closest('.e-off-canvas');
let offCanvasId = $offCanvas.attr('id')?.replace('off-canvas-', '');
if (offCanvasId) {
window.dispatchEvent(new CustomEvent('elementor-pro/off-canvas/toggle-display-mode', {
detail: { id: offCanvasId, displayMode: 'toggle' }
}));
}
});
});
למה האופטימיזציה הזו קריטית ל-SEO שלכם?
מנועי חיפוש, ובראשם גוגל, נותנים ציון גבוה לאתרים שמגיבים מהר (Core Web Vitals). כשהאלמנטים הוויזואליים שלכם מגיבים בשבריר שנייה, ה-LCP וה-CLS שלכם משתפרים, מה שמוביל בסופו של דבר לדירוג טוב יותר ולעלייה באחוזי ההמרה.
טיפ של מקצוענים: אל תפחדו לרדת ל-150ms אם האתר שלכם נקי מאוד. זה נותן תחושה של אפליקציה מובנית ולא של דף אינטרנט רגיל.
צריכים דף נחיתה שלא רק נראה טוב, אלא גם טס?
אליצור ימיני, לא רק בונה אתרים אלא חושב חוויות משתמש. המומחיות שלי היא להפוך מערכות מורכבות כמו WordPress ואלמנטור למכונות ביצועים משומנות שמעלות את אחוזי ההמרה שלכם.
בין אם מדובר בבניית אתרים לעורכי דין, קליניקות או עסקי קפה, אנחנו משלבים טכנולוגיות מתקדמות כמו Crocoblock ו-JetEngine כדי לייצר פתרונות דינמיים ומותאמים אישית. הפרויקטים שלנו, כמו Kululoo (ספר אורחים דיגיטלי לאירועים), מוכיחים שחדשנות טכנולוגית ומהירות הולכות יד ביד.
הגיע הזמן שהאתר שלכם יתחיל לעבוד בשבילכם. צרו איתנו קשר לשיחת ייעוץ ובואו נבנה לכם דף נחיתה בסטנדרט של 2080