Come creare una tabella di confronto dei prodotti in WordPress

Una tabella di confronto fornisce agli utenti dettagli rapidi su prodotti simili o diversi mostrandoli fianco a fianco. Aiuta i clienti nel processo decisionale e migliora l'esperienza del cliente sul tuo sito.

Tuttavia, potrebbe essere un po' complicato se desideri aggiungere funzionalità personalizzate alla tabella di confronto. Fortunatamente, Elementor semplifica il processo offrendo una vasta gamma di utili componenti aggiuntivi come Happy Addons. Con il widget "Tabella di confronto" di Happy Addons , puoi facilmente visualizzare le caratteristiche di più prodotti in un frame.

In questo blog tutorial imparerai come creare una tabella di confronto all'interno del tuo sito WordPress. Iniziamo con la query di base-

Perché il confronto dei prodotti è importante per il tuo sito web aziendale

Una tabella di confronto si riferisce a una tabella in cui è possibile visualizzare gruppi di dati di più prodotti o servizi affiancati per una migliore comprensione.

Viene utilizzato principalmente nei siti Web di e-commerce per condividere modelli, immagini, caratteristiche, prezzi, descrizioni, ecc. di diversi prodotti. Tuttavia, i proprietari di siti Web utilizzano anche una tabella di confronto per dimostrare che il loro prodotto è il miglior prodotto confrontando i prodotti della concorrenza sotto la stessa tabella .

Aiuta i clienti a trovare i pro e i contro di un prodotto in un colpo d'occhio. Utilizzando questa efficace tabella di confronto dei dati, i clienti sono in grado di selezionare il prodotto giusto in pochi minuti e risparmiare tempo prezioso.

In che modo i componenti aggiuntivi di Happy aiutano a creare una tabella di confronto dei prodotti

Con il nuovo editor di blocchi Gutenberg, puoi creare una tabella per le tue esigenze di base. Tuttavia, se desideri creare una tabella di confronto dei prodotti per il confronto dei prodotti, è necessario un plug-in di terze parti o scrivere un codice personalizzato per questa funzione. Ciò richiede molto tempo e denaro perché il plug-in gratuito include alcune funzionalità iniziali.

Puoi risolvere questi tipi di barriere utilizzando il nuovo widget gratuito di Happy Addon chiamato "Tabella di confronto". Con questo widget puoi creare e personalizzare in modo efficiente tabelle reattive per confrontare i tuoi prodotti fianco a fianco in modo più organizzato.

Vediamo perché è necessario utilizzare il widget Happy Addons:

• Mobile friendly
• Una vasta libreria di modelli predefiniti
• Aggiungi un'immagine in una colonna
• Una vasta gamma di icone di supporto
• Offri modelli di tavoli già pronti

Progettazione della perfetta tabella di confronto delle funzionalità all'interno di WordPress

È ora di mostrarti come utilizzare il widget Tabella di confronto di Happy Addons e creare una tabella di confronto dei prodotti interattiva per il tuo sito web.

Prima di ciò, devi installare e attivare i seguenti plugin nel tuo sito Web WordPress:

• Elementor (gratuito)
• Componenti aggiuntivi felici (gratuiti)

Puoi aggiungere la tabella di confronto a qualsiasi parte del tuo sito web. Ma qui dimostreremo il widget in una pagina vuota.

Puoi anche controllare questa guida per imparare come creare una nuova pagina su WordPress.

Ecco i passaggi che devi seguire per creare la tabella di confronto:

• Passaggio 1: aggiungi il widget della tabella di confronto
• Passaggio 2: gestisci la testata del tavolo
• Passaggio 3: gestisci la riga della tabella
• Passaggio 4: pulsante Gestisci tabella
• Passaggio 5: impostazioni della tabella
• Passaggio 6: tabella di confronto degli stili

Iniziamo:

Passaggio 1: aggiungi il widget della tabella di confronto

Innanzitutto, devi trovare e aggiungere il widget nella posizione adatta del tuo sito web. Ottieni il widget dall'area della galleria dei widget di Elementor.

Area dei contenuti della tabella di confronto

Dopo aver aggiunto il widget, ottieni il design della tabella predefinito come l'immagine qui sotto. L'area del contenuto ha le impostazioni necessarie per gestire il contenuto della tabella.

Qui otterrai.

• Capotavola
• Riga della tabella
• Pulsante Tab
• Impostazioni della tabella

Ora tratteremo ciascuna delle impostazioni in modo che tu possa gestire facilmente il contenuto della tabella.

Passaggio 2: gestisci la testata del tavolo

L'opzione Testata tavolo ti consente di aggiungere l'elemento principale della tabella facendo clic sul pulsante AGGIUNGI ARTICOLO . Puoi copiare e rimuovere un elemento. Inoltre, puoi facilmente impostare l' allineamento (sinistra, centro e destra) e la posizione dell'icona (sinistra e destra) dell'intero contenuto della testata del tavolo.

Personalizza gli articoli per la testata del tavolo

