ימים
שעות
דקות
שניות
הזדרזי! המבצע בתוקף עד 04.04.2024

איך אפשר להוסיף אייקון SVG לכפתור בוידג’ט הנעה לפעולה של אלמנטור?

שאלה מצויינת :)

אפשר להוסיף אייקון SVG לכפתור וידג’ט הנעה לפעולה, על ידי הזרקה בקוד CSS.

השלבים להוספת אייקון SVG לכפתור בוידג’ט הנעה לפעולה של אלמנטור

  1. העלי את האייקון למדיה של האתר.
  2. הדביקי את הקוד הבא בCSS מותאם של וידג’ט הנעה לפעולה:
selector .elementor-cta__button-wrapper{
    display: flex !important;
}
selector .elementor-cta__button{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
selector .elementor-cta__button:before{
    content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img2.svg') !important;
}
  1. החליפי את כתובת התמונה המופיעה בקוד, בכתובת המדוייקת של האייקון שהעלית לאתר.
  2. את המרווח בין האייקון לטקסט את יכולה לשנות על ידי שינוי הפיקסלים בהגדרה של gap.
  3. טיפ: אם את רוצה שהאייקון יופיע אחרי הטקסט, החליפי בקוד את before לafter.

זו הדרך הקלה להוספת אייקון SVG לוידג’ט הנעה לפעולה. החסרון שלה הוא שאי אפשר לשלוט בגודל של האייקון.

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

תצליחי,
חגית

8 תגובות

    1. שלום דניאל

      בלוח הבקרה > מדיה > תעלי את האייקון הרצוי > אחרי שהקובץ עולה אפשר להעתיק את הכתובת שלו בכפתור “העתק קישור ללוח”
      (לכל קובץ בספרית המדיה יש כתובת משלו. אפשר לעבור על כל תמונת קובץ בספרית המדיה, ולהעתיק את הכתובת בלחיצה על “העתק כתובת”).

      את הקישור הנ”ל תדביקי בקוד הרצוי.

      תצליחי המון,
      חגית

          1. selector .elementor-cta__button-wrapper{
                display: flex !important;
            }
            selector .elementor-cta__button{
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
            }
            selector .elementor-cta__button:after{
                content: url(https://avivphysio.com/wp-content/uploads/2023/11/whatsapp_160200.svg) !important;
            }
            
            1. חסר לך מרכאות מסביב לכתובת של התמונה, הקוד הזה אמור לעבוד:

              selector .elementor-cta__button-wrapper{
                  display: flex !important;
              }
              selector .elementor-cta__button{
                  display: flex !important;
                  align-items: center !important;
                  gap: 8px !important;
              }
              selector .elementor-cta__button:after{
                  content: url('https://avivphysio.com/wp-content/uploads/2023/11/whatsapp_160200.svg') !important;
              }
              

כתיבת תגובה

הדרכות נוספות שיכולות לעזור לך

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

איך ליישר את שדה הטלפון לימין בטופס אלמנטור – פתרון לבאג ועזרה מבינה מלאכותית

איך גוגל קורא את האתר שלך, ולמה חשוב שהמבנה שלו יהיה… אנושי!

איך גורמים לקובץ SVG להחליף צבע במעבר עכבר?

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

יצרתי סינון עם smart-filter לליסטינג גריד של ג’ט איך אפשר להגדיר שלא יוצג בכלל פוסטים עד שבוחרים לפחות 2 אפשרויות סינון (לדוג: מחיר ויצרן)

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

איך לאנדקס אתר חדש בגוגל?

כלים אלופים

10 כלים מומלצים
שיעזרו לך לעבוד מהר יותר
דילוג לתוכן