,

Come aggiungere un pulsante a levetta al vostro sito WordPress

Riassumere questo post con l'AI

Come aggiungere un pulsante a levetta in WordPress

Volete dare ai vostri utenti un modo rapido e pulito per passare da un contenuto all'altro o da un'opzione di prezzo all'altra sul vostro sito WordPress? Un pulsante a levetta è la soluzione perfetta!

Con un pulsante a levetta, i visitatori possono passare istantaneamente da due o più opzioni, come i prezzi mensili o annuali, la modalità chiara o scura, o persino sezioni di contenuto completamente diverse, senza ingombrare la pagina.

In questo post scoprirete due semplici modi per aggiungere pulsanti a levetta al vostro sito WordPress:

Immergiamoci!


Metodo 1: Aggiungere un pulsante a levetta per qualsiasi tipo di contenuto

Se si vuole permettere agli utenti di passare da un blocco di contenuti all'altro, come ad esempio Domande frequenti, dettagli del prodotto o diverse caratteristiche, questo metodo fa al caso vostro.

Utilizzeremo il Blocchi definitivi che offre un versatile blocco Content Toggle (Contenuto a schede) che funziona per tutti i tipi di contenuto.

Passo 1: Installare il plugin Ultimate Blocks

  • Accedere alla dashboard di WordPress.
  • Andare su Plugin > Aggiungi nuovo.
  • Cercate "Ultimate Blocks" e installatelo/attivatelo.
Installare il plugin Ultimate Blocks

Passo 2: Aggiungere il blocco di contenuto a schede

  • Aprite un post o una pagina nell'editor di WordPress.
  • Tipo /contenuto tabellare oppure utilizzare l'icona + per aggiungere il blocco Contenuto a schede.
Aggiungere un blocco di contenuto a schede

Il blocco "Contenuto a schede" apparirà come segue

Interfaccia iniziale del blocco

Passo 3: personalizzare il blocco per le funzioni di commutazione

Selezionare il blocco e scegliere l'opzione Stile delle pillole nelle impostazioni (questo rende le schede simili a pulsanti).

Andare alle impostazioni e selezionare lo stile Pillole

Centrare l'allineamento per ottenere un look classico da alamaro.

Regolare l'allineamento del blocco

Fare clic sul pulsante + segno accanto alla prima scheda per aggiungerne un'altra. Aggiungere almeno due schede (ad esempio, "Mensile" e "Annuale" o "Dettagli" e "Riepilogo"). Rinominare le schede in modo che corrispondano alle opzioni di selezione.

Aggiungere un'altra scheda

Utilizzare le Impostazioni colore per impostare colori contrastanti, in modo che sia chiaro quale scheda è attiva.

Rinominare le schede e utilizzare le impostazioni del colore

Fase 4: Aggiungere il contenuto

Fare clic all'interno di ogni scheda per aggiungere il contenuto preferito (testo, immagini, elenchi, moduli o altri blocchi).

Aggiungere contenuti alle schede

Se necessario, è possibile personalizzare ulteriormente: modificare gli sfondi delle schede, i colori dei contenuti e altro ancora.

personalizzare le schede

Fase 5: Anteprima e pubblicazione

  • Utilizzare l'opzione Anteprima per testare la commutazione.
  • Una volta soddisfatti, pubblicare o aggiornare la pagina.
Anteprima e pubblicazione

Ecco fatto! Ora disponete di un pulsante di attivazione flessibile per qualsiasi tipo di contenuto sul vostro sito WordPress.


Metodo 2: Aggiungere un pulsante a levetta per le tabelle dei prezzi (e altro)

Volete consentire agli utenti di passare da tabelle di prezzi mensili a tabelle di prezzi annuali o di confrontare diversi set di dati uno accanto all'altro? Il Aletta per Tableberg del plugin Tableberg è stato progettato proprio per questo!

Con Tableberg ProIl blocco Toggle consente di organizzare un numero qualsiasi di tabelle in schede ordinate e cliccabili, perfette per i piani tariffari, i confronti tra prodotti, le tabelle multilingue o qualsiasi altro scenario in cui abbiano senso più tabelle.

Fase 1: inserimento del blocco 'Toggle for Tableberg'.

  • Aprite il vostro post o pagina nell'editor di WordPress.
  • Fare clic sull'icona + (più) e cercare "Toggle for Tableberg".
  • Aggiungere il blocco alla pagina.

Fase 2: Impostazione e personalizzazione delle schede

  • Per impostazione predefinita, vengono visualizzate tre schede etichettate come "Scheda 1", "Scheda 2" e "Scheda 3".
  • Aggiungete o rimuovete schede a seconda delle necessità utilizzando le icone + o -.
  • Rinominare ogni scheda (ad esempio, "Mensile", "Annuale" o "Piano base", "Piano Pro").
  • Utilizzate il pannello delle opzioni di destra per regolare i titoli delle schede, l'allineamento, i colori e i bordi per ottenere un aspetto personalizzato.

Passo 3: Aggiungere le tabelle

  • Fare clic su ciascuna scheda per aggiungere una tabella unica all'interno.
  • Costruire una nuova tabella da zero o inserire un modello di tabella Tableberg precostruito.
  • Ogni scheda può contenere una tabella completamente diversa, ottima per confrontare caratteristiche, livelli di prezzo, set di dati e altro ancora.

Casi d'uso più comuni

  • Tabelle dei prezzi: Consentite agli utenti di scegliere tra prezzi mensili e annuali o tra diversi piani.
  • Confronto dei dati: Mostrate i dati regionali, le specifiche dei prodotti o le metriche delle prestazioni in schede separate.
  • Contenuto didattico: Organizzare le lezioni o il materiale del corso per facilitare la navigazione.
  • Tabelle multilingue: Visualizzare gli stessi dati in diverse lingue per i visitatori internazionali.

Fase 4: Anteprima e pubblicazione

  • Visualizzare l'anteprima delle schede toggle per verificare che tutto appaia e funzioni come previsto.
  • Pubblicare o aggiornare il post/pagina quando è pronto.

Ecco un esempio di come appare il toggle per una tabella dei prezzi.


Conclusione

L'aggiunta di un pulsante a levetta al vostro sito WordPress è un ottimo modo per migliorare la navigazione, risparmiare spazio e dare ai visitatori un accesso immediato ai contenuti che interessano, sia che si tratti di passare da un piano tariffario all'altro, di visualizzare i dettagli o di confrontare i dati.

  • Per qualsiasi tipo di contenuto, utilizzare Blocchi definitivi per creare ginocchiere flessibili in pochi secondi.
  • Per le tabelle dei prezzi e per i layout di tabella più avanzati, provare Blocco a levetta per Tableberg Pro per un'esperienza di tabulazione senza soluzione di continuità.

Provate questi metodi sul vostro sito e rendete i vostri contenuti più interattivi e facili da usare. Avete domande o bisogno di aiuto? Fatecelo sapere nei commenti!



Il team Tableberg

Costruite bellissime tabelle WordPress - visivamente!

Dite addio alle tabelle noiose. Con Tableberg è possibile creare tabelle interattive e reattive utilizzando l'editor di blocchi, senza bisogno di codice.

Interfaccia Tableberg
🛒 Novità: creazione di bellissime tabelle di prodotti WooCommerce!
Questo è il testo predefinito per la barra di notifica