Creare Pagine e Menu WordPress

Lezione 5: iniziamo a costruire il nostro vero sito WordPress

Nelle lezioni precedenti abbiamo preparato tutto ciò che serve per arrivare a questo momento.

Abbiamo:

Scelto dominio e hosting
Capito come funzionano i DNS
Installato WordPress
Configurato le impostazioni principali
Verificato HTTPS
Creato un primo backup

Adesso smettiamo di lavorare soltanto sull’infrastruttura.

In questa quinta lezione del corso gratuito KiraSoftware sulla creazione di siti WordPress inizieremo a costruire realmente il nostro sito.

Impareremo a creare:

Pagine
Struttura del sito
Menu
Home Page
Pagina Chi siamo
Pagina Servizi
Contatti
Gerarchie tra contenuti
Header e Footer

E inizieremo a utilizzare Gutenberg, l’editor a blocchi di WordPress.

Prima di creare pagine: ricordiamo l’obiettivo del sito

Nella prima lezione abbiamo stabilito che non dobbiamo iniziare dalla grafica.

Prima dobbiamo sapere cosa deve fare il sito.

Per il nostro progetto immaginiamo un’azienda che vuole:

ricevere richieste di informazioni e preventivi attraverso il sito.

Quindi la struttura deve aiutare l’utente a comprendere:

Chi è l’azienda
Cosa offre
Perché dovrebbe sceglierla
Come può contattarla

Questo sarà il criterio con cui costruiremo le pagine.

1. Pagine e articoli non sono la stessa cosa

WordPress distingue principalmente tra:

Pagine

Articoli

Entrambi contengono contenuti, ma vengono utilizzati normalmente con finalità differenti.

Le pagine

Le pagine vengono generalmente utilizzate per contenuti relativamente stabili.

Per esempio:

Home
Chi siamo
Servizi
Contatti
Privacy Policy

Gli articoli

Gli articoli vengono normalmente utilizzati per contenuti pubblicati nel tempo.

Per esempio:

Guide
News
Approfondimenti
Tutorial
Aggiornamenti

Il corso che stai leggendo, ad esempio, può essere pubblicato sotto forma di articoli WordPress.

2. Perché questa distinzione è importante?

Immagina di utilizzare gli articoli per creare:

Home
Chi siamo
Contatti

Potresti farlo tecnicamente.

Ma non sarebbe la struttura più logica.

Le pagine rappresentano meglio le sezioni istituzionali e commerciali del sito.

Gli articoli sono invece perfetti per il blog e la knowledge base.

Iniziare con una struttura coerente rende più semplice:

Gestire il sito
Organizzare il menu
Fare SEO
Collegare i contenuti
Espandere il progetto

3. Creiamo la prima pagina WordPress

Accedi alla dashboard.

Vai su:

Pagine → Aggiungi nuova

Vedrai l’editor WordPress.

Inserisci come
titolo:

Chi siamo

WordPress creerà automaticamente la struttura della pagina.

Non pubblicarla ancora se stai facendo pratica.

Puoi salvarla come bozza.

4. Iniziamo a conoscere Gutenberg

L’editor di WordPress utilizza il concetto di blocchi.

Ogni elemento della pagina può essere rappresentato da un blocco.

Per esempio:

Paragrafo
Titolo
Immagine
Pulsante
Elenco
Citazione
Colonne
Tabella
Cover
Separatore

Questo permette di costruire una pagina aggiungendo e organizzando elementi.

5. Come aggiungere un blocco

All’interno dell’editor puoi utilizzare il pulsante:

+

per aggiungere un nuovo blocco.

Prova ad aggiungere:

Paragrafo

Scrivi:

Siamo un'azienda specializzata in servizi professionali per imprese e privati.

Poi aggiungi:

Titolo

e scrivi:

La nostra esperienza

Hai appena creato due elementi differenti della pagina.

