Wix Blocks: un esempio di come usare Blocks
Tempo di lettura: 7 min.
Wix Blocks è aperto a tutti gli utenti di Wix Studio. Per ottenere l'accesso a Blocks, iscriviti a Wix Studio.
Wix Blocks ti consente di creare app che puoi utilizzare e riutilizzare su tutti i siti Wix. Oppure, pubblica la tua app nel Wix App Market e raggiungi milioni di utenti!
Pianifica la tua app
La tua app può includere:
- Widget dell'interfaccia utente
- File e cartelle di codice
- Raccolte di dati
- Pagine del Pannello di controllo
Dovresti anche pianificare:
Crea un'app
Quando lavori al tuo sito, puoi aprire Wix Blocks dall'App Market per creare una nuova app.
Suggerimento
Quando scegli di creare un'app, Wix Blocks si apre automaticamente in una nuova finestra. Dopo averla creata, puoi tornare al tuo sito web per importare l'app.
Scegli il tuo tipo di app
Scegli se vuoi iniziare con un:
- Area di lavoro vuota: aggiungi widget dell'interfaccia utente alla tua app
- Pacchetti di codice: aggiungi file e cartelle di codice alla tua app
- Elemento personalizzato: incorpora il tuo codice HTML
- Widget predefinito
Aggiungi Widget
I widget ti consentono di aggiungere l'interfaccia utente della tua app.
- Vai al pannello Widget e design nel menu Struttura dell'app
- Clicca su + Aggiungi widget per aggiungere il tuo primo widget
Aggiungi elementi
Gli elementi di design sono gli elementi costitutivi di base del tuo widget: elementi di testo, tasti, immagini, campi di input utente e altro ancora. Wix Blocks è uno spazio di lavoro responsivo per creare app che si adattano automaticamente allo schermo o al dispositivo visualizzato per offrire la migliore esperienza utente.
Il pannello Aggiungi elementi ti offre molte opzioni per aggiungere elementi di design (noti anche come elementi dell'interfaccia utente) al tuo widget.
Scopri di più su come aggiungere elementi alla tua app.
Aggiungi proprietà ed eventi agli Elementi
La Proprietà ti consente di personalizzare gli elementi del widget. Ad esempio, se un elemento è nascosto o meno quando il widget viene caricato. I Gestori evento consentono di determinare l'interattività degli elementi. Ad esempio, cosa succede quando si clicca su un tasto. Puoi farlo selezionando l'elemento e cliccando sull'icona Proprietà ed eventi in basso.
Collega gli elementi del widget ai temi del sito
Dato che il tuo widget verrà installato su un sito Wix, è importante assicurarti che si fonda con i colori e i caratteri del sito, che sono definiti nel tema del sito. Assicurati di collegare ogni elemento al tema colore e il tema del testo (tipografico).
Aggiungi il codice Velo al tuo widget
Puoi aggiungere il codice Velo al tuo widget in modo simile a come quando lo aggiungi ai siti web Wix. Scopri di più su Velo by Wix. Per aggiungere un codice al widget, apri la scheda Design e utilizza l'editor di codice in basso.
Definisci l'API del tuo Widget
L'API Widget ti consente di aggiungere proprietà, eventi e funzioni all'intero widget. Qualsiasi proprietà, evento o funzione che aggiungi è quindi accessibile ai creatori del sito che lavorano con il widget nell'Editor Wix o nell'Editor X. Le proprietà appariranno nel pannello Impostazioni predefinito del widget nell'Editor.
Ad esempio, nel nostro tutorial Wix Widget Contatore, definiamo una proprietà 'step' che controlla gli incrementi del contatore (come 1,2,3,4 o 2,4,6,8).
Per aggiungere proprietà, eventi e funzioni all'API del widget, clicca su Widget API pubblico in basso
Scopri di più su come definire l'API del tuo widget.
Scopri di più su come utilizzare l'API del widget durante la modifica di un sito.
Scopri e testa il tuo widget in anteprima
Visualizza l'anteprima del widget per testarne il funzionamento. Il widget dovrebbe funzionare in modalità anteprima esattamente come se fosse installato su un sito. Puoi interagire con il widget e vedere come funziona. Puoi anche testare il tema e le proprietà dell'API.
Configura il tuo widget e crea pannelli personalizzati
La scheda Configurazione consente di definire l'aspetto e il comportamento del widget e dei suoi elementi quando sono installati su un sito. Puoi modificare i nomi visualizzati, aggiungere e rimuovere tasti alle barre delle azioni e modificare le impostazioni dei tasti. Puoi anche determinare se gli elementi possono essere selezionati, duplicati o eliminati.
Scopri di più sulla configurazione del widget.
La scheda Pannelli ti consente di creare pannelli personalizzati che si aprono quando il creatore del sito modifica il tuo widget nell'Editor, invece che in uno qualsiasi dei pannelli predefiniti del widget (come Impostazioni o Design).
Scopri di più sulla creazione di pannelli personalizzati in Blocks.
Design predefiniti
Puoi creare più di un layout e stili per il tuo widget utilizzando i design predefiniti. Quando crei i design predefiniti, il tuo widget mantiene gli stessi elementi e funzionalità, ma puoi modificare i colori, il layout e così via.
Puoi trovare i Preset di design nel pannello Widget e design . Se stai lavorando nella scheda Design, clicca su Struttura dell'app e seleziona Widget e design .
Scopri di più sul design dei preset in Blocks.
Aggiungi i widget alla tua app
Aggiungi altri widget alla tua app aprendo la Struttura dell'app, selezionando Widget e design e cliccando su + Aggiungi Widget
Assicurati di essere nella scheda Design
Aggiungi codice alla tua app
Per aggiungere codice alla tua app, vai a Pubblico e backend nel menu Struttura dell'app . Quindi, seleziona il tipo di codice che desideri aggiungere.
Scopri di più sui file di codice in Blocks.
Aggiungi più funzionalità alla tua app
Puoi aggiungere più funzionalità alla tua app, come ad esempio: