# Come creare una landing page che converte in WordPress URL: https://noonwp.com/it/journal/come-creare-landing-page-che-converte-wordpress Type: blog Locale: it Published: 2026-10-27 Updated: 2026-10-28 --- > Guida pratica per creare una landing page in WordPress: una sola azione, schizzo in grigio, hero testato, prove oneste, velocità, contrasto e RTL. Se vuoi capire come creare una landing page che converte, parti da una sola decisione: l'azione unica che il visitatore deve compiere. Tutto il resto, dalla struttura dell'hero al colore del pulsante, ne deriva. Abbozza le sezioni in scala di grigi, scrivi il titolo prima di toccare un blocco e taglia tutto ciò che non serve a quell'azione. Il resto di questo foglio spiega come farlo dentro WordPress, con il Site Editor, e con i limiti che incontrerai. ## Perché una landing page richiede un brief diverso da una homepage? Una homepage serve molti visitatori con molti obiettivi. Una landing page serve un solo visitatore con un solo obiettivo, di solito arrivato da un annuncio, una newsletter o un risultato di ricerca. Questa differenza cambia tutta la costruzione. La navigazione si riduce o scompare. I link secondari spariscono. Il footer perde la mappa del sito. In un block theme questo significa un template dedicato, non un menu nascosto in un template condiviso. Crea un template vuoto nel Site Editor, rimuovi la parte di template dell'intestazione e tieni solo il logo e la call to action. Resisti alla tentazione di riusare l'hero della homepage. Su un progetto cliente della scorsa primavera, un collega freelance ha riutilizzato il blocco Cover della homepage per una pagina di webinar e ha lasciato il menu completo. I visitatori sono finiti nel blog. Eliminare sette voci di menu è stata la correzione meno costosa del trimestre. ## Cosa abbozzare prima di aprire l'editor? Prima la carta. Disegna cinque o sei rettangoli impilati in verticale e dai un nome a ciascuno: hero, problema, soluzione, prova, dettagli dell'offerta, call to action finale. La maggior parte delle guide pubblicate, da HubSpot a Unbounce, concorda più o meno su questa sequenza, e regge perché riflette il modo in cui un lettore diffidente decide. ![Mani che abbozzano su carta a quadretti un layout di landing page in scala di grigi](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/0c95b2-i1.webp) Lavora in scala di grigi. Il colore nasconde una gerarchia debole, mentre uno schizzo in grigio la rivela subito. Se con tutto in grigio non riesci a dire quale rettangolo conta di più, nemmeno il visitatore ci riuscirà. Poi scrivi le parole. Titolo, una frase di supporto, etichetta del pulsante. Progetta sul testo reale, perché un layout costruito su lorem ipsum si rompe sempre quando il titolo vero occupa tre righe. In arabo o in ebraico, dove la stessa frase tende a essere più lunga, questo passaggio non è facoltativo. ## Come costruire un hero che invita a scorrere? L'hero ha quattro compiti: dichiarare il risultato, dire a chi è rivolta la pagina, proporre una sola azione e mostrare qualcosa che renda credibile la promessa. Un titolo che nomina un risultato (“Consegna un sito cliente in un pomeriggio”) batte un titolo che nomina una funzione (“Un page builder flessibile”). In Gutenberg costruisci l'hero con un blocco Cover che contiene un Gruppo, così puoi limitare la larghezza del contenuto indipendentemente dallo sfondo. Imposta il Gruppo a una larghezza di contenuto di circa 640-720 pixel, poi aggiungi un blocco Titolo, un Paragrafo e un solo blocco Pulsanti con un solo pulsante. Un pulsante solo. Due pulsanti significano due decisioni, e la seconda è di solito quella che viene cliccata. ![Laptop con un hero di landing page e un unico pulsante arancione di call to action](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/60199e-i2.webp) Mantieni onesto il supporto visivo. Uno screenshot reale del prodotto batte una foto decorativa. Se hai solo immagini astratte, usale con peso ridotto e lascia che sia il titolo a reggere la pagina. Evita i carousel nell'hero: seppelliscono il messaggio su slide che la maggior parte dei visitatori non vedrà mai. Nota a margine: questo layout funziona da WordPress 6.5 in poi, quando i vincoli di larghezza di Cover e Gruppo si comportano in modo prevedibile nel Site Editor. ## Quanta prova serve, e dove va? La prova risponde alla domanda che l'hero solleva: posso fidarmi? Mettila subito sotto l'hero, non in fondo, dove arriva solo il lettore già convinto. La prova buona è specifica. Un cliente con nome e un risultato misurato vale più di cinque stelle generiche. Una striscia di loghi aiuta se i loghi sono riconoscibili dal tuo pubblico, e una sola testimonianza con nome e ruolo reali pesa più di uno slider di citazioni anonime. Attenzione alle cifre che non sai documentare. Alcune guide molto diffuse citano tassi di conversione che nessuno strumento di analisi produrrebbe. Se citi un numero, dichiara da dove viene e quando è stato misurato, oppure omettilo. Un tuo prima e dopo, misurato sul tuo sito, vale più di qualsiasi statistica presa in prestito. ## Quali regole di layout contano di più su mobile? Gran parte del traffico delle landing arriva da annunci e social su smartphone, quindi progetta prima quella vista e allarga dopo. Usa una colonna singola, mantieni le righe corte e rendi la call to action raggiungibile con il pollice. ![Smartphone che mostra una landing page mobile a colonna singola con un pulsante grande](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/eee983-i3.webp) Tre regole coprono la maggior parte dei danni. Le aree toccabili devono essere di almeno 24 per 24 pixel CSS, che è il minimo dei WCAG 2.2 al livello AA, e preferibilmente molto più grandi per il pulsante principale. Il testo del corpo deve essere leggibile senza zoom. E ripeti la call to action dopo la sezione delle prove, così nessuno deve risalire per trovarla. In un block theme gestisci gli spazi con la scala definita in theme.json invece di padding personalizzati su ogni blocco. La [documentazione di riferimento di theme.json di WordPress](https://developer.wordpress.org/themes/advanced-topics/theme-json/) descrive i preset, e usarli mantiene il ritmo di mobile e desktop coerente senza un foglio di stile pieno di override. ## Cosa c'entra la velocità con il design? Tutto. Una landing page che sembra eccellente ma carica lentamente perde il visitatore prima che appaia il titolo. Google considera buono un Largest Contentful Paint di 2,5 secondi o meno, e in una landing page l'elemento più grande è quasi sempre l'immagine dell'hero o il titolo. La [spiegazione di web.dev sull'LCP](https://web.dev/articles/lcp) mostra come viene misurato. Le conseguenze pratiche seguono. Comprimi l'immagine dell'hero e servila in WebP. Non applicare il lazy loading all'immagine dell'hero, perché è l'elemento che vuoi far comparire per primo. Limita i web font a una sola famiglia, idealmente un variable font self-hosted con un fallback sensato. Elimina slider, video in autoplay e widget di chat di terze parti dalla prima schermata. È qui che le landing WordPress spesso perdono contro i builder in hosting. Una pagina assemblata da un tema multiuso pesante può spedire centinaia di kilobyte di CSS inutilizzato. Un block theme snello con un template dedicato ne spedisce molto meno, e quella differenza si vede direttamente nell'LCP. ## Contrasto, accessibilità e RTL: come gestirli? L'accessibilità è un vincolo di progetto, non un controllo finale. Il criterio WCAG 2.2 sul contrasto chiede almeno 4,5 a 1 tra testo normale e sfondo, e la [spiegazione del W3C sul criterio di contrasto minimo](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) mostra come verificarlo. Una didascalia grigio chiaro su una card bianca non passa, e non passano molti pulsanti pastello con etichette bianche. Controlla prima il pulsante. È l'elemento per cui esiste tutta la pagina, ed è spesso quello con il contrasto più debole, perché è stato scelto per il colore del brand e non per la leggibilità. ![Due monitor che mostrano un layout da sinistra a destra e la sua versione speculare da destra a sinistra](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/58b0a1-i4.webp) Per un pubblico bilingue o per arabo ed ebraico, lo specchio non significa soltanto capovolgere la pagina. Le icone che indicano una direzione, come le frecce sul pulsante, devono essere invertite. Padding e margini devono usare proprietà logiche (inizio e fine di riga) invece di sinistra e destra. I font vanno provati alla dimensione del titolo, perché molti caratteri di display latini non hanno un corrispettivo arabo e il fallback cambia il peso visivo. Testa la vista RTL su un dispositivo reale con testi reali. Un layout speculare che sembra a posto con testo segnaposto può rompersi quando il titolo arabo vero va a capo in modo diverso. ## Quali strumenti hanno senso, e come testare la pagina dopo il lancio? Hai tre opzioni oneste. Costruirla in modo nativo nel Site Editor con i pattern, che dà la pagina più leggera e il massimo controllo ma richiede più lavoro. Usare un builder visuale come Divi, che accelera il layout e sacrifica un po' di peso della pagina. Oppure generare una prima bozza con un costruttore di siti basato sull'IA e poi ricostruire a mano le parti che contano. Diffida di ogni strumento che promette una pagina finita e capace di convertire con un solo prompt. La struttura generata è un buon punto di partenza per l'ordine delle sezioni e per i testi segnaposto. Raramente è il design finale, e il markup spesso va ripulito prima che un cliente possa mantenerlo. Se la pagina vive fuori da WordPress, un builder ospitato come Framer o Webflow è una scelta legittima per una campagna che durerà sei settimane e poi sparirà. Scegli in base alla durata della pagina e a chi la modificherà, non alla demo. Il lancio è l'inizio della misurazione. Imposta un evento di conversione, collegalo al tuo strumento di analisi e verifica che gli invii del modulo vengano davvero tracciati prima di mandare traffico. Una pagina che non sa riportare i propri risultati non si può migliorare. Cambia una cosa alla volta. Prima il titolo, perché ha l'effetto più grande, poi l'etichetta del pulsante, poi l'ordine delle prove. Lascia ogni test abbastanza a lungo da raccogliere un numero significativo di conversioni, invece di fermarti al primo giorno promettente. Con un pubblico piccolo un test può durare settimane, ed è normale. La pazienza batte un falso vincitore. Due aspetti pratici si dimenticano facilmente. Se la pagina esiste solo per campagne a pagamento, decidi se indicizzarla, perché un duplicato sottile della tua offerta può competere con la pagina principale. E se il modulo raccoglie dati personali, aggiungi prima del lancio la formula di consenso richiesta dalla tua regione, non dopo il primo reclamo. Per questa settimana: apri un template vuoto nel Site Editor e costruisci solo l'hero, con testi reali e un solo pulsante. Poi controllalo sul telefono e misura il suo LCP. Salva un pattern da quella sezione, così la prossima pagina di un cliente parte da una sezione già testata invece che da una tela vuota. ## FAQ ### Quanto deve essere lunga una landing page? Quanto basta per rispondere ai dubbi del visitatore, e non di più. Un'offerta semplice può bastare con hero, prova e pulsante in meno di 600 parole. Un'offerta più costosa o poco familiare richiede più spiegazioni, con la call to action ripetuta dopo ogni sezione importante. ### Quali sono le parti essenziali di una landing page? Un titolo che dichiara il risultato, una riga di supporto che dice a chi è rivolta, una sola call to action, una prova come una testimonianza con nome o un risultato misurato, e una breve spiegazione dell'offerta. Menu e link secondari vanno eliminati o ridotti. ### Si può progettare una buona landing page in WordPress senza page builder? Sì. Un block theme con un template dedicato, un hero basato su Cover e pattern per le sezioni ripetute danno una pagina veloce e facile da mantenere. Un builder visuale accelera il layout, ma di solito produce più CSS e markup. ### Una landing page deve avere un menu di navigazione? Di solito no. Il menu offre uscite che fanno concorrenza al tuo unico obiettivo. Tieni il logo e la call to action principale, e sposta i link legali in un footer minimo. ### Quanto deve caricarsi velocemente una landing page? Punta a un Largest Contentful Paint di 2,5 secondi o meno, che Google considera buono. Comprimi e precarica l'immagine dell'hero, evita di applicarle il lazy loading, e tieni la prima schermata libera da slider e widget di terze parti. ### Come si progetta una landing page per le lingue da destra a sinistra? Specchia il layout con proprietà CSS logiche, inverti le icone direzionali, prova i font alla dimensione del titolo e verifica la pagina con testi reali in arabo o ebraico su telefono, perché lunghezza e a-capo del testo cambiano rispetto alla versione latina.