La pagina che costruiremo avr\u00e0 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 \u00e8 versatile e adatto a moltissimi tipi di sito: aziendale, portfolio, landing page o pagina di servizio.<\/p>\n
Passo 1: Creare una Nuova Pagina<\/h2>\n
Dalla dashboard di WordPress:<\/p>\n
- \n
- Vai su Pagine \u2192 Aggiungi nuova pagina<\/strong><\/li>\n
- Inserisci il titolo della pagina, ad esempio “Home” o “La Mia Prima Pagina”<\/li>\n
- Nella colonna di destra, sotto Template<\/strong>, seleziona Elementor Canvas<\/strong> (questo rimuove header e footer del tema, dandoti il pieno controllo)<\/li>\n
- Fai clic su Modifica con Elementor<\/strong><\/li>\n<\/ol>\n
![\"Lista](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/07-pages-list.png\")
<\/p>\nIn alternativa, puoi scegliere il template Elementor Full Width<\/strong> che mantiene l’header e il footer del tema ma ti d\u00e0 un’area di contenuto a larghezza piena.<\/p>\n
Passo 2: Creare la Hero Section<\/h2>\n
La hero section \u00e8 la prima cosa che i visitatori vedono. Deve catturare l’attenzione e comunicare immediatamente il valore del tuo sito.<\/p>\n
Aggiungere la Sezione<\/h3>\n
- \n
- Fai clic sull’icona +<\/strong> al centro del canvas per aggiungere una nuova sezione<\/li>\n
- Seleziona la struttura a una colonna<\/strong><\/li>\n
- Fai clic sull’icona della sezione (6 puntini blu) per selezionarla<\/li>\n<\/ol>\n
Personalizzare lo Sfondo<\/h3>\n
- \n
- Con la sezione selezionata, vai alla tab Stile<\/strong><\/li>\n
- In Sfondo<\/strong>, scegli Tipo: Gradiente<\/strong><\/li>\n
- Imposta il primo colore su #667eea<\/strong> e il secondo su #764ba2<\/strong><\/li>\n
- Oppure scegli un’immagine di sfondo: fai clic su Tipo: Immagine<\/strong>, carica una foto e imposta Posizione: Centro Centro<\/strong>, Dimensione: Copertina<\/strong><\/li>\n<\/ol>\n
Impostare l’Altezza<\/h3>\n
- \n
- Vai alla tab Layout<\/strong><\/li>\n
- Imposta Altezza minima: 80vh<\/strong> (l’80% dell’altezza dello schermo)<\/li>\n
- In Allineamento verticale delle colonne<\/strong>, seleziona Centro<\/strong><\/li>\n<\/ol>\n
Aggiungere il Titolo<\/h3>\n
- \n
- Dal pannello laterale, trascina il widget Intestazione<\/strong> nella sezione<\/li>\n
- Scrivi il tuo titolo, ad esempio “Trasformiamo le Idee in Realt\u00e0 Digitali”<\/li>\n
- Nella tab Contenuto<\/strong>, imposta il tag HTML su H1<\/strong> e l’allineamento su Centro<\/strong><\/li>\n
- Nella tab Stile<\/strong>, imposta il colore del testo su bianco (#FFFFFF)<\/strong><\/li>\n
- In Tipografia<\/strong>, scegli font Montserrat<\/strong>, dimensione 52px<\/strong>, peso 700 (Bold)<\/strong><\/li>\n<\/ol>\n
Aggiungere il Sottotitolo<\/h3>\n
- \n
- Trascina un widget Editor di Testo<\/strong> sotto il titolo<\/li>\n
- Scrivi un breve testo descrittivo: “Creiamo siti web, app e strategie digitali che fanno crescere il tuo business”<\/li>\n
- Imposta il colore su bianco con opacit\u00e0 (ad esempio rgba(255,255,255,0.85)<\/strong>), allineamento al centro, dimensione 18px<\/strong><\/li>\n<\/ol>\n
Aggiungere il Pulsante CTA<\/h3>\n
- \n
- Trascina un widget Pulsante<\/strong> sotto il sottotitolo<\/li>\n
- Come testo, scrivi “Scopri di Pi\u00f9” o “Richiedi un Preventivo”<\/li>\n
- Imposta l’allineamento su Centro<\/strong><\/li>\n
- Nella tab Stile<\/strong>, personalizza i colori: sfondo bianco, testo del colore del tuo brand<\/li>\n
- Aggiungi un Border Radius<\/strong> di 30px per angoli arrotondati<\/li>\n
- In Padding<\/strong>, imposta 15px sopra e sotto, 40px a destra e sinistra<\/li>\n
- Nella sezione Hover<\/strong>, inverti i colori (sfondo del brand, testo bianco)<\/li>\n
- In Link<\/strong>, inserisci l’URL della pagina contatti<\/li>\n<\/ol>\n
![\"Editor](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/06-editor.png\")
<\/p>\nPasso 3: Creare la Sezione Servizi (3 Colonne)<\/h2>\n
Sotto la hero section, creiamo una sezione con tre colonne per presentare i servizi:<\/p>\n
- \n
- Fai clic sull’icona +<\/strong> per aggiungere una nuova sezione<\/li>\n
- Seleziona la struttura a tre colonne<\/strong><\/li>\n
- Nello Stile<\/strong> della sezione, imposta uno sfondo bianco e un padding di 80px sopra e sotto<\/li>\n<\/ol>\n
Aggiungere le Icon Box<\/h3>\n
In ogni colonna, trascina un widget Icon Box<\/strong>:<\/p>\n
- \n
- Prima colonna<\/strong>: icona “code” (o “laptop”), titolo “Sviluppo Web”, descrizione dei servizi di sviluppo<\/li>\n
- Seconda colonna<\/strong>: icona “paint-brush”, titolo “Design Grafico”, descrizione dei servizi di design<\/li>\n
- Terza colonna<\/strong>: icona “chart-line”, titolo “Marketing Digitale”, descrizione dei servizi di marketing<\/li>\n<\/ol>\n
Per ogni Icon Box:<\/p>\n
- \n
- Imposta la posizione dell’icona<\/strong> su “In alto” per averla centrata sopra il testo<\/li>\n
- Nella tab Stile<\/strong>, imposta il colore dell’icona con il colore del tuo brand<\/li>\n
- Imposta la dimensione dell’icona su 60px<\/li>\n
- Personalizza la tipografia del titolo: font Montserrat<\/strong>, dimensione 22px, peso 600<\/li>\n<\/ul>\n
Passo 4: Sezione Immagine + Testo (Due Colonne)<\/h2>\n
Questa sezione classica mostra un’immagine affiancata a un blocco di testo:<\/p>\n
- \n
- Aggiungi una nuova sezione con due colonne<\/strong> (50%\/50%)<\/li>\n
- Nella colonna sinistra, trascina un widget Immagine<\/strong> e carica una foto pertinente<\/li>\n
- Nella colonna destra, aggiungi un Intestazione<\/strong> (H2) con il titolo della sezione<\/li>\n
- Sotto il titolo, aggiungi un Editor di Testo<\/strong> con la descrizione<\/li>\n
- Aggiungi un Pulsante<\/strong> con un link alla pagina di approfondimento<\/li>\n<\/ol>\n
Consiglio professionale: aggiungi un border-radius<\/strong> di 10px all’immagine per un look moderno, e un’ombra<\/strong> (box-shadow) leggera per dare profondit\u00e0.<\/p>\n
Passo 5: Sezione Testimonianze<\/h2>\n
Le testimonianze costruiscono fiducia. Aggiungi una sezione con sfondo grigio chiaro (#f8f9fa) e inserisci il widget Testimonial<\/strong>:<\/p>\n
- \n
- Inserisci il testo della testimonianza tra virgolette<\/li>\n
- Aggiungi il nome del cliente e la sua posizione\/azienda<\/li>\n
- Carica una foto profilo del cliente<\/li>\n
- Centra tutto e personalizza i colori e la tipografia<\/li>\n<\/ol>\n
Passo 6: Sezione Contatti (Footer)<\/h2>\n
L’ultima sezione \u00e8 un invito all’azione finale:<\/p>\n
- \n
- Crea una sezione con sfondo scuro (#1a1a2e) e una colonna<\/li>\n
- Aggiungi un’Intestazione<\/strong> H2 con testo bianco: “Pronto a Iniziare?”<\/li>\n
- Aggiungi un Editor di Testo<\/strong> con il tuo messaggio finale<\/li>\n
- Inserisci un Pulsante<\/strong> “Contattaci Ora” che punta alla pagina contatti<\/li>\n
- Aggiungi un widget Social Icons<\/strong> con i link ai tuoi profili social<\/li>\n<\/ol>\n
Passo 7: Controllo Responsive<\/h2>\n
Prima di pubblicare, verifica che la pagina sia bella su tutti i dispositivi:<\/p>\n
- \n
- Fai clic sull’icona dei dispositivi<\/strong> nella barra inferiore del pannello<\/li>\n
- Passa alla vista Tablet<\/strong> e verifica spaziature e dimensioni del testo<\/li>\n
- Passa alla vista Mobile<\/strong> e assicurati che tutto sia leggibile e cliccabile<\/li>\n
- Se necessario, modifica i valori specifici per dispositivo (dimensioni font, padding, margini)<\/li>\n<\/ol>\n
Passo 8: Salvare e Pubblicare<\/h2>\n
Quando sei soddisfatto del risultato:<\/p>\n
- \n
- Fai clic sul pulsante verde Pubblica<\/strong> in basso nel pannello<\/li>\n
- Conferma la pubblicazione nella finestra che appare<\/li>\n
- Fai clic su Dai un’occhiata<\/strong> per vedere la pagina dal vivo<\/li>\n<\/ol>\n
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<\/a>.<\/p>\n
Consigli Finali per Principianti<\/h2>\n
- \n
- Salva spesso<\/strong> \u2014 usa Ctrl+S regolarmente per non perdere il lavoro<\/li>\n
- Usa la cronologia<\/strong> \u2014 se qualcosa va storto, puoi tornare a uno stato precedente<\/li>\n
- Copia gli stili<\/strong> \u2014 usa “Copia stile” dal menu contestuale per mantenere consistenza<\/li>\n
- Esplora i template<\/strong> \u2014 la libreria template<\/a> \u00e8 un ottimo modo per imparare nuove tecniche di design<\/li>\n
- Meno \u00e8 pi\u00f9<\/strong> \u2014 non esagerare con animazioni e colori. Il design migliore \u00e8 quello pulito e funzionale<\/li>\n<\/ul>\n
Conclusione<\/h2>\n
Creare una pagina professionale con Elementor \u00e8 sorprendentemente veloce e accessibile. Con la pratica, riuscirai a costruire layout complessi in pochi minuti. L’importante \u00e8 capire la struttura gerarchica (sezioni, colonne, widget) e sperimentare con le infinite opzioni di personalizzazione.<\/p>\n
Se desideri un sito web professionale creato con Elementor dal team di esperti di G Tech Group<\/a>, contattaci<\/a> per un preventivo gratuito. Scopri anche i nostri servizi di realizzazione siti web<\/a>.<\/p>\n
Errori Comuni dei Principianti<\/h2>\n
- \n
- Non salvare spesso<\/strong>: Elementor ha il salvataggio automatico, ma clicca Pubblica\/Aggiorna regolarmente<\/li>\n
- Usare troppe sezioni<\/strong>: Mantieni la struttura semplice, meno sezioni = pagina piu veloce<\/li>\n
- Ignorare il mobile<\/strong>: Controlla sempre la versione mobile prima di pubblicare<\/li>\n
- Non usare gli stili globali<\/strong>: Imposta colori e font globali invece di personalizzare ogni widget singolarmente<\/li>\n
- Testi troppo lunghi<\/strong>: Su web, meno e meglio. Usa paragrafi brevi, liste puntate e sottotitoli<\/li>\n<\/ul>\n
FAQ<\/h2>\n
Posso annullare le modifiche?<\/h3>\n
Si, Elementor salva una cronologia revisioni<\/strong>. Clicca l’icona orologio in basso per tornare a una versione precedente.<\/p>\n
Come duplico una sezione?<\/h3>\n
Click destro sulla sezione e seleziona Duplica<\/strong>. Puoi anche copiare e incollare tra pagine diverse.<\/p>\n
Posso usare Elementor sulle pagine esistenti?<\/h3>\n
Si, apri qualsiasi pagina e clicca Modifica con Elementor<\/strong>. Il contenuto esistente verra convertito in un widget Text Editor.<\/p>\n
Guide Correlate della Serie Elementor<\/h2>\n
Continua a esplorare Elementor con le nostre guide:<\/p>\n
- \n
- Interfaccia Editor Elementor<\/a><\/li>\n
- Tutti i Widget<\/a><\/li>\n
- Sezioni e Container<\/a><\/li>\n
- Design Responsive<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Introduzione: La Tua Prima Pagina con Elementor Hai installato Elementor e hai esplorato l’interfaccia dell’editor. Adesso \u00e8 il momento di sporcarsi le mani e creare…<\/p>\n","protected":false},"author":2,"featured_media":166404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Creare la Prima Pagina con Elementor in 15 Minuti","_seopress_titles_desc":"Tutorial passo passo per creare la tua prima pagina con Elementor: sezioni, widget, colori, tipografia e pubblicazione in soli 15 minuti.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2527,2521,2529,2528,1108],"class_list":["post-166413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-creare-pagina-elementor","tag-guida-elementor","tag-prima-pagina","tag-tutorial-elementor","tag-web-design"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166413"}],"version-history":[{"count":2,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166413\/revisions"}],"predecessor-version":[{"id":166518,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166413\/revisions\/166518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166404"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Tutti i Widget<\/a><\/li>\n
- Usare troppe sezioni<\/strong>: Mantieni la struttura semplice, meno sezioni = pagina piu veloce<\/li>\n
- Usa la cronologia<\/strong> \u2014 se qualcosa va storto, puoi tornare a uno stato precedente<\/li>\n
- Passa alla vista Tablet<\/strong> e verifica spaziature e dimensioni del testo<\/li>\n
- Aggiungi un Editor di Testo<\/strong> con il tuo messaggio finale<\/li>\n
- Nella colonna sinistra, trascina un widget Immagine<\/strong> e carica una foto pertinente<\/li>\n
- Nella tab Stile<\/strong>, imposta il colore dell’icona con il colore del tuo brand<\/li>\n
- Seconda colonna<\/strong>: icona “paint-brush”, titolo “Design Grafico”, descrizione dei servizi di design<\/li>\n
- Seleziona la struttura a tre colonne<\/strong><\/li>\n
- Imposta Altezza minima: 80vh<\/strong> (l’80% dell’altezza dello schermo)<\/li>\n
- In Sfondo<\/strong>, scegli Tipo: Gradiente<\/strong><\/li>\n
- Seleziona la struttura a una colonna<\/strong><\/li>\n