Come progettare WordPress Attiva/disattiva il contenuto in Elementor

Qual è il modo migliore per mostrare contenuti che hanno più sezioni o che forniscono opzioni?

Ad esempio, una pagina dei prezzi può contenere diversi tipi di schemi di prezzi come offerte mensili, annuali e a vita. Mostrare tutte queste offerte su una pagina può essere problematico per i clienti. Devono scorrere molto verso il basso per consumare il contenuto.

Quindi, come lo ordinerai per rendere la pagina pulita e minimale mantenendo tutte le informazioni e i contenuti richiesti?

È qui che il contenuto attivato/disattiva viene in soccorso. Ti consente di creare contenuti interattivi con un'interfaccia intelligente. 

Quando si tratta di WordPress, ci sono molti modi per creare contenuti attiva/disattiva. Tuttavia, il modo più semplice arriva con Elementor. Questo articolo ti guiderà attraverso i passaggi per creare contenuti Toggle WordPress con Elementor.

Cos'è l'attivazione/disattivazione dei contenuti?

La funzione di attivazione/disattivazione consente all'utente di controllare la visibilità del contenuto su una pagina Web. L'attivazione/disattivazione del contenuto viene in genere utilizzata sui siti Web per mostrare diverse versioni o sezioni del contenuto.

Con l'attivazione/disattivazione del contenuto, solo una parte del contenuto sarà visibile nel viewport, mentre le altre verranno racchiuse in una scheda o titolo. Quando gli utenti fanno clic su una scheda, il contenuto sottostante sarà visibile solo.

Ad esempio, una pagina dei prezzi che contiene due offerte sui prezzi, mensile e annuale. Se utilizzi un contenuto di attivazione/disattivazione, sullo schermo sarà visibile solo una delle offerte, sia mensili che annuali. 

Quando l'utente fa clic sulla scheda mensile, le offerte mensili saranno visibili. Allo stesso modo, quando viene aperta la scheda annuale, vengono visualizzate le offerte annuali.

Una guida passo passo per creare contenuti avanzati di attivazione/disattivazione di Elementor in WordPress

Sebbene siano disponibili molti plug-in di attivazione/disattivazione di WordPress, il modo più semplice per creare un pulsante di attivazione/disattivazione Elementor avanzato su WordPress viene fornito con ElementsKit!

Il widget Toggle avanzato di ElementsKit aggiunge funzionalità extra al contenuto Toggle di WordPress. Ti consente di visualizzare i contenuti in un modo più elegante con il maggior numero di opzioni personalizzabili.

Ecco come puoi creare sofisticati contenuti di attivazione/disattivazione di WordPress utilizzando il widget Advanced Toggle di ElementsKit:

Passaggio 1: scegli gli stili per il pulsante di attivazione/disattivazione di Elementor

Per utilizzare il widget di attivazione/disattivazione avanzato, prima di tutto trascina e rilascia il widget nel tuo progetto Elementor. Successivamente, potrai impostare il contenuto e personalizzarne gli stili.

Il widget ElementsKit Advanced Toggle viene fornito con due diversi stili di pulsanti. Non solo gli stili sono diversi, ma anche le loro funzionalità sono diverse. 

Con lo Stile 1 puoi mostrare più schede. Sotto queste schede, puoi aggiungere contenuti di attivazione/disattivazione. Quando hai più opzioni da mostrare, puoi scegliere questo stile.

Lo stile 2 consiste nel passare da un contenuto all'altro con un pulsante di attivazione/disattivazione tradizionale. Quando scegli questo stile, verranno visualizzate solo le prime due schede. Apparirà un tipico pulsante di attivazione/disattivazione che consente di alternare tra i due contenuti. 

Per questo tutorial utilizzerai lo Stile 1 per mostrarti opzioni più personalizzabili.

Passaggio 2: aggiungi schede nel menu di attivazione/disattivazione in WordPress

Puoi aggiungere schede con un semplice clic utilizzando il widget di attivazione/disattivazione ElementsKit Advanced. Per aggiungere una nuova scheda, fare clic sul pulsante AGGIUNGI ARTICOLO. Per ogni contenuto della scheda è possibile impostare il file Titolo, Colore di sfondo dell'indicatore, Colore del titolo per l'effetto Normale e al passaggio del mouse per ciascuna scheda individualmente. Inoltre, se vuoi rendere visibile una scheda per impostazione predefinita, puoi abilitare il file Tieni aperta questa scheda caratteristica.

