קו טקסט מחליף צבעים

18/09/2022

השלבים ליצירת מסגרת עם צבע מעבר מתחלף לטקסט חי

הוסיפי וידג’ט מסוג כותרת
תני לכותרת צבע ניגודי לרקע (אם הרקע שחור – תני לטקסט רקע לבן)
במתקדם > פריסה > רוחב > הגדירי “בתוך השורה“
במתקדם > CSS מותאם אישית > הדביקי את הקוד הבא

selector .elementor-heading-title{
    background-image: linear-gradient(270deg, #E73C6F, #2394D5, #2AF3B7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-stroke: 6px transparent !important;
}

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

עכשיו תני לכותרת צבע זהה לצבע של הרקע בעמוד
והנה – המסגרת מופיעה עם צבע מעבר מתחלף!

הוספת אנימציית מעבר “מוארת” לטקסט חי

במתקדם > CSS מותאם אישית > הדביקי את הקוד הבא

selector .elementor-heading-title{
    transition: all 0.3s ease !important;
}
selector .elementor-heading-title:hover{
    text-shadow: 0px 0px 20px #2AF3B7 !important;
}

וגם פה – את יכולה לשנות את הקוד כפי רצונך.

הקוד המלא לטקסט עם מסגרת מעברית + אנימציית מעבר מוארת

selector .elementor-heading-title{
    background-image: linear-gradient(270deg, #E73C6F, #2394D5, #2AF3B7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-stroke: 6px transparent !important;
    transition: all 0.3s ease !important;
}

selector .elementor-heading-title:hover{
    text-shadow: 0px 0px 20px #2AF3B7 !important;
}

תצליחי,
חגית