שם השיעור: התאמה למובייל של דף הבית
אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: דף הבית
- סקשן טיפים ומאמרים (28:03)
- סיום Footer ודף הבית בדסקטופ (27:39)
- בניית Header (27:18)
- בניית Hero Section (27:48)
- בניית כרטיס מוצר (27:09)
- סקשן מבצע קיץ ולמה אנחנו (28:45)
- סקשן מוצרים חדשים (28:43)
- סקשן השירותים שלנו (27:43)
- סקשן אודותינו (27:52)
- התאמה למובייל של דף הבית (27:08)
מודול: הגדרות כלליות
- הגדרות שרת ויצירת אפליקציה (37:56)
- הגדרות גלובליות (27:20)
מודול: התאמה למובייל
- התאמה למובייל (36:30)
- התאמה למובייל חלק 2 (25:26)
- התאמה למובייל חלק 3 (26:20)
מודול: עמודי האתר
- התאמה למובייל של דף הבית (27:08)
- דף יצירת קשר (26:17)
- דפים כלליים (26:05)
- דף ארכיון השירותים שלנו (27:10)
- דף שירות בודד (26:36)
- דף בלוג ודף תוצאות חיפוש (27:11)
- דף מאמר בודד (26:55)
- דף שאלות נפוצות (25:55)
- דף אודות (27:07)
מודול: עמודי ווקומרס והרחבה נוספת
- חיבורי לינקים (26:26)
- הגדרות ווקומרס (27:27)
- דף החנות – חלק 1 (28:22)
- דף החנות – חלק 2 (28:14)
- דף המוצר – חלק 1 (28:25)
- דף המוצר – חלק 2 (27:49)
- הסרת דף עגלה ושימוש בעגלה צפה (27:48)
- דף תשלום ותודה לאחר תשלום (25:54)
- דף אזור אישי (27:07)
- הזמנות, לקוחות, דוחות ושיווק (26:46)
נו..? איך היה השיעור?
אחח חבל.. אם היית מנוי - היית יכול ללמוד ולדרג את השיעור!
מה נלמד בשיעור הזה?
- נבנה אסטרטגיה איך להתחיל את עיצוב המובייל ונפתח את תבנית הHeader להתחיל איתה
- נבצע מעט התאמות CSS בעזרת החוק @media
- נעבור לBody של דף הבית ונתאים רק את האלמנטים שנדרש להתאים אותם. אין צורך להשקיע איפה שלא צריך ולהתאים אלמנטים שכבר נראים מצוין במובייל.
- נתאים גם את הFooter וגם פה נדרש לבצע התאמות באמצעות @media
וקצת יותר בפירוט...
התאמת דף הבית למובייל היא שלב חיוני להבטחת חוויית משתמש איכותית ורספונסיבית. התהליך מתחיל ביצירת אסטרטגיה מסודרת שמנחה את סדר העבודה. ראשית, נתמקד בתבנית ה-Header, שכן זהו האזור הראשון שהמשתמשים רואים. נפתח את תבנית ה-Header ונבצע התאמות ייעודיות למובייל, תוך שימוש בעקרונות עיצוב רספונסיבי. מטרת השלב הזה היא לוודא שהניווט נגיש, הכפתורים גדולים מספיק למגע, וכל האלמנטים מסודרים בצורה אינטואיטיבית.
בהמשך, נעשה שימוש בחוקי CSS מותנים באמצעות @media, שמאפשרים לבצע התאמות מדויקות למסכים קטנים. לדוגמה, ניתן להקטין גופנים, לשנות ריווחים, או להתאים מיקומים של אלמנטים כך שיראו מושלם במובייל. לאחר מכן, נעבור לאזור ה-Body של דף הבית, שם נתמקד רק באלמנטים שדורשים התאמות. גישה ממוקדת זו חוסכת זמן ומשאבים, ומאפשרת לשמר עיצוב שכבר מתפקד היטב במובייל מבלי לבצע שינויים מיותרים.
לבסוף, נבצע התאמות גם ל-Footer של האתר, תוך שימוש חוזר ב-@media כדי לוודא שכל חלקי הפוטר נגישים ונראים טוב במובייל. חשוב לשמור על היררכיית מידע ברורה, כך שגם על מסכים קטנים האלמנטים הקריטיים כמו קישורים, פרטי יצירת קשר, ורשתות חברתיות יהיו בולטים ונגישים. התאמת האתר למובייל מדגישה את החשיבות של עיצוב רספונסיבי, שהוא חלק בלתי נפרד מבניית אתרי וורדפרס מקצועיים ומצליחים, ומהווה נושא מרכזי בלימודי בניית אתרים.