{"id":56250,"date":"2022-06-20T13:37:13","date_gmt":"2022-06-20T12:37:13","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=56250&preview=true&preview_id=56250"},"modified":"2024-09-19T09:30:24","modified_gmt":"2024-09-19T08:30:24","slug":"schede-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/schede-elementor\/","title":{"rendered":"Come creare e utilizzare le schede di Elementor"},"content":{"rendered":"

Quando si costruisce un sito web<\/a>, \u00e8 essenziale assicurarsi che i contenuti siano ben organizzati. Una disposizione ordinata delle pagine pu\u00f2 contribuire a migliorare la User Experience (UX) e a rendere il testo pi\u00f9 digeribile. Uno dei modi per organizzare i vostri contenuti \u00e8 con il widget Elementor Tabs.<\/p>\n

I contenuti a schede consentono agli utenti di alternare le diverse sezioni di contenuto. Questa funzione elimina la necessit\u00e0 di navigare in diverse aree delle pagine. Raggruppare i contenuti correlati in contenitori a schede pu\u00f2 migliorare l’aspetto e l’usabilit\u00e0 del vostro sito. Inoltre, potete configurare il tutto senza alcuna esperienza di sviluppo di WordPress<\/a>.<\/p>\n

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\u00e0 predefinite del widget.<\/p>\n

Iniziamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Panoramica di Elementor<\/h2>\n

Elementor \u00e8 un popolare e potente plugin per la creazione di siti web:<\/a><\/p>\n

\"Homepage
Elementor page builder.<\/figcaption><\/figure>\n

Potete usare il page builder per creare bellissime pagine per il vostro sito web, sia partendo da zero che tramite modelli gi\u00e0 pronti. Elementor dispone di un editor drag-and-drop, quindi non dovrete toccare una riga di codice<\/a>.<\/p>\n

\u00c8 importante notare che esiste una versione gratuita<\/a> e una a pagamento di Elementor. Il plugin Elementor gratuito vi permette di creare pagine e post standard.<\/p>\n

Tuttavia, le sue caratteristiche e funzionalit\u00e0 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.<\/p>\n

Anche un provider di hosting Elementor<\/a> veloce come Kinsta pu\u00f2 aiutarvi a ottenere il massimo da Elementor.<\/p>\n\n

Come creare le schede di Elementor (widget delle schede)<\/h2>\n

Ora che abbiamo capito qualcosa in pi\u00f9 su Elementor, vediamo come usare il widget Tabs. Per questo tutorial ipotizziamo che abbiate gi\u00e0 installato e attivato<\/a> Elementor sul vostro sito WordPress.<\/p>\n

Per iniziare, andate sull\u2019articolo o sulla pagina di WordPress in cui volete aggiungere il contenuto a schede e selezionate Edit with Elementor<\/strong>:<\/p>\n

\"Schermata
Selezionate “Edit with Elementor”.<\/figcaption><\/figure>\n

In questo modo si aprir\u00e0 l’interfaccia dell’editor di Elementor. Nel pannello di sinistra, alla voce Elements<\/strong>, cercate e selezionate il widget Tabs<\/strong>:<\/p>\n

\"Schermata
Cercate e selezionate il widget “Tabs”.<\/figcaption><\/figure>\n

Potete trascinare il widget in una sezione della pagina. Una volta posizionato il widget Tabs, apparir\u00e0 una nuova bacheca con le sue impostazioni:<\/p>\n

\"Schermata
Trascinate il widget sulla pagina.<\/figcaption><\/figure>\n

Potete inserire il titolo e il contenuto di ogni scheda. Potete anche fare clic sul pulsante + Add Item<\/strong> per inserire un’altra scheda. Alla voce Type<\/strong>, scegliete se visualizzare le schede in orizzontale o in verticale.<\/p>\n

Come personalizzare le schede di Elementor<\/h2>\n

Una volta aggiunto il testo alle schede, potete personalizzare le impostazioni generali del widget. Ci sono diverse opzioni.<\/p>\n

Selezionate ogni scheda personalizzata per modificarne gli attributi<\/a>, tra cui il titolo, il contenuto del riquadro e l’icona. Potete anche modificarne la posizione e l’allineamento:<\/p>\n

\"Scherma
Modificate le schede secondo le necessit\u00e0.<\/figcaption><\/figure>\n

Poi, nella scheda Style<\/strong>, 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:<\/p>\n

\"Scherma
Personalizzate stili e spaziatura.<\/figcaption><\/figure>\n

Potete modificare il colore e la larghezza del bordo che circonda le schede. Questa caratteristica del design pu\u00f2 aiutare a distinguere le singole sezioni.<\/p>\n

Alla voce Title<\/strong>, potete modificare il colore del testo dei titoli delle schede. Potete anche modificare il font e le dimensioni del testo facendo clic su Typography<\/strong>:<\/p>\n

\"Scherma
Altre opzioni di modifica.<\/figcaption><\/figure>\n

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\u00f9 sofisticati.<\/p>\n

Impostazioni avanzate per le schede di Elementor<\/h2>\n

Nella scheda Advanced<\/strong> del pannello delle impostazioni del widget, troverete un’ampia gamma di opzioni aggiuntive:<\/p>\n

\"Scherma
Opzioni avanzate per modificare le schede.<\/figcaption><\/figure>\n

Diamo un’occhiata pi\u00f9 da vicino a queste impostazioni:<\/p>\n