יצירת כותרת עם מילה בצבע שונה

כאשר יש בעיצוב כותרת שמופיעה בצבע אחד, ואני צריכה שמילה או אותיות מסויימות יהיו בצבע אחר – יש כמה דרכים לממש את הכותרת הזו באלמנטור. בפוסט הזה נכיר 2 דרכים שונות למימוש ההתנהגות הזו.

שימוש בווידג'ט עורך טקסט

באפשרותך להכניס את הטקסט באמצעות ווידג'ט של עורך טקסט. בתוך איזור הטקסט תוכלי לסמן את הטקסט ככותרת, ואז לסמן את קטע הטקסט שצריך לקבל צבע שונה, ולקבוע את הצבע שלו.

שימוש בווידג'ט כותרת

במידה ואת מעדיפה להשתמש בווידג'ט של כותרת, ולא בווידג'ט של עורך טקסט, גם זה אפשרי.

נניח שהכותרת היא "שלום לכל הקוראים". אני רוצה שהכותרת תהיה בצבע שחור, ורק המילה "קוראים" תהיה בצבע ירוק.

יש להכניס את הטקסט לתוכן של הווידג'ט באופן הבא:

שלום לכל ה
<span>קוראים</span>

בווידג'ט מסוג כותרת אין בעיה לשים אנטרים בתוכן, התוצאה תהיה ללא מעברי שורה.

מה שעשינו בשלב הזה – עטפנו את החלק השונה בתגית HTML שנקראת span. התכונה החשובה ביותר של span, היא שהוא מקבל כברירת מחדל display: inline. הגדרה זו אומרת שהספאן יעמוד כחלק בלתי נפרד מהטקסט שלפניו או אחריו, ולא יעבור שורה או ישפיע עיצובית על הכותרת.

עכשיו ניגש לCSS מותאם של הווידג'ט (נמצא בטאב "מתקדם"). ונוסיף את הקוד הבא:

selector .elementor-heading-title span{
   color: green;
}

מה שאומר הקוד הזה – קח את הspan שבתוך הכותרת, ותן לו צבע שונה. במקרה הזה – צבע ירוק. כמובן שתוכלי לתת איזה צבע שנדרש אצלך לפי העיצוב.

באופן הזה אפשר לתת עיצובים נוספים, לדוגמה שרק החלק הזה יהיה בפונט דק/עבה יותר, או יהיה בסוג פונט שונה וכו'.

עד כאן בינתיים. בהצלחה!