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.
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.
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.
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.
-
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 nel pannello di 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. Utilizza un'immagine o un colore di sfondo 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:
- Fare clic sull'elemento per aprire il menu mobile, quindi fare clic sull'opzione per modificare il design.
- Vai alla sezione Animazione .
-
Fare clic sul menu a discesa Animazione e selezionare Nessuno.
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.
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.
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.
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.
Gli elementi possono essere nascosti solo sui dispositivi attualmente in fase di modifica.
Per nascondere un elemento: nel pannello laterale, fai clic su Livelli, hover sull'elemento desiderato e fai clic sull'icona a forma di occhio. Se ci sono elementi nascosti sul dispositivo che stai attualmente modificando, verranno indicati nel pannello dei livelli con un'icona a forma di occhio barrata.
Nota
I contenuti nascosti si possono comunque visualizzare nel codice del sito live (dopo la pubblicazione/ripubblicazione). Ciò è previsto e dovuto alla tecnologia utilizzata.
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.
Commenti
0 commenti
Questo articolo è chiuso ai commenti.