Come creare schede WordPress intelligenti e belle

Come creare schede WordPress intelligenti e belle

Fatto divertente: hai notato che anche wordpress.org utilizza le schede di WordPress per bloccare le informazioni?

Dai un’occhiata a questo:

Fonte: wordpress.org

Le schede WordPress sono un tipo di navigazione che può migliorare l’esperienza del cliente. In che modo? Non ingombrando molte informazioni in paragrafi, ma usando un metodo di organizzazione migliore.

La navigazione a schede è simile all’organizzazione dei file in ufficio o dal medico.

Da non confondere con i menu. La maggior parte delle volte, le voci di menu aprono una pagina separata con il proprio URL. Qui non accadrà alcun cambiamento di URL.

Da non confondere con le fisarmoniche. Una fisarmonica impilerà le informazioni verticalmente. È possibile fare clic sulle intestazioni per rivelare o nascondere i contenuti ad esse associati.

Ora, perché il tuo sito WordPress avrebbe bisogno di schede? Migliorare la navigazione, l’usabilità e quindi la soddisfazione del cliente e i tassi di conversione.

Un sacco di motivi, giusto?

La navigazione a schede è ancora una pratica comune nell’e-commerce per presentare i prodotti. Molti visitatori già riconoscono schede o si aspettano schede in determinati luoghi.

Diciamo che vendi elettronica. Sarà necessario presentare un sacco di informazioni sul prodotto:

• descrizione del Prodotto
• foto del Prodotto
• specifiche Tecniche
• Recensioni
• informazioni di Garanzia
• dettagli di Spedizione

Schede vi aiuterà a comprimere i contenuti di grandi dimensioni in spazi limitati.

Ora, in questo articolo, inizieremo fornendoti qualche ispirazione per il design delle schede. Successivamente, andremo un po ‘ in alcune best case practice. Alla fine, ti guiderò attraverso gli aspetti tecnici delle schede di WordPress.

Andiamo avanti!

Tabs: qualche ispirazione

Ora, controlliamo alcuni siti web là fuori che utilizzano le schede. Sono sicuramente in cerca di prove. Le immagini possono spiegare meglio delle parole, non credi?

Vediamo, eBay sta usando le schede per la descrizione del prodotto. Tutte le specifiche tecniche vanno sotto ” Descrizione “e hanno raccolto” spedizione e pagamento ” sotto la stessa scheda. Sono abbastanza sicuro che hanno testato il layout perché, per un sito con tale traffico, qualsiasi modifica può influenzare pesantemente i tassi di conversione.

Fonte: ebay.com

BobbyBrown cosmetics va per un approccio minimalista, le schede non hanno un approccio simile a un pulsante. Usano una sottolineatura per informare l’utente che ha selezionato una scheda.

Fonte: bobbibrowncosmetics.com

Mi sento sempre perso quando vado a booking.com. Hanno un sacco di informazioni è necessario scorrere verso il basso per. Recentemente ho notato che hanno apportato alcune modifiche per ridurre lo scorrimento, ma ancora, non è abbastanza (per me).

Trivago, d’altra parte, sembra organizzare le informazioni un po ‘ meglio. So che è difficile da fare quando è necessario fornire così tanti dettagli.

Usano le schede per organizzare informazioni sugli hotel come panoramica, informazioni, foto, recensioni, offerte.

Fonte: trivago.com

Le schede sono una pratica comune sui siti Web che offrono pacchetti di viaggio come voli, alloggi, noleggio auto.

Expedia lo fa bene quando presenta la sua offerta per 6 servizi. L’esperienza è pulita e non invadente.

Fonte: expedia.com

Honda utilizza le schede in modo più creativo. Mescola immagini e video insieme al testo per vendere una grande esperienza Honda.

Fonte: automobiles.honda.com

Schede WordPress: best case practices

In poche parole, le schede sono un insieme di pulsanti solitamente impostati orizzontalmente. Questo è il motivo per cui il loro design dovrebbe essere molto vicino a un design di pulsanti.

Ora, diamo un’occhiata un po ‘ alle migliori pratiche per l’utilizzo di schede nel tuo sito web WordPress:

• Non andare per più righe, renderà difficile per l’utente ricordare quale scheda ha visitato. Se si accorge di aver bisogno di più righe, questo significa che avrete bisogno di trovare un modo migliore per organizzare le informazioni
• Tenere la scheda titoli a breve e dolce
• Utilizzare le schede solo quando gli utenti non hanno bisogno di vedere il contenuto da più schede contemporaneamente
• Chiaramente indicare che è attiva la scheda
• non selezionato schede deve rimanere visibile, e non perde nello sfondo
• assicurati che la tua scheda vengono visualizzati come pulsanti separati che è possibile interagire con
• Aggiungere effetti al passaggio del mouse sulle schede su pulsanti
• Utilizzare le schede quando si hanno tra due e nove diverse categorie di contenuti
• Le categorie sono di natura simile, un utente si aspetterebbe di vederle lì (ad esempio: descrizione del prodotto, recensioni del prodotto)
• Non utilizzare la navigazione a schede quando si intende inserire un link “altro”
• È possibile utilizzare i gradienti per aggiungere profondità e dimensione alle schede.

Come creare schede WordPress utilizzando page builder

Sto usando il generatore di pagine Colibri per lo scopo di questo esercizio.

Le schede possono essere trovate come componente.

Puoi trovare i componenti quando fai clic su ” + ” in alto a sinistra.

Vai su Componenti e trascina il componente “Scheda” nell’anteprima del tuo sito Web sulla destra.

Successivamente, puoi giocare con le opzioni di personalizzazione sulla sinistra.

Quando la scheda appare come si desidera, basta premere “Pubblica” e sei in diretta.

Schede: un plugin per aiutarti a configurare le schede WordPress

Se gestisci un negozio online integrato con WooCommerce, in WordPress ci sono due plugin molto popolari per le schede WordPress.

Fonte: wordpress.org

Ma, voglio presentarvi un mio preferito: Schede.

Fonte: wordpress.org

Tabs ha un sacco di opzioni di personalizzazione che presto ti piacerà. Perché sento che lo amerai anche tu:

• Si progettare schede WordPress mobile-friendly
• È possibile lavorare con codici brevi
• Tabs funziona con il drag and drop
• Ha 20+ modelli di design in modo che non c’è bisogno di preoccuparsi con l’ispirazione
• 500+ Google Fonts
• Tabs funziona con la maggior parte dei i temi là fuori.

WordPress tabs: le conclusioni

Tabs sono qui per rendere le informazioni più facili da digerire in un mondo di brevi intervalli di attenzione. In termini di strumenti, ce ne sono molti là fuori che possono aiutarti con l’impostazione delle schede WordPress. Questa è la cosa più facile da fare.

Più importante è capire che tipo di informazioni possono essere inserite nelle tue schede. Se non sei sicuro che una scheda ti aiuterà a organizzare determinate informazioni, puoi sempre fare qualche ricerca utente o un test A/B. Le nostre ipotesi non sono sufficienti. I dati comportamentali reali ti porteranno alla risposta giusta.

Alla fine della giornata, è necessario preoccuparsi di usabilità, chunking e velocità del sito web.

Ora, se ti è piaciuto questo articolo e vuoi saperne di più su come progettare un sito web WordPress, assicurati di iscriverti al nostro canale Youtube e seguici su Twitter e Facebook!