Se volete immaginare uno scenario in cui i vostri utenti possano passare da uno stato all'altro o da un'opzione all'altra, un pulsante a levetta è la soluzione perfetta. Questi pulsanti consentono agli utenti di accedere rapidamente alle opzioni senza occupare troppo spazio nella pagina. Ad esempio, sono perfetti per passare dai prezzi mensili a quelli annuali, dalle visualizzazioni dettagliate a quelle di riepilogo, o per visualizzare preferenze come le modalità chiare e scure.
Sebbene WordPress non supporti nativamente i pulsanti a levetta, il blocco Tabbed Content di Ultimate Blocks consente di replicare facilmente la loro funzionalità. Il plugin è versatile e, a differenza di molte altre opzioni, offre un'ampia serie di blocchi che consentono di trasformare semplici schede in stati commutabili con poche modifiche.
Questa guida vi mostra come utilizzare questo plugin per ottenere un effetto elegante e facile da usare per i pulsanti a levetta. Iniziamo.
Passo 1: Installare il plugin Ultimate Blocks
Per iniziare, è sufficiente accedere alla dashboard di WordPress e navigare in Plugin > Aggiungi nuovo. Nella barra di ricerca, digitare "Blocchi finalie, una volta visualizzato, fare clic su Installare. Dopo l'installazione, attivare il plugin.
Passo 2: Aggiungere il blocco di contenuto a schede
Una volta che Ultimate Blocks è attivo, decidete dove aggiungere il pulsante di attivazione. È possibile aprire una nuova pagina o un nuovo post o continuare con uno esistente.
Dall'editor di WordPress, digitate /contenuto tabellare o fare clic sul pulsante + icona per aprire la libreria dei blocchi. Se si utilizza il metodo dell'icona +, digitare "contenuto a schede" nella barra di ricerca per individuare il Blocco di contenuti a schede e inserirlo nella pagina o nel post.
Una volta aggiunto il blocco all'editor, questa è l'interfaccia che si ottiene nell'editor.
A questo punto, il blocco non assomiglia ancora a un pulsante a levetta. Ora abbiamo bisogno di alcune modifiche nelle impostazioni del blocco per avvicinarlo a una configurazione che imiti un pulsante a levetta che consente agli utenti di passare da una sezione di contenuto all'altra.
Passo 3: personalizzare e configurare il blocco di contenuto a schede
Con il blocco selezionato, si passa alla sezione impostazioni a destra. Selezionare la voce Pillole nelle impostazioni per far apparire ogni scheda come un pulsante invece che come una scheda.
Successivamente, è necessario regolare il valore del blocco allineamento al centro per farlo assomigliare di più a un pulsante a levetta.
Ora, per creare uno stato alternativo, è necessario avere almeno due schede. È sufficiente fare clic sul pulsante + segno accanto alla prima scheda per aggiungerne un'altra. Se si desidera avere più schede, seguire la stessa procedura.
Una volta fatto questo, abbiamo schede separate con cui lavorare. Ora dobbiamo trasformare queste schede in pulsanti a levetta con l'aiuto delle impostazioni del colore.
Ma prima, rinominare le schede con etichette diverse per rappresentare i diversi stati di commutazione, quindi passare alla scheda impostazioni di stile nella barra laterale destra. Da lì, utilizzare il pulsante Impostazioni del colore per aggiungere colori contrastanti per ogni scheda, in modo da distinguere meglio la scheda attiva.
A questo punto, il pulsante di attivazione è pronto. Ora non resta che aggiungere i contenuti. Fare clic all'interno di ogni scheda per aggiungere contenuti specifici. È possibile includere testo, immagini, video o qualsiasi altro blocco in base alle proprie esigenze. È sufficiente fare clic sul pulsante + segno e aggiungere il blocco relativo al contenuto preferito.
Dopodiché, aggiungere contenuti correlati a ciascuna scheda. Qui abbiamo creato un esempio di sezione prezzi, utilizzando blocchi di paragrafi, titoli ed elenchi in entrambe le schede. È possibile specificare il colore di ciascun blocco dalla sezione colore e, se si ritiene che sia necessaria una maggiore evidenziazione per queste schede, modificare il parametro sfondo del contenuto dell'intero blocco.
Fase 4: Anteprima e pubblicazione
Utilizzare il Anteprima per verificare il funzionamento delle schede come pulsanti di selezione. Verificate che ogni scheda apra la sezione di contenuto corretta. Una volta soddisfatti dell'aspetto e della funzionalità, fare clic su Pubblicare o aggiornare se si tratta di un post esistente. L'effetto del pulsante di commutazione è ora attivo e pronto per offrire ai vostri utenti un modo semplice per passare da una sezione di contenuto all'altra.
Conclusione
Seguendo questi passaggi, è possibile trasformare le schede standard in pulsanti a levetta perfettamente funzionanti. Questa configurazione migliorerà il layout dei contenuti e li renderà accessibili e facili da navigare. I visitatori possono ora passare istantaneamente da un'opzione all'altra, sia che si tratti di esplorare diversi prezzi, visualizzare ulteriori dettagli o scegliere le preferenze di visualizzazione. Questa piccola aggiunta conferisce chiarezza e flessibilità al vostro sito e consente agli utenti di esplorare i contenuti secondo le proprie esigenze, mantenendo la pagina pulita e organizzata.
