Video passo dopo passo
Introduzione
Questo tutorial presenta il widget Unfold del plugin JetTricks incluso nel sito di Crocoblock. Avrai la possibilità di nascondere parte di un testo o di un template e mostrare il resto quando l’utente fa clic su un pulsante.
Questo widget può aiutarti a risparmiare spazio e a organizzare meglio l’aspetto della pagina nascondendo contenuti aggiuntivi. A differenza del widget Leggi di più, non può nascondere una o più sezioni. Tuttavia, il widget Unfold può essere aperto e poi richiuso. Inoltre, include molte opzioni di personalizzazione che possono aiutarti a sfruttarlo al massimo. Per esempio, puoi progettarlo in modo diverso nelle modalità piegata e aperta. A proposito, se vuoi maggiori informazioni sul widget Leggi di più, lo aggiungerò presto a Elementor Academy.
Un’altra caratteristica di questo widget è che non può essere usato solo per mostrare/nascondere testo, ma puoi anche usare un template che hai creato in precedenza.
Vediamo come funziona il widget Unfold.
1. Aggiungi il widget Unfold
Apri nel builder di Elementor la pagina o l’articolo a cui devi aggiungere un widget Unfold. Cerca il widget Unfold nel pannello Elementi e trascinalo nella sezione in cui vuoi posizionarlo.
2. Definisci le impostazioni
Nella barra laterale sinistra vedrai il blocco Impostazioni. Qui puoi definire le impostazioni di chiusura e apertura.
- Fold (Chiudi): se non attivi questa opzione, il blocco di contenuto verrà mostrato aperto per impostazione predefinita. In caso contrario, verrà mostrato chiuso.
- Scroll to Top After Hiding Content (torna all’inizio dopo aver nascosto il contenuto): se attivi questa opzione, lo schermo scorrerà verso l’alto quando nascondi il contenuto di un blocco; può essere molto utile quando il contenuto è lungo, così l’utente non perde il punto di riferimento.
- Closed Height (Altezza da chiuso): questa opzione ti consente di definire l’altezza del blocco di contenuto quando è chiuso. Puoi farlo spostando il cursore o semplicemente inserendo il valore necessario nella barra;
- Separator height (Altezza del separatore): definisce l’altezza della fascia separatrice colorata che parte dal fondo del blocco aperto e va verso l’alto. Puoi schiarire il colore con la trasparenza nella scheda Stile. È anche possibile trasformarlo in una sfumatura.
- Duration (Durata): qui puoi scegliere la velocità con cui il blocco di contenuto si chiuderà e si aprirà. Più alto è il valore, più lento sarà il movimento.
- Easing (Easing): qui ci sono 9 tipi di animazione di chiusura e apertura tra cui puoi scegliere.
3. Scegli il contenuto
Nel blocco Contenuto puoi aggiungere contenuti statici (come testo, immagini, video o altri media) oppure recuperarli dinamicamente dal metacampo. Inoltre, puoi aggiungere uno qualsiasi dei template disponibili nel blocco di contenuto nascosto.
Per aggiungere il template già pronto al blocco nascosto, devi premere il pulsante Template (Template) nella riga Content Type (Tipo di contenuto), che è il pulsante con l’icona a forma di foglio. Scegli il template dal menu a tendina e verrà aggiunto automaticamente al blocco di contenuto nascosto.
4. Personalizza il pulsante
Puoi personalizzare il pulsante che chiude e apre il blocco di contenuto nascosto nella sezione Button (pulsante).
- Alignment (Allineamento): ti permette di scegliere dove verrà posizionato il pulsante.
- Fold Icon (Icona di chiusura): puoi scegliere l’icona per i pulsanti di chiusura e apertura nella libreria di icone o caricare il tuo file SVG.
- Fold Text (Testo di chiusura): inserisci qui i testi dei pulsanti di chiusura e apertura.
5. Personalizza a tuo gusto
Ci sono molte impostazioni di design per ogni elemento nella scheda Stile. Ecco alcuni esempi di ciò che potresti creare con l’aiuto del widget Unfold:
Quindi, questi semplici passaggi sono tutto ciò che devi fare per ottenere un impressionante blocco di apertura nella pagina del tuo sito web.