Un sito web a pagina singola è quando tutti i contenuti vivono su un’unica pagina e il menu non porta ad altri URL: al clic, la pagina scorre fluidamente fino al blocco desiderato. Nessun ricaricamento, nessun visitatore perso. Sembra proprio quello che ti serve per una landing page, un portfolio o un sito vetrina, no?

Ma quando arriva il momento di metterci mano, un principiante si scontra con due muri. Il primo: «Non so programmare». Il secondo: «Probabilmente mi servono plugin costosi». Entrambi i muri crollano nel giro di un’ora.

Creerai un sito a pagina singola completo su WordPress con scorrimento fluido, sezioni con ancore e usando esclusivamente strumenti gratuiti. Senza scrivere una sola riga di codice.

Se preferisci guardare invece di leggere, ecco una guida visiva dall’installazione alla pubblicazione:

💡 Panoramica rapida:

• Installa XAMPP, un server locale per testare WordPress sul tuo computer
• Distribuisci WordPress in locale tramite phpMyAdmin e modificando wp-config.php
• Scegli un tema compatibile con la struttura a pagina singola (useremo SiteOrigin North)
• Installa due plugin gratuiti di SiteOrigin: Page Builder e Widgets Bundle
• Assembla una pagina partendo da layout già pronti, assegna gli ID di ancoraggio e collegali alle voci del menu

Perché scegliere un sito a pagina singola

Un sito a pagina singola batte un classico sito multipagina in scenari specifici. Tu controlli l’ordine in cui il visitatore consuma le informazioni: prima il valore, poi il prezzo, non il contrario. Niente caccia ai link nel menu.

Quando funziona

Il portfolio di un fotografo, una landing page per un servizio, una pagina promozionale per un prodotto, un sito vetrina aziendale con cinque sezioni: tutto questo sta comodamente in un’unica schermata a scorrimento. Sei blocchi da due o tre paragrafi su una pagina sola danno un’impressione di solidità. Gli stessi sei blocchi su sei pagine diverse sembrano un sito vuoto.

Mobile e velocità

Un sito a pagina singola si carica una volta sola. Dopodiché, solo scorrimento. Un visitatore può perdere la connessione a metà lettura e arrivare comunque in fondo: la pagina è già in memoria. Su uno schermo mobile, l’esperienza ricorda quella di un’app, non di un sito web. Google lo ha confermato tempo fa: l’indicizzazione mobile-first è lo standard dal 2018.

Quando evitarlo

Un centinaio di articoli di blog, un e-commerce complesso, una struttura multilivello: un sito a pagina singola non li regge. Lo scorrimento diventa infinito e la SEO ne risente: i motori di ricerca amano URL distinti per ogni cluster di significato.

Passaggio 1: Installare XAMPP su Windows

XAMPP è un pacchetto multipiattaforma gratuito: Apache (web server), MariaDB (database), PHP e Perl. In parole povere, trasforma il tuo computer in un hosting locale dove WordPress funziona senza internet e senza costi. Ideale per testare e imparare a costruire.

Procedura di installazione su Windows:

• Vai al sito di Apache Friends e scarica l’ultima versione di XAMPP per il tuo sistema.
• Avvia il programma di installazione. Nella schermata di benvenuto, clicca su Avanti.
• Nella fase di selezione dei componenti, lascia le spunte su MySQL e phpMyAdmin: sono sufficienti per WordPress. Il resto può essere deselezionato: potrai aggiungerlo in seguito dal pannello di controllo, se necessario.

• Scegli una cartella di installazione (quella predefinita è C:\xampp, puoi lasciarla).
• Nella schermata di Bitnami, togli la spunta da «Learn more about Bitnami for XAMPP»: installeremo WordPress manualmente. Clicca su Avanti.
• Attendi che i file vengano estratti. Lascia la spunta su «Avvia il pannello di controllo» e clicca su Fine.

Se il pannello di controllo si è aperto senza errori in rosso e Apache e MySQL sono evidenziati in verde, il server è in funzione. Apri un browser e vai a http://localhost/. Se vedi la pagina di benvenuto di XAMPP, è tutto configurato correttamente.

