Editor X: aggiungere un elemento personalizzato al tuo sito
Tempo di lettura: 5 min.
Editor X sta passando a Wix Studio, la nostra nuova piattaforma per agenzie e freelancer.Scopri di più su Wix Studio
Migliora il tuo sito con le funzionalità di design e CSS utilizzando gli elementi personalizzati. Puoi aggiungere qualsiasi componente Javascript collegando un elemento personalizzato a un URL del server o a un file Velo. Se necessario, puoi impostare più attributi direttamente dall'Editor X.
Scopri di più su:
Prima di iniziare:
Assicurati che il tuo sito abbia un pacchetto Premium e un dominio collegato senza pubblicità Editor X. Scopri di più.
Cosa sono gli elementi personalizzati?
Gli elementi personalizzati ti consentono di utilizzare i tag HTML sul tuo sito Editor X. Questi elementi funzionano su tutti i browser supportati e possono essere utilizzati con qualsiasi libreria JavaScript ES6 o framework che funzioni con HTML 5.
Esempi di elementi personalizzati utili
Requisiti del codice
Suggerimenti:
- Puoi usare elementi personalizzati da fonti terze, assicurati solo di aggiornare il Tag Name (Nome tag) nelle Properties (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
Mostrami come fare
nella parte superiore dell'Editor XUtilizza il pannello Ispezione 
per assicurarti che il tuo elemento personalizzato sia perfetto in tutti i punti di interruzione. Puoi modificare le dimensioni, l'ancoraggio, l'allineamento e altro ancora.
per assicurarti che il tuo elemento personalizzato sia perfetto in tutti i punti di interruzione. Puoi modificare le dimensioni, l'ancoraggio, l'allineamento e altro ancora. Nota:
Per impostazione predefinita, gli elementi personalizzati vengono visualizzati nel registro degli elementi personalizzati della pagina. Il nome del tag inserito per l'elemento personalizzato ne definisce il nome in questo registro.
Impostare gli attributi dell'elemento personalizzato
Apporta ulteriori modifiche alle proprietà e al comportamento del tuo elemento impostando gli attributi HTML. Il pannello Attributi dell'elemento consente di aggiungere, modificare e rimuovere gli attributi direttamente dall'Editor X, in modo da non dover accedere al codice vero e proprio.
Mostrami come fare
Importante:
Il codice per l'elemento personalizzato deve riconoscere e gestire gli attributi definiti. In caso contrario, non funzioneranno correttamente.
Esempio di elemento personalizzato
Di seguito è riportato un esempio dell'aggiunta di un elemento personalizzato di base al tuo sito. Le istruzioni spiegano come aggiungere il testo "Hello World" al tuo sito.
Innanzitutto, è necessario creare e codificare l'elemento e il suo comportamento in un file JavaScript.
Mostrami come fare
Definisci quindi la classe dell'elemento personalizzato.
In questo esempio, lo abbiamo definito come HelloWorld e useremo lo stesso nome quando registreremo l'elemento personalizzato. La funzione connectedCallback() riportata di seguito è una funzione di callback del ciclo di vita che viene attivata automaticamente quando l'elemento è collegato a DOM.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);Dopo aver definito la classe dell'elemento personalizzato, la registriamo con il metodo
customElements.define(name, class). Quando aggiungi l'elemento personalizzato al tuo sito, inserisci il nome registrato come nome del tag. Una volta registrato, l'elemento personalizzato può essere utilizzato sul tuo sito.
1CustomElementRegistry.define('hello-world', HelloWorld);Cerchi informazioni più avanzate?
Clicca qui per scoprire come utilizzare questo elemento con Velo by Wix.
Hai trovato utile questo articolo?
|