Come creare una fisarmonica avanzata con Elementor

Come creare una fisarmonica avanzata con Elementor

I visitatori del sito web amano le sezioni comprimibili per controllare informazioni rapide e comprimerle in base ai loro interessi. Quindi, accordion avanzati ben personalizzati aiutano a mantenere il tuo sito WordPress pulito e a rendere più fluida l'esperienza utente.

In questa guida ti guideremo passo dopo passo attraverso la creazione di un accordion avanzato con Elementor.

Come creare una fisarmonica avanzata con Elementor

Cos'è una fisarmonica?

Un pannello accordion è un elemento comprimibile che consente di nascondere e visualizzare i contenuti di una pagina web WordPress.
Puoi usare la fisarmonica per organizzare le informazioni in sezioni. Le sezioni possono essere espanse o compresse a seconda delle necessità, risparmiando spazio e migliorando l'esperienza utente.

Vantaggi dell'utilizzo di accordion avanzate nella progettazione di siti WordPress

⭕ L'accordion avanzato Elementor fornisce un modo pulito e organizzato per presentare le informazioni.

⭕ Puoi ridurre i tempi di caricamento delle pagine nascondendo i contenuti meno importanti in accordion. Può anche migliorare il posizionamento del tuo sito web nei motori di ricerca.

⭕ Accedere a informazioni aggiuntive con accordion avanzati è facile. Quindi, può incoraggiare gli utenti ad esplorare ulteriormente il tuo sito web. Inoltre, gli accordion sono adattabili a diversi stili di design e layout.

⭕ Puoi progettare la fisarmonica avanzata di WordPress per consentire agli utenti con disabilità per accedere alle informazioni.

Come creare una fisarmonica avanzata in Elementor

Sebbene il widget accordion sia incluso in Elementor, potresti trovare opzioni di stile limitate. Se stai cercando una personalizzazione più avanzata, prendi in considerazione l'utilizzo di un componente aggiuntivo di Elementor. 

Qui, abbiamo selezionato ElementsKitIl plugin offre un widget avanzato Accordion che ti permette di creare un sito web più accattivante e funzionale.

Come creare una fisarmonica con ElementsKit

Un widget accordion è un tipo di widget che consente di creare sezioni comprimibili sul tuo sito web WordPress. Fornisce un modo per organizzare il contenuto in più sezioni, ciascuna delle quali può essere espansa o compressa per rivelarne il contenuto. Questo è spesso utilizzato per visualizzare le informazioni in modo compatto e intuitivo.

Passaggio 1: Ottieni il plugin ElementsKit

Accesso alla dashboard di WordPress:
1. Vai a Plugin
2. Fare clic su Aggiungi nuovo plugin
3. Cerca ElementsKit
4. Una volta trovato, clicca sul pulsante Installa ora

Installa ElementsKit

Puoi anche scarica il plugin ElementsKit da WordPress.org rapidamente. Dopodiché, non ti resta che caricarlo nella sezione plugin della tua dashboard.

Scarica il plugin ElementsKit

Tuttavia, Advanced Accordion è un widget Pro di ElementsKitNon arrivare in ritardo! Scegli un piano flessibile e goditi creare fisarmoniche avanzate con facilità.

Passaggio 2: attiva il plugin

Dopo aver installato il plugin, è necessario attivarlo.

Attiva ElementsKit

Passaggio 3: attiva il widget Accordion avanzato

  1. Vai a ElementsKit
  2. Trova widget
  3. Trova Advanced Accordion e attiva il pulsante di attivazione/disattivazione
  4. Fare clic su SALVA MODIFICHE
Abilita il widget accordion avanzato di ElementsKit

Passaggio 4: apri una pagina dalla tua dashboard 

  1. Vai alle pagine
  2. Apri una pagina esistente o aggiungi una nuova pagina
  3. Fai clic su Modifica con Elementor (per la nuova pagina, puoi trovare questa opzione dopo aver aperto la pagina)
Modifica la tua pagina con Elementor

Passaggio 5: aggiungere Advanced Accordion all'editor

Cerca per nome del widget, cliccaci sopra o trascinalo e rilascialo nell'editor.

Widget accordion avanzato ElementsKit con trascinamento della selezione

Passaggio 6: esplora le opzioni di personalizzazione

Nella parte del contenuto vedrai:

  • Fisarmonica:
    • Contenuto: Qui puoi aggiungere contenuti, modificare il titolo, attivare il pulsante "tieni aperto"
    • Mantieni la prima diapositiva aperta automaticamente: Se vuoi mantenere aperta la prima diapositiva, puoi attivare questo pulsante.
    • Ajax: Se abiliti questa opzione, aggiornerà solo il contenuto rilevante nell'accordion, offrendo un'esperienza utente più fluida. Ciò può essere particolarmente utile quando si ha a che fare con un gran numero di elementi accordion.
    • Stile: È possibile scegliere tra diversi stili di fisarmonica.
  • Icona:
    • Posizione dell'icona: Imposta la posizione dell'icona da qui.
    • Mostra conteggio cicli: È possibile visualizzare il conteggio dei loop oppure tenerlo nascosto.
    • Icona a destra: Scegli il simbolo che punta a destra. Indica l'espansione dell'elemento accordion.
    • Icona destra attiva: Seleziona un'icona per indicare lo stato di un'icona a destra quando viene cliccata o toccata.
Modifica il contenuto del widget accordion avanzato di ElementsKit

Nella parte stile, puoi personalizzare la fisarmonica utilizzando queste opzioni:

  • Titolo: Qui puoi cambiare il tipografia, colore, tipo di sfondo, ombra del riquadro, margine inferiore, ecc. per i titoli.
  • Contenuto: Per definire lo stile del contenuto dell'accordion, è possibile utilizzare colori, caratteri, raggi dei bordi, spaziature e così via diversi.
  • Confine: Per modificare il tipo di bordo, la larghezza, il colore, l'ombra del riquadro, ecc. di ogni scheda o della fisarmonica, puoi utilizzare questa opzione.
  • Icona: Permette di regolare il margine, il colore e la dimensione dell'icona.
Widget accordion avanzato Style ElementsKit

Ecco in breve come creare una fisarmonica avanzata con Elementor! ✌️

Perché scegliere il widget ElementsKit Advanced Accordion invece del widget Elementor Accordion?

Scopriamo alcune differenze tra ElementsKit Advanced Accordion ed Elementor Accordion.

Adesso è il tuo turno

Ora, provalo tu stesso! Con ElementsKit puoi efficacemente incorporare eccezionali fisarmoniche avanzate nel design del tuo sito web.

Suggerimenti per te –

⭐ Sperimenta diverse opzioni di personalizzazione per ottenere l'aspetto e la funzionalità desiderati.

⭐ Considera il design complessivo del tuo sito web.

⭐ Prova il risultato finale su diversi dispositivi e browser.
⭐ Aggiorna regolarmente le tue fisarmoniche.

Componente aggiuntivo ElementsKit Elementor

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *