ימים
שעות
דקות
שניות
הזדרזי! המבצע בתוקף עד 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 להחליף צבע במעבר עכבר?

איך אפשר להעביר את הגולש לדף פרטי תשלום מיד אחרי הוספה לסל של מוצר ספציפי (ולדלג על דף עגלת קניות)?

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

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

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

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

איך להוסיף אפקט תאורה או הצללה לכפתור באלמנטור?

כלים אלופים

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