כותרות במעבר צבע באלמנטור

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

במדריך הזה אנחנו ב-YMDigital מראים איך עושים את זה צעד אחר צעד: הקוד הבסיסי, שינוי זווית, מעבר צבע על מילה אחת בלבד, עבודה בלי אלמנטור פרו, ואנימציה עדינה. בסוף תמצאו את התקלות הנפוצות ואיך פותרים אותן. אם אתם רוצים לראות עוד אפקטים מאותה משפחה, ריכזנו אותם במדריך אפקטי CSS לאלמנטור.

כך נראית כותרת במעבר צבע

איך עושים כותרת במעבר צבע באלמנטור?

גוררים ווידג'ט כותרת, ובלשונית "מתקדם" מדביקים בשדה "CSS מותאם" קוד שמגדיר רקע בגרדיאנט, חותך אותו לצורת האותיות והופך את צבע הטקסט לשקוף. התוצאה היא שהגרדיאנט נראה דרך האותיות בלבד.

• הקוד הבסיסי והסבר על כל שורה
• שינוי זווית וכיוון המעבר
• מעבר צבע על מילה אחת בתוך הכותרת
• הדרך לעשות את זה בלי אלמנטור פרו
• שלושה צבעים ואנימציה
• תקלות נפוצות ופתרונות

1. הקוד הבסיסי לכותרת בגרדיאנט

1.1 השלבים

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

1.2 הקוד

selector .elementor-heading-title {
  background-image: linear-gradient(90deg, #ff7be5, #4180e3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

בגרסה הקודמת של המדריך הקוד היה כתוב עבור תגית H2 בלבד, ולכן לא עבד כשהכותרת הוגדרה כ-H1 או H3. הקוד הזה פונה למחלקה שאלמנטור נותן לכל כותרת, והוא עובד בכל תגית.

1.3 מה כל שורה עושה

• background-image: יוצר רקע שעובר מהצבע הראשון לשני. את קודי הצבע מחליפים בצבעי המותג שלכם.
• background-clip: text: חותך את הרקע כך שהוא נראה רק בתוך צורת האותיות. הגרסה עם ‎-webkit-‎ נדרשת עבור ספארי.
• text-fill-color: transparent: הופך את מילוי האותיות לשקוף, כדי שהגרדיאנט שמאחוריהן ייראה.

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

1.4 חיבור לצבעים הגלובליים של האתר

אם הגדרתם באלמנטור צבעים גלובליים, אפשר להשתמש בהם ישירות בקוד במקום להקליד קודי צבע. אלמנטור שומר כל צבע גלובלי כמשתנה CSS, ולכן הגרדיאנט יתעדכן אוטומטית כשתשנו את צבעי המותג בהגדרות האתר:

background-image: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-accent));

שמות המשתנים של צבעי ברירת המחדל הם primary, secondary, text ו-accent. לצבעים שהוספתם בעצמכם יש מזהה ייחודי, ואפשר למצוא אותו בכלי המפתחים של הדפדפן.

2. שינוי זווית וכיוון המעבר

המספר הראשון בתוך linear-gradient הוא הזווית. הוא קובע מאיזה כיוון הצבעים מתחלפים:

• 90deg: מעבר לרוחב השורה.
• 180deg: מעבר מלמעלה למטה. מתאים לכותרות של כמה שורות.
• 40deg או 135deg: מעבר אלכסוני שנראה דינמי יותר.

