שם השיעור: התאמה למובייל של דף הבית
אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: דף הבית
- בניית Hero Section (35:35)
- בניית כרטיס מוצר (35:07)
- סקשן מבצע קיץ ולמה אנחנו (37:03)
- סקשן מוצרים חדשים (36:32)
- סקשן השירותים שלנו (35:32)
- סקשן אודותינו (35:33)
- סקשן טיפים ומאמרים (35:51)
- סיום Footer ודף הבית בדסקטופ (35:20)
- בניית Header (34:57)
- התאמה למובייל של דף הבית (35:07)
מודול: הגדרות כלליות
- הגדרות שרת ויצירת אפליקציה (45:44)
- הגדרות גלובליות (34:51)
מודול: התאמה למובייל
- התאמה למובייל חלק 2 (33:00)
- התאמה למובייל (44:40)
- התאמה למובייל חלק 3 (34:05)
מודול: עמודי האתר
- התאמה למובייל של דף הבית (35:07)
- דף ארכיון השירותים שלנו (35:02)
- דף שירות בודד (34:44)
- דף בלוג ודף תוצאות חיפוש (35:02)
- דף מאמר בודד (34:46)
- דף שאלות נפוצות (33:25)
- דף אודות (35:23)
- דף יצירת קשר (33:58)
- דפים כלליים (33:49)
מודול: עמודי ווקומרס והרחבה נוספת
- דף החנות – חלק 2 (36:06)
- דף המוצר – חלק 1 (36:19)
- דף המוצר – חלק 2 (35:34)
- הסרת דף עגלה ושימוש בעגלה צפה (35:41)
- דף תשלום ותודה לאחר תשלום (34:01)
- דף אזור אישי (34:49)
- חיבורי לינקים (34:31)
- הגדרות ווקומרס (35:22)
- דף החנות – חלק 1 (36:03)
- הזמנות, לקוחות, דוחות ושיווק (34:35)
נו..? איך היה השיעור?
אחח חבל.. אם היית מנוי - היית יכול ללמוד ולדרג את השיעור!
מה נלמד בשיעור הזה?
- נבנה אסטרטגיה איך להתחיל את עיצוב המובייל ונפתח את תבנית הHeader להתחיל איתה
- נבצע מעט התאמות CSS בעזרת החוק @media
- נעבור לBody של דף הבית ונתאים רק את האלמנטים שנדרש להתאים אותם. אין צורך להשקיע איפה שלא צריך ולהתאים אלמנטים שכבר נראים מצוין במובייל.
- נתאים גם את הFooter וגם פה נדרש לבצע התאמות באמצעות @media
וקצת יותר בפירוט...
התאמת דף הבית למובייל היא שלב חיוני להבטחת חוויית משתמש איכותית ורספונסיבית. התהליך מתחיל ביצירת אסטרטגיה מסודרת שמנחה את סדר העבודה. ראשית, נתמקד בתבנית ה-Header, שכן זהו האזור הראשון שהמשתמשים רואים. נפתח את תבנית ה-Header ונבצע התאמות ייעודיות למובייל, תוך שימוש בעקרונות עיצוב רספונסיבי. מטרת השלב הזה היא לוודא שהניווט נגיש, הכפתורים גדולים מספיק למגע, וכל האלמנטים מסודרים בצורה אינטואיטיבית.
בהמשך, נעשה שימוש בחוקי CSS מותנים באמצעות @media, שמאפשרים לבצע התאמות מדויקות למסכים קטנים. לדוגמה, ניתן להקטין גופנים, לשנות ריווחים, או להתאים מיקומים של אלמנטים כך שיראו מושלם במובייל. לאחר מכן, נעבור לאזור ה-Body של דף הבית, שם נתמקד רק באלמנטים שדורשים התאמות. גישה ממוקדת זו חוסכת זמן ומשאבים, ומאפשרת לשמר עיצוב שכבר מתפקד היטב במובייל מבלי לבצע שינויים מיותרים.
לבסוף, נבצע התאמות גם ל-Footer של האתר, תוך שימוש חוזר ב-@media כדי לוודא שכל חלקי הפוטר נגישים ונראים טוב במובייל. חשוב לשמור על היררכיית מידע ברורה, כך שגם על מסכים קטנים האלמנטים הקריטיים כמו קישורים, פרטי יצירת קשר, ורשתות חברתיות יהיו בולטים ונגישים. התאמת האתר למובייל מדגישה את החשיבות של עיצוב רספונסיבי, שהוא חלק בלתי נפרד מבניית אתרי וורדפרס מקצועיים ומצליחים, ומהווה נושא מרכזי בלימודי בניית אתרים.