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, pulsante, blocco di testo o icona che vedi su un sito Elementor è un widget. Conoscerli tutti — le loro funzionalità, opzioni e casi d’uso — è essenziale per sfruttare al massimo il potenziale del page builder.
In questa guida completa analizzeremo ogni widget gratuito disponibile in Elementor, con spiegazioni dettagliate e suggerimenti pratici. Se non hai ancora familiarità con l’interfaccia dell’editor, ti consigliamo di leggere prima quella guida.
Widget Base (I Più Utilizzati)
Intestazione (Heading)
Il widget Intestazione è probabilmente il più utilizzato in assoluto. Serve per inserire titoli e sottotitoli nella pagina.
- Tag HTML: 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
- Dimensione: indipendente dal tag HTML — puoi avere un H2 grande come un H1 visivamente
- Allineamento: sinistra, centro, destra o giustificato
- Link: puoi rendere il titolo cliccabile collegandolo a un URL
- Stile: controllo completo su colore, tipografia (font family, dimensione, peso, trasformazione, interlinea, spaziatura lettere), text-shadow e blend mode
Suggerimento: 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.
Editor di Testo (Text Editor)
L’Editor di Testo è un editor WYSIWYG per inserire paragrafi e contenuti formattati. Supporta grassetto, corsivo, elenchi puntati e numerati, link, allineamento e formattazione avanzata.
- Puoi inserire codice HTML personalizzato passando alla modalità Testo
- Il widget supporta colonne di testo (una o più colonne CSS)
- Puoi aggiungere drop cap (capolettera) per un effetto editoriale elegante
Immagine (Image)
Il widget Immagine permette di inserire e personalizzare immagini:
- Dimensione: seleziona tra miniatura, media, grande o dimensione originale
- Allineamento: sinistra, centro, destra
- Link: puoi collegare l’immagine a un URL personalizzato o al file media (per lightbox)
- Didascalia: mostra la didascalia sotto l’immagine (presa dalla libreria media)
- Stile: larghezza, altezza, opacità, border-radius (per angoli arrotondati), bordi, ombre e filtri CSS (luminosità, contrasto, saturazione)
Suggerimento SEO: compila sempre il campo Alt Text nella libreria media per ogni immagine che utilizzi. Questo è fondamentale per l’accessibilità e il posizionamento SEO.
Video
Incorpora video da YouTube, Vimeo o file self-hosted. Opzioni principali: autoplay, mute, loop, controlli del player, immagine di copertina personalizzata, lightbox, orario di inizio e fine, e lazy loading per la performance.
Pulsante (Button)
Il widget Pulsante crea call-to-action personalizzabili:
- Tipo: Default, Info, Successo, Avviso, Pericolo (preset di colore)
- Testo: l’etichetta del pulsante
- Link: URL di destinazione, con opzione per aprire in nuova finestra
- Icona: puoi aggiungere un’icona prima o dopo il testo
- Stile: tipografia, colori sfondo e testo (normali e al hover), padding, bordi, border-radius, ombra e transizioni
Separatore (Divider)
Una linea orizzontale decorativa. Scegli lo stile (solido, tratteggiato, punteggiato, doppio), il colore, lo spessore, la larghezza e l’allineamento. Puoi anche aggiungere un elemento al centro (testo o icona) per creare separatori eleganti.
Spaziatore (Spacer)
Aggiunge spazio verticale vuoto tra gli elementi. Imposta l’altezza in pixel. Semplice ma indispensabile per controllare il ritmo verticale della pagina. Puoi impostare altezze diverse per desktop, tablet e mobile.
Google Maps
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 → Impostazioni → Integrazioni).
Widget Generali
Icona (Icon)
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.
Image Box
Un widget combinato che mostra immagine + titolo + descrizione in un unico blocco. L’immagine può essere posizionata sopra, a sinistra o a destra del testo. Ideale per presentare prodotti, servizi o team member.
Icon Box
Simile a Image Box ma con un’icona al posto dell’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).
Star Rating
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.
Progress Bar (Barra di Progresso)
Una barra orizzontale che mostra il progresso percentuale. Personalizza titolo, percentuale, colori della barra e dello sfondo, altezza e stile dell’etichetta. Ideale per mostrare competenze, completamento di progetti o statistiche.
Counter (Contatore)
Un numero animato che conta da un valore iniziale a un valore finale. Perfetto per mostrare statistiche impressionanti: “500+ Clienti Soddisfatti”, “15 Anni di Esperienza”, “1000+ Progetti Completati”. Puoi aggiungere un prefisso e un suffisso al numero.
Testimonial (Testimonianza)
Un widget dedicato alle testimonianze dei clienti. Include il testo della citazione, il nome dell’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.
Tabs (Schede)
Crea un’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’area di contenuto testuale. Le tabs possono essere orizzontali o verticali.
Accordion (Fisarmonica)
Sezioni espandibili/comprimibili. Fai clic sul titolo per mostrare o nascondere il contenuto. A differenza del widget Toggle, l’Accordion chiude le altre sezioni quando ne apri una. Perfetto per FAQ e domande frequenti.
Toggle
Simile all’Accordion ma con comportamento indipendente: ogni sezione si apre e chiude indipendentemente dalle altre. Tutte le sezioni possono essere aperte contemporaneamente.
Social Icons (Icone Social)
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.
Alert (Avviso)
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.
Widget per Contenuti Speciali
SoundCloud
Incorpora tracce audio da SoundCloud. Basta inserire l’URL del brano e il widget genera automaticamente il player embedded. Opzioni: autoplay, colore del player, mostrare artwork, commenti e informazioni.
Shortcode
Esegue qualsiasi shortcode WordPress all’interno di Elementor. Questo è 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.
HTML
Inserisce codice HTML, CSS e JavaScript personalizzato direttamente nella pagina. Potente ma da usare con cautela: codice errato può rompere il layout. Perfetto per embed di servizi esterni, pixel di tracciamento o elementi personalizzati.
Menu Anchor (Ancoraggio Menu)
Crea un punto di ancoraggio invisibile nella pagina che può essere collegato dal menu o da un pulsante. Usalo per creare navigazione interna alla pagina (scroll a sezione). Inserisci il widget dove vuoi l’ancora e usa #nome-ancora come URL nel link.
Sidebar
Inserisce una sidebar (barra laterale) registrata nel tema. Mostra tutti i widget WordPress classici (archivi, categorie, ricerca, articoli recenti, ecc.) all’interno di una pagina Elementor.
Read More (Leggi di Più)
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 è accessibile solo cliccando sull’articolo.
Consigli per l’Uso dei Widget
- Meno è più: non usare troppi widget diversi nella stessa pagina. La coerenza visiva è importante
- Stili globali: configura i colori e font globali per mantenere consistenza
- Performance: ogni widget aggiunge peso alla pagina. Usa solo quelli necessari e controlla le prestazioni
- Responsive: testa sempre ogni widget nella modalità responsive per assicurarti che sia bello su tutti i dispositivi
Conclusione
Elementor offre un arsenale impressionante di widget già 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ù sofisticati.
Per scoprire i widget aggiuntivi della versione Pro (Form, Portfolio, Slides, Nav Menu e molti altri), leggi il nostro confronto Elementor Pro vs Free. Se hai bisogno di supporto professionale, contatta il team di G Tech Group per una consulenza personalizzata.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: