משתנה הוא בעצם כינוי לערך מסוים. לדוגמה, אם אני עובד על האתר שלי ואני רוצה שהטקסט יהיה בגופן Roboto, אני יכול ליצור משתנה בשם TextType ולהגדיר את הערך להיות Roboto. לאורך כל האתר שלי אני יכול להגדיר שהטקסט ישתמש במשתנה TextType. למרות שאני יכול להשיג את אותה התוצאה פשוט על ידי הגדרת הגופן ל-Roboto, היתרון בשימוש במשתנה הוא שאם אני אשנה את דעתי ואחליט להשתמש בגופן Arial במקום Roboto, אני יכול פשוט לשנות את המשתנה TextType ל-Arial והשינוי ייכנס לתוקף בכל האתר.
ליצירת משתנה:
משתנים מוגבלים כרגע למשפחת גופנים וצבע טקסט. בדוגמה למטה, ניצור משתנה של משפחת גופנים.
- פתח את עורך האלמנטור.
- גרור רכיב פסקה לקנבס.
- לחץ על הלשונית סגנון.
- פתח את השדה טיפוגרפיה.
- בשדה משפחת גופנים, לחץ על סמל המשתנה
. 
- אם זה המשתנה הראשון שאתה יוצר, לחץ על צור משתנה. אם זה לא המשתנה הראשון שלך, לחץ על סמל הפלוס בחלון הקופץ של המשתנה.
- תן שם למשתנה שלך. במקרה הזה, נקרא למשתנה Paragraph_text.
- הזן Arial בשדה ערך.
- לחץ על שמור.
לעריכת משתנה:
בדוגמה הזו, נערוך את המשתנה שיצרנו למעלה, ונשנה את סוג הגופן ל-Roboto.
- פתח את השדה טיפוגרפיה כמתואר למעלה.
- רחף מעל השדה משפחת גופנים.
- לחץ על סמל המשתנה.
- רחף מעל המשתנה שאתה רוצה לערוך.
- לחץ על סמל העיפרון ליד שם המשתנה.
- ערוך את השם ו/או הערך.
- במקרה הזה, נשנה את הערך ל-Roboto.
- לחץ על שמור.
במקום שבו המשתנה Paragraph_text נמצא בשימוש באתר, הגופן יעבור ל-Roboto.
משתנים ומחלקות
מחלקות משלבות מספר סגנונות למחלקה אחת כדי לעזור להאיץ את בניית האתר. למידע נוסף על מחלקות, ראה מחלקות באלמנטור. משתנים יכולים להיות חלק ממחלקה.
בדוגמה למטה, ניצור מחלקה הכוללת משתנה.
- פתח את עורך האלמנטור.
- צור משתנה בשם Paragraph_font עם משפחת הגופנים Roboto. ראה צור משתנה למעלה לפרטים.
- גרור רכיב כותרת לקנבס.
- בחלק עיצוב של הרכיב, צור מחלקה Heading_txt. ראה מחלקות באלמנטור לפרטים.
וודא שאתה עורך את המחלקה Heading_txt.
- פתח את השדה טיפוגרפיה.
- הגדר את גודל הגופן ל-72 PX.
- ב-משפחת גופנים, לחץ על סמל המשתנה וצור משתנה בשם Heading_font והגדר את משפחת הגופנים ל-Arial.
- הוסף כותרת שנייה מתחת לראשונה ותן לה את המחלקה Heading_txt.
שתי הכותרות אמורות להופיע עם גופן Arial בגודל 72 PX. - בכותרת השנייה, לחץ על המחלקה Heading_txt כך שתערוך את המחלקה הזו, והחלף את משפחת הגופנים למשתנה Paragraph_txt.
שתי הכותרות אמורות כעת להציג את גופן Roboto מכיוון שהמשתנה Paragraph_txt הוא חלק מהמחלקה Heading_txt.
