ברוכים הבאים ל-LEMON!

קהילת LEMON הוקמה במטרה לשתף קטעי קוד (CSS, JS, PHP) ומדריכים שימושיים בין בוני אתרים באלמנטור.
באתר תוכלו למצוא מגוון קטעי קוד שונים שתוכלו לשלב באתרים שלכם. בנוסף, יעלו לאתר מדריכים מתקדמים בנושא אלמנטור, כלים ותוספים שקשורים לאלמנטור, ועוד מגוון מדריכים בנושא בניית אתרים.

הרשמו לניוזלטר

הרשמו עכשיו וקבלו עדכון מיידי בכל פעם שעולה תוכן חדש לאתר.

קבוצת LEMON בפייסבוק

אתם מוזמנים להצטרף!

שיפור חווית משתמש בשימוש בליסטינג גריד של ג'ט ע״י גלילה כפולה (Jet Engine)

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

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

שימו לב: גלילה כפולה מתאימה במידה והפריטים קטנים לדוגמא ליסטינג קטגוריות, בפריטים גדולים כדוגמת מוצרים החווית משתמש תפגע.

שלב 1 – הוספת ליסטינג גריד

בשלב הראשון תגררו ליסטינג גריד ותאפשרו את האופציה הבאה:

תבטלו את האופציה שזה יעבוד במחשב ותשאירו רק את הטבלאט והמובייל,

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

שלב 2 – התאמת הליסטינג עם קצת קוד

השלב הבא הוא להוסיף את ה – ID תחת טאב מתקדם:

second-section-jet

לאחר מכן תוסיפו את הקוד לcss מותאם:

@media (max-width:1024px){
    #second-section-jet  .jet-listing-grid__items {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;
    overflow-x: auto;
    }

#second-section-jet .jet-listing-grid__scroll-slider-mobile > .jet-listing-grid__items > .jet-listing-grid__item {
    min-width: 200px;
}
}Code language: CSS (css)

זוכרים שדיברנו על שרוחב בפריט ישבר?

אז בשורת הקוד הזאת תשחקו עם הפיקסלים עד שתגיעו לגודל הרצוי
  min-width: 200px;

בחלק מהמקרים יתווסף פס גלילה, תוכלו לבטל את זה ע”י הקוד:

#second-section-jet .jet-listing-grid__items::-webkit-scrollbar {
        display: none;
    }Code language: CSS (css)

וזהו, עכשיו שיפרנו את החווית משתמש באתר שלנו🙂

העתקת קישור

מוזמנים לשאול בפייסבוק!

7 תגובות

  1. וואו מדריך ממש מגניב, זה כמו באפליקציות של הגדולים,

    שאלה קטנה, האם יש אופציה לתת 3 שורות?

  2. תודה אחלה מאמר יצא לי פצצה
    רק אייך אני מגביל את העמודות גובהה למעלה ולמטה מתגלגל לי מעט

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

לשאלות / בקשות / בעיות / כל דבר אחר… צרו איתנו קשר :)

אודות כותב/ת הפוסט
תמונת-פרופיל
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
הרשמו לניוזלטר

הרשמו עכשיו וקבלו עדכון מיידי בכל פעם שעולה תוכן חדש לאתר.