6. Non usare i titoli solo per cambiare dimensione del testo

Questo è un errore molto comune.

Gli heading:

non servono semplicemente per fare testo più grande.

Rappresentano una gerarchia del contenuto.

Una struttura corretta

Potremmo avere:

H1: Chi siamo

H2: La nostra esperienza

H2: Il nostro metodo

H3: Analisi iniziale

H3: Progettazione

H2: Perché scegliere noi

Questo aiuta sia l’utente sia i motori di ricerca a comprendere la struttura della pagina.

7. Dove si trova l’H1?

Normalmente il titolo principale della pagina rappresenta il suo H1.

Per esempio:

Chi siamo

oppure:

Creazione siti web professionali

Non serve quindi aggiungere casualmente altri H1 all’interno della pagina.

Per le sezioni utilizzeremo principalmente:

8. Creiamo la struttura principale del sito

Per il nostro progetto aziendale possiamo iniziare con:

Home
Chi siamo
Servizi
Blog
Contatti

Questa è una buona base.

Ma possiamo migliorarla.

Supponiamo che l’azienda offra tre servizi importanti:

Siti web
Sviluppo software
Consulenza digitale

Potremmo creare:

Servizi

e poi pagine dedicate:

Creazione siti web

Sviluppo software

Consulenza digitale

9. Perché creare una pagina per ogni servizio?

Immagina una pagina chiamata:

Servizi

con tre righe:

Creiamo siti web, software e offriamo consulenza.

Non offre molte informazioni.

Una pagina dedicata a:

Creazione siti web

può invece spiegare:

Cosa comprende il servizio
A chi è rivolto
Come lavoriamo
Quanto può costare
Quali vantaggi offre
Come richiedere informazioni

Questo migliora sia l’esperienza dell’utente sia la capacità del sito di rispondere a ricerche specifiche.

10. Disegniamo la struttura del sito

Possiamo immaginare:

HOME

CHI SIAMO

SERVIZI

├── CREAZIONE SITI WEB

├── SVILUPPO SOFTWARE

└── CONSULENZA DIGITALE

BLOG

CONTATTI

Questa è la nostra architettura informativa.

Prima di iniziare a costruire tutte le pagine, disegnala.

Puoi farlo anche su un semplice foglio.

11. Creiamo la Home Page

Vai su:

Pagine → Aggiungi nuova

Titolo:

Home

La Home deve comunicare rapidamente cosa offre l’attività.

Non iniziare con frasi vaghe come:

Innoviamo il futuro attraverso esperienze digitali straordinarie.

Potrebbe significare qualsiasi cosa.

Meglio qualcosa di chiaro.

Per esempio:

Realizziamo siti web e software personalizzati per aziende.

L’utente deve capire velocemente dove si trova.

12. Una possibile struttura della Home Page

Potremmo utilizzare:

Hero

Titolo principale.

Descrizione.

Pulsante di contatto.

Servizi

Presentazione dei servizi principali.

Chi siamo

Breve presentazione dell’azienda.

Perché sceglierci

Principali vantaggi.

Progetti

Lavori realizzati.

Articoli

Ultime guide del blog.

Call To Action

Invito a richiedere informazioni.

Contatti

Recapiti principali.

Questa è soltanto una struttura di esempio.

Ogni progetto deve essere adattato agli obiettivi reali.

13. Cos’è una Hero Section?

La Hero Section è la parte iniziale molto visibile della pagina.

Generalmente contiene:

Titolo
Sottotitolo
Immagine
Call To Action

Per esempio:

Siti web professionali per aziende che vogliono crescere online

e sotto:

Progettiamo siti veloci, responsive e ottimizzati per trasformare visitatori in potenziali clienti.

Pulsante:

Richiedi un preventivo

Questa sezione deve comunicare immediatamente il valore della pagina.

14. Cos’è una Call To Action?

Una Call To Action, spesso abbreviata in CTA, invita l’utente a compiere un’azione.

Per esempio:

Richiedi un preventivo
Contattaci
Prenota una consulenza
Scopri il servizio
Scarica la guida

Una pagina commerciale dovrebbe avere un obiettivo chiaro.

Non vogliamo che l’utente arrivi in fondo chiedendosi:

E adesso cosa faccio?

15. Come creare un pulsante con Gutenberg

Nell’editor aggiungi il blocco:

Pulsanti

Inserisci:

Richiedi un preventivo

Poi collega il pulsante alla pagina:

Contatti

oppure al modulo di richiesta.

Non aggiungere pulsanti senza destinazione.

Ogni CTA deve portare da qualche parte.

16. Creiamo la pagina Chi siamo

La pagina Chi siamo non dovrebbe essere semplicemente:

Siamo nati nel 2010 e amiamo il nostro lavoro.

Può aiutare a costruire fiducia.

Puoi includere:

Chi siete
Esperienza
Metodo
Valori
Team
Competenze
Certificazioni
Clienti
Progetti

Scrivi pensando al cliente

Non raccontare soltanto la storia dell’azienda.

Spiega anche:

perché questa esperienza è utile al cliente.

Per esempio:

Abbiamo sviluppato oltre 100 progetti digitali.

può diventare:

L'esperienza maturata su oltre 100 progetti ci permette di individuare rapidamente soluzioni adatte alle esigenze del cliente.

17. Creiamo la pagina Servizi

La pagina:

Servizi

può funzionare come panoramica.

Potremmo inserire:

Creazione siti web

Descrizione breve.

Pulsante:

Scopri il servizio

Sviluppo software

Descrizione breve.

Pulsante:

Scopri il servizio

Consulenza digitale

Descrizione breve.

Pulsante:

Scopri il servizio

Ogni pulsante porta alla pagina specifica.

18. La pagina singolo servizio

Prendiamo:

Creazione siti web

Una struttura possibile potrebbe essere:

H1: Creazione siti web professionali

H2: Siti web progettati per la tua attività

H2: Cosa comprende il servizio

H3: Web design

H3: Responsive

H3: SEO

H3: Performance

H2: Come lavoriamo

H2: Quanto costa

H2: Le domande più comuni

H2: Richiedi un preventivo

Questa è una pagina molto più utile di una semplice descrizione da tre righe.

19. Creiamo la pagina Contatti

La pagina Contatti dovrebbe essere semplice.

Inserisci almeno:

Nome azienda
Email
Telefono
Eventuale indirizzo
Orari
Modulo contatti

Non costringere l’utente a cercare i recapiti.

Un modulo troppo lungo può ridurre i contatti

Se vuoi ricevere una semplice richiesta di informazioni, evita moduli con venti campi.

Potrebbero bastare:

Nome
Email
Telefono opzionale
Messaggio

Chiedi soltanto ciò che serve realmente.

20. Creiamo il Blog

WordPress distingue le pagine dagli articoli.

Per il blog creeremo una pagina che fungerà da archivio degli articoli.

Potremmo chiamarla:

Guide

oppure:

Blog

Nel nostro progetto preferisco Guide, perché vogliamo costruire una knowledge base utile.

Gli articoli del corso, per esempio, potrebbero comparire proprio qui.

21. Come impostare Home e pagina articoli

Vai su:

Impostazioni → Lettura

Puoi scegliere di mostrare:

Gli ultimi articoli

oppure:

Una pagina statica

Per un sito aziendale normalmente vogliamo una Home progettata appositamente.

Quindi possiamo impostare:

Homepage → Home

Pagina articoli → Blog

Ora WordPress sa quale pagina utilizzare come Home e quale come archivio degli articoli.

22. Creiamo il menu principale

Adesso dobbiamo permettere all’utente di navigare.

A seconda del tema e della versione WordPress, la gestione del menu può avvenire attraverso:

Aspetto → Menu
Editor del sito
Blocco Navigazione

Il concetto rimane lo stesso.

Vogliamo creare un menu con:

Home

Chi siamo

Servizi

Guide

Contatti

23. Non mettere 20 voci nel menu

Il menu principale deve essere semplice.

Un utente dovrebbe comprendere rapidamente dove andare.

Evita strutture come:

Possiamo organizzare meglio le informazioni attraverso gerarchie e sottomenù.

24. Creiamo un sottomenu Servizi

Una struttura potrebbe essere:

Servizi

├── Creazione siti web

├── Sviluppo software

└── Consulenza digitale

Questo mantiene il menu principale semplice ma permette comunque di raggiungere rapidamente le pagine specifiche.

25. Il menu deve funzionare anche da smartphone

Un menu perfetto su desktop può diventare difficile da utilizzare da mobile.

Controlla:

Apertura
Sottomenu
Dimensioni
Spazi
Elementi cliccabili
Lunghezza

Un sito professionale deve essere progettato anche per schermi piccoli.

26. Cos’è l’Header?

L’Header è la parte superiore del sito.

Può contenere:

Logo
Menu
Pulsante CTA
Recapiti
Icone social

Non deve contenere necessariamente tutto.

Un header troppo pieno può diventare confuso.

Per il nostro progetto potremmo utilizzare:

Logo | Menu | Richiedi preventivo

Semplice e chiaro.

27. Cos’è il Footer?

Il Footer è la parte inferiore del sito.

Può contenere:

Logo
Recapiti
Link principali
Servizi
Privacy Policy
Cookie Policy
Social
Copyright

È utile anche per fornire una navigazione secondaria.

28. Non duplicare tutto nel Footer

Non devi necessariamente ripetere ogni voce del sito.

Inserisci ciò che può essere utile.

Per esempio:

Azienda

Chi siamo
Contatti

Servizi

Siti web
Software

Risorse

Guide

Informazioni

Privacy
Cookie

29. Impariamo a usare le colonne

Gutenberg permette di utilizzare il blocco:

Colonne

Potremmo creare una sezione Servizi con tre colonne.

Ogni colonna contiene:

Icona
Titolo
Descrizione
Pulsante

Attenzione da mobile

Tre colonne su desktop possono diventare:

una colonna sotto l’altra

su smartphone.

Questo è normale.

Verifica sempre il risultato su schermi differenti.

30. Utilizza immagini utili

Non inserire immagini soltanto per riempire spazio.

Una buona immagine può:

Mostrare un progetto
Spiegare un concetto
Rafforzare il messaggio
Rendere più comprensibile un servizio

Ricorda inoltre ciò che abbiamo già imparato:

Ridimensiona
Comprimi
Usa formati adeguati
Compila l’Alt Text quando appropriato

31. Immagine decorativa e immagine informativa

Non tutte le immagini hanno la stessa funzione.

Un’immagine puramente decorativa può non aver bisogno di descrizioni complesse.

Un’immagine che contiene informazioni importanti deve invece essere gestita con maggiore attenzione.

Quando scrivi l’Alt Text chiediti:

se l’immagine non fosse visibile, cosa dovrebbe sapere l’utente?

32. Non scrivere muri di testo

Una pagina online non dovrebbe sembrare un documento senza struttura.

Utilizza:

Paragrafi relativamente brevi
H2
H3
Elenchi
Immagini
Spazi
Tabelle quando utili
Call To Action

Questo rende la lettura più semplice.

33. Ma non frammentare troppo

Esiste anche l’errore opposto.

Una pagina composta da:

tre parole

poi:

un’immagine

poi:

due parole

poi:

un pulsante enorme

può diventare difficile da seguire.

Design e contenuto devono collaborare.

34. Scrivi prima il contenuto, poi perfeziona il design

Questo è un metodo molto utile.

Prima scrivi:

Titoli
Testi
Servizi
CTA

Poi organizza graficamente.

Se inizi dal design potresti ritrovarti con un template che richiede:

tre colonne da 40 parole

anche se il contenuto reale necessita di una struttura completamente diversa.

Il contenuto dovrebbe guidare almeno in parte il design.

35. Crea una struttura coerente tra le pagine

Le pagine dei servizi dovrebbero condividere una logica simile.

Per esempio:

Introduzione

Problema

Soluzione

Vantaggi

Processo

Le domande più comuni

CTA

Non devono essere copie identiche.

Ma una coerenza generale migliora l’esperienza del sito.

36. Cosa sono i link interni?

Un link interno collega una pagina del sito a un’altra pagina dello stesso sito.

Per esempio, all’interno di un articolo potremmo scrivere:

Scopri il nostro servizio di creazione siti web professionali.

e collegare quel testo alla relativa pagina servizio.

I link interni aiutano:

Navigazione
Scoperta dei contenuti
Gerarchia
SEO

37. Non usare sempre “clicca qui”

Immagina:

Per maggiori informazioni clicca qui.

Il testo del link non comunica molto.

Meglio:

Scopri il nostro servizio di creazione siti web professionali.

Il collegamento è più comprensibile anche fuori dal contesto.

38. Ogni pagina importante deve essere raggiungibile

Una pagina strategica non dovrebbe esistere soltanto perché conosci l’URL.

Dovrebbe essere raggiungibile attraverso:

Menu
Pagine correlate
Articoli
Footer quando appropriato

Evitiamo le cosiddette pagine orfane.

39. Crea prima le pagine principali

Non cercare di completare tutto il sito in una volta.

Inizia da:

Home
Chi siamo
Servizi
Singoli servizi
Contatti
Blog

Poi aggiungeremo:

Privacy
Cookie
Le domande più comuni
Landing page
Altri contenuti

Partiamo dalla struttura fondamentale.

40. Pubblica o salva come bozza?

Durante la costruzione puoi utilizzare:

Bozza

finché il contenuto non è pronto.

Quando una pagina è completa puoi pubblicarla.

Se il sito è ancora in sviluppo, potresti inoltre lavorare in un ambiente staging.

Non utilizzare la pubblicazione come sostituto del backup o dello staging.

Sono funzioni differenti.

Checklist struttura del sito

Prima di terminare la lezione controlla:

Elemento	Stato
Home	Creata
Chi siamo	Creata
Servizi	Creata
Singoli servizi	Creati
Contatti	Creata
Blog/Guide	Configurato
Home statica	Impostata
Pagina articoli	Impostata
Menu	Creato
Sottomenu	Organizzato
Header	Configurato
Footer	Configurato
CTA	Presenti
Mobile	Controllato
Link interni	Iniziati

Non devono essere perfetti.

Devono però avere una struttura logica.

Esercizio della Lezione 5

Questa volta costruiremo davvero il sito.

Passo 1

Crea queste pagine:

Home
Chi siamo
Servizi
Contatti
Blog

Passo 2

Crea almeno due pagine dedicate ai servizi.

Passo 3

Imposta Home come pagina iniziale.

Passo 4

Imposta Blog come pagina degli articoli.

Passo 5

Crea il menu principale.

Passo 6

Crea un sottomenu sotto Servizi.

Passo 7

Inserisci una CTA nella Home.

Passo 8

Controlla il sito da smartphone.

Passo 9

Aggiungi almeno tre link interni tra pagine correlate.

Passo 10

Salva un nuovo backup.

A questo punto il nostro WordPress non è più una semplice installazione.

Sta diventando un vero sito strutturato.

Cosa hai imparato nella Lezione 5

Hai imparato la differenza tra:

pagine e articoli

Hai iniziato a utilizzare:

Gutenberg

Hai creato:

Home
Servizi
Menu
Header
Footer

