שם השיעור: בניית Header – חלק 1
אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: בניית דף הבית
מודול: דפים פנימיים
מה נלמד בשיעור הזה?
- נבנה אסטרטגיה לבניית הHeader שלנו על ידי הבנה של עיצוב האתר בFigma
- נמקם את כל האלמנטים שלנו ללא יצירת עיצוב ובהתאם לרוחב של כל אלמנט מהעיצוב
- נוריד את האייקונים מהFigma בפורמט SVG ונתאים את הקוד שלהם בצורה פשוטה על ידי הזנת currentColor בתוך כל מאפייני הfill. נבצע את זה בעזרת VS Code (שיעור על VS Code כאן למי שפספס).
- נכיר את הכלי המדהים SVGO ואיך להשתמש בו
- ניצור תפריט דמו ונשתמש בו בHeader שלנו
- נחליף בעזרת CSS את האייקון של החיפוש. קוד הCSS נמצא פה לנוחיותכם
וקצת יותר בפירוט...
בשיעור "בניית Header – חלק 1", נעסוק בהנחת יסודות ליצירת אזור ה-Header באתר, תוך שמירה על עקרונות עיצוב מותאמים ומתקדמים. נתחיל בגיבוש אסטרטגיה המבוססת על עיצוב האתר כפי שמוצג בקובץ Figma. האסטרטגיה תתמקד במיקום האלמנטים השונים, תוך שמירה על יחסים נכונים בין הרוחבים, בהתאמה מלאה לעיצוב המקורי, אך ללא יצירת עיצוב חדש בשלב זה.
במסגרת השיעור, נוריד את האייקונים הנדרשים בפורמט SVG ישירות מתוך קובץ ה-Figma. כדי להבטיח גמישות עיצובית ושימוש יעיל, נתאים את הקוד שלהם על ידי הוספת הערך "currentColor" למאפייני ה-fill, מה שיאפשר שליטה בצבע דרך CSS בלבד. העבודה תתבצע בעזרת עורך הקוד VS Code, כלי חשוב בתהליך בניית אתרים ב-WordPress, עם קישור לשיעור נוסף על השימוש בו למי שזקוק לרענון.
בהמשך, נכיר את הכלי SVGO, שמאפשר אופטימיזציה לקבצי SVG באופן קל ופשוט, ובכך משפר את ביצועי האתר. לאחר מכן, ניצור תפריט דמו שיוטמע באזור ה-Header, ונשדרג את אייקון החיפוש בעזרת CSS מותאם. קוד ה-CSS זמין לנוחותכם כדי לייעל את התהליך. שלב זה הוא קריטי להקמת Header מקצועי ומעוצב, המשלב פונקציונליות ונראות מושלמת כחלק מתהליך לימוד בניית אתרים בוורדפרס.