Per personalizzare il singolo elemento Table Head, è necessario prima aprire un elemento. Quindi è possibile aggiungere il Titolo , selezionare Tag HTML del titolo, impostare Larghezza del contenuto , inserire un'icona , impostare il colore dell'icona e scrivere una descrizione .

L'intera larghezza della colonna è definita come 100% . Qui, noterai che abbiamo impostato Column Width 60 (%) . Ciò significa che la colonna delle funzioni ottiene il 60% di spazio e le altre due colonne il 20% .

Puoi anche scrivere una Descrizione. Innanzitutto, attiva l'opzione Descrizione . Quindi otterrai l'editor di testo per scrivere la descrizione. Non è necessario aggiungere la descrizione, ecco perché non l'abbiamo abilitata.

Aggiungi intestazione adesiva

Se desideri aggiungere l'intestazione adesiva, devi prima attivare l'opzione intestazione adesiva. Quindi l'intestazione della tabella verrà visualizzata in alto ogni volta che scorri verso il basso.

Passaggio 3: gestisci la riga della tabella

Per impostazione predefinita, il widget viene fornito con due righe con colonne . È possibile aggiungere una nuova riga e inserirvi le colonne richieste.

Per personalizzare il contenuto di righe e colonne, è necessario aprire una riga o una colonna, quindi modificare il contenuto in base ai propri scopi.

Aggiungi una nuova riga della tabella

Per aggiungere una nuova riga della tabella , devi prima fare clic su AGGIUNGI ARTICOLO .

Successivamente, avrai la possibilità di inserire una riga. Devi scegliere la Riga invece di una Colonna e impostare il Tipo di contenuto -> Vuoto poiché è una riga. Non è necessario modificare la dimensione dell'immagine , quindi mantienila predefinita.

Tuttavia, puoi aggiungere tre tipi di contenuto nella colonna come Intestazione, Icona e Immagine .

Aggiungi colonna con intestazione

Ti mostriamo come aggiungere una colonna in una riga.

Innanzitutto, devi aggiungere un elemento semplicemente facendo clic sul pulsante AGGIUNGI ARTICOLO . In secondo luogo, seleziona la Colonna (Riga/Colonna) e imposta Tipo di contenuto–>Intestazione . Infine, puoi scrivere il Titolo dell'intestazione.

Scrivi la descrizione

Puoi scrivere una descrizione sotto il titolo . Innanzitutto, Mostra l'opzione Descrizione . Quindi otterrai il pannello dell'editor di testo e potrai scrivere la descrizione a modo tuo.

Abbiamo anche aggiunto due colonne. E questa volta abbiamo usato il Tipo di contenuto–>Icona . Ecco la visualizzazione della tabella corrente.

Nota: ricorda che ogni volta che aggiungi contenuto a una colonna, il contenuto verrà visualizzato da destra a sinistra .

Passaggio 4: pulsante Gestisci tabella

Vai all'area Contenuto->Pulsante Tabella quindi puoi scrivere il Titolo e inserire un Link al pulsante.

Pulsante Personalizza

Puoi aggiungere lo stile personalizzato per decorare il pulsante. Attiva prima lo stile personalizzato . Quindi otterrai le impostazioni essenziali per aggiungere un nuovo stile di pulsante.

Aggiungi il colore del testo, il colore di sfondo e l'ombra del riquadro al pulsante. Puoi anche aggiungere stili diversi sul pulsante Passa al passaggio del mouse.

Passaggio 5: impostazioni della tabella

L'area Impostazioni tabella ti dà la possibilità di impostare la larghezza della tabella in base ai tuoi dispositivi. Nella visualizzazione Tablet e Mobile , gli elementi della tabella saranno scorrevoli. In questo modo controllerai la reattività della tabella.

Passaggio 6: tabella di confronto degli stili

L'area Stile ha le opzioni di stile necessarie per personalizzare l'intestazione del tavolo, la riga del tavolo e il pulsante del tavolo .

Usando questo widget, puoi progettare questo tipo di tabella di confronto di Elementor per confrontare il tuo prodotto fianco a fianco.

Output finale della tabella di confronto dei prodotti

Dopo aver progettato tutte le parti della tua tabella di confronto, otterrai un aspetto perfetto per mostrare i tuoi prodotti in un modo attraente, inclusi funzionalità, immagini e altri elementi. Di seguito è riportata la tabella che abbiamo creato oggi-

Usa diverse opzioni di stile per creare un design che allinei il tuo marchio. Puoi anche controllare la documentazione completa del widget Tabella di confronto.

Pronto a creare tabelle di confronto sul tuo sito WordPress?

Una tabella di confronto interattiva offre ai tuoi utenti una visione migliore durante il confronto dei prodotti. Progettare una tabella di confronto utilizzando Elementor & Happy Addons non è più difficile se segui i passaggi precedenti.

In questa guida, abbiamo mostrato perché è necessario utilizzare il widget Tabella di confronto di Happy Addons. Inoltre, ti abbiamo mostrato come creare una tabella di confronto sul tuo sito WordPress.

Se hai ancora domande su questo blog, puoi commentare su di noi.

Ti chiediamo di iscriverti alla nostra newsletter. Non dimenticare di collegare i nostri canali social Facebook, Twitter e YouTube.