בתור בוני אתרים, יוצא לנו לא מעט להשתמש ב-CSS בשביל להחיל עיצוב שאין לנו אפשרות להחיל עם אלמנטור.
הבעיה מתחילה כשאנחנו כותבים CSS בצורה שהיא hard-coded שלא מתחברת עם המשתנים הגלובליים שהגדרנו לתבנית ברגע שהתחלנו לבנות את האתר.
איך להגדיר צבע לחלק מהכותרת בעזרת CSS
בואו נקח לדוגמא מצב די פשוט שבו אנחנו רוצים להדגיש חלק מכותרת שיצרנו בעזרת אלמנטור. בדרך כלל מה שנעשה יהיה להקיף את המילה שאנחנו רוצים בתגית <span> וללכת ל-Custom Css של האלמנט ולהוסיף משהו כמו הקוד הבא:
selector span {
color: #55a0fd;
}
זה יעבוד, הכל טוב ויפה, אבל זה מה שנקרא hard-coded. הוספנו את הצבע שאנחנו רוצים והוא לא יזוז.
מה הבעיה ב-css hard-coded?
הבעיה מתחילה במצב שאנחנו רוצים לחזור אחרי זמן מסויים ולהתאים קצת את הצבעויות של האתר, הפונטים, או כל משתנה גלובלי אחר.
במצב הזה, הצבע שהגדרנו יישאר כפי שהוא למרות ששינינו את ה-Global Colors באלמנטור.
בשביל להמנע מזה, נרצה להשתמש במשתנים סביבתיים של CSS ובעזרתם למשוך מתוך הגדרות העמוד שלנו את הצבעוניות, פונטים, גדלים ושאר הגדרות שמוגדרות לנו ב-Default Kit של אלמנטור.
var, נעים להכיר
למזלנו, יוצרי CSS כבר חשבו על פתרון לנושא הזה ויצרנו את המושג שנקרא CSS variable או בעברית ״משתני CSS״.
אנחנו יכולים להגדיר על העמוד את המשתנים שאנחנו רוצים שימצאו בו, במקרה שלנו כבוני אתרים באלמנטור, זה קורה בצורה אוטומטית על ידי הגדרות צבעים ופונטים גלובליים.
לאחר שהגדרנו, אנחנו יכולים לשלוף אותם בצורה קלילקה באמצעות הפרופרטי var.
ככה זה נראה בקוד:
selector span {
color: var( --e-global-color-primary );
}
מה שזה עושה, זה מושך את הצבע הגלובלי שהגדרנו כ-Primary אל תוך ה-CSS שלנו בצורה דינאמית.
במידה ונשמה את הערך ב-Primary דרך אלמנטור, גם הצבע של ה-span שלנו ישתנה.
איזה משתנים גלובליים יש לנו באלמנטור?
נכון לכתיבת מאמר זה, יש לנו מאלמנטור את המשתנים הבאים:
- כל הצבעים הגלובליים
- גודל פונט
- משפחות פונטים
- גובה שורה
- מרווח בין אותיות
כדי לאתר את המשתנים ושמותיהם, אפשר לגשת ל-inspect element ולראות את כולם תחת elementor-kit (יש הדגמה בסרטון).
בשביל להקליל את כל האירוע, הכנתי גם טבלה שמרכזת את השמות של כל המשתנים בגזרת הצבעוניות:
סוג הערך | שם המשתנה |
צבע Primary | --e-global-color-primary |
צבע Secondary | --e-global-color-secondary |
צבע טקסט רץ | --e-global-color-text |
צבע מודגש | --e-global-color-accent |
וטבלה נוספת לכל המשתנים בגזרת הפונטים הגלובליים:
סוג הערך | שם המשתנה |
משפחת פונט Primary | --e-global-typography-primary-font-family |
גודל פונט Primary | --e-global-typography-primary-font-size |
משקל פונט Primary | --e-global-typography-primary-font-weight |
גובה שורה פונט Primary | --e-global-typography-primary-line-height |
הדגשתי את Primary כי את אותו הסט יש עבור כל סוג פונט (secondary, text, accent) לבחירתכם.