I widget sono gli elementi costitutivi chiave di un sito e consentono di aggiungere e gestire contenuti in modo efficace. Sono elementi essenziali che migliorano sia la funzionalità che il design del tuo sito web. Incorporando vari tipi di widget, puoi creare un'esperienza utente dinamica e coinvolgente
Esistono diversi metodi per aggiungere widget. Inoltre, varia se si utilizza Classic Editor, la modalità flex o l'Editor 2.0 Di seguito è riportato come aggiungere i widget:
Per aggiungere widget dalla libreria dei widget:
-
-
Per trovare un widget, usa la barra di ricerca o seleziona una categoria per accedere rapidamente al widget desiderato.
-
I widget personalizzati dell'account e del sito si trovano nella Personalizzato categoria del pannello Widget.
-
-
Fai clic e trascina il widget nella posizione desiderata nel sito. Viene visualizzato un indicatore di posizionamento blu.
-
Il widget viene visualizzato nella posizione indicata dall'indicatore di posizionamento blu.
Quando trascini un widget sul tuo sito, annota il testo nell'indicatore di posizionamento blu (Solo editor classico):
-
Inserisci qui. Il widget verrà aggiunto a una riga o colonna esistente.
-
Inserisci in una nuova riga. Verrà aggiunta una nuova riga e il widget verrà inserito al suo interno.
-
Inserisci in una nuova colonna. Verrà aggiunta una nuova colonna e il widget verrà inserito al suo interno.
Nota
Con Editor 2.0, i widget possono essere aggiunti solo alle colonne esistenti, non è possibile crearne di nuove con il posizionamento di un widget.
Per aggiungere widget dall'area di disegno:
-
Fai clic con il pulsante destro del mouse su qualsiasi widget e seleziona Aggiungi il widget qui sotto nel menu contestuale per aggiungere i widget immediatamente sotto il widget corrente (Solo editor classico).
-
In modalità Flex o Editor 2.0, fate clic sul segno più (+) icona nel menu mobile.
-
Se si fa clic con il pulsante destro del mouse su una colonna, fare clic suAggiungie selezionaAggiungi il widget qui sotto
(Rilevante per la modalità Classic, Flex ed Editor 2.0)
-
-
Seleziona tra i quattro widget più popolari o fai clic Altri widget per aprire il menu completo. Dopo aver aggiunto il widget, puoi modificarlo come al solito.
-
Fai clic sul segno più + icona nel menu mobile.
-
Se si fa clic con il pulsante destro del mouse su una colonna, fare clic su Aggiungi e seleziona Aggiungi il widget qui sotto.
Il pannello multimediale consente di trascinare e rilasciare facilmente contenuti multimediali (immagini, video e icone) sulla tela e aggiungere un widget contemporaneamente. Ad esempio, se aggiungi un'immagine dal pannello multimediale alla tela, viene aggiunto automaticamente un widget di immagine. Per saperne di più, consulta Pannello multimediale.
Per aggiungere un'immagine, un'icona o un widget video dal pannello multimediale:
-
(Facoltativo) Utilizzate i filtri per individuare il file multimediale desiderato. Oppure, fai clic su Carica contenuti multimediali per aggiungere nuovi file multimediali.
-
Fai clic e trascina il file multimediale desiderato sull'area di disegno. Nota che le immagini non possono essere inserite i widget Store Catalog o Product Gallery né in widget collegati a pagine dinamiche.
Puoi personalizzare i widget per regolare il contenuto, l'aspetto e il layout del tuo sito. La modifica dei widget consente un maggiore controllo sulle funzionalità del sito e sul loro comportamento
La maggior parte dei widget ha un'area per il contenuto e il design.
La maggior parte dei widget nell'editor dispone di opzioni di progettazione che consentono di personalizzare l'aspetto del widget per il sito. Non tutti i widget hanno le stesse opzioni. Ad esempio, alcuni widget non consentono di modificare la spaziatura interna, altri non consentono di modificare
Di seguito sono riportate le impostazioni di progettazione più comuni.
Per i widget con testo, puoi modificare gli stili di testo. Qualsiasi modifica apportata a un widget specifico sostituirà lo stile di testo del tema
Stili di testo in Editor 2.0
Le dimensioni del testo impostate in widget specifici (editor di testo, modulo di contatto, navigazione, attività commerciale, Click to Email, Click to Call e widget Button) verranno regolate automaticamente in base alle dimensioni dello schermo. Sul desktop, la dimensione del testo è ridotta al 100%, su tablet la dimensione del testo è ridotta all'85% e sui dispositivi mobili la dimensione del testo è ridotta all'80%. Tuttavia, per impostazione predefinita, l'editor non regola il testo in modo che sia inferiore a 16 px su dispositivi mobili o tablet. E non si adatterà a una dimensione superiore a 60 px su tablet o 40 px su dispositivo mobile. Questo per garantire che il testo sia ancora leggibile e proporzionato alle dimensioni di ogni schermo
Se devi sovrascrivere la dimensione del testo per dispositivo, puoi regolare la dimensione del testo nel testo del tema e il testo non verrà ridotto in base alle dimensioni dello schermo.
Di seguito sono riportati alcuni esempi di come la dimensione del testo verrà modificata in diversi scenari:
-
Se imposti la dimensione del testo su 40 px sul desktop, il testo verrà automaticamente ridotto a 34 px sul tablet e a 32 px sui dispositivi mobili.
-
Se imposti la dimensione del testo su 16 px sul desktop, non si ridurrà dell'85% a 13 px sul tablet o dell'80% a 12 px sui dispositivi mobili poiché è troppo piccolo per essere letto e inferiore al minimo di 16 px. La dimensione del testo rimarrà invece invariata a 16 px su tutte le dimensioni dello schermo
-
Se imposti la dimensione del testo su 100 px sul desktop, verrà regolata a 60 px sul tablet poiché questo è il massimo, anziché 85 px, che sarebbero l'85% della dimensione del testo del desktop. Anche la dimensione del testo per dispositivi mobili verrà regolata a 40 px poiché questo è il massimo, anziché 80 px, che sarebbero l'80% della dimensione del testo desktop
Le opzioni di layout sono in genere specifiche per determinati widget. Per selezionare una delle opzioni di layout disponibili per quel widget, fate clic sul layout che appare nel Design Editor (o fate clic sulla piccola freccia accanto ad esso) per aprireSeleziona Layoutmenu. Per modificare il layout selezionato, fai clic sul layout che desideri utilizzare e verrà aggiornato nel widget.
Sezione di layout di esempio nella Design scheda (Editor classico):
Sezione di layout di esempio nella pannello di progettazione (Editor 2.0/Flex):
-
Colore. Fate clic sull'icona rotonda a destra del nome dell'impostazione per aprire il selettore di colori e modificare il colore
-
Bordo. Cambia la larghezza del bordo usando il cursore o la casella di testo. Fai clic sull'icona a forma di ingranaggio
) per ulteriori opzioni.
-
Sfondo. Usa un'immagine o un colore di sfondo per questo widget utilizzando la finestra di dialogo Scegli e posiziona le immagini o l'URL di un video.
-
Larghezza e altezza. Usa il cursore o la casella di testo per modificare il numero di pixel
-
Angoli arrotondati. Aumenta o diminuisci gli angoli arrotondati di un widget. Fai clic sull'icona a forma di ingranaggio (
-
Ombre. Attiva o disattiva un'ombra per questo widget
-
Testo. Imposta vari aspetti del testo, come la famiglia di caratteri, lo spessore del carattere, ecc.
widget che incorporano un pulsante offriranno la possibilità di selezionare se il pulsante eredita lo stile del pulsante principale o secondario definito nel pannello del tema. Inoltre, puoi scegliere tra i diversi layout dei pulsanti, apportare modifiche allo stile del pulsante (larghezza, altezza) e al testo del pulsante (carattere, dimensione del testo) e regolare la spaziatura interna ed esterna
Qualsiasi modifica apportata all'interno dell'editor di design sovrascriverà gli stili impostati a livello di pulsante del tema. Se devi tornare allo stile del pulsante del tema,Reimposta lo stile del tema.
-
Se vengono apportate modifiche al pulsante (che sostituiranno gli stili impostati a livello di pulsante del tema), sullo stile del pulsante primario o secondario sarà ancora presente un riquadro indicatore.
-
Se si fa clic sullo stile del pulsante che non ha la casella dell'indicatore, verrà ripristinato lo stile impostato a livello del pulsante del tema.
Cambia la spaziatura interna (spaziatura all'interno dei bordi del widget) e la spaziatura esterna (spaziatura all'esterno dei bordi del widget). Ogni numero nel riquadro esterno imposta la spaziatura esterna per il proprio lato (superiore, inferiore, sinistro o destro) e ogni numero nel riquadro interno imposta la spaziatura interna per il proprio lato (superiore, inferiore,
Per informazioni dettagliate, vedere Spaziatura esterna ed interna
Le animazioni di ingresso consentono di animare i widget e i widget di pagina quando vengono caricati per la prima volta sul sito. Il movimento e l'interattività rendono il sito più memorabile e possono enfatizzare le sezioni su cui vuoi che i visitatori si concentrino, come un numero di telefono o un pulsante
Inoltre, puoi controllare dove inizia e finisce l'animazione sullo schermo usandoScorriimpostazioni.
Per aggiungere un'animazione:
-
Naviga fino alla Animazione sezione.
-
Seleziona un Trigger e Animazione.
-
(Facoltativo) Personalizza l'animazione. Ad esempio, la direzione da cui entra.
Esempio di impostazione dell'animazione:
Per reimpostare l'animazione, fate clic su Ripristina i valori predefiniti.
Se si utilizza l'animazione Scroll, è possibile fare clic su Metti in pausa l'animazione nel pannello laterale per mettere in pausa tutte le animazioni mentre lavori nell'editor. L'animazione rimarrà sul sito live e in modalità anteprima.
Nota
Le animazioni impostate per le dimensioni dello schermo del desktop o del tablet sono collegate e saranno le stesse. Tuttavia, il dispositivo mobile è separato e le animazioni configurate per desktop e tablet non verranno applicate
Quando aggiungete animazioni, tenete presente quanto segue:
-
Troppe animazioni possono disorientare o distrarre gli utenti, quindi usale con parsimonia.
-
Quando rimuovi un'animazione, ricorda che le animazioni possono essere applicate sia alle righe che ai widget, quindi l'animazione che stai vedendo potrebbe essere stata aggiunta da qualche parte inaspettata.
Per rimuovere le animazioni:
Nota
Se un elemento non ha un'animazione, potrebbe essere applicato a uno dei contenitori in cui si trova l'elemento. Si consiglia di controllare tutti i contenitori per eventuali animazioni.
Usa l'intelligenza artificiale per creare rapidamente widget personalizzati per il sito senza uscire dall'editor. Tieni presente che i widget del sito sono specifici del sito in cui vengono creati e non possono essere utilizzati su altri siti del tuo account. Tutti i widget personalizzati del sito che crei vengono memorizzati nel pannello Widget sotto Personalizzati categoria per un facile accesso.
Nota
Questa funzione è disponibile per amministratori e membri dello staff con Copilota permesso.
Per creare un widget del sito personalizzato nell'editor:
-
Dal pannello dei widget, puoi generare un widget personalizzato del sito nei seguenti modi:
-
Inserisci un prompt. Puoi usare @ simbolo per fare riferimento a una collezione specifica. La nostra intelligenza artificiale può recuperare le raccolte del tuo sito e la loro struttura, consentendole di creare widget che ne visualizzano i
-
Clicca Idee da provare per sfogliare una libreria di prompt predefiniti. Fai clic Usa questo prompt per selezionare il prompt desiderato.
-
Remixa un widget già pronto. Fai clic per selezionare il widget desiderato, quindi Remix. Il widget remixato viene aggiunto Personalizzato sezione del pannello dei widget ed è pronta per essere trascinata sulla tela.
Nota che Copilota è richiesta l'autorizzazione per remixare un widget.
-
-
Se hai inserito un prompt, si apre una nuova finestra sul lato destro dello schermo. A seconda della complessità della richiesta, l'IA può impiegare alcuni istanti per generare il widget. Quando il widget è stato creato, fai clic su Portami lì.
-
Dal Personalizzato sezione del pannello Widget, trascina e rilascia il widget sulla tela.
-
(Facoltativo) Se devi apportare modifiche al widget, fai clic sull'icona a tre punti sulla scheda del widget personalizzato del sito e seleziona una delle seguenti opzioni:
-
Modifica con Copilot
-
Modifica nome e icona
-
Gestisci in Workspace (Solo piani personalizzati)
-
Archivio
-
I widget fissi consentono di mantenere un widget sempre visibile, anche quando un visitatore scorre la pagina verso il basso, mentre i widget bloccati rimangono attaccati al loro elemento principale (colonna o colonna interna) finché l'elemento principale è nella finestra.
I widget possono essere impostati come fissi o bloccati nel Posizione sezione del Pannello di progettazione.
widget fissi consentono di mantenere un widget sempre visibile, anche quando un visitatore scorre la pagina verso il basso. Utilizza i widget fissi per mantenere gli inviti all'azione importanti fissi, visibili e cliccabili su
Per correggere un widget:
-
Cerca il widget desiderato, quindi fai clic e trascinalo sull'area di disegno.
-
Fai clic sul widget per aprire il menu mobile e selezionaModifica design. Si apre il pannello di progettazione sul lato destro dello schermo. Scorri verso il basso fino aPosizionesezione del pannello di progettazione.
-
Fai clic per espandereTipo di posizionemenu e selezionaFisso. Questa modifica si applica a tutte le dimensioni dello schermo, tuttavia è possibile sostituirla se necessario. Una volta selezionata la posizione, non è possibile passare da Fisso a Bloccato. Questo perché quando selezioni Fisso, il widget viene rimosso dal contenitore originale in modo che possa rimanere visibile sullo schermo mentre l'utente scorre. Se dovessi passare da Fisso a Bloccato, l'editor non saprebbe in quale contenitore posizionare il widget. Se devi passare, devi prima tornare a Predefinito. Il widget verrà spostato nella prima sezione della finestra
-
NelSpaziaturamenu, usa ilImpostazioni dei margini per definire dove si trova il widget nella finestra. Questo è particolarmente importante da configurare se avete due widget fissi nella stessa posizione della finestra
-
Per visualizzare il widget solo nella pagina corrente, abilitaMostra solo in questa paginaattiva/disattiva.
widget bloccati rimangono attaccati al loro elemento principale (colonna o colonna interna) finché l'elemento principale è nella finestra della vista. Se è presente più di un widget bloccato nella stessa posizione, il widget in alto sarà il
Nota
Il blocco non è un'opzione nelle griglie avanzate.
Per aggiungere un widget:
-
Cerca il widget desiderato, quindi fai clic e trascinalo sull'area di disegno.
-
Fai clic sul widget per aprire il menu mobile e selezionaModifica design. Si apre il pannello di progettazione sul lato destro dello schermo.
-
Nel pannello di progettazione, scorri verso il basso fino aPosizionesezione.
-
Fai clic per espandereTipo di posizionemenu e selezionaAppuntato. Ciò garantisce che il widget rimanga all'elemento principale (colonna o colonna interna) purché l'elemento principale sia nella finestra. Questa modifica si applica a tutte le dimensioni dello schermo, tuttavia puoi sovrascriverla se necessario
-
NelPosizionesezione, configura l'offset del widget. L'offset è il punto in cui il widget verrà bloccato sullo scroll prima di lasciare la finestra. Se impostato dal desktop, le altre dimensioni dello schermo avranno gli stessi valori, tuttavia può essere sovrascritto in base alle dimensioni dello schermo, se necessario. Se l'intestazione permanente è abilitata, l'offset sarà basato sull'altezza predefinita dell'intestazione. Se abiliti un'intestazione permanente dopo aver impostato l'offset, questa non si aggiornerà automaticamente e dovrai tornare indietro e regolare manualmente
Se in qualsiasi momento sposti il widget bloccato su un elemento principale diverso (colonna o colonna interna), le impostazioni del pannello di progettazione, come l'offset, verranno mantenute.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Imposta se il widget è allineato a sinistra, a destra o al centro della sua area.
Alcuni widget si comportano in modo molto diverso nelle diverse visualizzazioni. Controlla il modo in cui il widget viene visualizzato in ogni visualizzazione dopo averlo aggiunto per assicurarti che venga visualizzato correttamente
Per impostare l'allineamento, fate clic con il pulsante destro del mouse sul widget e fate clic suAllinea a sinistra,Allinea al centro, o Allinea a destra icona.
Per le opzioni di allineamento in modalità Flex o Editor 2.0, consultate Progetta con Flex.
Seleziona il contenitore in cui si trova il widget, consentendoti di trovarlo e modificarlo facilmente.
Editor classico:Fai clic con il pulsante destro del mouse sul widget, fai clicSeleziona Contenitoree selezionaColonnaoFila.
Editor 2.0:Fai clic con il pulsante destro del mouse sul widget, fai clic Seleziona Livello e seleziona il contenitore desiderato.
Un widget può essere copiato e incollato in un'altra posizione. L'opzione Incolla appare solo se hai un widget che è stato
Fai clic con il pulsante destro del mouse sul widget e fai clicCopiaoIncolla.
In alternativa, in Editor 2.0, fai clic su Icona duplicata nel menu mobile.
Avvertimento
Non consigliamo di copiare e incollare i moduli di contatto, poiché in genere ciò comporta problemi nel modulo di contatto duplicato.
Usa la funzione Nascondi sul dispositivo per modificare i tuoi contenuti in base al dispositivo utilizzato dal visitatore per accedere al tuo sito web. Ad esempio, mostra un widget click-to-call per gli utenti mobili o un modulo di contatto per
Widget nascosti da Nascondi sul dispositivo le funzionalità non vengono eliminate.
Editor classico
Fai clic con il pulsante destro del mouse sul widget, fai clic Nascondi sul dispositivo, seleziona un dispositivo. Se nel pannello laterale è presente un'icona a forma di occhio, significa che ci sono elementi nascosti sul dispositivo che stai modificando. Per visualizzare gli elementi nascosti, fai clic sull'icona a forma di occhio.
Editor 2.0
Gli elementi possono essere nascosti solo sui dispositivi attualmente in fase di modifica.
Per nascondere un elemento: nel pannello laterale, fai clic su Livelli, passa con il mouse sull'elemento desiderato e fai clic su icona a forma di occhio. Se sul dispositivo che stai modificando sono presenti elementi nascosti, questi verranno indicati nel pannello dei livelli con un'icona a forma di occhio barrata.
Nota
I contenuti nascosti possono ancora essere visualizzati nel codice del sito live (dopo la pubblicazione/ripubblicazione). Ciò è previsto e dovuto alla tecnologia utilizzata.
I link di ancoraggio consentono di indirizzare i visitatori a una sezione specifica della pagina, facilitando loro lo spostamento da un punto all'altro di una pagina più lunga o di una sezione specifica a cui si desidera fare riferimento.
Fai clic con il pulsante destro del mouse sul widget e fai clicImposta come ancoraggio.
Per ulteriori informazioni sugli ancoraggi, vedere Azioni e opzioni di Canvas.
Sebbene possano esserci differenze in base a ciò che un'app o un widget personalizzato sta cercando di realizzare, i widget creati con il nostro generatore di widget non sono necessariamente migliori dei widget creati dai nostri partner di app.
Le app devono inoltre soddisfare standard rigorosi e sottoporsi a un rigoroso processo di controllo qualità da parte del team Duda.
Per una risposta più dettagliata, consulta la sezione FAQ nella Panoramica dell'App Store articolo.
Consulta le seguenti risorse per i widget personalizzati e il generatore di widget:
Nota
-
Se stai cercando un widget personalizzato, ma hai bisogno di uno sviluppatore, un Duda Expert potrebbe essere in grado di aiutarti. Per ulteriori informazioni sul programma Experts, Esperti Duda. Per conoscere gli esperti, visita experts.duda.com.
-
L'assistenza Duda non è in grado di risolvere i problemi relativi ai widget personalizzati.