Se Apache non si avvia, verifica che la porta 80 non sia occupata da un altro programma. Skype e IIS sono spesso i colpevoli. Nelle impostazioni di Apache (Config → Apache → httpd.conf), puoi cambiare la porta da 80 a 8080.

Passaggio 2: Creare un database e installare WordPress

WordPress archivia tutto, pagine, impostazioni, utenti, in un database MySQL. Creiamolo tramite phpMyAdmin.

• Nel pannello di controllo di XAMPP, clicca sul pulsante Admin nella riga di MySQL. Si aprirà phpMyAdmin.
• Vai alla scheda Database nel menu in alto a sinistra.
• Inserisci un nome per il database, ad esempio wordpress, e clicca su Crea.

Il database è pronto. Ora, WordPress stesso:

• Scarica l'ultima versione di WordPress ed estrai l'archivio nella cartella C:\xampp\htdocs\wordpress (puoi dare un nome diverso alla cartella, questo farà parte dell'URL locale).
• Nella cartella, trova il file wp-config-sample.php e rinominalo in wp-config.php.
• Apri il file con un editor di testo e individua il blocco delle impostazioni MySQL:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Salva il file e chiudi l'editor.
• Nel browser, apri http://localhost/wordpress/. Scegli una lingua, crea un nome utente e una password, clicca su Installa WordPress.

Fatto. Hai effettuato l'accesso all'amministrazione di WordPress sulla tua macchina locale. Prima milestone raggiunta.

Step 3: Scegliere un tema

Quasi tutti i temi vanno bene per un sito monopagina, ma useremo SiteOrigin North: è gratuito, responsive e pensato per lavorare con il page builder SiteOrigin, che entrerà in gioco nel prossimo step. Il tema supporta un menu sticky, così i visitatori non dovranno tornare in cima per navigare verso un'altra sezione.

Installazione: Aspetto → Temi → Aggiungi nuovo → inserisci SiteOrigin North → Installa → Attiva. Il tema è sviluppato dal team di SiteOrigin, le stesse persone che realizzano il plugin Page Builder. Non ci saranno conflitti.

Step 4: Plugin SiteOrigin, Page Builder e Widgets Bundle

Il cuore del nostro progetto, due plugin gratuiti dal repository di WordPress:

• SiteOrigin Page Builder (siteorigin-panels), un builder drag-and-drop con griglia, layout e funzionalità integrata di scorrimento monopagina (dalla versione 2.3). Anteprime live, output HTML pulito, oltre 500.000 installazioni attive.
• SiteOrigin Widgets Bundle (so-widgets-bundle), un set di widget: pulsanti, immagini, slider, mappe, prezzi e altre due dozzine di elementi. Tutto ciò che serve per popolare i layout.

Installazione: Plugin → Aggiungi nuovo → cerca SiteOrigin Page Builder e SiteOrigin Widgets Bundle uno alla volta → Installa → Attiva entrambi. È proprio la combinazione di questi due plugin a fornirti sia il builder che i contenuti per i layout. La funzionalità di scorrimento con ancoraggio è integrata in Page Builder, non servono plugin aggiuntivi per la navigazione su pagina singola.

Step 5: Costruire una pagina con SiteOrigin Page Builder

Crea una nuova pagina (Pagine → Aggiungi nuova). Sopra l'editor standard compariranno delle schede, passa a Page Builder.

SiteOrigin Page Builder include una libreria di layout già pronti. Clicca il pulsante Layouts sopra l'editor.

Si aprirà un catalogo di preset, da Fitness Gym ad Agency. Scegline uno adatto (noi abbiamo scelto Fitness Gym), clicca Inserisci. Se la pagina conteneva già del contenuto, il plugin chiederà se inserirlo prima, dopo o sostituirlo. Per una pagina vuota non fa differenza.

Salva la pagina e aprila. Passa alla **Live **Editor, il link comparirà nella barra superiore di amministrazione di WordPress.

Nella Live Editor, passi il mouse su qualsiasi elemento e vedi subito quale widget lo gestisce. Puoi modificare testi, cambiare immagini e trascinare blocchi, tutto in tempo reale.

Step 6: Anchor ID e menu di navigazione

L'ultimo passo è collegare le voci del menu alle sezioni della pagina. Senza questo, lo scorrimento non funziona.

Nel Live Editor, passa il mouse sulla prima riga dopo il blocco Hero, clicca l'icona a forma di chiave inglese e seleziona Modifica riga. Vai alla scheda Attributi e nel campo ID riga, inserisci un identificatore, ad esempio activities. Clicca Fatto.

Ripeti per ogni riga con un ID univoco: services, poi pricing, poi contact e così via. Salva la pagina.

Ora il menu: Aspetto → Menu. Crea un nuovo menu. Aggiungi voci tramite Link personalizzati: nel campo URL, inserisci #activities, nel campo nome, "Attività". Ripeti per ogni ID.

Sfumatura importante: il cancelletto # è obbligatorio nell'URL della voce di menu (è il formato dell'ancora HTML), ma nell'ID riga dentro Page Builder, non devi inserire il cancelletto, il builder capisce da solo che si tratta di un identificatore.

Maggiori dettagli sulla creazione dei menu in WordPress sono trattati nella nostra guida su come impostare la navigazione.

Salva il menu, assegnalo a un'area di visualizzazione del tema e apri il sito. Clicca su una voce del menu, la pagina scorrerà in modo fluido fino alla sezione desiderata.

⁉️🤔 Domande frequenti

XAMPP è obbligatorio o posso passare direttamente all'hosting?

XAMPP serve per i test in locale. Se hai già un hosting con WordPress, salta i passaggi 1 e 2, vai direttamente al tema e ai plugin. La logica delle ancore funziona allo stesso modo sia in locale che su un server live.

Posso usare un altro tema invece di SiteOrigin North?

Sì, quasi tutti i temi WordPress moderni supportano la struttura a pagina singola. L'importante è che il tema non entri in conflitto con SiteOrigin Page Builder. Gli sviluppatori di Page Builder garantiscono la compatibilità con la maggior parte dei temi del repository WordPress.

Questa configurazione funziona su Mac o Linux?

XAMPP è multipiattaforma, esistono versioni per Windows, macOS e Linux. Su Mac, puoi anche usare MAMP (versione gratuita). L'installazione di WordPress e dei plugin dopo aver configurato il server locale è identica su tutti i sistemi operativi.

Cosa fare se Apache non si avvia?

Le due cause più comuni: la porta 80 è occupata da un altro programma (Skype, IIS, un altro server web) oppure l'antivirus blocca l'attività di rete. Soluzione: cambia la porta di Apache in 8080 nel file httpd.conf oppure termina il processo che interferisce tramite netstat -ano | findstr :80 nella riga di comando.

Posso aggiungere altre sezioni in un secondo momento?

Sì. In qualsiasi momento, entra in Page Builder, aggiungi una nuova riga, assegnale un ID riga e crea una voce di menu con la stessa ancora. Il builder non limita il numero di sezioni.

Cosa hai ottenuto in un'ora

Un sito web a pagina singola funzionante su WordPress. Con un menu ad ancore, scorrimento fluido, editor live e interamente con strumenti gratuiti. La stessa configurazione XAMPP + SiteOrigin funziona anche per progetti commerciali: costruisci una landing page in locale, testala e trasferiscila su un hosting live tramite qualsiasi plugin di migrazione.

Stabilisci una regola: prima lo sviluppo in locale, poi la produzione. Questo fa risparmiare soldi sull'hosting durante gli esperimenti e risparmia i nervi quando qualcosa va storto.

Se il materiale ti è stato utile, prova a costruire il tuo primo sito a pagina singola oggi stesso. XAMPP e WordPress si scaricano in cinque minuti, e il builder SiteOrigin si occupa di tutto il layout.