Come creare schede di scorrimento verticale in WordPress con Element

Le schede di scorrimento verticale consentono di mostrare un contenuto a schede in un layout alto e fianco a fianco. Le schede rimangono impilate sul lato sinistro o destro, mentre il contenuto per ciascuna scheda appare sul lato opposto. I visitatori possono scorrere le schede per esplorare il contenuto al loro interno.

Questo mantiene la pagina pulita e le persone possono visualizzare molte informazioni senza lasciare la pagina corrente. Non solo puoi visualizzare testi, ma puoi anche visualizzare immagini, video e modelli nelle schede di scorrimento verticali. Gli utenti possono fare clic o toccare una scheda per visualizzare il contenuto collegato ad essa, mentre le altre sezioni rimangono nascoste.

Elementor è un popolare costruttore di siti Web senza codice. Con questo plugin, è possibile creare un intero sito Web da zero utilizzando la sua funzionalità di trascinamento. In questo post tutorial, ti mostreremo come creare schede di scorrimento verticale in WordPress con Element.

Casi d'uso di schede di scorrimento verticali

Le schede di scorrimento verticale ti aiutano a organizzare una grande quantità di contenuti in un piccolo spazio. Lasciano che i visitatori si muovono attraverso gli argomenti senza caricare una nuova pagina. Questo layout è facile da usare sia su desktop che mobile. Diamo un'occhiata ad alcuni casi d'uso delle schede di scorrimento verticali di seguito.

UN. Dettagli del prodotto o del servizio

È possibile visualizzare molte descrizioni di prodotti o servizi fianco a fianco. Ogni scheda può contenere specifiche, prezzi, funzionalità o recensioni. I visitatori possono confrontare rapidamente diverse opzioni senza lasciare la pagina.

B. Domande frequenti (FAQ)

Le schede verticali sono perfette per le domande frequenti. Puoi raggruppare domande simili in una scheda e risposte sotto un'altra. I lettori possono scorrere e fare clic solo le domande che le interessano.

C. Guide o tutorial passo-passo

Se si desidera condividere un processo con molti passaggi, le schede verticali mantieni ogni passaggio chiaro. Gli utenti possono fare clic su ciascuna scheda per seguire la guida in ordine. Questo semplifica l'apprendimento e mantiene la pagina pulita.

D. Membri del team o profili del personale

Presenta il tuo team in modo professionale dando a ogni membro una scheda. Ogni scheda può mostrare una foto, un ruolo e una biografia breve. I visitatori possono scorrere l'elenco e conoscere tutti senza disordine. Esplora alcuni dei migliori esempi di pagina della squadra.

e. Portfolio o Progetto Showcase

Visualizza il tuo lavoro o progetti nelle schede verticali per salvare lo spazio. Ogni scheda può mostrare immagini, descrizioni e collegamenti ai dettagli. Questo aiuta i visitatori a esplorare molti progetti da una singola pagina.

Come creare schede di scorrimento verticale in Element

La parte teorica è finita. Spero che tu abbia ora una chiara idea di quale sia la scheda di scorrimento verticale e quali sono i suoi casi d'uso. Adesso copriremo la parte tutorial. Spiegheremo come creare schede di scorrimento verticali con Element su WordPress in questa sezione. Continua a leggere!

Prerequisiti per iniziare il tutorial

Per creare schede di scorrimento verticale su WordPress con Element, sono necessarie i seguenti plugin installati e attivati ​​sul tuo sito.

• Elementor libero
• HappyAddons gratis
• HappyAddons Pro

NOTA: hai bisogno di HappyAddons Pro perché Element non ha un'opzione integrata per creare schede di scorrimento. HappyAddons Pro offre un widget chiamato schede Scroll che ti consente di creare facilmente le schede di scorrimento verticale.

Una volta che questi plugin sono pronti sul tuo sito, segui il tutorial spiegato di seguito.

Passaggio 01: Apri una pagina con Element

Basta aprire una pagina con Element in cui si desidera creare schede di scorrimento verticali.

Passaggio 02: trascinare e rilasciare il widget delle schede di scorrimento sulla tela

Trova il widget delle schede Scroll sul pannello Element. Trascina e lascialo cadere sulla tela elementare.

Il widget schede Scroll viene fornito con alcuni contenuti predefiniti. Una volta che il widget viene aggiunto alla tela, vedrai questo contenuto predefinito.

Passaggio 03: inizia ad aggiungere contenuto alle schede

È possibile aggiungere contenuto al widget delle schede Scroll e stilizzare il layout in molti modi. Esplorali in questo passaggio.

# Aggiungi un titolo al widget schede Scroll

Ogni sezione Web dovrebbe avere un titolo che indica chiaramente quale tipo di contenuto contiene. Quindi, devi scrivere un titolo per la sezione Widget di Scroll Schede.

Vai a Content> Tabs Content> Titolo . Otterrai lo spazio per scrivere un titolo. Puoi vedere che abbiamo scritto un titolo "Stylish Watch Insights".

# Scrivi una descrizione per il widget

Scrivi sotto il titolo, puoi scrivere una descrizione per il widget. Se la descrizione non è necessaria, puoi semplicemente rimuoverla.

# Aggiungi contenuto alle schede

Porta il cursore in una scheda e fai clic su di esso. Questo amplierà la scheda e consentirà di aggiungere contenuti.

# Scrivi un titolo per la scheda

È necessario scrivere un titolo per ogni scheda . Dopo l'espansione della scheda, otterrai una casella sotto il testo di Nav. Qui, puoi scrivere un titolo per la scheda.

# Modifica l'icona della scheda

È possibile rimuovere l'icona se non è necessaria. Ma per cambiare l'icona, fai clic sull'icona che puoi vedere nell'icona NAV.

La libreria di icona verrà aperta all'istante. Scegli un'icona che ti piace e premi il pulsante Insert .

Puoi vedere che l'icona è stata cambiata.

# Aggiungi contenuto alla scheda tramite editor

Ogni scheda consente di aggiungere due tipi di contenuto. Puoi scegliere se utilizzare l' editor o il modello .

Selezioniamo prima l'opzione Editor .

Utilizzando questo editor, è possibile aggiungere qualsiasi tipo di testo e immagini, che verranno immediatamente visualizzati sulla tela della rispettiva scheda.

# Modifica il colore di sfondo del contenuto a schede

Per evidenziare meglio il contenuto nella scheda, è possibile modificare il colore di sfondo, quindi si allinea bene con tutto il contenuto che hai aggiunto alla scheda.

# Aggiungi contenuto alla scheda tramite modello

Come detto sopra, il widget consente di aggiungere contenuto alla scheda tramite editor e modello. Diamo ora un'occhiata a come aggiungere contenuti usando i modelli.

Scegli l'opzione modello dal tipo di contenuto . Se hai già modelli pre-progettati salvati sul tuo sito, questa opzione sarà adatta.

Fai clic sull'icona a discesa accanto per scegliere il modello . Quindi, selezionare il modello che si desidera visualizzare nella scheda.

Puoi vedere che il nostro modello desiderato è già aggiunto alla scheda.

Allo stesso modo, aggiungi contenuto a tutte le schede del widget delle schede Scroll.

Passaggio 04: configurare le impostazioni del widget schede Scroll

Al termine della parte del contenuto, espandere la sezione Impostazioni .

Sarai in grado di modificare la larghezza del pannello di navigatore e l'altezza del pannello di contenuto, comprese le varie regolazioni dell'allineamento, da questa sezione.

# Regola la larghezza del pannello di navigazione

Il widget schede Scroll ha due parti: il pannello di navigatore (pannello di navigazione) e il pannello di contenuto .

È possibile modificare la larghezza del pannello Navigator trascinando la scala in questa opzione. Inoltre, è possibile regolare la sua posizione e l'allineamento. Il processo è mostrato nel video clip collegato di seguito.

# Regola l'altezza del pannello di controllo

Allo stesso modo, regolare l'altezza del pannello di controllo. Inoltre, conferma che il contenuto è allineato verticalmente correttamente.

Passaggio 05: stilizzare il widget schede Scroll

Vieni alla scheda Style . Imposta prima un colore di sfondo per il pannello Navigator .

# Personalizza la tipografia del contenuto del pannello NAV

Aggiorna la tipografia, uno per uno, per ogni contenuto che hai aggiunto al pannello Navigator. Puoi cambiare la famiglia dei caratteri, le dimensioni, il peso, l'altezza della linea, ecc., Se necessario.

# Stilizzare le schede

Aggiungendo un tipo di bordo, larghezza del bordo, imbottitura, colore del bordo, raggio del bordo, colore di testo e colore di sfondo, è possibile stilizzare le linguette e presentarle come la seguente immagine. Spero che tu possa farlo da solo.

Allo stesso modo, espandere e stilizzare il contenuto relativo al pannello del contenuto e alla sezione Scroll.

Passaggio 06: ottimizza il widget delle schede Scroll per il telefono cellulare

Per ottimizzare il widget per le dimensioni dello schermo mobile, vai alla modalità di ritratto mobile sulla barra in alto.

Vedrai che le schede Navigator vengono visualizzate in cima per impostazione predefinita.

# Regola l'altezza del pannello di contenuto per i dispositivi mobili

L'altezza esistente potrebbe non essere sufficiente per il pannello di contenuto. In questo caso, devi aumentare l'altezza in modo che tutti i contenuti all'interno della scheda possano essere perfettamente visti sulle dimensioni dello schermo mobile.

Passaggio 07: ottimizza il widget delle schede Scroll per i tablet

Allo stesso modo, passa alla modalità Ritratto del tablet per ottimizzare il contenuto per il display ottimale sulle dimensioni dello schermo del tablet.

Puoi vedere nel video allegato di seguito che il widget sembra già buono sullo schermo del tablet. Quindi, non abbiamo bisogno di modificarlo comunque.

Passaggio 08: Anteprima il widget delle schede Scroll

Vieni alla pagina di anteprima e controlla se il widget funziona bene o meno. Puoi vedere che il widget funziona bene dalla nostra parte.

Pertanto, è possibile creare schede di scorrimento verticali in WordPress con Element.

Final Takeaways!

Le schede di scorrimento verticale sono un modo intelligente per mantenere pulita una pagina web mentre condividono molte informazioni. Lasciano che i visitatori trovino ciò di cui hanno bisogno senza saltare a nuove pagine. Dopo aver seguito i passaggi sopra, è possibile progettare facilmente queste schede con Elementor e HappyAddons Pro.

Questo offre al tuo sito un aspetto moderno e migliora il modo in cui gli utenti esplorano i tuoi contenuti. Tuttavia, mentre crei questa sezione, tieni a mente alcune migliori pratiche. Usa titoli Clear per ogni scheda in modo che gli utenti sappiano cosa aspettarsi. Assicurati che testo, immagini e video siano leggeri, quindi la pagina si carica rapidamente.

Controllare il design su diverse dimensioni dello schermo e regolare la spaziatura per gli utenti mobili. Mantieni i colori e i caratteri coerenti con lo stile del tuo sito in modo che le schede si fondano naturalmente con il resto del design. Questi piccoli dettagli aiutano a creare un'esperienza regolare e professionale per ogni visitatore.

Scopri come progettare una box di ribalta in WordPress con Elementor.