Come modificare un sito web con Elementor

Modificare un sito web non richiede più di saper scrivere codice. Con Elementor, il page builder visuale più usato su WordPress, puoi cambiare testi, immagini, colori e layout direttamente sulla pagina, vedendo subito il risultato.

Negli ultimi anni però Elementor è cambiato parecchio. Con la versione 4 è arrivato un nuovo editor, chiamato Atomic, che lavora con classi e variabili come un vero design system. Si sono aggiunti l’intelligenza artificiale, i container al posto di sezioni e colonne, nuovi piani di abbonamento.

In questa guida vediamo come modificare un sito con Elementor oggi: da dove iniziare, come funziona l’editor, come gestire stili globali e versione mobile, quando serve la versione Pro e come usare template e theme builder. Se hai letto guide del 2022 o 2023, preparati: molte schermate non sono più quelle.

Cos’è Elementor e come funziona

Elementor è un plugin per WordPress che sostituisce l’editor standard con un editor visuale. Invece di compilare campi e vedere il risultato solo dopo, lavori direttamente sulla pagina: trascini gli elementi, clicchi su un testo per cambiarlo, regoli colori e spazi e vedi subito l’effetto.

Sotto il cofano Elementor salva la struttura della pagina e genera l’HTML e il CSS che il visitatore vede. Funziona con quasi tutti i temi WordPress, ma dà il meglio con un tema leggero pensato per lui. Lo usano milioni di siti, dai blog personali ai siti aziendali e agli e-commerce con WooCommerce.

Cosa è cambiato in Elementor: l’editor V4 (Atomic)

La novità più importante è l’editor V4, che Elementor chiama Atomic. Da aprile 2026 tutti i nuovi siti partono con la versione 4 attiva di default. Chi aveva già un sito costruito con Elementor non perde nulla: i vecchi widget continuano a funzionare e possono convivere con i nuovi elementi sulla stessa pagina.

Cosa cambia in pratica:

• Elementi atomici: nel pannello compare una nuova sezione di elementi (titolo, paragrafo, immagine, pulsante, form…) più leggeri e tutti con lo stesso sistema di stile.
• Classi: uno stile si definisce una volta come classe e si applica a più elementi. Cambi la classe, cambiano tutti.
• Variabili: colori, dimensioni e font diventano variabili riutilizzabili in tutto il sito.
• Componenti: blocchi riutilizzabili (una card, un box contatti) da modificare in un punto solo.
• Codice più pulito: meno markup e CSS generato, quindi pagine potenzialmente più veloci.

La migrazione non è automatica, perché i due editor hanno un’architettura diversa. Su un sito esistente il consiglio è di adottare gli elementi atomici gradualmente, partendo dalle pagine nuove. Le funzioni atomiche si possono anche disattivare da Elementor > Impostazioni > Editor.

Da dove iniziare: installare Elementor e aprire l’editor

Elementor è un plugin gratuito per WordPress. Per installarlo:

1. Accedi alla bacheca di WordPress.
2. Vai su Plugin > Aggiungi nuovo, cerca “Elementor” e clicca su Installa ora, poi su Attiva.
3. Al primo avvio una procedura guidata ti chiede di collegare un account Elementor (facoltativo) e ti propone tema e kit di partenza. Puoi saltarla e configurare tutto dopo.

Per modificare una pagina esistente vai su Pagine, passa con il mouse sul titolo e scegli Modifica con Elementor. In alternativa, dal sito con l’utente collegato, clicca Modifica con Elementor nella barra di amministrazione in alto. Per una pagina nuova: Pagine > Aggiungi nuova, poi il pulsante Modifica con Elementor.

Se la pagina è gestita dal tema e non da Elementor (per esempio l’archivio del blog), il pulsante non compare: per quelle parti serve il theme builder, che vediamo più avanti.

Come funziona l’editor di Elementor

L’editor ha tre zone: la barra superiore (logo Elementor con il menu, aggiunta elementi, struttura, anteprima responsive, pulsante Pubblica), il pannello laterale con elementi e impostazioni, e al centro l’anteprima live della pagina, dove modifichi direttamente.

Container: la nuova struttura della pagina

Sezioni e colonne sono state sostituite dai container, basati su Flexbox e CSS Grid. Un container può stare dentro un altro, disporre gli elementi in riga o in colonna e gestire spazi e allineamenti con pochi controlli. Clicca sul + al centro della pagina, scegli una struttura e inizia a riempirla.

