I widget sono gli elementi chiave di un sito, che ti consentono di aggiungere e gestire i contenuti in modo efficace. Servono come 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. Varia anche se si utilizza l'editor classico, la modalità flex o l'editor 2.0. Di seguito è riportato come aggiungere widget:
Per aggiungere widget dalla libreria widget :
-
Nel pannello laterale, fai clic su widget per aprire la libreria widget.
-
I widget possono essere cercati utilizzando la barra di ricerca in alto o scorrendo le diverse sezioni della libreria.
-
-
Fai clic e trascina il widget nella posizione desiderata nel sito. Viene visualizzato un indicatore di posizionamento blu.
-
Il widget viene visualizzato nella posizione mostrata dall'indicatore di posizionamento blu.
Quando trascini un widget sul tuo sito, prendi nota del 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à posizionato al suo interno.
-
Inserisci in una nuova colonna. Verrà aggiunta una nuova colonna e il widget verrà posizionato al suo interno.
Nota
Con l'Editor 2.0, 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:
-
Fare clic con il pulsante destro del mouse su qualsiasi widget e selezionare Aggiungi widget di seguito nel menu contestuale per aggiungere widget immediatamente sotto il widget corrente (solo editor classico).
-
In modalità Flex o Editor 2.0, fare clic sull'icona più (+) nel menu mobile.
-
Se si fa clic con il pulsante destro del mouse su una colonna, fare clic su Aggiungi e selezionare Aggiungi widget di seguito
(Modalità Classica, Flex ed Editor 2.0).
-
-
Seleziona tra i quattro widget più popolari o fai clic su Altri widget per aprire il menu completo. Dopo aver aggiunto il widget, puoi modificarlo come al solito.
Puoi personalizzare i widget per regolare il contenuto, l'aspetto e il layout del tuo sito. La modifica dei widget ti consente un maggiore controllo sulle funzionalità del tuo sito e sul loro comportamento.
La maggior parte dei widget ha un'area per il suo contenuto e il suo design.
La maggior parte delle widget nell'editor dispone di opzioni di design che ti consentono di personalizzare l'aspetto del widgetper il tuo 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 la spaziatura esterna.
Di seguito sono riportate le impostazioni di progettazione comuni.
Per i widget con testo, è possibile modificare gli stili di testo. Qualsiasi modifica apportata a un widget specifico sovrascriverà lo stile di testo del tema.
Nell'Editor 2.0, le dimensioni del testo impostate in widget specifiche (Editor di testo, Modulo di contatto, Navigazione, Business, Fai clic per inviare un'e-mail, Fai clic per chiamare e Pulsante widget) verranno regolate automaticamente in base alle dimensioni dello schermo. Su desktop, la dimensione del testo è del 100%, su tablet la dimensione del testo è ridotta all'85% e su dispositivi mobili la dimensione del testo è ridotta all'80%. Tuttavia, per impostazione predefinita, l'editor non regolerà il testo in modo che sia più piccolo di 16 px su dispositivi mobili o tablet. E non si regolerà a più grandi di 60 px su tablet o 40 px su dispositivi mobili. Questo per garantire che il testo sia ancora leggibile e proporzionato alle dimensioni di ogni schermo.
Se è necessario sovrascrivere la dimensione del testo per dispositivo, è possibile 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 le dimensioni del testo verranno regolate in diversi scenari:
-
Se imposti la dimensione del testo su 40 px su desktop, il testo verrà automaticamente ridotto a 34 px su tablet e a 32 px su dispositivi mobili.
-
Se imposti la dimensione del testo a 16 px su desktop, non si ridurrà dell'85% a 13 px su tablet o dell'80% a 12 px su dispositivi mobili poiché è troppo piccolo per essere letto e inferiore al minimo di 16 px. Invece, la dimensione del testo rimarrà la stessa a 16 px su tutte le dimensioni dello schermo.
-
Se imposti la dimensione del testo su 100 px su desktop, verrà regolata a 60 px su tablet poiché questo è il massimo, invece di 85 px che sarebbe l'85% della dimensione del testo desktop. Anche la dimensione del testo mobile si regolerà a 40 px poiché questo è il massimo, invece di 80 px che sarebbe l'80% della dimensione del testo desktop.
Le opzioni di layout sono generalmente specifiche per determinati widget. Per selezionare dal set di opzioni di layout disponibili per quel widget, fai clic sul layout che appare nell'Editor di progettazione (o fai clic sulla piccola freccia accanto ad esso) per aprire il menu Seleziona layout. Per modificare il layout selezionato, fare clic sul layout che si desidera utilizzare e verrà aggiornato nel widget.
Esempio di sezione di layout nella scheda Progettazione (editor classico):
Esempio di sezione di layout nel pannello di progettazione (Editor 2.0/Flex):
-
Colore. Fare clic sull'icona del colore rotondo a destra del nome dell'impostazione per aprire il selettore di colori e modificare il colore.
-
Bordo. Modifica la larghezza del bordo utilizzando il dispositivo di scorrimento o la casella di testo. Fare clic sull'icona a forma di ingranaggio (
) per ulteriori opzioni.
-
Sfondo. Utilizza un'immagine di sfondo o un colore per questo widget utilizzando la finestra di dialogo Scegli e posiziona immagini o l'URL di un video.
-
Larghezza e altezza. Utilizzare il dispositivo di scorrimento o la casella di testo per modificare il numero di pixel.
-
Angoli arrotondati. Aumenta o diminuisci gli angoli arrotondati di un widget. Fare 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, il peso del carattere, ecc.
I widget che incorporano un pulsante offrono la possibilità di selezionare se il pulsante eredita lo stile del pulsante principale o secondario definito nel pannello del tema. Inoltre, è possibile 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 è necessario ripristinare lo stile del pulsante del tema, fare clic su Ripristina stile del tema.
-
Se vengono apportate modifiche al pulsante (che sovrascriveranno gli stili impostati a livello di pulsante del tema), sarà ancora presente una casella di indicazione sullo stile del pulsante Primario o Secondario.
-
Se lo stile del pulsante che non ha la casella dell'indicatore viene cliccato, il pulsante verrà reimpostato sullo stile impostato a livello di pulsante del tema.
Modifica la spaziatura interna (spaziatura all'interno dei bordi del widget) e la spaziatura esterna (spaziatura all'esterno dei bordi del widget). Ogni numero nella casella esterna imposta la spaziatura esterna per il proprio lato (superiore, inferiore, sinistro o destro) e ogni numero nella casella interna imposta la spaziatura interna per il proprio lato (superiore, inferiore, sinistro o destro).
Per informazioni dettagliate, vedere Spaziatura esterna e interna
Le animazioni di ingresso ti consentono di animare i widget e i widget di pagina quando vengono caricati per la prima volta sul tuo sito. Il movimento e l'interattività rendono il tuo sito più memorabile e possono enfatizzare le sezioni su cui vuoi che i visitatori si concentrino, come un numero di telefono o un pulsante di contatto.
Inoltre, puoi controllare dove inizia e finisce l'animazione sullo schermo utilizzando le impostazioni di scorrimento.
Per aggiungere un'animazione:
-
Vai alla sezione Animazione .
-
Seleziona un trigger ( ingresso o scorrimento) e un'animazione.
-
(Facoltativo) Personalizza l'animazione (ad esempio, la direzione da cui entrerà).
Esempio di configurazione dell'animazione:
Per ripristinare l'animazione, fare clic su Ripristina impostazioni predefinite.
Se si utilizza un'animazione di scorrimento, è possibile fare clic su Metti in pausa l'animazione () nel pannello laterale per mettere in pausa tutte le animazioni mentre si è in modalità di modifica. Le animazioni saranno ancora attive in modalità anteprima e sul sito live.
Nota
Le animazioni impostate per Desktop e Tablet sono collegate e saranno le stesse. Tuttavia, le impostazioni per la modalità Mobile sono separate, e le animazioni configurate per Desktop/Tablet non si applicheranno a esse.
Mentre aggiungi animazioni, ricorda quanto segue:
-
Troppe animazioni possono disorientare o distrarre gli utenti, usale con moderazione.
-
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 in un punto imprevisto.
Per rimuovere le animazioni nell'editor classico:
Nota
Se un elemento non dispone di 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.
Nota
Queste informazioni sono specifiche per l'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Fisso widget consente di mantenere un widget visibile in ogni momento, anche quando un visitatore scorre la pagina verso il basso, mentre è bloccato widget attenersi all'elemento principale (colonna o colonna interna) per tutto il tempo in cui l'elemento principale si trova nel viewport.
I widget possono essere impostati come fissi o bloccati nella sezione Posizione del pannello di progettazione. Per ulteriori informazioni sulle sezioni del pannello di progettazione, vedere Progettazione con Flex.
Risolto widget consentono di mantenere un widget visibile in ogni momento, anche quando un visitatore scorre la pagina verso il basso. Utilizza i widget fissi per mantenere fissi, visibili e cliccabili importanti inviti all'azione su tutte le pagine del sito.
Per correggere un widget:
-
Nel pannello laterale, fai clic suwidget. Cerca il widget desiderato, quindi fai clic e trascinalo sulla tela.
-
Fai clic sul widget per aprire il menu mobile e seleziona Modifica design. Si apre il pannello di progettazione sul lato destro dello schermo. Scorri verso il basso fino alla sezione Posizione del pannello di progettazione.
-
Fare clic per espandere il menu Tipo di posizione e selezionare Fisso. 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. Ciò è dovuto al fatto che quando si seleziona Fisso, il widget viene rimosso dal contenitore originale in modo che possa rimanere visibile sullo schermo durante lo scorrimento dell'utente. Se dovessi passare da Fisso a Bloccato, l'editor non saprebbe in quale contenitore posizionare il widget. Se è necessario cambiare, è necessario prima tornare a Predefinito. Il widget verrà spostato nella prima sezione della finestra.
-
Nel menu Spaziatura, utilizzare le impostazioni Margine per definire la posizione del widget nella finestra. Questa opzione è particolarmente importante da configurare se si dispone di due widget fissi nella stessa posizione della finestra.
-
Per visualizzare il widget solo sulla pagina corrente, abilitare l'interruttore Mostra solo su questa pagina.
I widget bloccati rimangono fedeli al loro elemento principale (colonna o colonna interna) per tutto il tempo in cui l'elemento principale si trova nel riquadro di visualizzazione. Se c'è più di un widget bloccato nella stessa posizione, il widget in alto sarà il primo widget.
Nota
L'aggiunta non è un'opzione nelle griglie avanzate.
Per bloccare un widget:
-
Nel pannello laterale, fai clic suwidget. Cerca il widget desiderato, quindi fai clic e trascinalo sulla tela.
-
Fai clic sul widget per aprire il menu mobile e seleziona Modifica design. Si apre il pannello di progettazione sul lato destro dello schermo.
-
Nel pannello di progettazione, scorri verso il basso fino alla sezione Posizione.
-
Fare clic per espandere il menu Tipo di posizione e selezionare Appuntato. In questo modo, il widget rimane fedele all'elemento principale (colonna o colonna interna) finché l'elemento principale si trova nel riquadro di visualizzazione. Questa modifica si applica a tutte le dimensioni dello schermo, tuttavia è possibile sostituirla se necessario.
-
Nella sezione Posizione, configura l'offset del widget. L'offset è il punto in cui il widget verrà bloccato sullo scorrimento prima di lasciare il viewport. 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 fissa è abilitata, l'offset si baserà sull'altezza predefinita dell'intestazione. Se si abilita un'intestazione adesiva dopo aver impostato l'offset, non si aggiornerà automaticamente e sarà necessario tornare indietro e regolare manualmente l'offset.
Se in qualsiasi momento sposti il widget bloccato su un elemento genitore diverso (colonna o colonna interna), le impostazioni del pannello di progettazione, come l'offset, verranno mantenute.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Imposta se il widget è allineato a sinistra, a destra o al centro della sua area.
Alcuni widget si comportano in modo molto diverso in visualizzazioni diverse. Controlla il modo in cui il tuo widget viene visualizzato in ogni vista dopo averlo aggiunto per assicurarti che venga visualizzato correttamente.
Per impostare l'allineamento, fare clic con il pulsante destro del mouse sul widget, quindi fare clic su un'icona Allinea a sinistra, Allinea al centro o Allinea a destra .
Per le opzioni di allineamento nell'Editor 2.0, vedere Allinea.
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 clic su Seleziona contenitore e seleziona Colonna o Riga.
Editor 2.0: fare clic con il pulsante destro del mouse sul widget, fare clic su Seleziona livello e selezionare il contenitore desiderato.
Un widget può essere copiato e incollato in un'altra posizione. L'opzione Incolla viene visualizzata solo se si dispone di un widget che è stato copiato.
Fare clic con il pulsante destro del mouse sul widget, quindi scegliere Copia o Incolla.
In alternativa, nell'Editor 2.0, fare clic sull'icona Duplica nel menu mobile.
Attenzione
Si sconsiglia di copiare e incollare i moduli di contatto, poiché ciò in genere comporta problemi nel modulo di contatto duplicato.
Utilizza la funzione Nascondi su dispositivo per modificare i contenuti in base al dispositivo utilizzato dai visitatori per accedere al tuo sito. Ad esempio, mostra un widget Click-to-Call agli utenti mobile o un modulo di contatto agli utenti desktop.
I widget nascosti dalla funzione Nascondi sul dispositivo non vengono eliminati.
Fare clic con il pulsante destro del mouse sul widget, fare clic su Nascondi sul dispositivo, nell'editor classico, selezionare un dispositivo (nell'editor 2.0, l'elemento può essere nascosto solo sul dispositivo attualmente in fase di modifica).
In alternativa, nell'Editor 2.0, gli elementi possono essere nascosti nel pannello dei livelli. Nel pannello laterale, fai clic su Livelli, hover sull'elemento desiderato e fai clic sull'icona a forma di occhio.
Se nel pannello laterale è presente un'icona a forma di occhio (), significa che ci sono elementi nascosti sul dispositivo che si sta modificando (solo editor classico). Per visualizzare gli elementi nascosti, fare clic sull'icona a forma di occhio.
Nell'Editor 2.0, se ci sono elementi nascosti sul dispositivo che stai attualmente modificando, verranno indicati nel pannello dei livelli. Nel pannello laterale, fai clic su Livelli. Gli elementi nascosti appariranno disattivati con accanto un'icona a forma di occhio barrato ().
Nota
I contenuti nascosti possono ancora essere visualizzati nel codice del sito pubblicato (dopo la pubblicazione/ripubblicazione). Questo è previsto e dovuto alla tecnologia utilizzata. Per informazioni dettagliate, vedere Prestazioni e ottimizzazione del sito.
I collegamenti di ancoraggio permettono di reindirizzare i visitatori a una sezione specifica della pagina, rendendo più agevole il passaggio da un punto all'altro di una pagina lunga o a una sezione specifica da usare come riferimento. Per maggiori informazioni sull'ancoraggio, vedi Tag e collegamenti di ancoraggio.
Fare clic con il pulsante destro del mouse sul widget e scegliere Imposta come ancoraggio.
Sebbene possano esserci differenze in base a ciò che un'app o un widget personalizzato cerca di realizzare, i widget creati con il nostro generatore di widget non sono necessariamente migliori dei widget creati dalle nostre app partner.
Le app devono inoltre soddisfare standard rigorosi e sottoporsi a un rigoroso processo di controllo qualità da parte del team di Duda.
Per una risposta più dettagliata, consulta la sezione Domande frequenti nell'articolo Panoramica dell'app store .
Consulta le seguenti risorse per i widget personalizzati e il widget builder:
Nota
Se stai cercando un widget personalizzato, ma hai bisogno di uno sviluppatore, un esperto Duda potrebbe essere in grado di aiutarti. Per ulteriori informazioni sul programma Experts, consulta Duda Experts. Per sfogliare gli esperti, visita experts.duda.co.