Cos’è Elementor e perché usarlo?
Elementor è come IKEA per i siti web. Invece di costruire ogni mobile da zero con legno e chiodi (codice HTML/CSS), scegli componenti già pronti, li trascini dove vuoi e li personalizzi con pochi clic. Nessuna competenza tecnica richiesta.
Elementor è un Page Builder visuale per WordPress: sostituisce l’editor standard con un’interfaccia drag & drop. Quello che vedi mentre costruisci è esattamente come apparirà al visitatore — si chiama WYSIWYG (What You See Is What You Get).
16+ milioni di siti
Il Page Builder più usato al mondo su WordPress. Comunità enorme, migliaia di risorse gratuite.
Zero codice
Siti professionali senza scrivere una riga di HTML, CSS o JavaScript. Perfetto per principianti.
90+ widget Free
Testi, immagini, pulsanti, form, gallerie, video — tutto disponibile nel piano gratuito.
Pro ~59€/anno
Theme Builder, Popup, WooCommerce Builder avanzato e 60+ widget esclusivi.
Free: costruisci le singole pagine. Non puoi modificare header, footer o pagine WooCommerce.
Pro: puoi costruire ogni parte del sito — header, footer, pagina prodotto WooCommerce, archivio, 404.
Installazione passo dopo passo
Dashboard WordPress → Plugin → Aggiungi nuovo
Accedi al tuo sito WordPress. Dal menu laterale scegli Plugin → Aggiungi nuovo plugin.
Cerca “Elementor Website Builder”
Scrivi Elementor nella barra di ricerca. Clicca Installa ora, poi Attiva.
Wizard di benvenuto (opzionale)
Elementor mostra una schermata di configurazione. Puoi completarla o saltarla — vai direttamente all’editor.
Crea una pagina e apri Elementor
Vai in Pagine → Aggiungi nuova. Nell’editor WordPress clicca il pulsante blu “Modifica con Elementor”.
Imposta “Elementor Full Width” come template
Nella colonna destra cerca Attributi pagina → Template e seleziona Elementor Full Width. Rimuove header e sidebar del tema.
Per Elementor Pro: acquisto e installazione licenza
Su elementor.com acquista un piano (~59€/anno). Scarica il file .zip, caricalo via Plugin → Aggiungi nuovo → Carica plugin. Attiva la licenza nelle impostazioni Elementor.
PHP ≥ 8.1 · WordPress ≥ 6.4 · MySQL ≥ 8.0 · Memory Limit ≥ 256 MB · HTTPS attivo. Provider come SiteGround, Hostinger Business e Netsons soddisfano tutti questi requisiti.
L’interfaccia dell’editor
Quando apri Elementor trovi un’interfaccia divisa in due parti principali. Impariamo a riconoscerla.
Mockup semplificato editor Elementor. L’elemento selezionato (bordo rosso) mostra i pannelli opzioni a sinistra.
Pannello sx — Widget
Lista di tutti i widget. Cerca per nome o sfoglia per categoria. Trascina sul canvas per aggiungere.
Canvas centrale
La tua pagina in costruzione. Clicca qualsiasi elemento per selezionarlo e modificarlo in tempo reale.
Pannello dx — Opzioni
Quando selezioni un widget: 3 tab Contenuto, Stile e Avanzate con tutte le impostazioni.
Barra inferiore
Toggle desktop/tablet/mobile, cronologia modifiche, anteprima e pulsante Pubblica.
La struttura: Sezione → Colonna → Widget
Blocco principale. Ha background, padding e impostazioni responsive. Contiene le colonne.
I widget base e come modificarli
Un widget è un singolo componente costruttivo della pagina — come un mattone LEGO. Trascini il widget sul canvas, poi usi i 3 pannelli (Contenuto / Stile / Avanzate) per personalizzarlo. Ogni card qui sotto mostra un’anteprima visiva di come appare il widget nella pagina.
✓ WooCommerce Builder
✓ Popup Builder
I 3 pannelli: Contenuto · Stile · Avanzate
Quando clicchi un widget il pannello sinistro mostra tre tab. Capire cosa fa ognuno è la chiave per padroneggiare Elementor.
1. Contenuto
Il cosa: il testo, l’immagine, il link, le voci. Ciò che il widget mostra.
2. Stile
Il come appare: colori, font, dimensioni, bordi, ombre, spaziature interne.
3. Avanzate
Il comportamento: margini, padding, classi CSS, animazioni, visibilità responsive.
Widget selezionato: PULSANTE
1. Clicca il widget nel canvas → bordo blu di selezione.
2. Il pannello sx mostra i 3 tab. Inizia sempre da Contenuto.
3. Passa a Stile per colori/font. Poi Avanzate per spaziature e animazioni.
4. Le modifiche si vedono in tempo reale nel canvas.
5. Usa il Navigator (icona ≡ in basso) per selezionare elementi annidati o sovrapposti.
6. Clicca Pubblica / Aggiorna in basso a sx per salvare. Non uscire senza salvare!
Sezioni, Colonne e Container Flex
Prima di trascinare widget, devi capire come organizzare la struttura della pagina. Elementor 3.x usa il sistema Container Flex, più flessibile del vecchio sistema sezione/colonna.
Il Container è il blocco principale della pagina. Ogni Container ha:
- Background: colore, immagine, video, gradiente, mesh gradient
- Padding: spazio interno (sopra/sotto/sinistra/destra)
- Larghezza: boxed (larghezza massima centrata) o full width (larghezza intera)
- Direction (Flex): orizzontale (widget affiancati) o verticale (impilati)
- Min-height: altezza minima (100vh per sezione a schermo intero)
Nelle impostazioni trovi anche la Shape Divider: onde, triangoli, zigzag che separano visivamente le sezioni.
Layout più usati:
- 50/50 — due colonne uguali: testo a sx, immagine a dx (hero classico)
- 66/33 — colonna ampia + sidebar: descrizione + info prodotto
- 33/33/33 — tre colonne uguali: 3 icon box, 3 prodotti, 3 vantaggi
- 25/25/25/25 — quattro colonne: badge spedizione/pagamento/reso/supporto
Gap: la spaziatura tra le colonne si imposta in Container → Layout → Gap (px o rem).
Colore semplice: scegli un colore dal color picker o inserisci il codice HEX. Usa sempre i Global Colors per coerenza.
Gradiente: due colori che sfumano, lineari o radiali. Usato per header di impatto.
Immagine di sfondo: imposta Position (Center Center), Size (Cover), Attachment (Fixed per parallax base).
Video background: video YouTube/Vimeo come sfondo della sezione con overlay colorato semitrasparente per la leggibilità del testo.
Overlay: layer colorato semitrasparente sopra il background. Essenziale con testo bianco su immagine/video.
In Elementor → Impostazioni → Kit Globale imposti colori globali (primario, secondario, accento, testo, sfondo) e tipografia globale (font per titoli, testi, pulsanti). È la prima cosa da configurare prima di costruire qualsiasi pagina.
Free vs Pro — Tabella completa
“Ho davvero bisogno di Pro?” Dipende dal tipo di sito. Questa tabella ti aiuta a decidere.
| Funzionalità | FREE | PRO (~59€/anno) |
|---|---|---|
| Widget base (testi, immagini, video, galleria, form, accordion, rating) | ✓ Sì | ✓ Sì |
| Editor drag & drop visuale | ✓ Sì | ✓ Sì |
| Design responsive desktop/tablet/mobile | ✓ Sì | ✓ Sì |
| Global Colors & Typography Kit | ✓ Sì | ✓ Sì |
| Template pagine pre-costruite | Limitati | ✓ 300+ premium |
| Theme Builder — header, footer, 404 | ✗ No | ✓ Sì |
| WooCommerce Builder — pagina prodotto, shop, checkout | ✗ No | ✓ Sì |
| Popup Builder | ✗ No | ✓ Sì |
| Form avanzato (multi-step, upload, CRM, Zapier) | Form base | ✓ Completo |
| Dynamic Content (campi personalizzati nei widget) | ✗ No | ✓ Sì |
| Countdown, Flip Box, Slides, Price Table | ✗ No | ✓ Sì |
| Blog & Loop Builder (archivio post, CPT) | ✗ No | ✓ Sì |
| Supporto premium 24/7 | Comunità | ✓ Sì |
| Numero di siti | Illimitato | 1 / 3 / 25 / illimitato (piani) |
Se stai costruendo un negozio WooCommerce e vuoi personalizzare la pagina prodotto, la pagina shop, il carrello o la cassa con l’editor visuale — hai bisogno di Pro. Senza Pro puoi costruire le pagine normali del sito ma non le pagine WooCommerce generate automaticamente.
Template Library e Theme Builder
Raccolta di layout professionali. Importi un template in 1 clic e lo personalizzi.
Come accedere: clicca l’icona cartella nella barra in basso, oppure il “+” su una sezione vuota.
Tipi: Page templates (pagine intere) e Block templates (sezioni singole). Con Pro: 300+ template premium.
Come usare: seleziona il template, clicca “Inserisci”. Tutto il contenuto appare nel canvas pronto per essere modificato.
Elementi costruibili:
- Header: logo, menu, icone carrello/ricerca/account
- Footer: colonne con info, link, social, newsletter
- Single Post: template per ogni articolo del blog
- Archive: pagine archivio categoria/tag/autore
- Single Product: pagina prodotto WooCommerce
- 404: pagina errore personalizzata
Come funziona: Template → Theme Builder → Crea nuovo → tipo → costruisci → Condizioni di Visualizzazione
Dopo aver costruito un header o footer devi dire a Elementor dove deve apparire:
- Tutto il sito
- Solo homepage
- Categorie WooCommerce specifiche
- Tutti i prodotti, tutti i post, una pagina specifica...
Puoi avere più header/footer e scegliere quale usare dove. Esempio: header con promo banner solo durante un saldo.
WooCommerce Builder con Elementor Pro
Senza Pro, le pagine WooCommerce sono generate automaticamente dal tema. Con Pro puoi ricostruirle completamente con l’editor visuale, posizionando ogni elemento dove vuoi.
La pagina più importante del tuo negozio. Layout completamente personalizzato.
Colonna Sx (55%)
📷 Product Gallery
📽 Short Description
Colonna Dx (45%)
🏷 Title H1 ⭐ Rating 💺 Price
🔀 Variations 🛒 Add to Cart
❤ Wishlist 📦 Shipping
📄 Tabs: Descrizione / Specifiche / Recensioni | 📚 Prodotti correlati
Personalizza: colonne (2,3,4), card prodotto, filtri per categoria e ordinamento. Con ShopEngine/ShopLentor puoi aggiungere filtri AJAX avanzati e Quick View.
Cart Builder: ridisegna la tabella carrello, il riepilogo totale e il pulsante checkout. Aggiungi sezioni upsell vicino al totale.
Checkout Builder: semplifica il form di cassa, riorganizzalo in colonne, aggiungi badge di sicurezza.
ElementsKit — Più widget, più possibilità
ElementsKit
Addon Elementor con 85+ widget extra, Header Builder avanzato e Mega Menu
Si installa insieme a Elementor e aggiunge widget extra, un Header Builder avanzato e un Mega Menu. Disponibile in versione Free e Pro.
Nav Menu FREE
Menu di navigazione con stili avanzati. Elementor Free non ha un widget menu nativo.
Team Member FREE
Card membro team con foto, nome, ruolo, social links. Per la pagina “Chi siamo”.
Price Table FREE
Tabella prezzi con badge “Consigliato”, lista feature e pulsante CTA.
Fancy Text FREE
Testo animato che cambia parole (typewriter). Per headline dinamiche: “Vendi / Cresci / Domina”.
Google Map FREE
Mappa Google con marker personalizzato, zoom e stile mappa (standard, satellite, scuro).
Business Card FREE
Biglietto da visita digitale con foto, nome, qualifica, contatti e social.
Instagram Feed PRO
Griglia dinamica del tuo feed Instagram. Si aggiorna automaticamente.
3D Carousel PRO
Carosello di card con effetto 3D prospettico. Impatto visivo forte per portfolio o prodotti.
Image Hover Effects PRO
10+ effetti hover: zoom, rotate, slide, overlay con testo. Portfolio interattivo in un clic.
Parallax & Motion PRO
Effetto parallax configurabile sugli sfondi e animazioni scroll-driven sugli elementi.
Disponibile anche nel Free, permette comportamenti avanzati senza plugin aggiuntivi.
Sticky Header
L’header rimane visibile mentre l’utente scrolla. Può cambiare stile dopo un certo scroll.
Mega Menu
Menu a discesa con colonne, immagini, icone e widget al suo interno. Standard per negozi con molte categorie.
Header Trasparente
Header trasparente sopra un’immagine hero, diventa opaco dopo lo scroll.
ShopEngine — WooCommerce Builder per Elementor
ShopEngine
WooCommerce Page Builder — costruisci l’intero negozio visualmente con Elementor
ShopEngine è come un architetto specializzato in negozi. Mentre Elementor Pro offre widget WooCommerce generici, ShopEngine è costruito appositamente per e-commerce: ogni widget serve per le pagine del negozio.
Tutti questi widget si usano nell’editor Elementor per costruire le pagine WooCommerce.
Product Title FREE
Nome del prodotto con tipografia personalizzata nel template pagina prodotto.
Product Price FREE
Prezzo del prodotto personalizzabile, incluso prezzo barrato in saldo e risparmio %.
Product Images FREE
Galleria immagini prodotto con miniature, zoom al hover e lightbox fullscreen.
Add to Wishlist PRO
Pulsante aggiungi ai preferiti. I clienti salvano i prodotti da acquistare in futuro.
Product Rating FREE
Stelle di valutazione con numero recensioni. Aumenta la fiducia dei nuovi acquirenti.
Shipping Estimator PRO
Calcolatore spese di spedizione nella pagina prodotto, prima del checkout.
Crea template personalizzati per la pagina prodotto da applicare all’intero catalogo.
COLONNA SX
📷 Product Images
📽 Short Description
COLONNA DX
🏷 Title ⭐ Rating 💺 Price
🔀 Variations 🛒 Add to Cart
❤ Wishlist 📦 Shipping
Shop Archive: griglia prodotti principale. Scegli colonne, card prodotto, filtri di ordinamento e filtri AJAX (con ShopEngine Pro).
Cart Template: ridisegna carrello, riepilogo totale e pulsante checkout completamente personalizzati.
Flash Sale PRO
Banner saldo flash con countdown integrato. Il timer si azzera automaticamente alla scadenza.
Partial Payment PRO
Paga un acconto ora, il saldo dopo. Aumenta le conversioni per prodotti costosi.
Badges & Labels FREE
Etichette personalizzate: “NUOVO”, “BESTSELLER”, “SALDO”, “ULTIMI PEZZI”.
ShopLentor — Il tutto-in-uno per WooCommerce
ShopLentor
Ex WooLentor — 100+ widget WooCommerce per Elementor
ShopLentor offre più widget di ShopEngine con funzionalità specifiche per e-commerce avanzato e maggiore attenzione al carrello e al checkout.
Horizontal Filter FREE
Filtri prodotti orizzontali sopra la griglia: categoria, prezzo, attributo con AJAX senza ricaricare la pagina.
Cart Table FREE
Tabella carrello completamente personalizzabile: immagine, nome, prezzo, quantità, rimuovi — stile da zero.
Quick View Modal FREE
Popup di anteprima prodotto senza abbandonare la pagina shop. Immagine, prezzo, varianti, add to cart.
Checkout Fields Editor PRO
Aggiungi, rimuovi, riordina e personalizza i campi del checkout WooCommerce senza toccare il codice.
Sales Notification PRO
Pop-up angolare: “Luca da Napoli ha acquistato questo prodotto 2 ore fa”. Prova sociale e urgenza.
Product Q&A PRO
Sezione Domande & Risposte nella pagina prodotto. I clienti chiedono, il venditore risponde pubblicamente.
Badge Manager automatico
Badge assegnati automaticamente: prodotto in saldo, recente, più venduto, stock limitato.
Frequently Bought Together
“Spesso acquistati insieme”: sezione automatica con suggerimenti di acquisto combinato.
Currency Switcher PRO
Cambio valuta automatico per negozi internazionali. Il prezzo si aggiorna in base alla localizzazione.
Entrambi costruiscono WooCommerce con Elementor ma hanno punti di forza diversi.
| Aspetto | ShopEngine | ShopLentor |
|---|---|---|
| Widget totali | 35+ | 100+ |
| Template pre-costruiti | Pochi | 20+ |
| Filtri AJAX Free | ✗ No (Pro) | ✓ Sì |
| Quick View Free | ✗ No (Pro) | ✓ Sì |
| Sales Notification | ✗ No | ✓ Pro |
| Facilità d’uso | Alta | Media-Alta |
| Prezzo Pro | ~69 €/anno | ~59 €/anno |
| Ideale per | Negozi piccoli-medi | Negozi medi-grandi |
Se stai iniziando: prova entrambi gratuitamente. ShopEngine è più semplice per chi parte da zero; ShopLentor offre più opzioni per negozi strutturati. Non installarli entrambi nello stesso sito di produzione.
Confronto tra tutti i plugin addon Elementor
Panoramica completa per scegliere la combinazione giusta per il tuo progetto.
| Funzionalità | ElementsKit | ShopEngine | ShopLentor |
|---|---|---|---|
| Focus principale | UI generale + header | WooCommerce builder | WooCommerce builder |
| Widget generici extra | ✓ 85+ widget | ✗ Solo WC | Pochi generici |
| Widget WooCommerce | Pochi base | ✓ 35+ dedicati | ✓ 100+ dedicati |
| Header Builder avanzato | ✓ Incluso | ✗ No | ✗ No |
| Mega Menu | ✓ Free | ✗ No | ✗ No |
| Quick View Free | ✗ No | ✗ No (Pro) | ✓ Sì |
| Filtri AJAX Free | ✗ No | ✗ No | ✓ Sì |
| Pagina prodotto builder | ✗ No | ✓ Sì | ✓ Sì |
| Checkout personalizzato | ✗ No | Pro | Pro |
| Performance (impatto) | Medio | Basso-Medio | Medio |
| Prezzo Pro | ~59 €/anno | ~69 €/anno | ~59 €/anno |
Raccomandazioni per tipo di progetto
Sito vitrina / Blog
Elementor Free + ElementsKit Free. Hai widget extra, header avanzato e mega menu senza spendere nulla.
Negozio piccolo (avvio)
Elementor Pro + ShopEngine Free. Costruisci la pagina prodotto visualmente a costo contenuto.
Negozio medio-grande
Elementor Pro + ShopLentor Pro. Filtri AJAX Free, 100+ widget, sales notification, checkout avanzato.
Progetto completo avanzato
Elementor Pro + ElementsKit Pro + ShopLentor Pro. Il kit completo — attenzione alle performance!
Esempi di layout da costruire
Come costruirla:
- Aggiungi una Sezione a 2 colonne (60% / 40%)
- Colonna sx: Heading H1 → Text Editor → 2 Button affiancati
- Colonna dx: Image (png con sfondo trasparente)
- Sezione: Background scuro (#1A1A1A), padding 80px top/bottom
- Su mobile: nascondi l’immagine dx (Avanzate → Responsive)
Perché sceglierci
Spedizione gratuita
Sopra i 50€
Pagamento sicuro
SSL certificato
Reso 30 giorni
Senza domande
Supporto 24/7
Chat e email
Come: Sezione 1 colonna (Heading H2 centrato) → Sezione 4 colonne uguali → In ogni colonna: widget Icon Box. Tutto FREE. Su mobile diventa automaticamente 2x2.
Prodotti in evidenza
Con ShopEngine: usa il widget Product Grid per la griglia completa, oppure costruisci un Loop template personalizzato con Elementor Pro usando Product Title, Product Price, Product Image, Add to Cart Button come blocchi separati.
Cosa dicono i nostri clienti
★★★★★
“Prodotto eccezionale, consegna velocissima!”
— Marco R., Napoli
★★★★★
“Qualità superiore alle aspettative.”
— Giulia T., Milano
★★★★★
“Acquistato tre volte, sempre soddisfatta!”
— Sara B., Roma
Come: Sezione sfondo scuro → Heading H2 centrato → Sezione 3 colonne → In ogni colonna: widget Testimonial (stelle + testo + nome). Tutto FREE. Con ElementsKit Pro usa il Testimonial Carousel per uno slider animato.
Responsive design, SEO e ottimizzazione
Elementor ha tre modalità nella barra inferiore: Desktop, Tablet e Mobile. Ognuna ti permette di vedere come appare la pagina su quel dispositivo e di modificare impostazioni specifiche per quel breakpoint.
Breakpoint predefiniti: Desktop >1024px, Tablet 768–1024px, Mobile <768px. Con Elementor Pro puoi aggiungere breakpoint personalizzati (1440px per schermi grandi, 480px per smartphone piccoli).
Override per dispositivo: quasi ogni impostazione di stile (dimensione font, padding, numero di colonne) può essere sovrascritta per tablet e mobile senza toccare il desktop. Clicca l’icona del dispositivo accanto al campo per impostare un valore specifico per quel breakpoint.
Nascondi elementi: nel tab Avanzate di ogni widget trovi Responsive → Visibilità. Puoi nascondere un elemento su mobile senza eliminarlo (es. immagine decorativa che su mobile non serve).
- H1 unico per pagina: solo il titolo principale va impostato come H1. Tutti gli altri titoli: H2, H3, H4.
- Alt text obbligatorio: ogni widget Image deve avere il campo Alt Text compilato con una descrizione dell’immagine.
- Meta title e description: usa un plugin SEO (Yoast o RankMath) — Elementor da solo non li gestisce.
- Velocità pagina: non abilitare widget che non usi — ogni addon carica CSS/JS anche quando non è presente nella pagina. In Elementor → Impostazioni → Integrazioni disabilita i moduli non utilizzati.
- Lazy loading immagini: abilitato di default in Elementor 3.x. Non disabilitarlo.
- Schema markup prodotto: WooCommerce genera già lo schema JSON-LD per i prodotti. Non duplicare manualmente.
Elementor può rallentare il sito se usato male. Azioni concrete:
- Disabilita widget inutilizzati: Elementor → Impostazioni → Elementi. Disattiva tutto ciò che non usi.
- Ottimizza le immagini: usa ShortPixel, Imagify o Smush per comprimere automaticamente al caricamento. Target: ogni immagine sotto 200KB.
- Usa un plugin di cache: W3 Total Cache, WP Rocket o LiteSpeed Cache (incluso gratis su hosting LiteSpeed).
- Elimina CSS inutilizzato: WP Rocket e LiteSpeed Cache rimuovono CSS non usati per pagina.
- Usa font globali: configura il font nel Global Kit invece di scegliere font diversi per ogni widget. Risparmia richieste HTTP.
- Non sovraccaricare con plugin addon: ogni addon (ElementsKit, ShopEngine, ShopLentor) aggiunge peso. Installa solo quello che usi davvero.
Errori comuni, Glossario e Checklist
Errori critici da evitare
Troppi plugin addon Elementor installati insieme
ElementsKit + ShopEngine + ShopLentor insieme causano conflitti JavaScript, CSS duplicato e sito lento. Ogni addon aggiunge peso, anche nelle pagine dove non viene usato.
Aggiornare Elementor senza backup preventivo
Un aggiornamento può rompere layout esistenti, soprattutto con CSS personalizzato o combinazioni di plugin. Il danno può essere irreversibile senza una copia di sicurezza.
Impostare H1 su ogni titolo della pagina
Se ogni widget Heading usa il tag H1, i motori di ricerca non riescono a identificare il tema principale della pagina. Grave penalizzazione SEO.
Avvertimenti importanti
Caricare immagini non ottimizzate
Immagini da 3–10 MB rallentano enormemente il sito, penalizzano il PageSpeed e peggiorano l’esperienza mobile. Un sito lento perde clienti.
Non testare su mobile dopo ogni modifica
Desktop e mobile possono avere layout radicalmente diversi. Un problema di visualizzazione mobile non risolto può far abbandonare il sito alla maggioranza degli utenti.
Non configurare il Global Kit prima di costruire
Scegliere colori e font widget per widget crea incoerenza visiva in tutto il sito e rende impossibile aggiornare il brand in seguito senza modificare ogni elemento singolarmente.