Come creare il contenuto di tela in Element: una guida

Presentare molti contenuti in un piccolo spazio web senza confondere gli utenti è una sfida per i web designer. Il contenuto Off Canvas è una soluzione alla moda, nuova e intelligente che può aiutarti in questo contesto.

Con il plug-in Page Builder Elementator, puoi facilmente creare menu off-canvas, banner promozionali, barre laterali e altro ancora sul tuo sito web. Ciò non solo può aiutarti nella presentazione dei contenuti, ma anche semplificare la navigazione, migliorare la leggibilità e convertire gli utenti.

Se il tuo sito è costruito con Element, ti vorranno solo pochi minuti per creare contenuti di tela per il tuo sito. In questo post sul blog, ti guideremo su come aggiungere il contenuto di tela in Element con una guida passo-passo. Iniziamo!

Cosa c'è di contenuto di tela fuori?

Il contenuto di Off Canvas è un widget Element che mantiene il contenuto nascosto fuori dallo schermo fino a quando non viene attivato dall'interazione dell'utente. Di solito, questo widget è collegato con un pulsante sullo schermo. Ogni volta che gli utenti fanno clic sul pulsante, il contenuto Off-Canvas scorre immediatamente e mette in mostra le informazioni aggiuntive.

Come detto sopra, il widget di contenuti off-canvas copre contenuti come menu, stendardi promozionali, barre laterali, pannelli di accesso e iscrizione, carrelli della spesa, filtri dei contenuti e opzioni di visione rapida. Aiuta a mantenere un layout pulito e organizzato che è facile da accedere quando necessario.

Come creare il contenuto di tela in Element

Ora, in questa sezione, discuteremo di come creare il contenuto di tela in Element con una guida passo-passo. Ma prima di saltare nel tutorial, assicurati di avere i seguenti plugin installati e attivati ​​sul tuo sito.

• Elemento
• HappyAddons
• HappyAddons Pro

Quando sono pronti sul tuo sito, inizia a seguire il tutorial spiegato di seguito.

Passaggio 01: Aggiungi il widget di contenuto Canvas OFF alla tela Element

Apri un post o una pagina con la tela Element. Trova il widget digitando il suo nome nella casella di ricerca del pannello Element. Una volta che vedi il widget, trascinalo e lascialo cadere nella tela.

Vedrai un pulsante o un icona aggiunto alla tela. Facendo clic su di esso, è possibile aprire la sezione Off Canvas. Puoi dare un'occhiata nel video clip allegato di seguito.

Passaggio 02: Aggiungi il widget di Off Canvas alla tua pagina web

Sopra, abbiamo posizionato il widget su una tela vuota. Ma puoi aggiungerlo a qualsiasi parte specifica della tua pagina web. Per spiegarlo, abbiamo aperto una pagina web decorata. Quindi, ha posizionato il widget sulla sezione Hero

Puoi vedere che il widget è stato aggiunto alla sezione di intestazione della pagina Web.

Controlla come migliorare la SEO locale in WordPress con Elementor.

Passaggio 03: selezionare Tipo di contenuto personalizzato per il widget Off Canvas

Passare al contenuto del contenuto> Offcanvas . Fai clic sull'elenco a discesa accanto all'opzione Tipo di contenuto.

È necessario selezionare un tipo di contenuto adatto dall'elenco a discesa per il widget in base al tipo di contenuto che si desidera visualizzare.

Per questo tutorial, abbiamo selezionato il tipo di contenuto personalizzato.

Esplora questa guida su come progettare una base di conoscenza in WordPress.

Passaggio 04: Aggiungi informazioni al widget

Aggiungi il contenuto desiderato al widget utilizzando queste caselle. Facendo clic sulle caselle le espanderà e creerà spazi per consentire di aggiungere informazioni.

Puoi vedere che abbiamo aggiunto contenuti a una scatola espandendolo. È possibile aggiungere file di testo e multimediali facendo clic sulle rispettive opzioni.

Scopri come creare splendide pagine Web infografiche in Elementor.

Passaggio 05: selezionare una sorgente a disattivazione

Dalla sezione a levetta, è possibile modificare il tipo di sorgente a disattivazione, la posizione, l'animazione ed etichetta .

Apri l'elenco a discesa accanto all'opzione Origine a disattivazione. Seleziona il tipo di interruttore desiderato. Abbiamo selezionato il pulsante come tipo a levetta per questo tutorial.

Quindi, modifica la copia del pulsante dall'opzione di testo del pulsante . Puoi anche aggiungere un'icona del pulsante . Controllare tutte le modifiche nel pulsante sulla tela.

Passaggio 06: personalizza l'icona della barra di chiusura

La sezione Off Canvas viene fornita con un'icona incrociata (x) nell'angolo in alto a destra. Per personalizzarlo, espandere la sezione della barra di chiusura sul pannello Element.

Utilizzando le rispettive opzioni da lì, è possibile disabilitare l'icona, modificare l'allineamento, modificare il tipo di icona, il titolo icona e altro ancora. Spero che tu possa farlo da solo.

Ecco un tutorial su come creare un calendario degli eventi in WordPress.

Passaggio 07: modificare le impostazioni per il widget

Espandere la sezione Impostazioni . Dall'opzione di direzione , è possibile modificare la posizione del widget Canvas Off. Puoi posizionarlo a sinistra, a destra, in alto o in basso.

Successivamente, è possibile selezionare un effetto di transizione del contenuto . Aggiungerà un effetto di animazione alla pagina Web e lo mostrerà quando si fa clic sul pulsante.

Ad esempio, abbiamo selezionato la rivelazione come tipo di transizione del contenuto. Ora vedi il video clip allegato di seguito. Una volta fatto clic sul pulsante, la pagina si sposta anche insieme alla sezione Off Canvas.

Allo stesso modo, configura le altre opzioni.

Passaggio 08: stilizzare il widget di tela off

Vieni alla scheda Style ed espandi il contenuto Offcanvas .

Da qui, puoi cambiare la dimensione della tela off , aggiungere un tipo di bordo , aumentare la larghezza del bordo , cambiare un colore del bordo e impostare un raggio di bordo . Spero che tu possa farli da soli come abbiamo fatto.

Espandi la sezione Contenuti . Otterrai opzioni per personalizzare l' allineamento dei contenuti, il colore di sfondo, il tipo di bordo, la larghezza del bordo, il colore del bordo e il raggio del bordo per il contenuto con il widget di tela Off.

Allo stesso modo, puoi cambiare la tipografia, la dimensione del carattere e il colore del testo.

Ecco una semplice guida su come visualizzare la fotografia di prodotto rotante 360 ​​in WordPress.

Passaggio 09: stilizzare il pulsante di levetta

Allo stesso modo, espandere la sezione a levetta . Ciò consentirà di personalizzare l' allineamento dei pulsanti, la tipografia, il colore del testo, il raggio del bordo, lo sfondo dei pulsanti, ecc.

Passaggio 10: personalizza l'icona della barra di chiusura

Espandendo la sezione della barra di chiusura , è possibile personalizzare il colore, le dimensioni e più cose dell'icona di chiusura.

Passaggio 11: Rendi reattiva il widget mobile

Ognuno dei tuoi elementi web dovrebbe essere ottimizzato per i dispositivi mobili, quindi vengono visualizzati bene su tutti i tipi di dispositivi. Altrimenti, potresti perdere un enorme potenziale di traffico poiché circa il 50% di tutto il traffico nella maggior parte dei siti Web proviene dagli utenti mobili.

Per l'ottimizzazione mobile, fare clic sull'icona della modalità reattiva nella parte inferiore del pannello Element. Un topbar apparirà con opzioni per consentire di passare da dimensioni a schermo diverse.

Ora, passare da una dimensione a schermo diverse e verifica se i progetti vanno bene per i rispettivi dispositivi. In caso di problemi, è possibile modificare la dimensione del carattere, la dimensione del pulsante, la larghezza della tela, l'altezza e altre opzioni secondo necessità.

Le modifiche verranno salvate solo per quella particolare dimensione dello schermo, senza influenzare le altre. Pertanto, è possibile rendere reattivo il widget mobile di tela off.

Passaggio 12: visualizzare l'anteprima del widget Content Off Canvas

Ora, vai all'opzione di anteprima della pagina Web e controlla se il widget funziona bene o no. Puoi vedere, funziona bene da parte nostra.

Cose da considerare quando si utilizza il widget di contenuto Off Canvas

Per sfruttare al meglio il widget, ci sono diversi punti che devi considerare attentamente quando si utilizza il widget Content Off Canvas. Dai un'occhiata a loro qui sotto.

• Esperienza utente regolare

I contenuti off-canvas dovrebbero supportare gli utenti nella navigazione attraverso il sito invece di disturbare la loro esperienza. Assicurarsi che il widget funzioni senza intoppi con animazioni ben coordinate. Tuttavia, ridurre al minimo gli effetti di movimento pesanti che potrebbero degradare le prestazioni, in particolare sui telefoni cellulari.

• Ottimizza per il telefono cellulare

Come già detto sopra, un numero significativo di visitatori web oggi di solito provengono dagli utenti di dispositivi mobili, è necessario ottimizzare bene i tuoi siti Web per tutti i tipi di dispositivi. Altrimenti, gli utenti incentrati sui dispositivi mobili avranno un'esperienza gravemente negativa.

• Facile chiusura

Il widget di contenuto Off Canvas deve incorporare una semplice opzione di chiusura. Se è difficile da trovare, gli utenti si sentiranno sicuramente frustrati. Quindi, non dimenticare di altamente l'icona di chiusura in modo tale che diventa facile da navigare.

• Rilevanza del contenuto

Il contenuto off-canvas deve rimanere breve e concentrato per svolgere funzioni specifiche come strumenti di navigazione o banner promozionali. L'inclusione di informazioni eccessive o elementi irrilevanti mina il suo scopo di offrire un'esperienza utente focalizzata e senza soluzione di continuità.

Parole finali!

Il widget dei contenuti Off Canvas potrebbe essere un modo potente per coinvolgere gli utenti e aumentare le conversioni una volta che sai come sfruttarlo bene. Abbiamo cercato di coprire un tutorial di base sul widget. Perché è davvero difficile discutere tutte le caratteristiche del widget e come usarle.

Quindi, al di là di questo tutorial, se vuoi avere più idee su cosa puoi fare altre cose con il widget, puoi visitare la nostra pagina Demo dei contenuti di Canvas. Otterrai una buona collezione di disegni off-canvas che puoi copiare e incollare direttamente sul tuo sito.

Se hai altre domande senza risposta, facci sapere attraverso la casella dei commenti qui sotto. Ti torneremo molto presto con risposte utili.