Quando si costruisce un sito web, è essenziale assicurarsi che i contenuti siano ben organizzati. Una disposizione ordinata delle pagine può contribuire a migliorare la User Experience (UX) e a rendere il testo più digeribile. Uno dei modi per organizzare i vostri contenuti è con il widget Elementor Tabs.
I contenuti a schede consentono agli utenti di alternare le diverse sezioni di contenuto. Questa funzione elimina la necessità per le persone di navigare in diverse aree delle pagine. Raggruppare i contenuti correlati in contenitori a schede può migliorare l’aspetto e l’usabilità del vostro sito. Inoltre, potete configurare il tutto senza alcuna esperienza di sviluppo di WordPress.
In questo articolo presenteremo brevemente Elementor e le sue diverse versioni. Poi vi spiegheremo come creare e personalizzare le schede di Elementor e alcuni strumenti di terze parti che potete usare per migliorare le funzionalità predefinite del widget.
Iniziamo!
Una Panoramica di Elementor
Elementor è un popolare e potente plugin per la creazione di siti web:
Potete usare il page builder per creare bellissime pagine per il vostro sito web, sia partendo da zero che tramite modelli già pronti. Elementor dispone di un editor drag-and-drop, quindi non dovrete toccare una riga di codice.
È importante notare che esiste una versione gratuita e una a pagamento di Elementor. Il plugin Elementor gratuito vi permette di creare pagine e post standard.
Tuttavia, le sue caratteristiche e funzionalità possono essere limitanti. Per sbloccare l’intera suite di strumenti, vi consigliamo di passare a Elementor Pro. Nel corso di questo articolo, vi indicheremo le differenze tra il piano gratuito e quello pro quando lavorate con il widget Tabs.
Come Creare le Schede di Elementor (Widget delle Schede)
Ora che abbiamo capito qualcosa in più su Elementor, vediamo come usare il widget Tabs. Per questo tutorial ipotizziamo che abbiate già installato e attivato Elementor sul vostro sito WordPress.
Per iniziare, andate sull’articolo o sulla pagina di WordPress in cui volete aggiungere il contenuto a schede e selezionate Edit with Elementor:
In questo modo si aprirà l’interfaccia dell’editor di Elementor. Nel pannello di sinistra, alla voce Elements, cercate e selezionate il widget Tabs:
Potete trascinare il widget in una sezione della pagina. Una volta posizionato il widget Tabs, apparirà una nuova bacheca con le sue impostazioni:
Potete inserire il titolo e il contenuto di ogni scheda. Potete anche fare clic sul pulsante + Add Item per inserire un’altra scheda. Alla voce Type, scegliete se visualizzare le schede in orizzontale o in verticale.
Come Personalizzare le Schede di Elementor
Una volta aggiunto il testo alle schede, potete personalizzare le impostazioni generali del widget. Ci sono diverse opzioni.
Selezionate ogni scheda personalizzata per modificarne gli attributi, tra cui il titolo, il contenuto del riquadro e l’icona. Potete anche modificarne la posizione e l’allineamento:
Poi, nella scheda Style, troverete molte opzioni per personalizzare il design e l’aspetto del widget Schede di Elementor. Potete modificare il colore e l’ombra del testo, la tipografia, la spaziatura e molto altro ancora:
Potete modificare il colore e la larghezza del bordo che circonda le schede. Questa caratteristica del design può aiutare a distinguere le singole sezioni.
Alla voce Title, potete modificare il colore del testo dei titoli delle schede. Potete anche modificare il font e le dimensioni del testo facendo clic su Typography:
Quando avete finito, salvate le modifiche. Ci sono anche alcune impostazioni avanzate che potreste prendere in considerazione per rendere i vostri contenuti a schede più sofisticati.
Impostazioni Avanzate per le Schede di Elementor
Nella scheda Advanced del pannello delle impostazioni del widget, troverete un’ampia gamma di opzioni aggiuntive:
Diamo un’occhiata più da vicino a queste impostazioni:
- Advanced: Modificate i margini e i padding delle schede.
- Motions Effects: Aggiungete effetti di scorrimento e di mouse per rendere il widget più interattivo e un’animazione di ingresso.
- Transform: Capovolgete, ruotate e ridimensionate il vostro widget.
- Background: Scegliete tra uno sfondo standard o il passaggio del mouse per inserire una transizione.
- Border: Scegliete il tipo di bordo, per esempio una linea piena o tratteggiata.
- Mask: Selezionate una maschera di design elegante e applicala al widget.
- Positioning: Regolate la larghezza e la posizione del widget.
- Responsive: Modificate la visibilità responsive che influenzerà l’anteprima o le pagine live.
- Attributes: Impostate gli attributi personalizzati per il wrapper dell’elemento.
- Custom CSS: Inserite il vostro CSS personalizzato.
È importante notare che se state usando la versione gratuita di Elementor, non avrete accesso a tutte queste impostazioni avanzate. Per esempio, non potete aggiungere attributi personalizzati, effetti di scorrimento o il vostro CSS.
Come Aggiungere un Elemento nel Widget delle Schede
Con Elementor Pro, potete anche inserire un altro elemento all’interno del widget Tabs. Per esempio, supponiamo che vogliate aggiungere il widget Mappe sotto la scheda Locations.
Per farlo, create la mappa che volete usare e salvatela come Global Widget facendo clic con il tasto destro del mouse sull’icona della matita e selezionando Save as Global:
Successivamente, andate alla libreria dei template (Template Library) (dalla bacheca di WordPress) e copiate lo shortcode del widget globale appena creato.
Poi fate clic all’interno del widget Tabs e selezionate il pulsante + Add Item per aggiungere una nuova scheda. Nell’area di testo del contenitore, incollate lo shortcode appena copiato:
Quando avete finito, fate clic su UPDATE o PUBLISH nella parte inferiore dello schermo. A questo punto potrete vedere l’anteprima dell’aspetto del widget sul front-end del vostro sito:
Ecco fatto! Avete finito.
Gli 8 Migliori Plugin per le Schede di Elementor
Elementor è uno strumento robusto che offre tutte le funzionalità e le caratteristiche necessarie per creare contenuti a schede belli e funzionali.
Tuttavia, potreste voler portare avanti il vostro design o usare funzionalità avanzate. In questo caso, potreste prendere in considerazione la possibilità di abbinare Elementor a un altro strumento di terze parti.
Diamo un’occhiata ad alcuni dei migliori plugin per Elementor Tabs, classificati in ordine sparso.
1. ElementsKit Elementor Table Widget
ElementsKit Addon for Elementor è un’estensione molto popolare:
Il suo Table Widget vi permette di mostrare una grande quantità di dati non sincronizzati in modo organizzato. potete creare una tabella personalizzabile, aggiungere contenuti e inserire immagini ed elementi di navigazione.
Le caratteristiche di ElementsKit includono:
- Tabelle di confronto
- Orari e calendari
- Project Management
- Menu
- Più di 500 blocchi
- Più di 70 add-on
- Un costruttore di mega menu
- Effetti di parallasse
- Un costruttore di popup modali
Il prezzo di ElementsKit parte da 39 dollari all’anno per un singolo sito. Questo piano include un anno di aggiornamenti e supporto.
2. Elegant Tabs for Elementor
Elegant Tabs for Elementor è uno strumento intuitivo che vi aiuta a creare e personalizzare schede dinamiche:
Questo add-on può essere una valida scelta se state cercando un’estensione con molte opzioni di personalizzazione del design. Potete aggiungere colori, icone e font personalizzati. Potete anche usare Elegant Tabs per aggiungere una funzione di commutazione automatica alle vostre schede e collegarle ad altri contenuti del vostro sito.
Le caratteristiche principali di Elegant Tabs includono:
- Opzioni di stile avanzate
- Una funzione di commutazione automatica
- L’opzione per impostare qualsiasi scheda attiva al caricamento
- Schede giustificate e verticali
- Deep linking
- Supporto per l’allineamento delle schede
Il prezzo di Elegant Tabs parte da 19 dollari all’anno. Questo piano include sei mesi di aggiornamenti.
3. Livemesh Addons
Livemesh Addons for Elementor include una pletora di elementi già pronti che vi aiuteranno a strutturare i vostri contenuti a schede con facilità:
Potete scegliere tra tipi di schede chiare e scure, oltre 10 design di schede e opzioni di layout orizzontale e verticale. Livemesh Addons è anche semplice da usare, il che è ottimo se siete alle prime armi con WordPress o Elementor.
Le caratteristiche principali di Livemesh includono:
- 10 design di schede chiare e 10 design di schede scure
- Opzioni verticali e orizzontali
- Risoluzione mobile personalizzabile
- Più di 25 addon
- Supporto per le icone
I piani di Livemesh Addons partono da 37 dollari all’anno. Questo piano include aggiornamenti e supporto per un anno.
4. Elementor Addons
Elementor Addons, prodotto dal famoso PowerPack, è un plugin ricco di funzioni per migliorare il design e la funzionalità del vostro widget Elementor Tabs:
Potete usare questo plugin per aggiungere testo e immagini alle vostre schede e applicare sei stili al widget Advanced Tabs. È facile da usare e da capire. Inoltre, Elementor Addons è anche leggero, quindi non dovete preoccuparvi di rallentare il vostro sito.
Le caratteristiche principali di Elementor Addons by PowerPack includono:
- Un’interfaccia veloce e leggera
- Template precostituiti
- Visualizzazione personalizzata dei contenuti
- Stili di scheda avanzati
Visto il prezzo che parte da 44 dollari all’anno, questo plugin è più costoso di altre opzioni di questo articolo. Tuttavia, dispone di una suite completa di widget per personalizzare tutti gli aspetti del vostro sito, non solo i contenuti delle schede.
5. JetElements
JetElements offre un widget Responsive Tables che potrebbe essere l’ideale se state cercando un modo semplice e veloce per raggruppare i vostri contenuti:
Vi permette di mostrare dati non strutturati in modo pulito e moderno. JetElements offre anche un widget Pricing Table per personalizzare e stilizzare i dettagli dei prezzi in otto modi diversi.
Le caratteristiche principali di JetElements includono:
- 45 widget
- Importazione CSV delle impostazioni delle tabelle
- 8 opzioni di stile
- Supporto per tutti i tipi di contenuto
- Interamente personalizzabile
L’abbonamento a JetElements parte da 24 dollari all’anno. Crocoblock offre anche un pacchetto all-inclusive a 130 dollari all’anno, con oltre 150 widget.
6. Essential Addons
Un altro plugin popolare che potreste considerare per le vostre schede Elementor è Essential Addons:
È uno dei più popolari plugin per widget di Elementor. Include oltre 100 blocchi già pronti e più di 80 elementi per espandere e migliorare il costruttore di siti web.
Uno dei migliori elementi che potete sfruttare per i vostri contenuti a schede è la Data Table del plugin. Questo strumento vi permette di progettare senza problemi quasi tutti i tipi di tabella e di aggiungere icone, filtri e molto altro.
Le caratteristiche principali di Essential Addons includono:
- Importazione CSV delle impostazioni della tabella
- Opzioni di filtraggio
- Impostazioni completamente personalizzabili
- Opzioni di stile avanzate
- Schede avanzate ed elementi a fisarmonica
- Tabelle dei prezzi
Il prezzo di Essential Addons parte da 39,97 dollari all’anno per un sito web. Include un anno di aggiornamenti e supporto.
7. Premium Addons
Premium Addons è uno strumento altamente personalizzabile per Elementor che offre una vasta gamma di widget gratuiti e premium:
Tra i tanti potenti widget inclusi in questo addon c’è la Elementor Pricing Table. È dotata di una funzione di ordinamento, di ricerca in tempo reale e della possibilità di disporre gli articoli in ordine crescente o decrescente.
Le caratteristiche principali di Premium Addons includono:
- Possibilità di importare file CSV
- Aggiunta di URL alle celle delle tabelle
- Ricerca e ordinamento in tempo reale
- Opzioni di personalizzazione e stile
- Animazioni Lottie
Potete scaricare e usare Premium Addons Elementor Table Widget gratuitamente. Esiste anche una versione premium, a partire da 39 dollari all’anno.
8. Element Pack
Un ultimo addon che potreste considerare di ysare con il vostro widget Elementor Tabs è Element Pack:
Questo pacchetto di estensioni di Elementor include un widget Table che può presentare i vostri contenuti in modo accattivante ed elegante. Potete creare diverse tabelle all’interno dei vostri contenuti a schede, tra cui tabelle di prezzi, contenuti e criptovalute.
Le caratteristiche principali di Element Pack includono:
- Importazione di CSV nelle impostazioni delle tabelle
- Elementi a tre tabelle
- Opzioni di personalizzazione e stile
- Una funzione di filtraggio
- Ricerca in tempo reale
La licenza per un singolo sito di Element Pack costa 29,25 dollari all’anno, il che la rende una delle opzioni più economiche di questo elenco. Il piano include anche una garanzia di rimborso di 20 giorni.
Riepilogo
Elementor è uno strumento eccellente che può aiutarvi a progettare e costruire il vostro sito web senza sforzo. Se volete raggruppare e organizzare i vostri contenuti in modo accattivante, potreste prendere in considerazione l’utilizzo del widget Tabs di Elementor.
Come abbiamo detto in questo articolo, potete inserire facilmente questo widget in qualsiasi pagina o articolo tramite l’editor di Elementor. Poi potrete aggiungere i vostri contenuti e adattarli al vostro branding. Per estendere le funzionalità del widget, potete anche abbinarlo a un plugin di terze parti, come ElementsKit.
Un design accattivante e facile da usare è essenziale per il successo di un sito.
Dovrete inoltre collaborare con un potente provider di hosting di applicazioni, hosting di database e hosting WordPress gestito.
Date un’occhiata ai nostri piani di hosting per scoprire come Kinsta può portare il vostro sito web a un livello superiore!
Lascia un commento