קורס סלע גרין ושות'

נבנה את הכפתור הנעה לפעולה בקצה הHeader בהתאם לעיצוב
נסיים להתאים את התוכן והעיצוב בחלק העליון
נבין איך להתמודד עם SVG שהצבע שהגדרנו לו לא עובד – עם CSS! כל השינוי היה להגדיר path. נמצא בקוד הCSS כאן תחת ההערה: "CTA Phone Svg Code"
נתאים את שאר האלמנטים וגם את ההנעה לפעולה שיש בחלק העליון של הHeader בעזרת CSS. גם כאן הבאתי לכם את הקוד. הוא תחת ההערה: "CTA Meeting Svg Code"
ודבר אחרון – הCSS האחרון עבור הפריטים של השעון, מייל וכתובת – נמצא תחת ההערה "List Items Style"

וקצת יותר בפירוט...

בשיעור "בניית Header – חלק 2", נמשיך את תהליך העבודה על ה-Header, עם דגש על השלמת עיצובו והתאמת האלמנטים השונים כך שיתאימו לעיצוב המקורי. תחילה נבנה את כפתור ההנעה לפעולה (Call-to-Action) שממוקם בקצה ה-Header. הכפתור יותאם בדיוק לתפיסת העיצוב, כדי למשוך את תשומת לב המשתמש ולחזק את היעדים המרכזיים של האתר.

לאחר מכן, נתמקד בהתאמת כל התוכן והעיצוב באזור העליון של ה-Header, כך שישתלבו בהרמוניה עם שאר האלמנטים באתר. נלמד כיצד לפתור בעיות צבע ב-SVG, במיוחד במקרים שבהם CSS אינו משפיע באופן צפוי. פתרון זה כולל שימוש בהגדרת path בקובץ ה-CSS, עם דוגמה זמינה בקוד תחת ההערה "CTA Phone Svg Code". נמשיך בהתאמת יתר האלמנטים, כולל כפתורי הנעה לפעולה נוספים, באמצעות CSS מדויק שזמין להורדה תחת ההערה "CTA Meeting Svg Code".

לבסוף, נתמקד בעיצוב הפריטים הקטנים, כגון השעון, כתובת המייל ופרטי הכתובת. עיצוב זה משלים את המראה המקצועי של ה-Header ומסייע למשתמשים לגשת למידע חיוני בקלות. קוד ה-CSS הרלוונטי לפריטים אלה נמצא תחת ההערה "List Items Style". השיעור הזה ממחיש כיצד ניתן להשתמש בכלי CSS חכמים ושיטות עיצוב מתקדמות ליצירת Header ייחודי, שממלא תפקיד משמעותי בחוויית המשתמש, כחלק מתהליך מקיף של לימודי בניית אתרים בוורדפרס.