selector .elementor-heading-title {
  background-image: linear-gradient(40deg, #ff7be5, #4180e3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

מעבר מלמעלה למטה, 180deg

מעבר אלכסוני, 135deg

טיפ לאתרים בעברית: הקריאה מתחילה מימין, ולכן העין פוגשת קודם את הצבע שבצד ימין. בזווית 90deg הצבע האחרון ברשימה הוא זה שמופיע בצד ימין, אז כדאי לשים שם את הצבע החזק או את צבע המותג הראשי.

3. מעבר צבע על מילה אחת בתוך הכותרת

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

3.1 בשדה הטקסט של הכותרת

בונים אתרים <span class="grad">שמביאים לקוחות</span>

3.2 בשדה CSS מותאם

selector .grad {
  background-image: linear-gradient(90deg, #ff7be5, #4180e3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

בונים אתרים שמביאים לקוחות

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

4. כותרת במעבר צבע בלי אלמנטור פרו

שדה ה-CSS המותאם ברמת הווידג'ט קיים רק באלמנטור פרו. בגרסה החינמית עובדים עם מחלקה:

• בווידג'ט הכותרת, בלשונית "מתקדם", כותבים בשדה "מחלקות CSS" את השם grad-title, בלי נקודה.
• בלוח הבקרה נכנסים ל"עיצוב", ל"התאמה אישית" ואז ל"CSS נוסף", ומדביקים את הקוד הבא.

.grad-title .elementor-heading-title {
  background-image: linear-gradient(90deg, #ff7be5, #4180e3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

5. שלושה צבעים ואנימציה

5.1 יותר משני צבעים

אפשר להוסיף כמה צבעים שרוצים, מופרדים בפסיק. אפשר גם לקבוע איפה כל צבע מתחיל באחוזים:

background-image: linear-gradient(90deg, #4F4FE5 0%, #ff7be5 50%, #01C5B5 100%);

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

5.2 גרדיאנט שזז

כדי שהצבעים יזרמו לאורך הכותרת, מגדילים את הרקע פי שניים ומזיזים אותו באנימציה אינסופית:

selector .elementor-heading-title {
  background-image: linear-gradient(90deg, #ff7be5, #4180e3, #ff7be5);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradMove 6s linear infinite;
}

@keyframes gradMove {
  to { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  selector .elementor-heading-title { animation: none; }
}

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

5.3 מעבר צבע רק במעבר עכבר

אפשרות עדינה יותר היא כותרת בצבע רגיל שמקבלת גרדיאנט רק כשעוברים עליה, למשל בכותרות שהן גם קישור. מגדירים את קוד הגרדיאנט תחת selector .elementor-heading-title:hover במקום בכלל הרגיל. כדי שהמעבר ירגיש חלק, אפשר להשתמש בטכניקת הרקע הכפול מסעיף 5.2 ולהזיז אותו רק ב-hover.

5.4 מתי לא להשתמש באנימציה

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

6. תקלות נפוצות ואיך פותרים אותן

6.1 הכותרת נעלמה

אם הדפדפן לא תומך ב-background-clip, הטקסט נשאר שקוף ולא רואים כלום. זה נדיר היום, אבל קל להתגונן מפני זה: מגדירים צבע רגיל, ומפעילים את הגרדיאנט רק כשיש תמיכה.

selector .elementor-heading-title {
  color: #4180e3;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  selector .elementor-heading-title {
    background-image: linear-gradient(90deg, #ff7be5, #4180e3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

6.2 רואים רק צבע אחד

כותרת היא אלמנט ברוחב מלא, ולכן הגרדיאנט נפרס על כל רוחב העמודה. בכותרת קצרה רואים רק את תחילת המעבר. הפתרון הוא להוסיף לקוד את השורה display: inline-block;, כך שהרקע יהיה ברוחב הטקסט בלבד.

6.3 קצה של אות נחתך

באותיות עם זנב, כמו ך, ן, ף או ץ, או בפונט נטוי, הקצה לפעמים יוצא מגבולות הרקע ונעלם. מוסיפים padding-bottom: 0.1em; או מגדילים מעט את גובה השורה.

6.4 הקוד לא משפיע

בדקו שהמילה selector מופיעה רק בשדה CSS מותאם של אלמנטור פרו, שלא נשארו מירכאות מעוגלות מהעתקה, ונקו את מטמון תוסף המהירות. ברוב המקרים אחת משלוש הבדיקות האלה פותרת את הבעיה.

6.5 סימון טקסט נראה מוזר

כשגולש מסמן בעכבר כותרת בגרדיאנט, לפעמים הטקסט המסומן נראה ריק. מוסיפים כלל עבור selector .elementor-heading-title::selection עם צבע רקע ו--webkit-text-fill-color בצבע מלא, והסימון יחזור להיראות כרגיל.

6.6 ניגודיות

גרדיאנט שמתחיל בצבע כהה ונגמר בצבע בהיר עלול להיות קריא רק בחלקו. בדקו את הניגודיות של הצבע הבהיר מול הרקע. עוד כללים תמצאו במדריך נגישות אתרים עם וורדפרס ואלמנטור.

סיכום

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

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

שאלות נפוצות על כותרות במעבר צבע באלמנטור

האם אפשר לעשות כותרת בגרדיאנט באלמנטור בלי קוד?

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

האם כותרת במעבר צבע פוגעת בקידום האתר?

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

האם הגרדיאנט עובד באייפון ובספארי?

כן. ספארי תומך באפקט, בתנאי שהקוד כולל את הגרסה עם הקידומת ‎-webkit-‎ של background-clip ושל text-fill-color, כמו בקודים במדריך. אם השמטתם את הקידומת, בספארי הכותרת עלולה להופיע כמלבן צבעוני במקום טקסט. לכן חשוב לבדוק את העמוד לפחות באייפון אחד לפני פרסום.

איך מחליפים את הצבעים של הגרדיאנט?

מחליפים את קודי הצבע שבתוך linear-gradient, למשל ‎#ff7be5 ו-‎#4180e3, בקודים של צבעי המותג שלכם. את הקוד המדויק של כל צבע אפשר להעתיק מבורר הצבעים של אלמנטור או מהגדרות הצבעים הגלובליות של האתר, או להשתמש ישירות במשתנים של הצבעים הגלובליים כמו בסעיף 1.4.

למה רואים רק צבע אחד בכותרת?

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