{"id":166414,"date":"2024-02-19T09:00:00","date_gmt":"2024-02-19T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/widget-elementor-guida-completa-esempi\/"},"modified":"2026-05-25T12:16:55","modified_gmt":"2026-05-25T10:16:55","slug":"widget-elementor-guida-completa-esempi","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/widget-elementor-guida-completa-esempi\/","title":{"rendered":"Tutti i Widget di Elementor: Guida Completa con Esempi Pratici"},"content":{"rendered":"<h2>Introduzione: I Widget, i Mattoni di Ogni Pagina Elementor<\/h2>\n<p>I widget sono gli elementi fondamentali che compongono ogni pagina costruita con Elementor. Ogni titolo, immagine, pulsante, blocco di testo o icona che vedi su un sito Elementor \u00e8 un widget. Conoscerli tutti \u2014 le loro funzionalit\u00e0, opzioni e casi d&#8217;uso \u2014 \u00e8 essenziale per sfruttare al massimo il potenziale del page builder.<\/p>\n<p>In questa guida completa analizzeremo <strong>ogni widget gratuito disponibile in Elementor<\/strong>, con spiegazioni dettagliate e suggerimenti pratici. Se non hai ancora familiarit\u00e0 con <a href=\"\/blog\/interfaccia-elementor-guida-editor-visuale\/\">l&#8217;interfaccia dell&#8217;editor<\/a>, ti consigliamo di leggere prima quella guida.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/06-editor.png\" alt=\"Il pannello widget nell'editor di Elementor\" \/><\/p>\n<h2>Widget Base (I Pi\u00f9 Utilizzati)<\/h2>\n<h3>Intestazione (Heading)<\/h3>\n<p>Il widget <strong>Intestazione<\/strong> \u00e8 probabilmente il pi\u00f9 utilizzato in assoluto. Serve per inserire titoli e sottotitoli nella pagina.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/editor-widgets.png\" alt=\"Pannello widget di Elementor nell'editor\" width=\"1400\" height=\"900\" class=\"alignnone size-full\" \/><\/p>\n<ul>\n<li><strong>Tag HTML<\/strong>: puoi scegliere da H1 a H6. Usa H1 per il titolo principale (uno per pagina per la SEO), H2 per le sezioni, H3 per le sotto-sezioni<\/li>\n<li><strong>Dimensione<\/strong>: indipendente dal tag HTML \u2014 puoi avere un H2 grande come un H1 visivamente<\/li>\n<li><strong>Allineamento<\/strong>: sinistra, centro, destra o giustificato<\/li>\n<li><strong>Link<\/strong>: puoi rendere il titolo cliccabile collegandolo a un URL<\/li>\n<li><strong>Stile<\/strong>: controllo completo su colore, tipografia (font family, dimensione, peso, trasformazione, interlinea, spaziatura lettere), text-shadow e blend mode<\/li>\n<\/ul>\n<p><strong>Suggerimento<\/strong>: usa le impostazioni responsive (icona del dispositivo accanto alle opzioni di dimensione) per impostare dimensioni diverse su desktop, tablet e mobile. Un titolo da 48px su desktop potrebbe dover diventare 32px su mobile.<\/p>\n<h3>Editor di Testo (Text Editor)<\/h3>\n<p>L&#8217;<strong>Editor di Testo<\/strong> \u00e8 un editor WYSIWYG per inserire paragrafi e contenuti formattati. Supporta grassetto, corsivo, elenchi puntati e numerati, link, allineamento e formattazione avanzata.<\/p>\n<ul>\n<li>Puoi inserire codice HTML personalizzato passando alla modalit\u00e0 <strong>Testo<\/strong><\/li>\n<li>Il widget supporta colonne di testo (una o pi\u00f9 colonne CSS)<\/li>\n<li>Puoi aggiungere drop cap (capolettera) per un effetto editoriale elegante<\/li>\n<\/ul>\n<h3>Immagine (Image)<\/h3>\n<p>Il widget <strong>Immagine<\/strong> permette di inserire e personalizzare immagini:<\/p>\n<ul>\n<li><strong>Dimensione<\/strong>: seleziona tra miniatura, media, grande o dimensione originale<\/li>\n<li><strong>Allineamento<\/strong>: sinistra, centro, destra<\/li>\n<li><strong>Link<\/strong>: puoi collegare l&#8217;immagine a un URL personalizzato o al file media (per lightbox)<\/li>\n<li><strong>Didascalia<\/strong>: mostra la didascalia sotto l&#8217;immagine (presa dalla libreria media)<\/li>\n<li><strong>Stile<\/strong>: larghezza, altezza, opacit\u00e0, border-radius (per angoli arrotondati), bordi, ombre e filtri CSS (luminosit\u00e0, contrasto, saturazione)<\/li>\n<\/ul>\n<p><strong>Suggerimento SEO<\/strong>: compila sempre il campo <strong>Alt Text<\/strong> nella libreria media per ogni immagine che utilizzi. Questo \u00e8 fondamentale per l&#8217;accessibilit\u00e0 e il <a href=\"\/blog\/elementor-seo-ottimizzare-pagine-motori-ricerca\/\">posizionamento SEO<\/a>.<\/p>\n<h3>Video<\/h3>\n<p>Incorpora video da <strong>YouTube<\/strong>, <strong>Vimeo<\/strong> o <strong>file self-hosted<\/strong>. Opzioni principali: autoplay, mute, loop, controlli del player, immagine di copertina personalizzata, lightbox, orario di inizio e fine, e lazy loading per la performance.<\/p>\n<h3>Pulsante (Button)<\/h3>\n<p>Il widget <strong>Pulsante<\/strong> crea call-to-action personalizzabili:<\/p>\n<ul>\n<li><strong>Tipo<\/strong>: Default, Info, Successo, Avviso, Pericolo (preset di colore)<\/li>\n<li><strong>Testo<\/strong>: l&#8217;etichetta del pulsante<\/li>\n<li><strong>Link<\/strong>: URL di destinazione, con opzione per aprire in nuova finestra<\/li>\n<li><strong>Icona<\/strong>: puoi aggiungere un&#8217;icona prima o dopo il testo<\/li>\n<li><strong>Stile<\/strong>: tipografia, colori sfondo e testo (normali e al hover), padding, bordi, border-radius, ombra e transizioni<\/li>\n<\/ul>\n<h3>Separatore (Divider)<\/h3>\n<p>Una linea orizzontale decorativa. Scegli lo stile (solido, tratteggiato, punteggiato, doppio), il colore, lo spessore, la larghezza e l&#8217;allineamento. Puoi anche aggiungere un elemento al centro (testo o icona) per creare separatori eleganti.<\/p>\n<h3>Spaziatore (Spacer)<\/h3>\n<p>Aggiunge spazio verticale vuoto tra gli elementi. Imposta l&#8217;altezza in pixel. Semplice ma indispensabile per controllare il ritmo verticale della pagina. Puoi impostare altezze diverse per desktop, tablet e mobile.<\/p>\n<h3>Google Maps<\/h3>\n<p>Incorpora una mappa di Google Maps indicando indirizzo, livello di zoom e altezza. Per funzionare senza limitazioni, inserisci la tua Google Maps API Key nelle impostazioni di Elementor (Elementor \u2192 Impostazioni \u2192 Integrazioni).<\/p>\n<h2>Widget Generali<\/h2>\n<h3>Icona (Icon)<\/h3>\n<p>Inserisce una singola icona dalla libreria Font Awesome o dalla libreria personalizzata. Puoi controlarne colore, dimensione, allineamento, rotazione, e aggiungere effetti hover. Utile come elemento decorativo o come indicatore visuale.<\/p>\n<h3>Image Box<\/h3>\n<p>Un widget combinato che mostra <strong>immagine + titolo + descrizione<\/strong> in un unico blocco. L&#8217;immagine pu\u00f2 essere posizionata sopra, a sinistra o a destra del testo. Ideale per presentare prodotti, servizi o team member.<\/p>\n<h3>Icon Box<\/h3>\n<p>Simile a Image Box ma con un&#8217;<strong>icona<\/strong> al posto dell&#8217;immagine. Perfetto per sezioni di servizi o feature dove usi icone rappresentative. Offre le stesse opzioni di layout (icona sopra, a sinistra o a destra del testo).<\/p>\n<h3>Star Rating<\/h3>\n<p>Mostra una valutazione a stelle (da 0 a 5). Personalizza il numero di stelle, il valore, il colore delle stelle piene e vuote, la dimensione e la spaziatura. Utile per recensioni, valutazioni di prodotto o testimonianze.<\/p>\n<h3>Progress Bar (Barra di Progresso)<\/h3>\n<p>Una barra orizzontale che mostra il progresso percentuale. Personalizza titolo, percentuale, colori della barra e dello sfondo, altezza e stile dell&#8217;etichetta. Ideale per mostrare competenze, completamento di progetti o statistiche.<\/p>\n<h3>Counter (Contatore)<\/h3>\n<p>Un numero animato che conta da un valore iniziale a un valore finale. Perfetto per mostrare statistiche impressionanti: &#8220;500+ Clienti Soddisfatti&#8221;, &#8220;15 Anni di Esperienza&#8221;, &#8220;1000+ Progetti Completati&#8221;. Puoi aggiungere un prefisso e un suffisso al numero.<\/p>\n<h3>Testimonial (Testimonianza)<\/h3>\n<p>Un widget dedicato alle testimonianze dei clienti. Include il testo della citazione, il nome dell&#8217;autore, la sua posizione\/ruolo e una foto. Layout disponibili: citazione sopra, foto a sinistra o a destra. Personalizza la tipografia e i colori per integrarla nel tuo design.<\/p>\n<h3>Tabs (Schede)<\/h3>\n<p>Crea un&#8217;interfaccia a schede dove ogni tab mostra contenuto diverso. Utile per organizzare informazioni suddivise per categoria senza appesantire la pagina. Ogni scheda ha un titolo e un&#8217;area di contenuto testuale. Le tabs possono essere orizzontali o verticali.<\/p>\n<h3>Accordion (Fisarmonica)<\/h3>\n<p>Sezioni espandibili\/comprimibili. Fai clic sul titolo per mostrare o nascondere il contenuto. A differenza del widget Toggle, l&#8217;Accordion chiude le altre sezioni quando ne apri una. Perfetto per FAQ e domande frequenti.<\/p>\n<h3>Toggle<\/h3>\n<p>Simile all&#8217;Accordion ma con comportamento indipendente: ogni sezione si apre e chiude indipendentemente dalle altre. Tutte le sezioni possono essere aperte contemporaneamente.<\/p>\n<h3>Social Icons (Icone Social)<\/h3>\n<p>Un set di icone per i tuoi profili social (Facebook, Instagram, LinkedIn, Twitter\/X, YouTube, TikTok, ecc.). Personalizza i colori (brand o personalizzati), la forma (quadrato, cerchio, arrotondato), la dimensione e la spaziatura. Ogni icona ha il proprio link.<\/p>\n<h3>Alert (Avviso)<\/h3>\n<p>Un box di notifica per messaggi importanti. Tipi disponibili: Info (blu), Successo (verde), Avviso (giallo), Pericolo (rosso). Include titolo, descrizione e pulsante di chiusura opzionale. Utile per comunicazioni urgenti o note importanti nella pagina.<\/p>\n<h2>Widget per Contenuti Speciali<\/h2>\n<h3>SoundCloud<\/h3>\n<p>Incorpora tracce audio da SoundCloud. Basta inserire l&#8217;URL del brano e il widget genera automaticamente il player embedded. Opzioni: autoplay, colore del player, mostrare artwork, commenti e informazioni.<\/p>\n<h3>Shortcode<\/h3>\n<p>Esegue qualsiasi shortcode WordPress all&#8217;interno di Elementor. Questo \u00e8 il ponte tra Elementor e altri plugin: puoi inserire form di Contact Form 7, slider di altri plugin, contenuti di WooCommerce e qualsiasi altro shortcode disponibile.<\/p>\n<h3>HTML<\/h3>\n<p>Inserisce codice HTML, CSS e JavaScript personalizzato direttamente nella pagina. Potente ma da usare con cautela: codice errato pu\u00f2 rompere il layout. Perfetto per embed di servizi esterni, pixel di tracciamento o elementi personalizzati.<\/p>\n<h3>Menu Anchor (Ancoraggio Menu)<\/h3>\n<p>Crea un punto di ancoraggio invisibile nella pagina che pu\u00f2 essere collegato dal menu o da un pulsante. Usalo per creare navigazione interna alla pagina (scroll a sezione). Inserisci il widget dove vuoi l&#8217;ancora e usa <code>#nome-ancora<\/code> come URL nel link.<\/p>\n<h3>Sidebar<\/h3>\n<p>Inserisce una sidebar (barra laterale) registrata nel tema. Mostra tutti i widget WordPress classici (archivi, categorie, ricerca, articoli recenti, ecc.) all&#8217;interno di una pagina Elementor.<\/p>\n<h3>Read More (Leggi di Pi\u00f9)<\/h3>\n<p>Specifica il punto in cui il contenuto viene troncato nel feed del blog o nelle anteprime degli articoli. Il contenuto prima del widget Read More viene mostrato come riassunto, il resto \u00e8 accessibile solo cliccando sull&#8217;articolo.<\/p>\n<h2>Consigli per l&#8217;Uso dei Widget<\/h2>\n<ul>\n<li><strong>Meno \u00e8 pi\u00f9<\/strong>: non usare troppi widget diversi nella stessa pagina. La coerenza visiva \u00e8 importante<\/li>\n<li><strong>Stili globali<\/strong>: configura i <a href=\"\/blog\/elementor-tipografia-colori-stili-globali-design-system\/\">colori e font globali<\/a> per mantenere consistenza<\/li>\n<li><strong>Performance<\/strong>: ogni widget aggiunge peso alla pagina. Usa solo quelli necessari e controlla le <a href=\"\/blog\/elementor-performance-velocita-ottimizzazione\/\">prestazioni<\/a><\/li>\n<li><strong>Responsive<\/strong>: testa sempre ogni widget nella <a href=\"\/blog\/elementor-design-responsive-mobile-tablet\/\">modalit\u00e0 responsive<\/a> per assicurarti che sia bello su tutti i dispositivi<\/li>\n<\/ul>\n<h2>Conclusione<\/h2>\n<p>Elementor offre un arsenale impressionante di widget gi\u00e0 nella versione gratuita. Conoscerli tutti ti permette di creare pagine variegate, interessanti e funzionali. Man mano che acquisisci esperienza, scoprirai combinazioni creative per costruire layout sempre pi\u00f9 sofisticati.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/settings-general.png\" alt=\"Impostazioni generali Elementor\" width=\"1400\" height=\"900\" class=\"alignnone size-full\" \/><\/p>\n<p>Per scoprire i widget aggiuntivi della versione Pro (Form, Portfolio, Slides, Nav Menu e molti altri), leggi il nostro <a href=\"\/blog\/elementor-pro-vs-free-differenze-upgrade\/\">confronto Elementor Pro vs Free<\/a>. Se hai bisogno di supporto professionale, <a href=\"https:\/\/gtechgroup.it\/contatti\/\">contatta il team di G Tech Group<\/a> per una consulenza personalizzata.<\/p>\n<h2>Guide Correlate della Serie Elementor<\/h2>\n<p>Continua a esplorare Elementor con le nostre guide:<\/p>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/elementor-creare-prima-pagina-tutorial\/\">Creare la Prima Pagina<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/elementor-sezioni-container-layout-struttura-pagine\/\">Sezioni e Container<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/elementor-animazioni-effetti-motion-guida\/\">Animazioni e Motion<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/elementor-custom-css-codice-personalizzato-sviluppatori\/\">Custom CSS<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Introduzione: I Widget, i Mattoni di Ogni Pagina Elementor I widget sono gli elementi fondamentali che compongono ogni pagina costruita con Elementor. Ogni titolo, immagine,&hellip;<\/p>\n","protected":false},"author":2,"featured_media":166404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Tutti i Widget di Elementor: Guida Completa ed Esempi","_seopress_titles_desc":"Scopri tutti i widget gratuiti di Elementor: Heading, Image, Button, Accordion, Tabs e molti altri con esempi pratici e suggerimenti.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2532,2531,2521,2520,2530],"class_list":["post-166414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-componenti-elementor","tag-elementi-elementor","tag-guida-elementor","tag-page-builder","tag-widget-elementor"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166414"}],"version-history":[{"count":2,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166414\/revisions"}],"predecessor-version":[{"id":166483,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166414\/revisions\/166483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166404"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}