Come visualizzare in anteprima il tuo sito WordPress prima di andare online

Una cosa che diciamo sempre ai nostri lettori è di **anteporre sempre** l'anteprima prima di pubblicare. Nel corso degli anni, abbiamo creato e aggiornato migliaia di pagine e articoli di WordPress, e l'anteprima dei contenuti prima che vadano online è diventata una parte fondamentale del nostro processo editoriale.

Saltare questo passaggio può portare a spiacevoli sorprese per i tuoi visitatori, come layout rotti, immagini mancanti o refusi. Ci siamo passati anche noi, ma davvero, questi problemi sono facili da evitare.

In questo articolo, ti guideremo attraverso modi efficaci per visualizzare in anteprima il tuo sito web WordPress prima di andare online, in modo da poter essere sicuro che il tuo sito appaia e funzioni esattamente come desideri. 🧑‍💻

Ecco una rapida panoramica degli argomenti che tratteremo in questa guida. Sentiti libero di utilizzare i link qui sotto per saltare a sezioni specifiche:

• Anteprima del sito WordPress prima del lancio con la modalità "Coming Soon"
• Consenti ai clienti di visualizzare in anteprima il sito WordPress prima di andare online
• Crea un sito di staging WordPress per visualizzare in anteprima le modifiche
• Anteprima di articoli e pagine WordPress prima della pubblicazione
• Anteprima di un tema WordPress prima di cambiarlo
• Anteprima delle personalizzazioni del tema WordPress
• Anteprima del tuo tema WordPress personalizzato
• Anteprima delle landing page WordPress prima del lancio
• Suggerimento bonus 🌟: Individua problemi di design con il test di regressione visiva
• FAQ: Anteprima di un sito WordPress prima di andare online
• Prossimi passi per migliorare la gestione del sito WordPress

Pronto? Iniziamo.

Anteprima del sito WordPress prima del lancio con la modalità "Coming Soon"

Se stai creando un nuovo sito web WordPress, è sempre una buona idea abilitare la modalità "coming soon" mentre lavori sul tuo sito.

Questo ti permette di mostrare una pagina "coming soon" professionale ai tuoi visitatori. Sarai comunque in grado di accedere all'area di amministrazione di WordPress e lavorare sul tuo sito web, ma i tuoi visitatori non potranno vederlo.

La parte migliore è che sarai in grado di visualizzare in anteprima il tuo sito web ed eseguire tutti i test necessari prima di renderlo pubblico.

Per fare ciò, avrai bisogno di SeedProd. È il miglior costruttore di siti web WordPress sul mercato e ti permette di mostrare facilmente una bellissima pagina "coming soon".

Alcuni dei nostri marchi partner utilizzano SeedProd per costruire i loro siti web. Abbiamo visto in prima persona quanto bene abbia funzionato per loro, e abbiamo utilizzato lo strumento molte volte quando scrivevamo tutorial per i nostri lettori.

Se vuoi saperne di più sul plugin, consulta la nostra recensione dettagliata di SeedProd.

Per iniziare, dovrai creare un account SeedProd. Sul sito web SeedProd, fai clic sul pulsante ‘Ottieni SeedProd Ora’, scegli un piano e completa il processo di checkout.

Una volta fatto, avrai il tuo pannello di controllo dell'account SeedProd, dove potrai trovare il file zip e la chiave di licenza di SeedProd Pro.

Successivamente, devi installare e attivare il plugin SeedProd.

Dal tuo pannello di amministrazione di WordPress, andiamo su Plugin » Aggiungi Nuovo Plugin.

Successivamente, utilizza la barra di ricerca per trovare rapidamente il plugin.

Nei risultati della ricerca, fai semplicemente clic sul pulsante ‘Installa Ora’ e poi su ‘Attiva’ per abilitarlo sul tuo sito.

Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, visita la pagina SeedProd » Impostazioni per inserire la tua chiave di licenza. Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.

Successivamente, vai alla schermata SeedProd » Pagine di destinazione dall'area di amministrazione di WordPress.

Da qui, fai semplicemente clic sul pulsante ‘Imposta una pagina in arrivo’.

Successivamente, il plugin ti chiederà di scegliere un modello per la tua pagina in arrivo.

SeedProd è dotato di diversi bellissimi modelli di pagina in arrivo progettati professionalmente per aumentare le conversioni.

Dopo aver scelto un modello, si aprirà l'interfaccia del page builder di SeedProd.

Il page builder è uno strumento di progettazione intuitivo. Puoi semplicemente puntare e fare clic per modificare qualsiasi elemento o trascinare e rilasciare nuovi elementi nel tuo layout dalla colonna di sinistra.

Puoi anche aggiungere un modulo di iscrizione via email e pulsanti dei social media alla tua pagina in arrivo in modo che i tuoi utenti possano seguire il tuo brand anche prima del lancio.

Una volta terminata la progettazione della pagina, passa alla scheda ‘Connetti’ in alto. Da qui, puoi integrare il tuo servizio di email marketing per far crescere la tua lista e notificare alle persone quando il tuo sito sarà online.

Per istruzioni più dettagliate, potresti voler consultare il nostro tutorial su come creare pagine 'coming soon' in WordPress con SeedProd.

Una volta terminato, fai clic sul pulsante 'Salva' per memorizzare le tue modifiche.

Quindi, seleziona 'Pubblica' per rendere la tua pagina 'coming soon' pronta all'uso. Non preoccuparti, non è ancora attiva sul tuo sito web. Lo faremo nel prossimo passaggio.

Ora puoi chiudere l'interfaccia del page builder, che ti riporterà alla schermata SeedProd » Landing Pages.

Qui, fai clic sull'interruttore sotto la casella della pagina in arrivo per impostarla su ‘Attiva’. Questo assicura che tutti i tuoi visitatori vedano la tua nuova pagina in arrivo invece del tuo sito web effettivo.

Ora puoi disconnetterti dall'area di amministrazione di WordPress o visitare il tuo sito web in una finestra di navigazione in incognito/privata.

Vedrai la tua pagina 'coming soon' attiva sul tuo sito web.

Puoi ancora accedere alla tua dashboard di WordPress e continuare a lavorare sul tuo sito web.

Sarai anche in grado di visualizzare in anteprima il tuo sito web attivo quando sei connesso.

Una volta terminato il lavoro sul tuo sito, puoi semplicemente andare alla schermata SeedProd » Landing Pages per disattivare la tua pagina 'coming soon'.

Qui, fai clic sul cursore 'Attivo' per reimpostarlo su inattivo.

Consenti ai clienti di visualizzare in anteprima il sito WordPress prima di andare online

Se stai lavorando su siti web di clienti, ci sono diversi modi semplici per consentire ai clienti di visualizzare in anteprima le modifiche prima che vengano pubblicate.

Tuttavia, il modo più semplice è utilizzare una Pagina In Arrivo creata con SeedProd, come abbiamo appena mostrato sopra.

Una volta attivata la Modalità In Arrivo, devi fare clic sul pulsante 'Modifica Pagina'.

Questo lancerà il page builder sul tuo schermo, dove dovrai passare alla scheda Impostazioni Pagina.

Quindi, fai clic sulla sezione 'Controllo Accessi'.

Da qui, puoi creare un URL di bypass e scegliere per quanto tempo l'URL dovrebbe rimanere attivo. Non dimenticare di salvare le modifiche.

I tuoi clienti possono ora utilizzare l'URL segreto per bypassare la pagina "coming soon" e visualizzare in anteprima il sito web. Questo consente loro di vedere i tuoi progressi senza che tu debba creare un account utente per loro.

Se il tuo sito web è già online e vuoi condividere le modifiche con i tuoi clienti prima di andare online, lo tratteremo nel prossimo passaggio.

Crea un sito di staging WordPress per visualizzare in anteprima le modifiche

È una prassi standard tra i professionisti del web creare un sito web di staging in modo da poter testare e visualizzare in anteprima qualsiasi modifica prima di applicarla a un sito live.

Un sito web di staging è un clone privato del tuo sito. È nascosto al pubblico, permettendoti di testare e visualizzare in anteprima le modifiche sul tuo server live.

Molte delle migliori aziende di hosting WordPress offrono un sito di staging con 1 clic. Puoi semplicemente fare clic su un pulsante per creare un sito di staging e sincronizzare facilmente le modifiche apportate con il tuo sito live.

Per questo articolo, ti mostreremo come creare un sito di staging su Bluehost.

Bluehost è una delle più grandi società di hosting al mondo e un provider di hosting WordPress ufficialmente raccomandato da WordPress.org. Offrono una funzionalità di staging site con 1 clic a tutti i loro clienti WordPress.

Innanzitutto, devi assicurarti che il plugin Bluehost sia installato e attivato sul tuo sito web. Se è già attivato, vedrai una voce di menu Bluehost nella parte superiore del menu di amministrazione di WordPress.

Se non riesci a vedere il menu di Bluehost, puoi accedere al pannello di controllo del tuo account di hosting Bluehost. Da lì, fai clic sul pulsante "Siti web".

Dopo, fai clic su ‘Impostazioni’ sul tuo sito web.

Nell'area di gestione del sito, passa alla scheda ‘Plugin’.

Quindi, attiva il plugin Bluehost.

Una volta confermato che il plugin Bluehost è installato e attivo, sei pronto per creare il tuo sito di staging.

Dall'area di amministrazione di WordPress, fai clic sulla pagina del plugin Bluehost e passa alla scheda ‘Staging’.

Dopo, fai clic su ‘Crea sito di staging’.

Il plugin genererà quindi il tuo sito web di staging.

Una volta terminato, puoi fare clic su ‘Non in modifica’ per passare al sito di staging e iniziare a lavorarci.

Ora puoi lavorare sul tuo sito web di staging e vedere le tue modifiche in un'anteprima dal vivo.

Una volta passato, vedrai un avviso rosso ‘Ambiente di staging’ nella barra di amministrazione di WordPress.

Questo serve per aiutarti a distinguere dal tuo sito live.

Una volta terminata l'anteprima delle modifiche sul sito web di staging, puoi tornare alla pagina del plugin Bluehost e navigare alla scheda 'Staging'.

Da qui, seleziona 'Deploy All Changes' e fai clic sul pulsante di aggiornamento per rendere live le modifiche.

Per maggiori dettagli e istruzioni per altri ambienti di hosting, consulta la nostra guida dettagliata su come creare un sito di staging per WordPress.

Anteprima di articoli e pagine WordPress prima della pubblicazione

WordPress utilizza un editor a blocchi intuitivo che utilizza automaticamente lo stile del tuo tema per mostrare un'anteprima live dei tuoi post e delle tue pagine.

Tuttavia, potrebbe non darti un'idea chiara di come un post o una pagina appariranno sul tuo sito con le tue intestazioni, barre laterali e altri elementi di layout.

Fortunatamente, l'editor a blocchi ti consente anche di visualizzare in anteprima un post o una pagina senza pubblicarla.

Fai semplicemente clic sul pulsante ‘Anteprima’ nell'angolo in alto a destra.

Puoi scegliere tra le opzioni di anteprima Desktop, Tablet e Mobile. Ti consigliamo di controllare sempre l'anteprima Mobile per assicurarti che i tuoi contenuti siano belli anche su schermi più piccoli.

Dopo aver scelto un tipo di dispositivo, fai clic sull'opzione ‘Anteprima in una nuova scheda’ per visualizzare l'anteprima completa sul tuo sito web.

WordPress ti mostrerà quindi un'anteprima del tuo post o della tua pagina prima che venga pubblicato.

Se desideri consentire a qualcun altro l'accesso esclusivo per visualizzare in anteprima uno dei tuoi post non pubblicati, consulta la nostra guida su come consentire anteprime pubbliche dei post in WordPress.

Anteprima di un tema WordPress prima di cambiarlo

Normalmente, se attivi un tema WordPress, questo va immediatamente live sul tuo sito web. Se non stai usando un sito di staging, i tuoi utenti vedranno il nuovo tema senza alcuna personalizzazione.

Ma non sarebbe bello poter visualizzare in anteprima un tema WordPress prima di attivarlo sul tuo sito?

Fortunatamente, WordPress ti consente di visualizzare in anteprima un tema prima di attivarlo.

Installa semplicemente il tema WordPress che desideri visualizzare in anteprima. Per maggiori dettagli, consulta la nostra guida su come installare un tema WordPress.

Dopo aver installato il tema, fai clic sul link ‘Anteprima dal vivo’.

In alternativa, puoi anche visitare la pagina Aspetto » Temi e passare il mouse sopra un tema installato.

Vedrai un pulsante per avviare l'anteprima live.

WordPress avvierà quindi il Personalizzatore del tema.

Qui vedrai un'anteprima dal vivo del tema utilizzando i tuoi contenuti attuali:

Il personalizzatore del tema utilizzerà i tuoi contenuti esistenti e il menu di navigazione. Puoi provare diverse impostazioni del tema dal pannello di sinistra.

Puoi uscire dal personalizzatore del tema senza attivare il tema. Tuttavia, questo non salverà le tue personalizzazioni.

Se sei soddisfatto dell'aspetto del tema, puoi procedere e attivarlo facendo clic sul pulsante 'Attiva e pubblica' in cima al menu.

Hai bisogno di aiuto per cambiare tema? Consulta il nostro tutorial su come cambiare correttamente il tuo tema WordPress.

Anteprima delle personalizzazioni del tema WordPress

Vuoi apportare modifiche al tuo tema WordPress ma non sei sicuro di come appariranno sul tuo sito live?

WordPress offre diversi modi per visualizzare in anteprima le modifiche al tuo tema prima di applicarle.

Per la maggior parte dei temi WordPress, puoi visualizzare in anteprima le tue modifiche utilizzando il personalizzatore del tema. Vai semplicemente alla pagina Aspetto » Personalizza per avviarlo.

Da qui, puoi provare diverse opzioni del tema, cambiare menu, personalizzare widget, aggiungere CSS personalizzato e altro ancora.

Questo ti permette di visualizzare in anteprima le modifiche al tema senza applicarle effettivamente al tuo sito live.

Una volta che sei soddisfatto delle modifiche apportate, puoi fare clic sul pulsante 'Pubblica' per applicare tali modifiche. Facoltativamente, puoi anche fare clic sull'icona dell'ingranaggio per salvare le modifiche come bozza, pianificare le modifiche e condividere un link di anteprima con i clienti.

Tuttavia, tieni presente che il Personalizzatore del tema non è disponibile per i temi a blocchi di WordPress.

Se stai utilizzando un tema a blocchi, puoi avviare l'editor visitando il menu Aspetto » Editor.

L'Editor del sito completo ti consente di modificare il tuo tema WordPress utilizzando i blocchi. Puoi modificare singoli file di modello con un'anteprima live del tuo sito web.

Per maggiori dettagli, puoi consultare la nostra guida completa alla modifica completa del sito di WordPress.

Tieni presente che l'Editor del sito applica le modifiche direttamente al tuo design.

A differenza del Personalizzatore del tema, non esiste un pulsante 'Salva bozza', quindi le tue modifiche saranno live sul tuo sito non appena premi il pulsante Salva (o andranno perse se esci senza salvare).

Anteprima del tuo tema WordPress personalizzato

Vuoi creare un tema WordPress completamente personalizzato con un'anteprima live, senza scrivere codice?

SeedProd è il miglior costruttore di temi WordPress che ti consente di creare un tema WordPress personalizzato utilizzando un'interfaccia visiva con un'anteprima live.

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, visita la pagina SeedProd » Impostazioni per inserire la tua chiave di licenza. Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.

Successivamente, devi visitare la pagina SeedProd » Theme Builder.

Da qui, fai clic sul pulsante ‘Themes’.

Questo aprirà un popup dove potrai scegliere un tema da utilizzare come punto di partenza.

SeedProd viene fornito con una raccolta di bellissimi temi e modelli che puoi personalizzare.

Fai semplicemente clic per selezionare un tema e SeedProd genererà tutti i file del template del tema per te.

Ora puoi fare clic su uno qualsiasi di questi file del tema per modificarli nel theme builder.

SeedProd include un intuitivo costruttore drag-and-drop che utilizza blocchi e sezioni per creare bellissimi layout.

Puoi aggiungere blocchi al tuo design dalla colonna di sinistra. Sulla destra, vedrai un'anteprima live e modificabile del tuo template del tema.

SeedProd offre anche il pieno supporto per WooCommerce.

Ciò significa che puoi progettare e visualizzare in anteprima il tuo negozio online, incluse le pagine dei prodotti, le pagine di checkout e altro ancora.

Vuoi vedere in anteprima come appare il tuo tema sui dispositivi mobili?

Fai semplicemente clic sull'icona del cellulare nella barra in basso e SeedProd mostrerà l'anteprima mobile del tuo tema.

Una volta terminata la modifica del tema, puoi fare clic sul pulsante 'Salva' in alto a destra ed uscire dal builder. Puoi quindi modificare altri modelli, se necessario.

Quando sei pronto per distribuire il tuo tema personalizzato, attiva semplicemente l'interruttore 'Abilita tema SeedProd' nella pagina del tema builder.

Il tuo tema personalizzato sarà ora attivo. Ciò significa che sostituirà il tuo tema WordPress esistente.

Per saperne di più sul builder di temi personalizzati SeedProd, consulta il nostro tutorial su come creare un tema WordPress personalizzato senza scrivere codice.

Anteprima delle landing page WordPress prima del lancio

Le landing page sono pagine specializzate utilizzate nelle campagne di marketing e sono altamente ottimizzate per conversioni e vendite.

Alcuni temi WordPress sono dotati di modelli di landing page che puoi personalizzare utilizzando l'editor a blocchi.

Tuttavia, se hai bisogno di maggiori opzioni di progettazione, allora avrai bisogno di SeedProd. È il miglior costruttore di landing page di WordPress e ti consente di creare facilmente bellissime landing page per il tuo sito web.

SeedProd viene fornito con decine di modelli di landing page progettati professionalmente per iniziare. Inoltre, le tue landing page avranno un aspetto ugualmente eccezionale su tutte le dimensioni dello schermo.

Innanzitutto, devi installare e attivare il plugin SeedProd. Dopo l'attivazione, devi visitare la pagina SeedProd » Impostazioni per inserire la tua chiave di licenza.

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.

Successivamente, vai alla schermata SeedProd » Pagine di destinazione dalla barra laterale di amministrazione di WordPress.

Per iniziare a progettare la tua pagina, fai clic sul pulsante 'Aggiungi nuova pagina di destinazione'.

Successivamente, devi scegliere un modello.

Ci sono diversi modelli ad alta conversione che puoi utilizzare come punto di partenza, oppure puoi iniziare con un modello vuoto.

Questo aprirà un popup in cui dovrai inserire un nome per la tua pagina di destinazione e scegliere uno slug URL.

Quindi fai clic sul pulsante 'Salva e inizia a modificare la pagina' per continuare.

Questo avvierà l'interfaccia del page builder.

È uno strumento di progettazione drag-and-drop dove puoi costruire la tua pagina con un'anteprima live.

Una volta terminata la modifica della tua pagina di destinazione, puoi fare clic sul pulsante 'Salva' e selezionare 'Pubblica' per renderla attiva sul tuo sito web.

Per saperne di più, consulta il nostro tutorial su come creare pagine di destinazione in WordPress.

Suggerimento bonus 🌟: Individua i problemi di progettazione con il test di regressione visiva

Vuoi portare la gestione del tuo sito un passo avanti? Il test di regressione visiva ti aiuta a confrontare automaticamente gli screenshot del tuo sito web prima e dopo aver apportato modifiche.

È uno dei modi migliori per individuare problemi di progettazione che spesso sfuggono alle revisioni manuali. Questi includono spostamenti del layout, glitch nei font, discrepanze di colore o problemi di spaziatura che appaiono solo su determinate pagine o dimensioni dello schermo.

Ad esempio, anche qualcosa di piccolo come un aggiornamento di un plugin può interrompere involontariamente lo stile di un modulo di contatto o spostare elementi fuori allineamento.

Gli strumenti di regressione visiva evidenziano queste differenze affiancate, in modo da poterle individuare e correggere prima che i tuoi visitatori se ne accorgano.

Il modo più semplice per iniziare è utilizzare il plugin VRTs per WordPress. Ti consente di eseguire test di confronto visivo su pagine o modelli specifici direttamente dalla tua dashboard.

Puoi persino usarlo su un sito di staging per testare in sicurezza gli aggiornamenti prima di pubblicare eventuali modifiche. Per i dettagli, consulta la nostra guida completa su come eseguire test di regressione visiva.

FAQ: Anteprima di un sito WordPress prima di andare online

Vediamo alcune risposte rapide alle domande comuni che i lettori pongono spesso riguardo al test o alla creazione di un sito in privato.

Come si testa un tema WordPress senza andare online?

Il modo più semplice è utilizzare un sito di staging. La maggior parte degli host WordPress offre lo staging con un clic, così puoi installare temi, personalizzare layout e visualizzare le modifiche senza influire sul tuo sito live.

Come si può lavorare su un sito WordPress senza andare online?

Hai alcune opzioni: utilizzare un sito di staging per creare, modificare e testare in privato, creare un sito locale sul tuo computer, o mettere il tuo sito in modalità di manutenzione con un plugin in modo che i visitatori non vedano pagine incomplete mentre lavori.

Quanto tempo ci vuole perché un sito WordPress vada online?

Se il tuo dominio è già collegato al tuo account di hosting, un sito può andare online quasi istantaneamente. Se stai aggiornando i DNS o spostando host, potrebbero essere necessarie alcune ore (fino a 24-48 ore) affinché le modifiche si propaghino completamente in tutto il mondo.

È possibile lanciare un sito web WordPress in 2 ore?

Sì, è possibile, specialmente se stai utilizzando un tema pronto o un modello di partenza. Puoi configurare l'hosting, installare WordPress, scegliere un tema e pubblicare un sito di base nel giro di un paio d'ore. Potrebbe richiedere più tempo se desideri design personalizzati, funzionalità avanzate o più pagine.

Prossimi passi per migliorare la gestione del sito WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare in anteprima il tuo sito web WordPress prima di andare online.

Potresti anche voler consultare le nostre guide esperte su:

• Tipi di Post Personalizzati WordPress Più Utili
• Come Non Pubblicare una Pagina WordPress (Modi Semplici)
• Come aggiungere o rimuovere capacità ai ruoli utente in WordPress
• Come Creare un Piano di Recupero Disastri per WordPress
• Guida definitiva alla manutenzione di WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.