Come aggiungere schede ai post e alle pagine di WordPress

Come aggiungere schede ai post e alle pagine di WordPress

Le schede sono una funzionalità abbastanza comune su molti siti Web, in particolare i negozi di e-commerce. I proprietari dei negozi di e-commerce di solito usano le schede nell’area della descrizione del prodotto, dove dividono recensioni, descrizione, specifiche tecniche e così via in più schede.


esempio di schede in azione su un sito Web di e-commerce

Tuttavia, le schede hanno trovato uso in molti altri tipi di siti Web, non solo nei siti Web di e-commerce. Anche il sito Web ufficiale di WordPress.org utilizza le schede nelle pagine di descrizione dei plug-in. Vedi l’immagine sotto per vedere le schede evidenziate su WP.org.

schede nella pagina di descrizione del plug-in wordpress.org

Molti altri proprietari di siti Web utilizzano schede su diversi tipi di siti Web. Tuttavia, le schede non devono essere confuse fisarmoniche, che si espandono per rivelare informazioni. Di seguito, osserva come ho usato le fisarmoniche sul mio sito web.

fisarmoniche su vistamedia.xyz

Ma a parte le fisarmoniche, siamo qui per parlarne schede, quindi non perdiamo la concentrazione; Avevo solo bisogno di chiarire la distinzione tra tab e fisarmoniche. Ora spero che siamo sulla stessa pagina ��

In sostanza, i proprietari di siti Web utilizzano le schede per dividere le informazioni che altrimenti avrebbero occupato un’intera pagina o post. Ciò significa che le schede rendono le informazioni molto più facili da digerire, senza forzare necessariamente gli utenti a colpire la rotella di scorrimento un milione di volte.

In altre parole, le schede migliorano l’usabilità del tuo sito Web soprattutto in un mondo di tempi di attenzione più brevi. Quindi, se desideri mantenere gli utenti sul tuo sito più a lungo senza annoiarli a morte con le pagine lunghe, dovresti considerare di utilizzare le schede.

Nel post di oggi, ti mostriamo esattamente come aggiungere schede ai tuoi post e alle tue pagine WordPress. Prima della fine di questo post, avrai tutte le istruzioni necessarie per utilizzare le schede a tuo vantaggio. Ci auguriamo che ti piacerà fino in fondo e per favore non andartene senza condividere i tuoi pensieri nella sezione commenti. Detto questo, iniziamo.

Usa un Page Builder

Se hai già installato un generatore di pagine, sei fortunato: probabilmente hai già un modulo di schede a portata di mano. La maggior parte dei principali costruttori di pagine offre schede come parte del loro set principale di elementi del generatore di pagine. Ecco una rapida occhiata a due dei nostri preferiti.

Elementor Free Page Builder

Schede Elementor Page Builder

Informazioni e download Visualizza la demo

Il popolare generatore di pagine Elementor include schede come parte della versione gratuita del plug-in. Tutto quello che devi fare è inserire un elemento della scheda nella tua pagina, quindi modificare il titolo, il contenuto, lo stile, ecc!

WPBakery Premium Page Builder

Schede di WPBakery Page Builder

Stai utilizzando un tema premium che include WPBakery Page Builder (come il nostro tema Total)? Grande! Le schede sono integrate e facili da usare.

Il modulo della scheda WPBakery è leggermente diverso dall’esempio precedente poiché le schede sono inizialmente vuote quando le aggiungi. Devi aggiungere elementi di pagina aggiuntivi (area di testo, immagini, icone, ecc.) Nelle schede per aggiungere i tuoi contenuti. Ma questo ti dà un sacco di libertà di creare schede come le desideri (oltre alle opzioni di stile integrate). In precedenza abbiamo trattato questo generatore di pagine sul blog, quindi se desideri istruzioni più dettagliate consulta la nostra guida WPBakery (nota: questo plugin era precedentemente chiamato Visual Composer, quindi scusa in anticipo per qualsiasi confusione).

Installa il plug-in WordPress per schede

Schede Plugin WordPress gratuiti

Se non stai utilizzando un generatore di pagine, non è necessario utilizzarne uno solo per le schede. Ci sono molte ottime alternative, come il plugin gratuito per WordPress conosciuto semplicemente come Tabs di WP Shop Mart. Tabs è un elegante plugin per WordPress che ti aiuta a creare un numero illimitato di splendide schede senza perdere tempo.

