שם השיעור: סיום Footer ודף הבית בדסקטופ
אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: דף הבית
- בניית Header (30:26)
- בניית Hero Section (31:02)
- בניית כרטיס מוצר (30:26)
- סקשן מבצע קיץ ולמה אנחנו (32:19)
- סקשן מוצרים חדשים (31:57)
- סקשן השירותים שלנו (30:58)
- סקשן אודותינו (31:02)
- סקשן טיפים ומאמרים (31:16)
- סיום Footer ודף הבית בדסקטופ (30:48)
- התאמה למובייל של דף הבית (30:25)
מודול: הגדרות כלליות
- הגדרות שרת ויצירת אפליקציה (41:13)
- הגדרות גלובליות (30:22)
מודול: התאמה למובייל
- התאמה למובייל (39:57)
- התאמה למובייל חלק 2 (28:23)
- התאמה למובייל חלק 3 (29:34)
מודול: עמודי האתר
- התאמה למובייל של דף הבית (30:25)
- דף ארכיון השירותים שלנו (30:24)
- דף שירות בודד (30:00)
- דף בלוג ודף תוצאות חיפוש (30:27)
- דף מאמר בודד (30:09)
- דף שאלות נפוצות (28:50)
- דף אודות (30:33)
- דף יצירת קשר (29:23)
- דפים כלליים (29:12)
מודול: עמודי ווקומרס והרחבה נוספת
- דף החנות – חלק 1 (31:35)
- דף החנות – חלק 2 (31:31)
- דף המוצר – חלק 1 (31:43)
- דף המוצר – חלק 2 (31:01)
- הסרת דף עגלה ושימוש בעגלה צפה (31:03)
- דף תשלום ותודה לאחר תשלום (29:18)
- דף אזור אישי (30:16)
- חיבורי לינקים (29:48)
- הגדרות ווקומרס (30:43)
- הזמנות, לקוחות, דוחות ושיווק (30:00)
נו..? איך היה השיעור?
אחח חבל.. אם היית מנוי - היית יכול ללמוד ולדרג את השיעור!
מה נלמד בשיעור הזה?
- ניצור קונטיינר מחולק ל4 חלקים ונשתמש בflex-wrap כדי לעטוף את כל האלמנטים ככה שנחסוך קונטיינר נוסף
- נשתמש בCSS כדי למרכז את הפוטר
- לאחר שיצרנו את החלק התחתון של הפוטר נעבור לבניית החלק הצף העליון
- נשתמש בתחכום קל של צבע מתחלף (Gradient) עם מיקום מאופס לצבע המשני כדי ליצור אפקט של חצי צבע ללא החלפה חלקה.
וקצת יותר בפירוט...
סיום בניית ה-Footer ועיצוב דף הבית בגרסת הדסקטופ מהווה שלב חשוב בהשלמת חוויית המשתמש באתר מכירות. תכנון ה-Footer מתחיל ביצירת קונטיינר מחולק לארבעה חלקים, בהם ניתן לשלב פרטי מידע מרכזיים כמו תפריט ניווט, קישורים מהירים, פרטי יצירת קשר, ורשתות חברתיות. כדי לשמור על עיצוב מסודר ויעיל, נעשה שימוש ב-flex-wrap שמאפשר עטיפת אלמנטים בתוך הקונטיינר הראשי, מבלי הצורך בקונטיינר נוסף, מה שמוביל לעיצוב נקי ואופטימלי.
לאחר מכן, באמצעות CSS, נדאג למרכז את ה-Footer באופן שיבטיח שהוא ישתלב בצורה מקצועית עם שאר עיצוב האתר. פעולת המיקוד חשובה במיוחד בגרסת הדסקטופ, שכן היא תורמת לאיזון ויזואלי ומדגישה את האלמנטים החשובים. בהמשך, נעבוד על בניית החלק הצף העליון של ה-Footer, שמוסיף מימד עיצובי מתוחכם. החלק הצף הזה יכול לכלול כפתור חזרה למעלה או אלמנטים אינטראקטיביים אחרים, המעשירים את חוויית המשתמש.
כדי להוסיף מגע ייחודי ומודרני, נשלב אפקט של צבע מתחלף (Gradient) עם התאמה לצבע המשני של המותג. נעשה זאת עם מיקום מאופס ליצירת חצי צבע ללא מעבר חלק, אפקט שמעניק עומק ומראה מקצועי לפוטר. עיצוב זה, שמשלב פונקציונליות ואסתטיקה, מהווה דוגמה מצוינת לשימוש בטכניקות מתקדמות שנלמדות במסגרת קורס בניית אתרים או לימודי עיצוב אתרי וורדפרס, ומדגיש את היכולת ליצור חוויות משתמש מזמינות ומרשימות.