אפקטי CSS לאלמנטור: 7 עיצובים לכותרות, כפתורים ותמונות (2026)

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

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

איך מוסיפים CSS באלמנטור?

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

במדריך נעבור על:

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

1. שלוש דרכים להכניס קוד CSS לאלמנטור

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

1.1 CSS מותאם בווידג'ט (אלמנטור פרו)

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

1.2 מחלקה (CSS Class) וקוד כללי

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

1.3 בלי אלמנטור פרו: CSS נוסף בתבנית

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

1.4 איזו שיטה לבחור?

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

2. מסגרת פנימית לתמונה

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

2.1 הקוד

גוררים ווידג'ט תמונה, ובשדה "CSS מותאם" מדביקים:

selector img {
  outline: 1px solid #ffffff;
  outline-offset: -10px;
}

בלי אלמנטור פרו, מוסיפים לווידג'ט את המחלקה img-frame ומדביקים ב"CSS נוסף":

.img-frame img {
  outline: 1px solid #ffffff;
  outline-offset: -10px;
}

2.2 איך זה עובד

המאפיין outline מצייר קו סביב האלמנט, ובניגוד ל-border הוא לא תופס מקום ולא מזיז שום דבר בעמוד. המאפיין outline-offset קובע את המרחק של הקו מהקצה. ערך חיובי מרחיק אותו החוצה, וערך שלילי כמו ‎-10px מכניס אותו אל תוך התמונה. זה כל הסוד.

2.3 וריאציות

• צבע אחר: מחליפים את ‎#ffffff בכל קוד צבע, למשל ‎#000000 לשחור.
• קו מקווקו: מחליפים את solid ב-dashed.
• מסגרת עבה ורחוקה יותר: 2px ו-‎-20px עובדים טוב בתמונות גדולות.
• אפקט במעבר עכבר: מוסיפים לקוד שורת transition, ובנוסף כלל hover. המסגרת תתכווץ פנימה בעדינות.

selector img {
  outline: 1px solid #ffffff;
  outline-offset: -10px;
  transition: outline-offset .3s ease;
}

selector img:hover {
  outline-offset: -18px;
}

כך נראית אותה תמונה עם מסגרת בצבע מותג, בעובי 2px ובמרחק ‎-20px:

טיפ: בתמונות בהירות מסגרת לבנה כמעט לא נראית. במקרה כזה בחרו צבע כהה או צבע מותג.

3. איך מוסיפים קו תחתון לכותרת באלמנטור?

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

3.1 הדגשת מרקר עבה

זה האפקט שנראה כמו סימון במרקר זוהר על שליש השורה התחתון:

<span style="background-image: linear-gradient(180deg, transparent 70%, #01C5B5 70%);">כותרת אלמנטור עם קו תחתון</span>

שני האחוזים זהים (70%), ולכן המעבר בין שקוף לצבע חד ולא הדרגתי. אם תשנו ל-60% הקו יהיה עבה יותר, ואם תשנו ל-80% הוא יהיה דק יותר.

3.2 קו דק ומדויק

כשרוצים קו בעובי קבוע בפיקסלים, בלי קשר לגודל הפונט:

<span style="background-image: linear-gradient(#01C5B5, #01C5B5); background-size: 100% 8px; background-repeat: no-repeat; background-position: bottom;">כותרת עם קו דק</span>

הערך 8px קובע את העובי. אפשר להוריד ל-4px לקו עדין מאוד.

3.3 הדגשה של מילים בודדות

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

כותרת עם דגש <span style="background-image: linear-gradient(180deg, transparent 70%, #DDB0F9 70%);">במילים בודדות</span>

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

3.4 הדגשה באלכסון ושבירת שורה

אם משנים את הזווית מ-180deg ל-182deg, הקו מקבל נטייה קלה שנראית כמו סימון בכתב יד. כשהכותרת נשברת לשתי שורות במובייל, הוסיפו לתגית את box-decoration-break: clone; יחד עם -webkit-box-decoration-break: clone;, כדי שהקו יופיע בצורה אחידה בכל שורה.

4. כותרת עם תמונה בתוך האותיות

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

4.1 הקוד

בשדה "CSS מותאם" של ווידג'ט הכותרת:

selector .elementor-heading-title {
  background: #4F4FE5 url("כתובת-התמונה-שלכם.webp") center / cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

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

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

4.3 איך בוחרים תמונה שעובדת

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

5. כפתור במעבר צבע עם hover חלק

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

5.1 הקוד לטופס

בשדה "CSS מותאם" של ווידג'ט הטופס:

selector .elementor-button {
  background-color: transparent;
  background-image: linear-gradient(45deg, #3498db, #8e44ad, #3498db);
  background-size: 200% auto;
  background-position: 0% center;
  color: #ffffff;
  border: none;
  transition: background-position .5s ease;
}

selector .elementor-button:hover {
  background-position: 100% center;
}

5.2 למה לא מספיק להחליף גרדיאנט ב-hover

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

5.3 אותו קוד לווידג'ט כפתור רגיל

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

5.4 אל תשכחו את מצב הפוקוס

גולשים שמנווטים במקלדת עוברים בין כפתורים עם מקש Tab, ולא רואים את מצב ה-hover. כדי שגם הם יקבלו את האפקט, הוסיפו את selector .elementor-button:focus-visible לאותו כלל של ה-hover, מופרד בפסיק. זו תוספת של שורה אחת שמשפרת את הנגישות של הטופס, והיא חשובה במיוחד בכפתור השליחה, שהוא הכפתור החשוב ביותר בעמוד.

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

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

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

המספר 90deg קובע את כיוון המעבר. בערך 90 הצבעים מתחלפים לרוחב השורה, ובערך 180 הם מתחלפים מלמעלה למטה. זוויות כמו 40 או 135 יוצרות מעבר אלכסוני שנראה דינמי יותר. באתר בעברית שווה לזכור שהקריאה מתחילה מימין, אז כדאי שהצבע החזק יותר יופיע בצד ימין של הכותרת.

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

7. טקסט עם קו מתאר

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

7.1 הקוד

selector .elementor-heading-title {
  -webkit-text-stroke: 2px #4F4FE5;
  color: transparent;
}

7.2 קו מתאר עם מילוי

אם רוצים גם צבע מילוי וגם קו מתאר, משאירים צבע רגיל במקום transparent ומוסיפים paint-order: stroke fill;. כך הקו נצבע מאחורי המילוי ולא "אוכל" את האותיות מבפנים.

7.3 מתי לא להשתמש

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

8. טקסט מסתובב באנימציה קבועה

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

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

@media (prefers-reduced-motion: reduce) {
  selector svg {
    animation: none;
  }
}

שלוש שורות, והאתר שלכם הופך לנגיש יותר לאנשים שתנועה מתמדת מפריעה להם.

9. בדיקות חובה לפני שמפרסמים

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

9.1 מובייל

פתחו את מצב התצוגה הרספונסיבית באלמנטור ובדקו כל אפקט בגודל טלפון. שימו לב במיוחד לכותרות שנשברות לכמה שורות ולמסגרות פנימיות בתמונות קטנות. ‎-10px בתמונה ברוחב 300 פיקסלים נראה הרבה יותר גדול מאשר במחשב.

9.2 נגישות וקריאות

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

9.3 ביצועים

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

9.4 דפדפנים

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

9.5 תיעוד הקוד

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

9.6 טבלת סיכום

טעויות נפוצות בהוספת CSS לאלמנטור

• שכחתם את המחלקה: כתבתם קוד עם ‎.img-frame אבל לא הוספתם את המחלקה לווידג'ט, ולכן שום דבר לא קורה.
• נקודה במקום הלא נכון: בשדה "מחלקות CSS" כותבים את השם בלי נקודה, ובקוד עצמו כותבים עם נקודה.
• selector מחוץ לאלמנטור פרו: המילה selector עובדת רק בשדה ה-CSS המותאם של הווידג'ט. ב"CSS נוסף" היא לא אומרת כלום לדפדפן.
• מטמון שמסתיר את השינוי: אחרי כל שינוי נקו את המטמון של תוסף הקאש ושל הדפדפן לפני שמחליטים שהקוד לא עובד.
• מירכאות מעוגלות: העתקה מוורד או מוואטסאפ הופכת מירכאות ישרות למעוגלות, והקוד נשבר. הדביקו תמיד מהמדריך ישירות.
• פונט דק מדי: גרדיאנט, תמונה וקו מתאר נראים רע באותיות דקות. בחרו משקל Bold לפחות.

סיכום: מאיפה להתחיל

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

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

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

האם אפשר להוסיף CSS באלמנטור בלי אלמנטור פרו?

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

מה המילה selector בקוד CSS של אלמנטור?

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

האם אפקטים של CSS מאטים את האתר?

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

למה האפקט לא מופיע אחרי שהדבקתי את הקוד?

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

האם האפקטים האלה עובדים במובייל?

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

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

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