Iniziamo installando il plug-in WordPress Tabs. Poiché è disponibile nel repository ufficiale di plug-in WordPress, puoi installare il plug-in direttamente dalla dashboard di amministrazione di WordPress.

Stiamo utilizzando la versione gratuita, ma è disponibile una versione premium se desideri eseguire l’aggiornamento per funzionalità extra in un secondo momento.

Installazione schede Plugin WordPress

Accedi alla tua dashboard di amministrazione di WordPress e vai a Plugin> Aggiungi nuovo e inserisci “tab wpshopmart” nella casella di ricerca per parole chiave. Una volta trovato il plug-in giusto, premi il tasto Installa ora pulsante come mostrato di seguito.

installazione del plugin wordpress per schede

Successivamente, fai clic su Attivare pulsante. E il gioco è fatto, il tuo plug-in WordPress reattivo Tabs è pronto per l’uso. Ora, creiamo un paio di schede per scoprire cosa ha da offrire questo plugin.

Configura il plug-in WordPress reattivo per schede

L’attivazione del plug-in aggiungerà un nuovo elemento al menu di amministrazione di WordPress. Per creare nuove schede, accedere a Schede reattive> Aggiungi nuove schede come dettagliato nella screengrab qui sotto.

aggiungere nuove schede usando il plugin wordpress responsive tabs

In questo modo ti porta a Tabs Responsive Builder che è pieno di tutte le funzionalità necessarie per creare splendide schede come un boss. Guarda l’immagine qui sotto per un assaggio di cosa aspettarsi.

schede generatore di schede plug-in wordpress reattivo

Abbastanza una pergamena no? Bene, puoi trovare la maggior parte delle funzionalità nella barra laterale destra. Si noti inoltre che le singole schede hanno le loro impostazioni. Puoi anche usare gli editor WYSIWYG nelle schede, il che significa che hai un sacco di controllo sulle tue schede.

Ora, creiamo un paio di schede di esempio e visualizziamo su una pagina o un post.

Aggiungi titolo

aggiungi il titolo delle schede

Inizia dando alle tue schede un titolo descrittivo (proprio come con i menu di navigazione) come mostrato nell’immagine sopra. In questo modo, puoi facilmente identificare le tue schede nella dashboard di amministrazione di WordPress in seguito nel caso in cui sia necessario modificare qualcosa. Ai fini di questo tutorial, ho battezzato le mie schede “Test schede Home”.

Scegli il modello struttura schede

scegli il modello di progettazione delle schede

Come visto nello screenshot sopra, il tuo prossimo passo prevede la scelta di un modello di design che desideri utilizzare per le tue schede. La versione gratuita del plugin Tabs WordPress ti offre un solo modello di progettazione, ma puoi sempre eseguire l’aggiornamento alla versione premium per 19 in più. Parlare di libertà di design.

Aggiungi schede

Successivamente, aggiungi tutte le schede che desideri come mostrato di seguito.

aggiunta di nuove schede

Abbiamo creato un elenco numerato che dettaglia ciò che puoi fare sul Aggiungi schede sezione mostrata sopra. I numeri corrispondono a ciascuna area.

  1. Titolo scheda – Aggiungi il titolo della scheda in questo campo, ad es. Descrizione, specifiche, dettagli, eccetera.
  2. Descrizione scheda – Aggiungi la descrizione della scheda qui. Questo campo consente di aggiungere il contenuto della scheda. La parte migliore è che puoi usare l’editor WYSIWYG (mostrato al numero 3 di seguito) per aggiungere contenuti ricchi alle tue schede, tra cui immagini, musica e video
  3. Usa WYSIWYG – Se desideri utilizzare il familiare Wcappello-You-SEE-ioS-Wcappello-You-solet editor per creare il contenuto della scheda, sentiti libero di premere questo pulsante per avviare la finestra pop-up
  4. Icona della scheda – Questo campo ti aiuta a scegliere un’icona da utilizzare nella tua scheda. Il plugin Tabs WordPress ti offre accesso a tonnellate di icone Font Awesome per ravvivare le tue schede come un professionista
  5. Visualizza sopra l’icona – Se desideri visualizzare il titolo della scheda accanto all’icona, adorerai questa funzione. Inoltre, consente di disabilitare l’icona senza toccare il titolo della scheda
  6. Elimina – Premi questo pulsante per eliminare una scheda specifica
  7. Aggiungi nuove schede – Fare clic su questo pulsante per aggiungere più schede
  8. Cancella tutto – Stanco di tutte le schede? Basta premere il Cancella tutto pulsante per ripristinare tutto

