כפתורי יצירת קשר מתרחבים במעבר עכבר

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

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

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

אז איך עושים את זה? דיי פשוט, תעקבו אחר השלבים.

תוכלו להוריד את הטמפלט המוכן או לעצב אותו בעצמכם.

*יש קובץ JSON להעלאה לאלמנטור בתוך תיקייה דחוסה, צריך לחלץ את הקובץ לפני העלאה.

1) הוספת ווידג'ט רשימת אייקונים

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


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

2) הוספת הקוד שיוסיף את האפקט במעבר עכבר

הוסיפו את הקוד לקוד מותאם תחת מתקדם.

CSS
selector .elementor-icon-list-item {
    padding: 9px 8px;
    transition: width 0.4s, background-color 0.4s;
    width: 36px;
    background: #4B48F2;
    margin: 8px 0px;
    border-radius: 100px;
    text-align: center;
    text-align: center;
    overflow: hidden;
}


selector .elementor-icon-list-item:hover {
    background-color: #4B48F2; 
    width: auto;
    padding: 9px 8px 9px 20px; 
}



selector .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s, opacity 0.1s;
    white-space: nowrap;
}

selector .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text {
    transform: translateX(-100%);
    opacity: 0;
   
}

selector .elementor-icon-list-items .elementor-icon-list-item:hover .elementor-icon-list-text {
    transform: translateX(0); 
    opacity: 1;
}


selector .elementor-icon-list-items .elementor-icon-list-item:nth-child(1) {
    background-color: #4B48F2; 
}

selector .elementor-icon-list-items .elementor-icon-list-item:nth-child(2) {
    background-color: #24CC63; 
}

selector .elementor-icon-list-items .elementor-icon-list-item:nth-child(3) {
    background-color: #D83A36; 
}

במידה ואתם רוצים להוסיף דרך רביעית ליצירת קשר פשוט שנו את המספר בקלאס,
selector .elementor-icon-list-items .elementor-icon-list-item:nth-child(4)

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

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

2 תגובות

  1. דבר ראשון תודה
    השתמשתי בזה וזה עובד.

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

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

כתיבת תגובה

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

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