Studio Editor: הוספת אלמנט בהתאמה אישית
אתם יכולים להעשיר את האתרים של הלקוחות שלכם עם אלמנטים ייחודיים משלכם. אפשר להוסיף כל רכיב 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) ותנו לו שם תגית כדי שתזהו אותו בקלות ברישום הדפים.
כדי להוסיף ולהגדיר אלמנט מותאם אישית:
- הקליקו ב-editor משמאל על Add Elements
(הוספת אלמנטים). - הקליקו על Embed & Social (הטמעה ורשתות חברתיות).
- הקליקו על Custom Element (אלמנט מותאם אישית).
- הקליקו על אייקון ההוספה
ליד Custom Element. - הוסיפו את קובץ הקוד:
- בחרו את האלמנט המותאם אישית.
- הקליקו על Choose Source (בחירת מקור).
- בחרו איך להוסיף את האלמנט המותאם אישית:
- Server URL: הכניסו את כתובת ה-URL של הקובץ, כולל שם הקובץ.
- קובץ Velo: בחרו אחד מקובצי Velo שלכם.
- תנו לאלמנט שם תג בשדה Tag Name.
הערה: שם התג צריך להיות לפחות שתי מילים, המופרדות באמצעות מקף (לדוגמה big-weather-widget).
- (אופציונלי) את גודל האלמנט, הקיבוע והיישור מגדירים דרך חלונית Inspector.
שימו לב:
- מטעמי אבטחה, האלמנט המותאם אישית מעובד בתוך iFrame שבתוך ה-Editor ובמצב תצוגה מקדימה. זה עשוי להשפיע על הפריסה של הרכיב. כדי לראות איך הוא נראה בפועל באתר עצמו, היכנסו לאתר החי.
- תוכלו לשנות את הגדרות ה-SEO של האלמנט באמצעות Velo API.
הגדרת מאפיינים של אלמנט מותאם אישית
כדי לקבוע עוד התאמות לתכונות ולהתנהגות של האלמנט שלכם, אפשר להגדיר לו מאפיינים. החלונית Element Attributes מאפשרת לכם להוסיף, לערוך ולהסיר מאפיינים ישירות מה-editor, בלי לגשת לקוד עצמו.
חשוב:
הקוד של האלמנט המותאם אישית צריך להכיר את המאפיינים המוגדרים ולדעת לעבד אותם כדי שיפעלו כמו שצריך.
כדי להגדיר את המאפיינים של האלמנט המותאם אישית:
- בחרו את האלמנט המותאם אישית.
- לחצו על Set Attributes (הגדרת מאפיינים).
- הקליקו על New Attribute (מאפיין חדש).
- תנו שם למאפיין (למשל "סיבוב" או "רוחב").
- תנו ערך למאפיין (כל מחרוזת רלוונטית).
- הקליקו על Set.
רוצים מידע מתקדם יותר?
למדו איך להשתמש באלמנטים מותאמים אישית עם Velo by Wix. לשאלות ספציפיות ופתרון תקלות, עיינו
בשאלות הנפוצות שלנו על אלמנטים מותאמים אישית.