Editor X: הוספת אלמנט בהתאמה אישית לאתר שלכם

זמן קריאה: 4 דקות

Editor X עובר ל-Wix Studio, הפלטפורמה החדשה שלנו לסוכנויות ופרילנסרים.פרטים נוספים על Wix Studio

בעזרת אלמנטים בהתאמה אישית תוכלו לשדרג את האתר עם אפשרויות ויכולות CSS בעיצוב משלכם. אפשר להוסיף כל אלמנט Javascript באמצעות קישור של אלמנט בהתאמה אישית לכתובת האתר של השרת או לקובץ Velo. ואם צריך, תוכלו להגדיר מאפיינים נוספים ישירות מ-Editor X.

כאן תוכלו לקרוא על:

לפני שמתחילים:

ודאו ששדרגתם את האתר לתוכנית פרימיום וחיברתם דומיין בלי פרסומות של Editor X.

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

באמצעות אלמנטים בהתאמה אישית אתם יכולים ליצור תגי HTML משלכם לאתר ב-Editor X. האלמנטים האלה פועלים בכל הדפדפנים הנתמכים, ואפשר להשתמש בהם באמצעות כל ספריית JavaScript ES6 או מסגרת שעובדת עם HTML 5.

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

קריטריונים לקוד

טיפים:

אתם יכולים להשתמש באלמנטים בהתאמה אישית של צד שלישי, רק לא לשכוח לעדכן את Tag Name (שם התגית) ב-Properties (מאפיינים) כשאתם מוסיפים אותם לעמוד.
הביצועים של האלמנט בהתאמה אישית תלויים ביישום שלו.

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

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

כן, תראו לי איך

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

כדי לוודא שהאלמנט בהתאמה אישית נראה טוב בכל נקודות הברייקפוינט – תוכלו לשנות את הגודל, ההצמדה, היישור ועוד.

הערה:

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

הגדרת מאפיינים ב-HTML

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

כן, תראו לי איך

חשוב:

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

דוגמה לאלמנט בהתאמה אישית

כאן תוכלו לראות דוגמה להוספת אלמנט בסיסי בהתאמה אישית לאתר: את הטקסט "Hello World".

בשלב הראשון תצטרכו ליצור ולכתוב קוד לאלמנט ולהתנהגות שלו בקובץ JavaScript.

כן, תראו לי איך

עכשיו, נגדיר את סוג האלמנט בהתאמה אישית.

בדוגמה הזו הגדרנו אותו בתור HelloWorld והשתמשו באותו שם כשרשמנו את האלמנט ברג'יסטרי. הפונקציה connectedCallback() שבהמשך היא פונקצייית lifecycle callback שמופעלת אוטומטית כשהאלמנט מחובר ל-DOM.

1class HelloWorld extends HTMLElement {
2  connectedCallback() {
3    this.innerHTML = '<br/><br/><br/>Hello World!';
4  }
5}
6customElements.define('hello-world', HelloWorld);

אחרי הגדרת סוג האלמנט בהתאמה אישית, נרשום אותו באמצעות השיטה customElements.define(name, class).

כשאתם מוסיפים את האלמנט לאתר, מלאו את השם ב-Tag Name. אחרי רישום השם, תוכלו להשתמש באלמנט בהתאמה אישית באתר שלכם.

1CustomElementRegistry.define ('hello-world', HelloWorld);‎

מחפשים מידע מתקדם יותר?

הקליקו כאן כדי לקרוא איך משתמשים באלמנט הזה באמצעות Velo מבית Wix.

זה עזר לך?

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

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