Inoltre, puoi impostare il file Allineamento per alternare le schede a destra, a sinistra o al centro. L'opzione di Abilita Ajax è disponibile anche.

Passaggio 3: come aggiungere il contenuto di attivazione/disattivazione di WordPress in Elementor?

Il processo di creazione del contenuto rende questo un “Avanzate"attiva/disattiva widget. Puoi letteralmente progettare contenuti per ogni scheda senza uscire dall'editor di Elementor. Ciò offre un enorme vantaggio in quanto puoi creare e personalizzare il contenuto all'interno della stessa pagina in cui stai modificando il pulsante di attivazione/disattivazione.

Per creare il contenuto di attivazione/disattivazione, fare clic sulla sezione dei contenuti sotto il pulsante di attivazione/disattivazione. UN Area widget apparirà sullo schermo. In questa interfaccia, puoi progettare contenuti di attivazione/disattivazione con tutti gli elementi Elementor ed ElementsKit. Hai la possibilità di farlo crea il tuo design O utilizzare i modelli salvati. Inoltre, puoi utilizzare il file Libreria di modelli ElementsKit per creare splendidi contenuti attiva/disattiva WordPress.

Passaggio 4: personalizza il pulsante di attivazione/disattivazione di Elementor con ElementsKit

Personalizzare il pulsante di attivazione/disattivazione Elementor è semplice e flessibile con ElementsKit. Nel Cambia sezione Contenitore (sotto la scheda Stile), puoi scegliere il tipo di sfondo per i pulsanti di attivazione/disattivazione, quindi impostare imbottitura, ombra della scatola stile e raggio di confine.

Per il interruttore a levetta, sono disponibili anche le opzioni per impostare il raggio del bordo e l'ombra del riquadro.

Inoltre, nel Contenuto sezione, puoi impostare il file Tipografia per i titoli delle schede di attivazione/disattivazione.

Questo è! Il contenuto di attivazione/disattivazione è ora pronto. Ora puoi aggiungere il contenuto di attivazione/disattivazione per rendere il tuo web design più elegante e dinamico.

Per saperne di più leggi la documentazione completa su come utilizzare il widget Toggle avanzato di ElementsKit.

Perché dovresti scegliere ElementsKit per creare il pulsante di attivazione/disattivazione Elementor?

Una domanda molto legittima che potresti porre è: tra tutti i plugin di attivazione/disattivazione di WordPress disponibili, perché dovresti scegliere ElementsKit? La risposta su una riga sarebbe: è il widget di attivazione/disattivazione avanzato con tutte le funzionalità avanzate.

Per elaborare, ElemensKit ha una funzionalità avanzata di creazione di contenuti. La maggior parte dei widget di attivazione/disattivazione di Elementor offre la possibilità di alternare solo tra due contenuti. Mentre con ElementsKit, puoi creare tutti i contenuti di attivazione/disattivazione che desideri con un determinato stile. Inoltre, puoi creare un pulsante di attivazione/disattivazione Elementor e attivare/disattivare il contenuto nello stesso editor. Ciò rende WordPress più semplice che mai attivare/disattivare la creazione di contenuti. Inoltre, puoi utilizzare anche modelli predefiniti.

Ecco perché scegliere Widget di attivazione/disattivazione avanzato ElementsKit per creare contenuti di attivazione/disattivazione WordPress in Elementor:

• Creazione avanzata di contenuti.
• Aggiungi un numero illimitato di contenuti attiva/disattiva.
• Crea un pulsante di attivazione/disattivazione e progetta il contenuto di attivazione/disattivazione in un unico posto, senza dover uscire dall'editor.
• Progetta contenuti attiva/disattiva sofisticati con Elementor.
• Rende la sezione interattiva per gli utenti.
• Riduce il tempo di scorrimento per migliorare il coinvolgimento.

In poche parole

L'attivazione/disattivazione dei contenuti di WordPress è un ottimo modo per migliorare l'esperienza utente sul tuo sito web. I pulsanti ti consentono di modificare l'aspetto del tuo sito web rendendolo più interattivo. 

Durante la creazione di contenuti attiva/disattiva, ElementsKit offre le funzionalità più flessibili e avanzate. Se hai seguito la guida sopra, dovresti essere in grado di creare facilmente un pulsante di attivazione/disattivazione Elementor.