Introduzione all’Editor di Elementor
L’editor visuale di Elementor è il cuore del page builder. È qui che la magia accade: trascini elementi, li posizioni, personalizzi colori, tipografia e spaziature, e vedi il risultato in tempo reale. Comprendere a fondo l’interfaccia dell’editor è il primo passo per diventare produttivi con Elementor.
In questa guida analizzeremo ogni componente dell’editor, dalle barre degli strumenti ai pannelli laterali, fino alle scorciatoie da tastiera che velocizzano il flusso di lavoro. Che tu sia un principiante assoluto o un utente intermedio, troverai informazioni preziose per migliorare la tua padronanza dello strumento.
Come Accedere all’Editor di Elementor
Per aprire l’editor di Elementor esistono diversi modi:
- Dalla dashboard: vai su Pagine → Tutte le pagine, passa il mouse sopra la pagina desiderata e fai clic su Modifica con Elementor
- Dall’editor classico: apri la pagina nell’editor di WordPress e fai clic sul pulsante blu Modifica con Elementor
- Dal frontend: quando sei loggato e visualizzi una pagina, nella barra di amministrazione in alto apparirà il link Modifica con Elementor
- Nuova pagina: da Pagine → Aggiungi nuova pagina, inserisci il titolo e fai clic su Modifica con Elementor
La Struttura dell’Editor: Panoramica Generale
L’editor di Elementor è diviso in due aree principali:
Il Pannello Laterale (a sinistra)
Il pannello laterale è la tua cassetta degli attrezzi. Contiene tutti i widget disponibili, le impostazioni dell’elemento selezionato e le opzioni globali della pagina. Il pannello è suddiviso in diverse sezioni:
- Barra di ricerca — in alto, per trovare rapidamente qualsiasi widget digitandone il nome
- Categorie widget — i widget sono organizzati in categorie: Base, Pro, Generale, WordPress, WooCommerce
- Tab di personalizzazione — quando selezioni un elemento, il pannello mostra tre schede: Contenuto, Stile e Avanzate
- Footer del pannello — con le icone per le impostazioni della pagina, il navigatore, la cronologia e altro
Il Canvas (area centrale)
Il canvas è l’area di lavoro dove costruisci la pagina. Qui puoi:
- Trascinare widget dal pannello al canvas
- Ridimensionare colonne trascinando i bordi
- Fare clic su qualsiasi elemento per selezionarlo e modificarlo
- Visualizzare l’anteprima in tempo reale di ogni modifica
I Widget: I Mattoni della Costruzione
I widget sono gli elementi che compongono la tua pagina. Nella versione gratuita di Elementor hai accesso a oltre 40 widget, suddivisi in categorie:
Widget Base
Questi sono i widget più utilizzati e fondamentali:
- Intestazione (Heading) — per i titoli H1-H6, con controllo completo su font, dimensione, colore e allineamento
- Editor di Testo — un editor WYSIWYG per paragrafi e testo formattato
- Immagine — per inserire e personalizzare immagini con dimensioni, bordi, ombre e link
- Video — per incorporare video da YouTube, Vimeo o file self-hosted
- Pulsante — call-to-action personalizzabile con icone, colori e effetti hover
- Separatore — linee orizzontali decorative per dividere le sezioni
- Spaziatore — per aggiungere spazio verticale tra gli elementi
Widget Generali
Widget per contenuti più elaborati: Image Box, Icon Box, Star Rating, Progress Bar, Counter, Testimonial, Tabs, Accordion, Toggle, Alert, Social Icons e molti altri.
La Struttura: Sezioni, Colonne e Widget
La gerarchia strutturale di Elementor segue questo schema:
- Sezione — il contenitore più esterno, come una riga della pagina. Può essere a larghezza piena (full width) o contenuta (boxed)
- Colonna — all’interno di ogni sezione ci sono una o più colonne. Puoi avere da 1 a 10 colonne per sezione
- Widget — gli elementi funzionali che inserisci nelle colonne: testo, immagini, pulsanti, ecc.
Quando fai clic destro su un elemento, il menu contestuale ti permette di copiare, incollare, duplicare, eliminare e modificare la struttura rapidamente. Puoi anche usare le maniglie blu (per le sezioni) e grigie (per le colonne) per spostare o ridimensionare gli elementi.
Le Tre Schede di Personalizzazione
Quando selezioni qualsiasi elemento (sezione, colonna o widget), il pannello laterale mostra tre schede:
Tab Contenuto
Qui modifichi il contenuto dell’elemento: il testo di un heading, l’URL di un’immagine, l’etichetta di un pulsante, le voci di un accordion. Ogni widget ha opzioni di contenuto specifiche.
Tab Stile
In questa scheda controlli l’aspetto visivo: colori, tipografia (font, dimensione, peso, interlinea), bordi, ombre, sfondi (colore, gradiente, immagine), spaziature e border-radius per angoli arrotondati.
Tab Avanzate
Le opzioni avanzate includono: Margine e Padding personalizzati, effetti di movimento (animazioni di entrata), Background overlay, Bordo e ombra, opzioni di Responsive (nascondi su desktop/tablet/mobile), Attributi personalizzati e CSS personalizzato (nella versione Pro).
Il Navigatore: Gestire la Struttura
Il Navigatore è uno degli strumenti più utili dell’editor, soprattutto per pagine complesse. Puoi aprirlo facendo clic sull’icona a forma di albero nel footer del pannello, oppure con la scorciatoia Ctrl+I (Cmd+I su Mac).
Il Navigatore mostra la struttura gerarchica della pagina in formato ad albero: sezioni, colonne e widget annidati. Da qui puoi:
- Rinominare gli elementi — facendo doppio clic sul nome per identificarli facilmente
- Riordinare — trascinando gli elementi per cambiare l’ordine
- Selezionare — cliccando su un elemento per evidenziarlo nel canvas
- Espandere e comprimere — per navigare facilmente in pagine con molti livelli
La Barra degli Strumenti in Basso
Nella parte inferiore del pannello laterale trovi una barra con icone importanti:
- Impostazioni pagina (icona ingranaggio) — titolo della pagina, stato, layout della pagina, immagine in evidenza
- Navigatore (icona albero) — apre il pannello navigatore
- Cronologia (icona orologio) — visualizza tutte le revisioni e le azioni eseguite, con la possibilità di tornare a qualsiasi stato precedente
- Modalità responsive (icona dispositivi) — passa tra le viste Desktop, Tablet e Mobile
- Anteprima (icona occhio) — nasconde il pannello per vedere la pagina a schermo intero
Scorciatoie da Tastiera
Elementor supporta numerose scorciatoie da tastiera per velocizzare il lavoro. Premi Ctrl+? (o Cmd+? su Mac) per visualizzare l’elenco completo. Le più importanti:
- Ctrl+S — Salva la pagina
- Ctrl+Z — Annulla l’ultima azione
- Ctrl+Shift+Z — Ripristina l’azione annullata
- Ctrl+C / Ctrl+V — Copia e incolla elementi
- Ctrl+D — Duplica l’elemento selezionato
- Ctrl+I — Apri/chiudi il Navigatore
- Ctrl+Shift+M — Passa alla modalità responsive
- Ctrl+Shift+E — Passa alla modalità anteprima
- Canc — Elimina l’elemento selezionato
Il Menu Contestuale (Clic Destro)
Facendo clic destro su qualsiasi elemento nel canvas, apparirà un menu contestuale con opzioni potenti:
- Modifica — apre le impostazioni nel pannello laterale
- Duplica — crea una copia dell’elemento subito sotto
- Copia / Incolla — funziona anche tra pagine diverse
- Copia stile / Incolla stile — copia solo la formattazione, non il contenuto
- Salva come template — salva l’elemento nella libreria per riutilizzarlo
- Resetta stile — rimuove tutte le personalizzazioni di stile
- Elimina — rimuove l’elemento dalla pagina
Modalità Responsive
Elementor offre una modalità responsive integrata che ti permette di visualizzare e modificare la pagina per diversi dispositivi. Fai clic sull’icona dei dispositivi nella barra inferiore per passare tra Desktop, Tablet e Mobile.
In modalità responsive, puoi:
- Modificare dimensioni, spaziature e allineamenti specifici per ogni dispositivo
- Nascondere elementi su dispositivi specifici
- Cambiare l’ordine delle colonne su mobile
- Impostare breakpoint personalizzati
I valori personalizzati per dispositivo sono indicati da un’icona del dispositivo accanto all’opzione modificata. Per approfondire questo argomento, leggi la nostra guida al design responsive con Elementor.
Salvare e Pubblicare
Per salvare il tuo lavoro, usa il pulsante verde Pubblica (o Aggiorna se la pagina è già pubblicata) in basso nel pannello. La freccia accanto al pulsante offre opzioni aggiuntive:
- Salva bozza — salva senza pubblicare
- Salva come template — salva l’intera pagina come modello riutilizzabile
Ricorda di salvare frequentemente il tuo lavoro con Ctrl+S. Elementor include anche un sistema di auto-salvataggio, ma è sempre meglio salvare manualmente dopo modifiche importanti.
Conclusione
L’interfaccia di Elementor è progettata per essere intuitiva ma al contempo potente. Conoscerne ogni aspetto — dal pannello dei widget alle scorciatoie da tastiera, dal Navigatore al menu contestuale — ti renderà enormemente più produttivo nella creazione delle tue pagine web.
Nel prossimo articolo della serie, ti guideremo passo passo nella creazione della tua prima pagina con Elementor in soli 15 minuti. Se invece hai bisogno di supporto professionale, il team di G Tech Group è sempre disponibile. Contattaci per una consulenza personalizzata.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: