תמונת רקע בתוך טקסט באלמנטור

תמונה בתוך טקסט יכולה להיות כלי רב עוצמה להעברת מסר חזותי.

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

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

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

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

אז איך מוסיפים תמונת רקע לטקסט באלמנטור

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

CSS
.elementor-heading-title { 
  background-image: url("");
  background-position: center center;
  background-size: cover;
  background-clip: text; 
  -webkit-background-clip: text;
}

רוצים שהתמונה תהיה קבועה? זה הקוד

CSS
.elementor-heading-title {
  background-image: url("");
  background-position: center center;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  background-attachment:fixed;
}

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

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

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

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

הסתבכתם עם הקוד? צריכים התאמה אישית?
תוכלו להיעזר בנותני השירות המומלצים שיעזרו לכם בעבודה

wpcoder - מתכנת
אתרים
wpcoder – מתכנת
המתכנת הכי טוב שעבדתי איתו מאתר פייבר – מחירים זולים.

4 תגובות

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

אלמנטור
Css
קרדיט: ישראל פאר
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
Php
הצגת מוצרים במלאי תחילה בארכיון מוצרים
אלמנטור
Css
הפיכת ווידג'ט תיבת אייקון או תיבת תמונה ללחיצים
ווקומרס
Php
שינוי מצב הזמנה בווקומרס להושלם
ווקומרס
Php
ניקוי סל הקניות כשמוסיפים מוצר
אלמנטור
Css
שבירת שורה בכותרת במובייל בלבד
חיפוש חופשי
חיפוש חכם ע"י AI (בהרצה)
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).