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

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

Saltare questo passaggio può portare a sorprese per i tuoi visitatori: layout interrotti, immagini mancanti o refusi. Ci siamo passati anche noi, ma in realtà questi problemi sono facili da evitare.

In questo articolo, ti illustreremo modi efficaci per visualizzare in anteprima il tuo sito WordPress prima di andare online. In questo modo, potrai 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

Pronto? Iniziamo.

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

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

Questo ti permette di mostrare una pagina "coming soon" appropriata ai visitatori del sito web. 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 potrai visualizzare in anteprima il tuo sito web ed eseguire tutti i test necessari prima di metterlo online.

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 brand partner utilizzano effettivamente SeedProd per costruire i loro siti web. Abbiamo visto in prima persona quanto bene ha 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.

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, 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, l'interfaccia del page builder di SeedProd si aprirà sullo schermo.

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 'Connect' in alto. Da qui, puoi integrare il tuo servizio di email marketing per far crescere la tua lista e notificare le persone quando il tuo sito andrà 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 'coming soon' su 'Attivo'. Questo garantirà che tutti i visitatori del tuo sito web vedano la tua nuova pagina 'coming soon' invece del tuo sito web effettivo.

Ora puoi disconnetterti dall'area di amministrazione di WordPress o visitare il tuo sito web in modalità Incognito.

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 per consentire facilmente ai clienti di visualizzare in anteprima le modifiche su un sito web WordPress prima che vadano online.

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 la durata di scadenza dell'URL. Non dimenticare di salvare le tue modifiche.

I tuoi clienti possono ora utilizzare l'URL segreto per bypassare la pagina in arrivo e visualizzare in anteprima il sito web.

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 web. È nascosto al pubblico principale, dandoti il vantaggio di testare e visualizzare in anteprima le tue 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 aziende di hosting al mondo e un provider di hosting WordPress ufficialmente raccomandato. Offrono una funzionalità di sito di staging 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 Bluehost, puoi accedere al pannello di controllo del tuo account di hosting Bluehost e fare 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 che sei sicuro che il plugin Bluehost sia installato, 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 live.

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 tue modifiche sul sito web di staging, puoi tornare alla pagina del plugin Bluehost e navigare nella scheda ‘Staging’.

Da qui, seleziona ‘Distribuisci tutte le modifiche’ 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 potrebbero apparire sul tuo sito web con le tue intestazioni, barre laterali e tutto il resto della pagina.

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, ma queste ti mostreranno solo l'anteprima all'interno dell'editor dei contenuti.

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 viene immediatamente pubblicato sul tuo sito web.

Se non stai utilizzando un sito web di staging, i tuoi utenti vedranno il nuovo tema senza alcuna personalizzazione.

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

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 temi.

Qui vedrai un'anteprima live del tema con 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 apparirebbero sul tuo sito live?

WordPress offre diversi modi per visualizzare in anteprima il tuo tema WordPress prima di applicare tali modifiche.

Per la maggior parte dei temi WordPress, puoi visualizzare in anteprima le tue modifiche utilizzando il personalizzatore temi. Basta andare 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 web.

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.

Ora, questo metodo potrebbe non essere disponibile per i temi a blocchi di WordPress che utilizzano l'editor completo del sito.

In tal caso, puoi avviare l'editor visitando il menu Aspetto » Editor.

L'editor completo del sito 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.

Tuttavia, a differenza del personalizzatore del tema, non sarai in grado di salvare le modifiche come bozza. Queste modifiche andranno online quando salverai le modifiche o andranno perse se esci senza salvare.

Anteprima del tuo tema WordPress personalizzato

Vuoi creare un tema WordPress completamente personalizzato con un'anteprima live?

SeedProd è il miglior costruttore di temi WordPress che ti consente di creare un tema WordPress personalizzato utilizzando un'interfaccia drag-and-drop 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 è dotato di una serie di bellissimi temi e template 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 è dotato di un intuitivo builder 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 visualizzare in anteprima il tuo tema per 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. Queste pagine 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 altamente ottimizzati 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 con cui puoi progettare la tua pagina con un'anteprima dal vivo.

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 all'occhio umano. Questi includono spostamenti del layout, glitch nei caratteri, 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 template specifici direttamente dalla tua dashboard, senza bisogno di codice.

Puoi anche usarlo su un sito di staging per testare in sicurezza gli aggiornamenti prima di pubblicare qualsiasi cosa. Per maggiori dettagli, consulta la nostra guida completa su come eseguire test di regressione visiva.

Speriamo che questo articolo ti abbia aiutato a capire come visualizzare in anteprima il tuo sito WordPress prima di andare online. Potresti anche voler consultare i nostri consigli esperti per creare un piano di disaster recovery per WordPress e la nostra 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.