Come creare contenuti a schede in Elementor utilizzando i componenti aggiuntivi di PowerPack

Ti chiedi come creare contenuti a schede in Elementor?

Il contenuto a schede migliora l'aspetto delle tue pagine web visualizzando una grande quantità di informazioni in modo compatto ma funzionale.

In questo articolo, discuteremo di come creare contenuti a schede per il tuo sito Web WordPress utilizzando i componenti aggiuntivi Elementor e PowerPack.

Widget scheda avanzata PowerPack – Panoramica

PowerPack Addons per Elementor è uno degli ultimi add-on per il page builder Elementor. Dispone di oltre 150 modelli unici ed eleganti e oltre 80 utili widget, incluso il widget Schede avanzate per creare contenuti a schede su Elementor.

Il widget Schede avanzate è il miglior widget di schede per creare contenuti a schede su qualsiasi sito Web WordPress. Diamo un'occhiata alle funzionalità del widget Schede avanzate PowerPack per Elementor:

• Supporta più fonti di contenuto
• Molteplici opzioni personalizzabili di contenuto per dare stile ai tuoi contenuti.
• Consente di creare schede orizzontali e schede verticali.
• Offre un eccellente supporto reattivo e funziona senza problemi su tutti gli schermi.
• Offre molteplici opzioni di stile come colore del testo, tipografia, tipo di sfondo, spaziatura delle tabulazioni, bordo, allineamento del testo e molti altri.
• Consente di personalizzare separatamente l'icona, il titolo e la parte del contenuto.

Crea contenuti a schede in Elementor con i componenti aggiuntivi di PowerPack

Prima di iniziare, assicurati di aver installato e attivato il generatore di pagine Elementor e i componenti aggiuntivi PowerPack per Elementor.

Dopo aver attivato entrambi i plug-in sul tuo sito Web WordPress, apri la pagina utilizzando l'editor Elementor.

Quindi, cerca " Schede avanzate " nell'area del widget e trascina e rilascia il widget sulla pagina.

Non dimenticare di controllare il PowerPack " PP ” segno nell'angolo in alto a destra del widget.

Scheda Contenuto di Widget Scheda Avanzata

La scheda contenuto del widget Schede avanzate comprende due sezioni:

1. Schede avanzate
2. Disposizione

Diamo un'occhiata a queste sezioni in dettaglio.

Schede avanzate

Diamo un'occhiata alle funzionalità disponibili in questa sezione:

• Puoi aggiungere tutte le " schede " che desideri. Basta fare clic su " Aggiungi elemento " per creare più schede.
• Puoi personalizzare ogni scheda individualmente.
• Tipo di contenuto: questa opzione consente di scegliere più tipi di contenuto come contenuto, immagine, collegamento (video/immagine), sezione salvata, widget salvato e modello di pagina salvata.

"Contenuto" come tipo di contenuto

Quando desideri visualizzare il contenuto, puoi personalizzare queste opzioni:

1. Titolo: scrivi un titolo per il contenuto usando questa opzione.
2. Contenuto: in questa sezione, puoi aggiungere contenuto alla scheda con funzionalità come elenco di numeri, elenco puntato, link, grassetto, corsivo, sottolineato e molte altre funzionalità per definire lo stile del testo. Oltre a ciò, puoi anche aggiungere un'immagine dalla libreria multimediale.

"Immagine" come tipo di contenuto

Quando desideri visualizzare un'immagine, puoi personalizzare queste opzioni:

1. Scegli immagine: scegli un'immagine dalla libreria di immagini utilizzando questa opzione.
2. Dimensione immagine: questa opzione consente di selezionare la dimensione dell'immagine desiderata.

Quando si desidera visualizzare un collegamento, è possibile rilasciare un collegamento all'opzione "Collegamento". E se scegli una sezione salvata, un widget salvato o un modello di pagina salvato, puoi selezionarli di conseguenza.

Poiché personalizzi la parte del contenuto separatamente per ciascuna scheda, allo stesso modo puoi farlo per le icone di ciascuna scheda.

Le caratteristiche della sezione icone sono:

1. Tipo di icona: puoi scegliere un tipo di icona, un'icona o un'immagine. Potrebbe essere il logo del tuo marchio o qualsiasi altra cosa.
2. Icona: puoi scegliere un'icona dalla libreria di icone.

Disposizione

Diamo un'occhiata alle funzionalità disponibili in questa sezione:

• Layout: è possibile selezionare il layout come modello orizzontale o verticale.
• Supporto reattivo: il widget Schede avanzate supporta la modalità reattiva su tutti i dispositivi, desktop, tablet o dispositivi mobili.
• Seleziona stile: seleziona lo stile della scheda utilizzando questa opzione.
• Scorri verso l'alto: puoi selezionare sì o no se vuoi scorrere fino all'inizio delle schede quando fai clic sul titolo.

[ Nota: questa opzione sarà disponibile solo se si seleziona un modello di layout verticale per le schede.]

• Indice scheda attiva predefinito: questa opzione può impostare la scheda attiva predefinita. In modo che ogni volta che visiti il ​​tuo sito web, la scheda che hai selezionato apparirà per impostazione predefinita.
• Prefisso ID personalizzato: puoi aggiungere un prefisso ID personalizzato che verrà applicato agli attributi ID della scheda in HTML.

Applica queste modifiche al widget Schede avanzate per vedere i risultati migliori.

Scheda Stile di Widget Scheda Avanzata

La scheda dello stile del widget delle schede avanzate comprende due sezioni:

1. Schede
2. Titolo
3. Contenuto

Diamo un'occhiata a queste sezioni in dettaglio.

Schede

Vediamo quali sono tutte le funzionalità incluse in questa sezione:

• Allineamento orizzontale o verticale: seleziona l'allineamento per le schede utilizzando questa opzione, ma scegli prima il layout.
• Spazio tra le schede: personalizza la spaziatura tra le schede con questa opzione.
• Colore di sfondo: utilizzando questa opzione, puoi scegliere un colore di sfondo per le schede.
• Raggio bordo: applica il raggio bordo se desideri visualizzare i bordi curvi sul bordo della scheda.
• Padding: regola il riempimento per la scheda per mantenere la spaziatura tra il bordo della scheda e il contenuto.

Titolo

Vediamo quali sono tutte le funzionalità incluse in questa sezione:

• Posizione icona: scegli la posizione dell'icona in alto, in basso, a destra o a sinistra.
• Dimensione icona: regola la dimensione dell'icona con questa opzione.
• Larghezza immagine icona: regola la larghezza dell'immagine icona utilizzando questa opzione.
• Raggio bordo: applica il raggio bordo se desideri visualizzare i bordi curvi sul bordo del titolo della scheda.
• Padding: regola il riempimento per la scheda per mantenere la spaziatura tra il bordo del titolo della scheda e il contenuto.
• Tipografia del titolo: personalizza la tipografia del testo del titolo utilizzando questa opzione.
• Colore icona: scegli un colore per l'icona con questa opzione.
• Colore del titolo: personalizza il colore del testo del titolo utilizzando l'opzione del colore del titolo.
• Colore di sfondo del titolo: se desideri visualizzare il colore di sfondo del titolo, puoi scegliere un colore di sfondo utilizzando questa opzione.
• Effetto al passaggio del mouse: questa opzione ti offre la flessibilità di abilitare o disabilitare l'effetto al passaggio del mouse.

Contenuto

Vediamo quali sono tutte le funzionalità incluse in questa sezione:

• Allineamento: imposta l'allineamento del contenuto visualizzato nelle schede utilizzando questa opzione.
• Tipo di sfondo: puoi scegliere un tipo di sfondo classico o sfumato.
• Colore del testo: scegli un colore del testo per il contenuto che desideri visualizzare nelle schede.
• Tipografia del testo: puoi personalizzare la tipografia del testo del contenuto usando questa opzione.
• Tipo di bordo: scegli un tipo di bordo per il contenuto tra le opzioni disponibili come pieno, doppio, punteggiato, tratteggiato o scanalato.
• Larghezza bordo: la larghezza del bordo applicata al contenuto può essere regolata da questa opzione.
• Padding: regola il riempimento per consentire la spaziatura tra il testo del contenuto e il suo bordo per farlo sembrare organizzato e pulito.
• Colore bordo: il colore del bordo del contenuto può essere personalizzato utilizzando questa opzione.
• Raggio bordo: se hai applicato un bordo alla parte del contenuto, puoi regolarne il raggio usando questa opzione.

Quindi, si trattava di personalizzare il contenuto e la scheda di stile del widget Schede avanzate per Elementor di PowerPack Addons.

Installa, attiva e apporta alcune modifiche secondo la tua scelta; E 'così semplice.

Ottieni le schede avanzate di PowerPack per Elementor Page Builder

Dopo aver conosciuto tutte quelle funzionalità del widget Schede avanzate fornito da PowerPack Elementor Addons, siamo abbastanza sicuri che ti piacerà usarlo sul tuo sito web.

Ci auguriamo che questo tutorial ti abbia aiutato a creare "schede" eleganti per il tuo sito Web utilizzando il widget Schede avanzate di PowerPack.

I widget di PowerPack Addons sono progettati in modo sorprendente dai nostri programmatori creativi in ​​modo che i non programmatori possano usarli facilmente in pochi minuti.

Fare clic qui per ottenere il widget Schede avanzate di PowerPack e migliorare l'aspetto e l'esperienza utente del sito Web.

Se ti è piaciuto leggere questo articolo, ti piacerebbe provare anche gli altri nostri elementi PowerPack.

Sentiti libero di lasciare i tuoi commenti qui; ci piacerebbe ricevere le vostre risposte.
Inoltre, unisciti a noi su Twitter, Facebook e YouTube.