עיצוב אחיד של האתר הינו כלי מרכזי המחבר את המשתמש למותג, משפר את חוויית המשתמש ומגביר את האמינות. בעבודה עם אלמנטור ניתן להגדיר צבעים גלובליים ופונטים גלובליים שיעשו סדר באתר — במקום להגדיר כל חלק בנפרד.
למה להגדיר צבעים ופונטים גלובליים?
- מיתוג אחיד – כאשר כל האתר משתמש באותם צבעים ופונטים ברורים, המשתמשים מזהים מיד את המותג וחווים תחושת אחידות.
- חיסכון בזמן – במקום לערוך עמודים רבים בנפרד, אתם מבצעים את השינוי רק במקום אחד – והעדכון מתרחש בצורה אוטומטית בכל חלקי האתר. לדוגמא במידה והמותג משנה צבע או פונט – אין צורך לערוך ידנית את כל האלמנטים השונים.
- קלות תחזוקה – כשיש לכם “מערכת עיצוב” (Design System) מאורגנת, זה מקל ליצירת שינויים עתידיים.
- שגיאות פחותות – אם כל אלמנט משתמש בהגדרות הנכונות כברירת מחדל, הסיכוי לשימוש באלמנט עם צבע שגוי או פונט שאינו מותאם יורד.
- גישה מקצועית לעיצוב – הגדרות גלובליות מהוות בסיס עיצובי שעליו ניתן לבנות אלמנטים מורכבים יותר תוך שמירה על עקביות.
איך מגדירים צבעים ופונטים גלובליים באלמנטור
גישה להגדרות האתר
- פתחו עמוד כלשהו דרך עורך אלמנטור
- מצד ימין למעלה, לחצו על האייקון הבא:
.
- בתפריט החדש שנפתח, נשתמש בשתי האופציות הראשונות: צבעים גלובליים, גופנים גלובליים.
הגדרת צבעים גלובליים
- בחרו באופציה הראשונה: צבעים גלובליים.
- כברירת מחדל קיימים באלמנטור 4 סוגי צבעים: ראשי, משני, טקסט, מודגש.
- שנו לצבע הרצוי.
- אם ברצונכם להוסיף צבע גלובלי חדש (מעבר ל-4 הקיימים), לחצו על ״הוספת צבע״. אוטומטית יופיע לנו צבע גלובלי חדש הנקרא ״פריט חדש #1״. שני קליקים על כותרת הצבע תפתח לכם את האופציה לשינוי השם.
- לאחר סיום העריכה לחצו על ״שמירת שינויים״
הגדרת גופנים גלובליים
- בחרו באופציה השניה: גופנים גלובליים.
- כברירת מחדל קיימים באלמנטור 4 סוגי גופנים: ראשי, משני, טקסט, מודגש.
- שנו לפונט הרצוי. יש לכם אפשרות לבחור סוג גופן, גודל, משקל וכל הגדרות הטיפוגרפיה הרגילות.
- אם ברצונכם להוסיף גופן גלובלי חדש (מעבר ל-4 הקיימים), לחצו על ״הוספת סטייל״. אוטומטית יופיע לנו גופן גלובלי חדש הנקרא ״פריט חדש #1. שני קליקים על כותרת הצבע תפתח לכם את האופציה לשינוי השם.
- לאחר סיום העריכה לחצו על ״שמירת שינויים״
שימוש בצבעים וגופנים גלובליים באתר
- היכנסו לעריכת דף באמצעות אלמנטור
- בחרו בווידג׳ט תוכן כלשהו, לדוגמא כותרת.
- בחרו בלשונית סטייל >> טיפוגרפיה/צבע >> לחצו על האייקון הגלובלי
>> בחרו בצבע המאתים או בגופן המתאים.
דגשים לעיצוב גלובלי
- הבדלה בין צבע טקסט לרקע – קבע צבע גלובלי לטקסט וצבע גלובלי לרקע אם יש.
- גמישות ניהולית – השתמש בשם ברור לצבע/פונט גלובלי כדי שצוות עתידי או עצמך יבין במה מדובר
- ניגודיות ונגישות – חשוב לוודא שהצבעים שבחרת נותנים קריאות טובה — לדוגמה טקסט כהה על רקע בהיר או להיפך.
- הקפדה על מרווחים / טיפוגרפיה אחידה – מעבר לפונט עצמו, הגדר גם גדלים אחידים כדי שהעיצוב יראה אחיד ומקצועי.
- העדפה של שימוש בגלובליים לפני הגדרות ידניות – כל אלמנט שאינו משתמש בהגדרה גלובלית הופך לניהול ידני שדורש תחזוקה בעתיד.
- בדיקה מראש במובייל – ודאו שהפונטים והצבעים נראים טוב גם במסכים קטנים, ושאין גופנים קטנים מידיד לקריאה בנייד או צבעים שאינם ברורים.
מגבלות שיש לקחת בחשבון
- יש לוודא שתבנית האתר (theme) לא דורסת את ההגדרות – מומלץ להשתמש בתבנית מומלצת לעבודה עם אלמנטור כמו Hello.
- שימוש יתר או הגדרה רחבה מדי יכולים לגרום לאי סדר ולבלבול.
- אם אלמנטים קיימים עוצבו ידנית עם צבעים או גופנים ספציפיים – העברת האתר להגדרות גלובליות מאוחר יותר עשויה לדרוש שינוי ידני של אותם אלמנטים. למשל אם הווידג’ט לא קושר לצבע גלובלי אלא מוגדר ידנית.
- כדי שהשינויים יופיעו – לעיתים יש צורך לנקות קאש, למחוק CSS שנוצר מראש, ולוודא שימוש בתבנית שלו דורסת את הגדרות הגלובליות.
מתי וכיצד להשתמש בהגדרות גלובליות בצורה מיטבית?
מתי הכי מתאים להגדיר אותם:
- בתחילת הבנייה – לפני עיצוב הדפים הראשיים. כך אתם מתחילים “בסדר” עיצובי שמנחה את כל האתר.
- בעת שדרוג מותג או שינוי צבעי מותג – במקום לעבור ידנית על כל אלמנט, שינוי גלובלי חוסך זמן.
- כאשר האתר מיועד להתרחבות – אז חשוב ליצור “שפת עיצוב” אחידה מראש.
כיצד להשתמש נכון:
- הגדר קודם צבעי מותג וגופנים גלובליים >> לאחר מכן בנה את הדפים תוך שימוש בהם.
- שנה את אחד הצבעים/גופנים גלובליים >> בדוק שהאלמנטים מתעדכנים אוטומטית.
- אם יש צורך בחריג – אל תשנה את הגלובל אלא צור סגנון גלובלי נוסף (הוספת סטייל) או שנה ידנית רק לאלמנט הספציפי.
- תוך שימוש בתבניות ובווידג׳טים – ודא שהם משתמשים בהגדרות גלובליות ולא בפורמטים קבועים.
- בצע בדיקות על מכשירים שונים ודפדפנים כדי לוודא שהכל נראה נכון.
הגדרת צבעים וגופנים גלובליים באלמנטור הינה אחת מהפעולות החשובות ביותר שתוכלו לקבל בעת בניית האתר. אתם תיצרו אחידותתמנעו בלבול עיצובי ברגעים הקריטיים. בעזרת הגדרת מערכת עיצוב מוצלחת, תוכלו לחסוך זמן עבודה, לשפר את המקצועיות ולהבטיח חוויית משתמש איכותית.
