Introduzione: La Tua Prima Pagina con Elementor
Hai installato Elementor e hai esplorato l’interfaccia dell’editor. Adesso è il momento di sporcarsi le mani e creare qualcosa di concreto. In questo tutorial ti guideremo passo dopo passo nella creazione di una pagina web completa e professionale, partendo da zero, in soli 15 minuti.
La pagina che costruiremo avrà una struttura classica ma efficace: una hero section con titolo e call-to-action, una sezione “servizi” con tre colonne, una sezione con immagine e testo affiancati, e un footer con contatti. Questo layout è versatile e adatto a moltissimi tipi di sito: aziendale, portfolio, landing page o pagina di servizio.
Passo 1: Creare una Nuova Pagina
Dalla dashboard di WordPress:
- Vai su Pagine → Aggiungi nuova pagina
- Inserisci il titolo della pagina, ad esempio “Home” o “La Mia Prima Pagina”
- Nella colonna di destra, sotto Template, seleziona Elementor Canvas (questo rimuove header e footer del tema, dandoti il pieno controllo)
- Fai clic su Modifica con Elementor
In alternativa, puoi scegliere il template Elementor Full Width che mantiene l’header e il footer del tema ma ti dà un’area di contenuto a larghezza piena.
Passo 2: Creare la Hero Section
La hero section è la prima cosa che i visitatori vedono. Deve catturare l’attenzione e comunicare immediatamente il valore del tuo sito.
Aggiungere la Sezione
- Fai clic sull’icona + al centro del canvas per aggiungere una nuova sezione
- Seleziona la struttura a una colonna
- Fai clic sull’icona della sezione (6 puntini blu) per selezionarla
Personalizzare lo Sfondo
- Con la sezione selezionata, vai alla tab Stile
- In Sfondo, scegli Tipo: Gradiente
- Imposta il primo colore su #667eea e il secondo su #764ba2
- Oppure scegli un’immagine di sfondo: fai clic su Tipo: Immagine, carica una foto e imposta Posizione: Centro Centro, Dimensione: Copertina
Impostare l’Altezza
- Vai alla tab Layout
- Imposta Altezza minima: 80vh (l’80% dell’altezza dello schermo)
- In Allineamento verticale delle colonne, seleziona Centro
Aggiungere il Titolo
- Dal pannello laterale, trascina il widget Intestazione nella sezione
- Scrivi il tuo titolo, ad esempio “Trasformiamo le Idee in Realtà Digitali”
- Nella tab Contenuto, imposta il tag HTML su H1 e l’allineamento su Centro
- Nella tab Stile, imposta il colore del testo su bianco (#FFFFFF)
- In Tipografia, scegli font Montserrat, dimensione 52px, peso 700 (Bold)
Aggiungere il Sottotitolo
- Trascina un widget Editor di Testo sotto il titolo
- Scrivi un breve testo descrittivo: “Creiamo siti web, app e strategie digitali che fanno crescere il tuo business”
- Imposta il colore su bianco con opacità (ad esempio rgba(255,255,255,0.85)), allineamento al centro, dimensione 18px
Aggiungere il Pulsante CTA
- Trascina un widget Pulsante sotto il sottotitolo
- Come testo, scrivi “Scopri di Più” o “Richiedi un Preventivo”
- Imposta l’allineamento su Centro
- Nella tab Stile, personalizza i colori: sfondo bianco, testo del colore del tuo brand
- Aggiungi un Border Radius di 30px per angoli arrotondati
- In Padding, imposta 15px sopra e sotto, 40px a destra e sinistra
- Nella sezione Hover, inverti i colori (sfondo del brand, testo bianco)
- In Link, inserisci l’URL della pagina contatti
Passo 3: Creare la Sezione Servizi (3 Colonne)
Sotto la hero section, creiamo una sezione con tre colonne per presentare i servizi:
- Fai clic sull’icona + per aggiungere una nuova sezione
- Seleziona la struttura a tre colonne
- Nello Stile della sezione, imposta uno sfondo bianco e un padding di 80px sopra e sotto
Aggiungere le Icon Box
In ogni colonna, trascina un widget Icon Box:
- Prima colonna: icona “code” (o “laptop”), titolo “Sviluppo Web”, descrizione dei servizi di sviluppo
- Seconda colonna: icona “paint-brush”, titolo “Design Grafico”, descrizione dei servizi di design
- Terza colonna: icona “chart-line”, titolo “Marketing Digitale”, descrizione dei servizi di marketing
Per ogni Icon Box:
- Imposta la posizione dell’icona su “In alto” per averla centrata sopra il testo
- Nella tab Stile, imposta il colore dell’icona con il colore del tuo brand
- Imposta la dimensione dell’icona su 60px
- Personalizza la tipografia del titolo: font Montserrat, dimensione 22px, peso 600
Passo 4: Sezione Immagine + Testo (Due Colonne)
Questa sezione classica mostra un’immagine affiancata a un blocco di testo:
- Aggiungi una nuova sezione con due colonne (50%/50%)
- Nella colonna sinistra, trascina un widget Immagine e carica una foto pertinente
- Nella colonna destra, aggiungi un Intestazione (H2) con il titolo della sezione
- Sotto il titolo, aggiungi un Editor di Testo con la descrizione
- Aggiungi un Pulsante con un link alla pagina di approfondimento
Consiglio professionale: aggiungi un border-radius di 10px all’immagine per un look moderno, e un’ombra (box-shadow) leggera per dare profondità.
Passo 5: Sezione Testimonianze
Le testimonianze costruiscono fiducia. Aggiungi una sezione con sfondo grigio chiaro (#f8f9fa) e inserisci il widget Testimonial:
- Inserisci il testo della testimonianza tra virgolette
- Aggiungi il nome del cliente e la sua posizione/azienda
- Carica una foto profilo del cliente
- Centra tutto e personalizza i colori e la tipografia
Passo 6: Sezione Contatti (Footer)
L’ultima sezione è un invito all’azione finale:
- Crea una sezione con sfondo scuro (#1a1a2e) e una colonna
- Aggiungi un’Intestazione H2 con testo bianco: “Pronto a Iniziare?”
- Aggiungi un Editor di Testo con il tuo messaggio finale
- Inserisci un Pulsante “Contattaci Ora” che punta alla pagina contatti
- Aggiungi un widget Social Icons con i link ai tuoi profili social
Passo 7: Controllo Responsive
Prima di pubblicare, verifica che la pagina sia bella su tutti i dispositivi:
- Fai clic sull’icona dei dispositivi nella barra inferiore del pannello
- Passa alla vista Tablet e verifica spaziature e dimensioni del testo
- Passa alla vista Mobile e assicurati che tutto sia leggibile e cliccabile
- Se necessario, modifica i valori specifici per dispositivo (dimensioni font, padding, margini)
Passo 8: Salvare e Pubblicare
Quando sei soddisfatto del risultato:
- Fai clic sul pulsante verde Pubblica in basso nel pannello
- Conferma la pubblicazione nella finestra che appare
- Fai clic su Dai un’occhiata per vedere la pagina dal vivo
Congratulazioni! Hai creato la tua prima pagina con Elementor. Da qui puoi continuare a perfezionare il design, aggiungere nuove sezioni e sperimentare con tutti i widget disponibili.
Consigli Finali per Principianti
- Salva spesso — usa Ctrl+S regolarmente per non perdere il lavoro
- Usa la cronologia — se qualcosa va storto, puoi tornare a uno stato precedente
- Copia gli stili — usa “Copia stile” dal menu contestuale per mantenere consistenza
- Esplora i template — la libreria template è un ottimo modo per imparare nuove tecniche di design
- Meno è più — non esagerare con animazioni e colori. Il design migliore è quello pulito e funzionale
Conclusione
Creare una pagina professionale con Elementor è sorprendentemente veloce e accessibile. Con la pratica, riuscirai a costruire layout complessi in pochi minuti. L’importante è capire la struttura gerarchica (sezioni, colonne, widget) e sperimentare con le infinite opzioni di personalizzazione.
Se desideri un sito web professionale creato con Elementor dal team di esperti di G Tech Group, contattaci per un preventivo gratuito. Scopri anche i nostri servizi di realizzazione siti web.
Errori Comuni dei Principianti
- Non salvare spesso: Elementor ha il salvataggio automatico, ma clicca Pubblica/Aggiorna regolarmente
- Usare troppe sezioni: Mantieni la struttura semplice, meno sezioni = pagina piu veloce
- Ignorare il mobile: Controlla sempre la versione mobile prima di pubblicare
- Non usare gli stili globali: Imposta colori e font globali invece di personalizzare ogni widget singolarmente
- Testi troppo lunghi: Su web, meno e meglio. Usa paragrafi brevi, liste puntate e sottotitoli
FAQ
Posso annullare le modifiche?
Si, Elementor salva una cronologia revisioni. Clicca l’icona orologio in basso per tornare a una versione precedente.
Come duplico una sezione?
Click destro sulla sezione e seleziona Duplica. Puoi anche copiare e incollare tra pagine diverse.
Posso usare Elementor sulle pagine esistenti?
Si, apri qualsiasi pagina e clicca Modifica con Elementor. Il contenuto esistente verra convertito in un widget Text Editor.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: