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.
Ecco come aggiungere i widget:
Per aggiungere widget dalla 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 aggiungi un widget al tuo sito, fai attenzione al testo nell'indicatore di posizionamento blu:
-
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.
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.
-
Se si fa clic con il pulsante destro del mouse su una colonna, fare clic su Aggiungi e selezionare Aggiungi widget di seguito
(Rilevante per la modalità Classic, Flex e 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.
-
Fai clic sull'icona più + nel menu mobile.
-
Se fai clic con il tasto destro del mouse su una colonna, clicca su Aggiungi e seleziona Aggiungi widget qui sotto.
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.
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 :
-
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. Utilizzi un'immagine o un colore di sfondo per questo widget tramite la finestra di dialogo "Scegli e posiziona immagini" o un 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 e un'Animazione.
-
(Opzionale) Personalizza l'animazione. Ad esempio, la direzione da cui entra.
Esempio di configurazione dell'animazione:
Per ripristinare l'animazione, fai clic su Ripristina le impostazioni predefinite.
Se utilizzi l'animazione a scorrimento, puoi fare clic su Metti in pausa l'animazione nel riquadro laterale per mettere in pausa tutte le animazioni mentre lavori nell'editor. L'animazione rimarrà sul sito attivo e in modalità anteprima.
Nota
Le animazioni impostate per le dimensioni dello schermo di desktop o tablet sono collegate e saranno le stesse. Tuttavia, la versione mobile è separata e le animazioni configurate per desktop e tablet non saranno applicate.
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:
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.
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 .
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.
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.
Fai clic con il pulsante destro del mouse sul widget, quindi fai clic su Nascondi su dispositivo e seleziona un dispositivo. Se è presente un'icona a forma di occhio nel pannello laterale, essa indica che ci sono elementi nascosti sul dispositivo che stai modificando. Per visualizzare gli elementi nascosti, fai clic sull'icona a forma di occhio.
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.
Fare clic con il pulsante destro del mouse sul widget e scegliere Imposta come ancoraggio.