Editor Studio: aggiungere un elemento personalizzato
Tempo di lettura: 3 min.
Migliora il sito del tuo cliente con i tuoi elementi personalizzati. Puoi aggiungere qualsiasi componente Javascript collegando un elemento personalizzato a un URL del server o a un file di codice. Se necessario, puoi impostare più attributi direttamente dall'Editor.
Prima di iniziare:
Assicurati che il sito del tuo cliente abbia un dominio collegato e nessun annuncio Wix.
Cosa sono gli elementi personalizzati?
Gli elementi personalizzati ti consentono di utilizzare i tuoi tag HTML. Questi elementi funzionano su tutti i browser supportati e possono essere utilizzati con qualsiasi libreria o framework JavaScript ES6 che funzioni con HTML 5.
Quando incorpori un elemento personalizzato devi tenere a mente alcuni requisiti:
- Il tuo file Javascript deve essere ospitato (articolo in inglese) da Wix utilizzando Velo (consigliato) o il tuo server esterno o locale
- Il codice deve contenere HTTPS e non HTTP, altrimenti non verrà visualizzato sul tuo sito live
- Il codice deve essere aggiornato e compatibile con HTML5. La maggior parte dei browser non mostra correttamente le pagine e gli script se sono stati scritti utilizzando versioni JS o HTML precedenti
- Tutte le impostazioni di design rilevanti e le funzionalità complesse devono essere memorizzate all'interno del codice JS principale, ad esempio il CSS e altri file JS. Se queste impostazioni vengono memorizzate separatamente, significa che non funzioneranno sul tuo sito
Suggerimenti:
- Puoi usare elementi personalizzati da fonti terze, assicurati solo di aggiornare il Nome tag nelle Proprietà quando aggiungi l'elemento personalizzato alla tua pagina
- Le prestazioni dell'elemento personalizzato dipendono dall'implementazione dello stesso
Aggiungere e configurare l'elemento personalizzato
Aggiungi tutti gli elementi personalizzati di cui hai bisogno. Dopo aver trascinato un elemento personalizzato sulla tua pagina, definisci la sua origine (URL del server o un file Velo) e assegnagli un nome del tag in modo da riconoscerlo facilmente nel registro della pagina.
Per aggiungere e configurare un elemento personalizzato:
- Clicca su Aggiungi elementi
sul lato sinistro dell'Editor - Clicca su Incorpora e social
- Clicca su Elemento personalizzato
- Clicca sull'icona Aggiungi
accanto a Elemento personalizzato - Aggiungi il tuo file di script:
- Seleziona l'elemento personalizzato
- Clicca su Scegli origine
- Seleziona il modo in cui vuoi aggiungere il tuo elemento personalizzato:
- URL server: inserisci l'URL del file, incluso il nome del file
- File Velo: seleziona uno dei tuoi file Velo
- Inserisci un Nome tag per il tuo elemento
Nota: il nome del tag deve essere lungo almeno due parole, separate da un trattino (es. widget-meteo-grande)
- (Facoltativo) Regola le dimensioni, l'ancoraggio e l'allineamento dell'elemento dal pannello Ispezione
Note:
- Per motivi di sicurezza, l'elemento personalizzato viene renderizzato all'interno di un iFrame nell'Editor e in modalità anteprima. Ciò potrebbe influire sul layout del componente. Vai al tuo sito pubblicato per vedere come appare online
- Puoi definire le impostazioni SEO del tuo elemento utilizzando l'API Velo
Impostare gli attributi dell'elemento personalizzato
Apporta ulteriori modifiche alle proprietà e al comportamento dell'elemento impostando gli attributi. Il pannello Attributi elemento ti consente di aggiungere, modificare e rimuovere attributi direttamente dall'Editor, senza dover accedere al codice vero e proprio.
Importante:
Il codice per l'elemento personalizzato deve riconoscere e gestire gli attributi definiti. In caso contrario, non funzioneranno correttamente.
Per impostare gli attributi dell'elemento personalizzato:
- Seleziona l'elemento personalizzato
- Clicca su Imposta attributi
- Clicca su New Attribute (Nuovo attributo)
- Inserisci un nome per l'attributo (es. "rotazione", "larghezza") (contenuti in inglese)
- Inserisci il valore dell'attributo (può essere qualsiasi stringa pertinente)
- Clicca su Imposta
Cerchi informazioni più avanzate?
Scopri come utilizzare gli elementi personalizzati (articolo in inglese) con Velo by Wix. Per domande specifiche e risoluzione dei problemi, consulta le nostre FAQ sugli elementi personalizzati (articolo in inglese).