Per orientarti nelle pagine lunghe usa la Struttura (Navigator) dalla barra superiore: mostra l’albero di container ed elementi, e puoi rinominarli, nasconderli o trascinarli.

Aggiungere e modificare elementi

Apri il pannello elementi con il + della barra superiore e trascina quello che ti serve nella pagina: titolo, paragrafo, immagine, pulsante, video, form, mappa e molto altro. Cliccando un elemento, il pannello laterale mostra tre schede:

• Generale / Contenuto: testo, immagine, link.
• Stile: colori, tipografia, bordi, sfondi. Sugli elementi atomici qui assegni anche le classi.
• Avanzate: margini, padding, posizione, animazioni, condizioni di visualizzazione.

Per cambiare un testo spesso basta cliccarci sopra nell’anteprima e scrivere.

Stili globali, classi e variabili

Prima di sistemare i singoli elementi, imposta gli stili globali: ti fanno risparmiare tempo e mantengono il sito coerente. Da menu Elementor > Impostazioni del sito gestisci colori e font globali, tipografia, pulsanti, immagini, campi dei form, logo, favicon, layout e breakpoint.

Con l’editor V4 arriva il pannello Sistema di design (icona a goccia nella barra superiore), che riunisce default, classi e variabili: definisci per esempio la variabile “colore primario” e la classe “pulsante principale”, e ogni modifica si propaga ovunque siano usate.

Versione mobile e tablet

Oltre la metà delle visite arriva da smartphone, quindi controlla sempre la versione mobile. Dalla barra superiore passi tra desktop, tablet e mobile: ogni valore impostato in una vista si applica a quel dispositivo e a quelli più piccoli, finché non lo sovrascrivi. Puoi anche nascondere un elemento su un dispositivo dalla scheda Avanzate.

Salvare, pubblicare e tornare indietro

Quando hai finito clicca Pubblica (o Aggiorna se la pagina era già online). Dalla freccia accanto puoi salvare come bozza o salvare la pagina come template. Se qualcosa va storto, la Cronologia conserva azioni e revisioni: puoi tornare a una versione precedente in un clic. Ctrl/Cmd + Z annulla l’ultima modifica.

Se dopo il salvataggio non vedi le modifiche sul sito, quasi sempre è colpa della cache: svuota quella del plugin di cache o dell’hosting e, se serve, rigenera i file CSS da Elementor > Strumenti.

Modificare il sito con l’intelligenza artificiale

L’AI è ormai parte dell’editor, su tre livelli:

• Elementor AI nell’editor: con un prompt generi testi, immagini, layout di container e codice CSS personalizzato, direttamente dove stai lavorando.
• Angie: è l’agente AI di Elementor, un plugin che lavora dentro WordPress. Gli descrivi in italiano cosa ti serve e lui crea pagine Elementor complete, widget personalizzati e snippet di codice, che poi rifinisci con i normali controlli dell’editor. Può anche creare articoli e pagine o aggiornare i plugin.
• Elementor MCP: permette di collegare il sito ad assistenti AI esterni come Claude o Codex, che possono creare e modificare pagine per te.

L’AI è utile per partire da una bozza o per scrivere il CSS che non ricordi a memoria. Il risultato va sempre controllato: testi generici, immagini fuori brand e codice da rivedere sono la norma, non l’eccezione. Le funzioni AI consumano crediti inclusi nel piano Elementor One.

Elementor gratis, Pro o One: quale scegliere

Il plugin gratuito basta per costruire pagine con container, griglia e i widget di base (titolo, testo, immagine, video, pulsante, icone, galleria, accordion, tab e altri). Quando servono header e footer personalizzati, form, popup o un e-commerce, serve un piano a pagamento.

Oggi Elementor propone due famiglie di abbonamenti annuali:

• Editor Pro (Essential, Advanced Solo, Advanced, Expert): l’editor con i widget Pro. Il prezzo di rinnovo è uguale a quello del primo anno.
• Elementor One (One, One Agency): tutto quello di Pro più AI, ottimizzazione immagini, accessibilità, banner cookie, invio email affidabile e gestione dei siti, con un pacchetto di crediti mensili condiviso tra questi servizi.

I prezzi partono da circa 60 dollari l’anno per Essential; One parte da circa 180 dollari l’anno, con rinnovo più alto. Controlla sempre la pagina dei piani Elementor prima di acquistare: prezzi e promozioni cambiano spesso. Tutti i piani annuali hanno 30 giorni soddisfatti o rimborsati.

Gli add-on per Elementor