Un paio di suggerimenti bonus per aiutarti. Innanzitutto, è possibile trascinare e rilasciare le schede per riordinarle e disporle come desiderato.

Secondo: non dimenticare di premere il tasto Salva la bozza pulsante una o due volte mentre crei le tue schede per assicurarti di non perdere alcuna modifica nel caso in cui ti sposti accidentalmente dal generatore di schede.

Infine, se hai bisogno di supporto c’è un grande blu Ottieni supporto pulsante appena sotto il Aggiungi schede sezione (e sulla maggior parte delle pagine del plug-in) che ti porta al forum di supporto ufficiale di Tabs su WordPress.org. Non esitare a premere il pulsante di supporto se hai bisogno di aiuto in qualsiasi momento.

Scheda Codice

shortcode schede

Successivamente, trovi lo shortcode Schede che usi per aggiungere e visualizzare le tue schede su qualsiasi pagina o post che desideri. Ad esempio, il nostro shortcode è [TABS_R id = 443]. Per visualizzare le schede in una pagina, vorrei semplicemente copiare e incollare il shortcode sopra in quella particolare pagina.

Widget Schede

supporto widget schede

Stai cercando di aggiungere le tue schede in un’area widget sul tuo sito web? Se questo è un sì clamoroso, ti piacerà il supporto del widget fornito con il plug-in WordPress Tabs.

Colpire il Clicca qui il collegamento nell’immagine qui sopra ti porta alla schermata dei widget di WordPress, dove sei libero di aggiungere le tue schede ovunque tu abbia un’area del widget nel tuo tema.

widget di schede

CSS personalizzato

Mentre il plug-in WordPress di Tab include molte opzioni di personalizzazione delle schede (basta dare un’occhiata a quella barra laterale destra; è pieno di opzioni di stile!), Puoi aggiungere i tuoi stili CSS personalizzati come mostrato di seguito.

schede wordpress plug-in css personalizzato

Inoltre, è possibile configurare le impostazioni personalizzate come impostazioni predefinite per tutte le nuove schede semplicemente facendo clic su Aggiorna impostazioni predefinite pulsante come mostrato nell’immagine sopra.

La barra laterale destra

schede opzioni di stile del plugin wordpress

La barra laterale destra che evidenziamo nell’immagine qui sopra porta davvero il giorno per il tuo. È pieno di tutte le opzioni che ti servono per dare uno stile alle tue schede in base al tuo cuore. Le opzioni degne di nota includono:

  • Colore di sfondo della scheda
  • Colore carattere scheda
  • Famiglia e stile dei caratteri
  • Visualizza le opzioni per il titolo e l’icona della scheda
  • Allineamento della posizione dell’icona della scheda, ovvero prima o dopo il titolo della scheda
  • Bordi della scheda
  • Animazioni di descrizione di più schede
  • E molto di più

Aggiungi le tue schede a una pagina o post di WordPress

Dopo aver aggiunto il contenuto della scheda e le opzioni di stile, scorrere verso l’alto e fare clic su Pubblicare pulsante come mostrato di seguito.

A questo punto, le tue schede sono pronte. Devi semplicemente aggiungere le schede a una pagina o post di WordPress. Basta copiare lo shortcode delle schede che abbiamo visto in precedenza. Il nostro è [TABS_R id = 443].

Avvia il tuo editor di post (anche se lo stai utilizzando Gutenberg) e incolla lo shortcode nel tuo post / pagina. Successivamente, premi il tasto Pubblicare pulsante come mostrato di seguito.

Dopo circa 5 minuti di installazione delle cose; Sto usando il tema Twenty Seventeen e un sacco di Lorem Ipsum, ho trovato il seguente risultato.

Nota che non ho personalizzato i colori o altro. Ditemi cosa ne pensate; non è stato così facile?


L’aggiunta di schede alle pagine e ai post di WordPress è roba da quarta elementare. Non mi aspetto che si verifichino problemi, soprattutto se si utilizza un plug-in come Tabs di WP Shop Mart.

Come si aggiungono le schede alle pagine e ai post di WordPress? Quali sono le tue schede preferite Plugin WordPress? Per favore, condividi i tuoi pensieri nei commenti. Buona creazione!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map