מרכז התמיכה של Wix
    ראשי
  1. Studio ותוכניות לפרטנרים ולארגונים
  2. Wix Studio
  3. שימוש ב-Studio Editor
  4. הוספת אלמנטים ב-Studio Editor
    5. Studio Editor: הוספת אלמנט מותאם אישית

Studio Editor: הוספת אלמנט מותאם אישית

זמן קריאה: 3 דקות
אתם יכולים להעשיר את האתרים של הלקוחות שלכם עם אלמנטים משלכם. אפשר להוסיף כל רכיב Javascript על ידי קישור אלמנט מותאם אישית לכתובת URL של שרת או לקובץ קוד. במידת הצורך, תוכלו להגדיר מאפיינים נוספים ישירות מה-editor. 
הנושאים בעמוד זה:
לפני שאתם מתחילים:
ודאו שלאתר הלקוח מחובר דומיין ושלא מופיעות בו מודעות Wix.

מהם אלמנטים בהתאמה אישית?

אלמנטים מותאמים אישית מאפשרים לכם להשתמש בתגי HTML משלכם. האלמנטים האלה פועלים בכל הדפדפנים הנתמכים, ואפשר להשתמש בהם באמצעות כל ספריית JavaScript ES6 או מסגרת שעובדת עם HTML 5.
כשאתם מטמיעים אלמנט בהתאמה אישית, חשוב לזכור את הדרישות הבאות:
  • קובץ ה-Javascript חייב להתארח אצל Wix באמצעות Velo (מומלץ), או על שרת חיצוני או מקומי משלכם.
  • הקוד צריך להכיל HTTPS ולא HTTP, אחרת הוא לא יוצג באתר שבאוויר.
  • ודאו שהקוד מעודכן ותואם HTML5. רוב הדפדפנים לא מציגים עמודים וקובצי קוד כמו שצריך אם הם נכתבו באמצעות JS או HTML מגרסאות ישנות יותר. 
  • כל הגדרות העיצוב והפונקציות המורכבות הרלוונטיות צריכות להיות מאוחסנות בקוד ה-JS הראשי, לדוגמה ב-CSS ובקובצי JS אחרים. אם הגדרות אלה מאוחסנות בנפרד, פירוש הדבר שהן לא יפעלו באתר.
טיפים:
  • אתם יכולים להשתמש באלמנטים בהתאמה אישית של צד שלישי, רק לא לשכוח לעדכן את ה-Tag Name (שם התגית) ב-Properties (מאפיינים) כשאתם מוסיפים את האלמנט לעמוד.
  • הביצועים של האלמנט המותאם אישית תלויים ביישום שלו.

הוספה והגדרה של האלמנט המותאם אישית

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

כדי להוסיף ולהגדיר אלמנט מותאם אישית:

  1. הקליקו ב-editor משמאל על Add Elements (הוספת אלמנטים).
  2. הקליקו על Embed & Social (הטמעה ורשתות חברתיות).
  3. הקליקו על Custom Element (אלמנט מותאם אישית).
  4. הקליקו על אייקון ההוספה  ליד Custom Element.
  5. הוסיפו את קובץ הקוד:
    1. בחרו את האלמנט המותאם אישית.
    2. הקליקו על Choose Source (בחירת מקור).
    3. בחרו איך להוסיף את האלמנט המותאם אישית:
      • Server URL: הכניסו את כתובת ה-URL של הקובץ, כולל שם הקובץ.
      • קובץ Velo: בחרו אחד מקובצי Velo שלכם. 
    4. תנו לאלמנט שם תגית בשדה Tag Name. הערה: בשם התגית צריכות להיות לפחות שתי מילים, המופרדות באמצעות מקף (למשל ווידג'ט-גדול-של-מזג-אוויר). 
  6. (אופציונלי) את גודל האלמנט, הקיבוע והיישור מגדירים דרך חלונית Inspector.
שימו לב:
  • מטעמי אבטחה, האלמנט המותאם אישית מעובד בתוך iFrame שבתוך ה-Editor ובמצב תצוגה מקדימה. זה עשוי להשפיע על הפריסה של הרכיב. כדי לראות איך הוא נראה בפועל באתר עצמו, היכנסו לאתר החי.
  • תוכלו לשנות את הגדרות ה-SEO של האלמנט באמצעות Velo API. 

הגדרת מאפיינים של אלמנט מותאם אישית

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

כדי להגדיר את המאפיינים של האלמנט המותאם אישית:

  1. בחרו את האלמנט המותאם אישית.
  2. לחצו על Set Attributes (הגדרת מאפיינים).
  3. הקליקו על New Attribute (מאפיין חדש). 
  4. תנו שם למאפיין (למשל "סיבוב" או "רוחב").
  5. תנו ערך למאפיין (כל מחרוזת רלוונטית).
  6. הקליקו על Set.
רוצים מידע מתקדם יותר? 

זה עזר לך?

|

בעמוד מידע הזה

  • מהם אלמנטים בהתאמה אישית?
  • הוספה והגדרה של האלמנט המותאם אישית
  • הגדרת מאפיינים של אלמנט מותאם אישית