E soprattutto hai iniziato a ragionare in termini di:

architettura informativa

Ora non stiamo più semplicemente aggiungendo elementi a WordPress.

Stiamo progettando come una persona utilizzerà il sito.

Prossima lezione: scegliamo tema, colori e design

Nella Lezione 6 entreremo finalmente nel web design.

Vedremo:

Come scegliere un tema WordPress
Tema gratuito o premium
Tema classico e block theme
Child theme
Logo
Palette colori
Tipografia
Spazi
Larghezza dei contenuti
Bottoni
Responsive design
Errori grafici più comuni
Come creare un’identità visiva coerente

E soprattutto vedremo perché:

un sito professionale non deve essere necessariamente pieno di effetti.

Il nostro obiettivo sarà creare un design:

chiaro → coerente → leggibile → responsive → professionale

Domande Frequenti

Qual è la differenza tra pagine e articoli in WordPress?

Le pagine vengono generalmente utilizzate per contenuti relativamente stabili come Home, Servizi e Contatti, mentre gli articoli vengono utilizzati per contenuti pubblicati nel tempo come guide e approfondimenti.

Cos’è Gutenberg?

Gutenberg è l’editor a blocchi di WordPress e permette di costruire contenuti utilizzando elementi come paragrafi, titoli, immagini, colonne, pulsanti e tabelle.

Quante pagine deve avere un sito WordPress?

Non esiste un numero ideale. Il sito dovrebbe avere tutte le pagine necessarie a presentare correttamente attività, servizi e informazioni utili senza creare contenuti inutili.

Devo creare una pagina per ogni servizio?

Se i servizi sono importanti e hanno caratteristiche differenti, creare pagine dedicate può migliorare chiarezza, approfondimento e possibilità di intercettare intenti di ricerca specifici.

Cosa deve contenere la Home Page?

Una Home efficace dovrebbe spiegare rapidamente chi sei, cosa offri, quali sono i principali vantaggi e quale azione vuoi far compiere al visitatore.

Cos’è una Call To Action?

Una Call To Action è un invito esplicito a compiere un’azione, come richiedere un preventivo, contattare l’azienda o approfondire un servizio.

Come si crea un menu in WordPress?

A seconda del tema, il menu può essere gestito tramite la sezione Aspetto, l’Editor del sito oppure il blocco Navigazione. L’obiettivo è organizzare le principali destinazioni in modo semplice e comprensibile.

Devo mettere tutte le pagine nel menu?

No. Il menu principale dovrebbe contenere le destinazioni più importanti. Pagine secondarie possono essere raggiunte tramite footer, link interni o altre sezioni.

Posso modificare una pagina dopo averla pubblicata?

Sì. WordPress permette di aggiornare le pagine anche dopo la pubblicazione. Per modifiche importanti è comunque buona pratica disporre di backup e, quando opportuno, utilizzare staging.

Perché devo controllare il sito da smartphone?

Perché layout, menu, pulsanti, immagini e spazi possono comportarsi diversamente su schermi piccoli. Un sito efficace deve offrire una buona esperienza anche da mobile.

Conclusione

Hai completato la Lezione 5 del corso gratuito KiraSoftware sulla creazione di siti WordPress.

Adesso abbiamo finalmente superato la fase di installazione.

Il nostro progetto possiede una vera struttura:

Home → Servizi → Pagine servizio → Guide → Contatti

Abbiamo inoltre costruito:

menu → header → footer → collegamenti interni

Da questo momento il sito ha una logica di navigazione.

Ed è una base fondamentale.

Nella prossima lezione inizieremo a trasformare questa struttura in un sito visivamente professionale.

Continua con la Lezione 6: come scegliere tema, colori e design per un sito WordPress.

Se invece vuoi affidare direttamente progettazione, struttura e realizzazione del tuo sito a un professionista, contatta KiraSoftware per la creazione del tuo sito web professionale.