In alternativa, o in aggiunta, alla versione Pro esistono plugin che aggiungono widget ed estensioni a Elementor, come Premium Addons for Elementor, Essential Addons o The Plus Addons. Hanno quasi tutti una versione gratuita e una Pro.

Prima di installarli verifica due cose: che siano compatibili con l’editor V4 e che ti servano davvero. Ogni add-on in più aggiunge codice, possibili conflitti e un aggiornamento da seguire.

Creare template con Elementor

Un template è una porzione di sito (un container, una pagina, un popup) salvata per riutilizzarla. Con la versione gratuita salvi pagine e container; dalla Libreria puoi anche importare kit e blocchi già pronti da personalizzare. Con i piani Pro i Cloud Template sono salvati sul tuo account Elementor e li ritrovi su tutti i siti collegati.

Per elementi che si ripetono identici su più pagine (un box contatti, una call to action) usa i componenti dell’editor V4 o un template inserito con il widget Template: modifichi in un punto solo e la modifica appare ovunque.

Il theme builder

Il theme builder, disponibile in tutti i piani Pro, ti fa disegnare con Elementor le parti strutturali del sito che normalmente dipendono dal tema:

• Header e footer: cambi il logo o il menu una volta sola e la modifica vale su tutte le pagine.
• Articolo singolo e archivio: definisci come appaiono i post del blog e la loro lista, con titolo, immagine in evidenza, autore, data e paginazione presi in automatico.
• Pagina 404 e risultati di ricerca: due pagine spesso dimenticate, che invece aiutano l’utente a non abbandonare il sito.
• Prodotti e pagine WooCommerce, se hai un negozio online.

Ogni template ha delle condizioni di visualizzazione: puoi avere un header per la home page e un altro per il resto del sito, o un layout diverso per una categoria del blog.

Il theme builder è incluso già nel piano Essential di Elementor Pro, quindi non serve il piano più caro per personalizzare header, footer e template del blog.

Popup builder

Con il popup builder (dal piano Advanced Solo in su) crei popup e barre per newsletter, promozioni o avvisi, decidendo dove e quando mostrarli: dopo alcuni secondi, allo scroll, quando l’utente sta per uscire.

Creare una landing page con Elementor

Una landing page è una pagina pensata per un solo obiettivo, per esempio raccogliere contatti da una campagna. Con Elementor la crei come una normale pagina:

1. Crea una nuova pagina e, nelle impostazioni della pagina (icona ingranaggio), scegli il layout Elementor Canvas: niente header, footer o menu che distraggono.
2. Parti da un template della Libreria o costruisci la pagina con i container: titolo con la promessa, benefici, prove (recensioni, loghi clienti), modulo di contatto.
3. Aggiungi un form: con la versione Pro usi il widget Form, che salva gli invii e si collega ai principali servizi di email marketing.
4. Controlla la versione mobile e la velocità di caricamento prima di mandarci traffico a pagamento.

Quale tema WordPress usare con Elementor

Se costruisci il sito con Elementor da zero, il tema consigliato è Hello Elementor, il tema ufficiale gratuito: è essenziale e leggerissimo, perché lascia a Elementor tutto il lavoro di design. Anche onidea.it usa Hello Elementor. Esiste anche Hello Biz, pensato per chi inizia, ma Elementor ha annunciato che passerà in sola manutenzione e consiglia di usare Hello.

Se invece preferisci partire da un tema già completo e modificare solo i contenuti, scegli un tema dichiarato compatibile con Elementor. Trovi una vasta scelta su ThemeForest e alcuni suggerimenti nel nostro articolo sui temi WordPress professionali e multiuso.

Domande frequenti su Elementor

Conclusioni

Modificare un sito con Elementor resta alla portata di chiunque: cambiare un testo, un’immagine o un colore richiede pochi minuti. Con l’editor V4, classi e variabili, Elementor è diventato anche uno strumento più serio per chi costruisce siti professionali, e l’AI accelera le parti ripetitive.

Se vuoi provarlo, inizia dalla versione gratuita e passa a Elementor Pro quando ti servono theme builder, form e popup: tutti i piani annuali hanno 30 giorni soddisfatti o rimborsati.

Quello che Elementor non fa da solo è decidere struttura, contenuti, prestazioni e SEO del sito. Se vuoi un sito WordPress progettato bene fin dall’inizio, o hai bisogno di una mano a sistemare quello che hai, scopri come lavoriamo sui siti WordPress. E se stai valutando un preventivo, leggi la nostra guida su come leggere un preventivo per sito web.