איך להוסיף כפתור Whatsapp דביק באתר שלכם (אלמנטור)

מדריכים נוספים
תוכן עניינים

ראשית, למה בכלל אנחנו צריכים כפתור WhatsApp באתר?

WhatsApp היא אפליקציית ההודעות הפופולרית ביותר בעולם, עם יותר מ-2 מיליארד אנשים בלמעלה מ-180 מדינות. WhatsApp מאפשרת למבקרים באתר שלך להתחיל שיחה/צ'אט ישירות למספר הטלפון שלך. בתור אפליקציית הודעות מיידיות בעולם, רוב האנשים משתמשים באפליקציה כשיטת יצירת קשר קלה. WhatsApp קלה לשימוש. כאשר למבקרים באתר שלך יש שאלות, הם יכולים לקבל תשובות במהירות במקום למלא טפסי יצירת קשר ולקבל אימיילים, שכולנו יודעים יכול הרבה פעמים לגרום למבקר באתר לוותר מראש (לא מה שאנחנו רוצים שיקרה).

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

אוקי, עכשיו שהבנו למה צריך כפתור WhatsApp,

איך מוסיפים כפתור וואצאפ עם אלמנטור?

1. כנסו לאתר שלכם

התחברו לאתר שלכם (חייב גישת מנהל)

לאחר שהתחברתם, יש ללחוץ על טמפלטים > בונה תבנית

כנסו לאתר שלכם

2. עכשיו נכנס לעריכה של הפוטר של האתר

מצאו את הטמפלט של הפוטר ולחצו על "עריכה באמצעות אלמנטור"

עכשיו נכנס לעריכה של הפוטר של האתר

3. הוסיפו אלמנט אייקון לעמוד

חפשו אייקון ברשימה האלמנטים של אלמנטור וגררו אותו לתוך הפוטר
(המיקום המדויק לא משנה כי עוד מעט נגדיר אותו ככפתור מרחף/דביק)

הוסיפו אלמנט אייקון לעמוד

4. כנסו לעריכת האייקון

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

כנסו לעריכת האייקון

5. בחרו באייקון וואצאפ

חפשו "whatsapp" בחיפוש ובחרו בכפתור ללא הרקע
אנחנו נוסיף לו רקע עוד רגע

בחרו באייקון וואצאפ

6. הוסיפו את האייקון

הוסיפו את האייקון

7. הוסיפו את הקישור ווצצאפ למספר שלכם


[copy text="https://api.whatsapp.com/send?phone=0522222222" content="https://api.whatsapp.com/send?phone=0522222222"]

אל תשכחו להחליף למספר שלכם!

הוסיפו את הקישור ווצצאפ למספר שלכם

8. הוסיפו רקע לאייקון שלנו

לחצו על סוג תצוגה ושנו ל"עם רקע"

הוסיפו רקע לאייקון שלנו

9. התאימו את הצבעים

תוכלו לבחור בצבעים המקוריים של וואצאפ או להתאים את האייקון לצבעי האתר

צבע ראשי הוא הצבע של הרקע וצבע משני הוא הצבע של האייקון עצמו

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

WhatsApp (#128c7e) – ירוק כהה
WhatsApp (#25d366) – ירוק בהיר

White (#ffffff) – לבן

התאימו את הצבעים

10. שינוי גודל האייקון

פה תוכלו לשנות את גודל האייקון.
גודל משפיע על גודל האייקון עצמו

שוליים פנימיים ישפיעו על גודל הרקע או כמה מקום יש לאייקון בתוך הרקע או שוליים פנימיים (:

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

שינוי גודל האייקון

11. הוספת אפקט במעבר עכבר

לחצו על "מעבר" מעל בחירת הצבעים

הוספת אפקט במעבר עכבר

12. לחצו על אנימציית מעבר ובחרו את האנימציה שתרצו

אני בחרתי ב"pulse" אך תוכלו לנסות את כל האנימציות האפשרויות ולבחור את המתאימה לכם ביותר.

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

לחצו על אנימציית מעבר ובחרו את האנימציה שתרצו

13. לחצו על ברירת מחדל

Click on ברירת מחדל…

14. הכפתור שלנו עד עכשיו

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

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

15. הגדרות מיקום לכפתור שלנו

לחצו על לשונית "מתקדם"

הגדרות מיקום לכפתור שלנו

16. שנו את רוחב הכפתור שלנו ל"בתוך השורה(auto)"

שנו את רוחב הכפתור שלנו ל

17. בחירת מיקום הכפתור

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

תוכלו לבחור מיקום אופקי (ימין או שמאל)
ואז לשחק עם המיקום המדויק בפיקסלים או באחוזים
אני בחרתי בצד שמאל עם רווח של 10PX מהצד

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

תוכלו לשחק עם המיקום ולמקם את הכפתור במדויק בהתאם לאתר שלכם

בחירת מיקום הכפתור

18. התאמה למובייל

בתחתית הדף בצד ימין יופיע לכם כפתור כמו בתמונה.
לחצו עליו ותפתח לכם האפשרות לעבור למצב עריכה למובייל

התאמה למובייל

19. מצב מובייל

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

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

מצב מובייל

20. מיקום במובייל

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

אני בחרתי ב10PX באופקי וב15%באנכי.

מיקום במובייל

21. תוצאות:

זהו, סיימנו

יש לכם כפתור וואצאפ באתר שיפנה את הגולשים ישירות אליכם!

תוצאות:

בקשת מדריכים

יש לכם רעיון למדריך שעדיין לא קיים? אתם מוזמנים לכתוב לנו ונדאג להוסיף אותו לאתר (:

הרשמה לניוזלטר

רוצים לקבל התראות למייל ברגע שעולה מדריך חדש?

דירוג ממוצע: 4.6 | מדרגים: 39

אהבת את המדריך? עזר לך?
אולי שיתוף יעזור לעוד אנשים (:
לא הסתדרת עם המדריך? משהו לא עובד?
אנחנו כאן לעזור! ;)

אולי יעניין אותך לקרוא גם...

דברו איתנו

אם יש לך אתר תדמית או חנות דיגיטלית שלא מרוויחים – אנחנו פה לעזור.
עדיין אין לך אתר כלשהו? אנחנו פה לתקן את זה ;)

אפשר להשאיר פרטים ואנחנו נדאג לך לכל השאר…

למעבר לוואצאפ, הכניסו את מספר הטלפון שלכם (:

יש לכם רעיון למדריך שעדיין לא קיים?
אתם מוזמנים לכתוב לנו ונדאג להוסיף אותו לאתר (:

רוצים עדכונים למייל כאשר עולה מידע חדש?
מוזמנים להשאיר פרטים ונדאג לעדכן אתכם (:

דילוג לתוכן