adminעורך התוכן פיקסל פרפקט בנוי על עבודה של שכבות (באנרים). שימו לב שלמערכת יש שני עורכי תוכן (פיקסל פרפקט ורספונסיב). עורך תוכן רפסונסיבי בנוי בצורה שונה ומתייחס לגריד (חלוקה של המסך ל12 טורים). בסרטון זה אנו לומדים על עורך התוכן pixel perfect.
על מנת שדף נחיתה שלכם יראה נקי וטוב כלומר שאלמנטים לא יעלו אחד על השני וגם שיתאפשר לכם גמישות מלאה בעיצוב חושב ללמוד לעבוד עם הבאנרים. הבאנרים מאפשרים לעצב כל חלק בעמוד בנפרד. טעות של מתחילים היא להוסיף את כל האלמטים של העמוד על באנר אחד בלבד, מה שלא מאפשר לשחק עם העיצוב של הדף.
על מה חשוב להקפיד - מכינים את התשתית לעבודה
לפני שאתם מתחילים לעצב את הדף, תחשבו על כמה אזורים יש לכם בעמוד. לכמה אזורים בעצם אתם רוצים לתת עיצבו שונה: לדוגמא אזור עם רקע של תמונה, או אזור עם רקע של צבע מסויים, אזור שהוא מחולק לשני טורים או יותר . כל אזור כזה יצריך מכם באנר נפרד שיהווה השכבר הראשונה של אותו אזור. על השכבר הזו יוספו אלמנטים שונים (טקטס, וידאו, קוד html, כפתורים וכולי)
באנרים אחד מתחת לשני ולא אחד מעל השני
זכרו באנרים זו השכבה הראשונה לכן חשוב להקפיד שהבאנרים לא יעלו אחד על השני. שימו לב שכשאתם מוסיפים באנרים יש לכם אפשרות להוסיף באנרים בכל מיני צבעים וזה כדי שבתחילת העיצוב תוכלו לזהות את השכבות השונות ואז לערוך אותן.
יש גם באנרים שהם אזורים ערוכים מראש וזאת כדי להקל עליכם את מלאכת העיצוב. אבל הרעיון אותו רעיון שכבת בסיס שעליה אלמנטים.
זהו באנר שהחלפנו את הצבע הדיפולטיבי שלו בתמונת רקע ועליו הוספנו אלמנט של תמונה.
דבר נוסף שחשוב להקפיד עליו שאלמנטים ששיכים לאזור מסויים לא יחרגו לאזור אחר אלא אם כן זה מתוכנן ככה עיצובית. מתי קשה לזהות את זה? כהבאנרים שלי הם כולם בצבע לבן ואז קשה לראות איזה אלמנט שייך לאיזה באנר/אזור לכן בשלב הראשוני של העיצוב מומלץ לתת לכל באנר צבע אחר כיד לזהות את האזורים השונים.