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:

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 properties and events

in basso.

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).

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.

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 widget public api

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.

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.

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 app structure