Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come visualizzare l’anteprima del sito web WordPress prima di andare in onda

Nel corso degli anni, abbiamo scritto e aggiornato migliaia di blog e creato diverse landing page in WordPress. Una delle fasi più importanti del nostro processo editoriale è vedere l’anteprima di ogni contenuto prima di pubblicarlo.

L’anteprima del sito web prima di pubblicarlo consente di individuare eventuali errori, problemi di progettazione, elementi mancanti ed errori ortografici o grammaticali.

In questo articolo vi mostreremo come visualizzare facilmente l’anteprima del vostro sito web prima della messa in funzione, senza danneggiare l’esperienza dell’utente.

Preview your WordPress website including theme, posts, pages, and more

Ecco una rapida panoramica degli argomenti trattati in questa guida. Utilizzate pure i link sottostanti per passare a sezioni specifiche:

Pronti? Iniziamo.

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

Se state creando un nuovo sito web WordPress, è sempre consigliabile attivare la modalità coming soon mentre lavorate al vostro sito.

Ciò consente di visualizzare una vera e propria pagina coming soon ai visitatori del sito web. Potrete comunque accedere all’area di amministrazione di WordPress e lavorare sul vostro sito web, ma i vostri visitatori non potranno vederlo.

La cosa migliore è che potrete vedere in anteprima il vostro sito e fare tutti i test necessari prima di renderlo operativo.

Per farlo, avrete bisogno di SeedProd. È il miglior costruttore di siti web WordPress sul mercato e vi permette di mostrare facilmente una bella pagina coming soon.

Per saperne di più, consultate la nostra recensione dettagliata di SeedProd.

Nota: in questo tutorial utilizzeremo la versione pro di SeedProd, in modo da poter utilizzare tutti i modelli e le funzionalità avanzate, ma esiste anche una versione gratuita che potete utilizzare per creare facilmente semplici pagine coming soon.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina SeedProd ” Impostazioni per inserire la chiave di licenza. Queste informazioni si trovano nel proprio account sul sito web di SeedProd.

SeedProd license key

Quindi, accedere alla schermata SeedProd ” Pagine di destinazione dalla dashboard di WordPress.

Da qui, basta cliccare sul pulsante “Imposta una pagina Coming Soon”.

Set up coming soon page

Successivamente, il plugin vi chiederà di scegliere un modello per la vostra pagina coming soon.

SeedProd è dotato di diversi bellissimi modelli coming soon, progettati in modo professionale per aumentare le conversioni.

Choose template

Dopo aver scelto un modello, si aprirà l’interfaccia del costruttore di pagine di SeedProd.

Il builder di pagina è uno strumento di progettazione intuitivo. È sufficiente puntare e cliccare per modificare qualsiasi elemento o trascina e rilascia nuovi elementi nel layout dalla colonna di sinistra.

Page builder interface

Potete anche aggiungere un modulo di iscrizione via e-mail e pulsanti per i social media alla vostra pagina coming soon, in modo che gli utenti possano seguire il vostro marchio anche prima del lancio.

Una volta terminato il design della pagina, passate alla scheda Connetti in alto. Da qui, potete integrare il vostro servizio di email marketing per far crescere la vostra lista e avvisare le persone quando il vostro sito sarà attivo.

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

Connect email marketing service

Una volta terminato, fare clic sul pulsante “Salva” per memorizzare le modifiche.

Quindi, selezionate Pubblica per rendere la vostra pagina coming soon pronta all’uso. Non preoccupatevi, non è ancora attiva sul vostro sito web. Lo faremo nella fase successiva.

Publish your coming soon page

A questo punto è possibile chiudere l’interfaccia del costruttore di pagine, per tornare alla schermata SeedProd ” Pagine di destinazione “.

A questo punto, cliccate su “Attivo/disattivo” sotto la casella della pagina coming soon. In questo modo tutti i visitatori del sito web vedranno la nuova pagina “coming soon” invece del sito web vero e proprio.

Turn on coming soon mode

Ora potete uscire dall’area di amministrazione di WordPress o visitare il vostro sito web in modalità Incognito.

Vedrete la vostra pagina coming soon in diretta sul vostro sito web.

Coming soon mode

Potete comunque accedere all’area di amministrazione di WordPress e continuare a lavorare sul vostro sito web.

Potrete anche visualizzare un’anteprima del vostro sito web dal vivo quando avrete effettuato l’accesso.

Preview your website

Una volta terminato il lavoro sul sito, è sufficiente andare alla schermata SeedProd ” Pagine di destinazione per disattivare la pagina coming soon.

Qui, fare clic sul cursore “Attivo” per riportarlo inattivo.

Turn off coming soon page

SeedProd consente inoltre di mettere facilmente il sito web in modalità di manutenzione mentre si lavora sul sito web con un’anteprima dal vivo.

Consentire ai clienti di visualizzare un’anteprima del sito WordPress prima di andare in onda

Se lavorate su siti web di clienti, ci sono diversi modi per consentire ai clienti di vedere in anteprima le modifiche apportate a un sito WordPress prima di renderlo operativo.

Tuttavia, il modo più semplice è utilizzare una pagina Coming Soon creata con SeedProd, come abbiamo appena mostrato sopra.

Una volta attivata la modalità Coming Soon, è necessario fare clic sul pulsante “Modifica pagina”.

Edit coming soon page

In questo modo si avvierà il costruttore di pagine sullo schermo, dove si dovrà passare alla scheda Impostazioni della pagina.

Quindi, fare clic sulla sezione “Controllo degli accessi”.

Allowing clients to preview a website

Da qui è possibile creare un URL di bypass e scegliere la durata di scadenza dell’URL. Non dimenticate di salvare le modifiche.

I vostri clienti possono ora utilizzare l’URL segreto per bypassare la pagina coming soon e visualizzare l’anteprima del sito web.

Se il vostro sito web è già attivo e volete condividere le modifiche con i vostri clienti prima della messa in funzione, ne parleremo nella fase successiva.

Creare un sito web WordPress di staging per visualizzare le modifiche in anteprima

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

Un sito web di staging è un clone privato del vostro sito web. È nascosto al pubblico principale e offre il vantaggio di testare e visualizzare in anteprima le modifiche apportate sul server live.

Molte delle migliori società di hosting WordPress offrono un sito web di staging con un solo clic. È sufficiente fare clic su un pulsante per creare un sito di staging e sincronizzare facilmente tutte le modifiche apportate con il sito live.

In questo articolo vi mostreremo come creare un sito web di prova su Bluehost.

Bluehost è una delle maggiori società di hosting al mondo e un fornitore di hosting WordPress ufficialmente raccomandato. Offre una funzione di sito di staging in un clic a tutti i suoi clienti WordPress.

Innanzitutto, è necessario assicurarsi che il plugin Bluehost sia installato e attivato sul sito web. Se è già attivato, vedrete una voce di menu Bluehost in alto nel menu di amministrazione di WordPress.

Bluehost plugin installed

Se non si riesce a visualizzare il menu di Bluehost, è possibile accedere al pannello di controllo del proprio account di hosting Bluehost e fare clic sul pulsante “Siti web”.

Successivamente, fare clic su “Impostazioni” sul proprio sito web.

Bluehost site settings

Nell’area di gestione del sito, passare alla scheda “Plugin”.

Quindi, attivare il plugin Bluehost.

Activating the Bluehost plugin from the Bluehost dashboard

Dopo essersi assicurati che il plugin Bluehost sia installato, si è pronti a creare il sito di staging.

Dall’area di amministrazione di WordPress, fare clic sulla pagina del plugin di Bluehost e passare alla scheda “Staging”.

Navigating to the Staging tab in the Bluehost plugin page inside WordPress

Quindi, fare clic su “Crea sito di staging”.

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

Creating a staging site in Bluehost

Una volta terminato, è possibile fare clic su “Non in fase di modifica” per passare al sito di staging e iniziare a lavorarci.

Ora potete lavorare sul vostro sito web di staging e vedere le vostre modifiche su un’anteprima live.

Switching to the Bluehost staging site

Una volta attivata, nella barra di amministrazione di WordPress comparirà un avviso rosso “Ambiente di stadiazione”.

Questo per aiutarvi a distinguere il sito dal vivo.

The Staging Environment label in the WordPress admin area when editing a Bluehost staging site

Una volta terminata l’anteprima delle modifiche sul sito web di staging, è possibile accedere nuovamente alla pagina del plugin di Bluehost e navigare nella scheda “Staging”.

Da qui, selezionare “Distribuisci tutte le modifiche” e fare clic sul pulsante aggiorna per rendere effettive le modifiche.

Deploying all the changes from the Bluehost staging site to the live site

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

Anteprima dei post e delle pagine di WordPress prima della pubblicazione

WordPress utilizza un editor di blocchi intuitivo che utilizza automaticamente lo stile del tema per mostrare un’anteprima dal vivo dei post e delle pagine.

Tuttavia, potrebbe non darvi un’idea chiara di come un post o una pagina possano apparire sul vostro sito web con le intestazioni, le barre laterali e tutto il resto della pagina.

Block editor preview

Fortunatamente, l’editor di blocchi consente anche di visualizzare l’anteprima di un post o di una pagina senza pubblicarla.

È sufficiente fare clic sul pulsante “Anteprima” nell’angolo in alto a destra.

Preview options for post and pages

È possibile scegliere tra le opzioni di anteprima Desktop, Tablet e Mobile, ma queste mostreranno solo l’anteprima all’interno dell’editor di contenuti.

Dopo aver scelto un tipo di dispositivo, fate clic sull’opzione “Anteprima nella nuova scheda” per visualizzare l’anteprima completa sul vostro sito web.

WordPress mostrerà quindi un’anteprima del post o della pagina prima della pubblicazione.

Se volete consentire a qualcun altro l’accesso esclusivo all’anteprima di uno dei vostri post non pubblicati, consultate la nostra guida su come consentire l’anteprima pubblica dei post in WordPress.

Anteprima di un tema WordPress prima di cambiare

Normalmente, se si attiva un tema di WordPress, questo viene immediatamente inserito nel sito web.

Se non si utilizza un sito di staging, gli utenti vedranno il nuovo tema senza alcuna personalizzazione.

Non sarebbe bello poter vedere un’anteprima di un tema WordPress prima di attivarlo sul proprio sito web?

Fortunatamente, WordPress consente di visualizzare l’anteprima di un tema prima di attivarlo.

È sufficiente installare il tema WordPress di cui si desidera visualizzare l’anteprima. Per maggiori dettagli, consultate la nostra guida su come installare un tema WordPress.

Dopo aver installato il tema, fare clic sul link “Anteprima dal vivo”.

Live preview option after installing a theme

In alternativa, è possibile visitare la pagina Aspetto ” Temi e posizionare il mouse su un tema installato.

Verrà visualizzato un pulsante per avviare l'”Anteprima dal vivo”.

Live preview theme

WordPress avvierà quindi il Theme Customizer.

Qui si vedrà un’anteprima live del tema con i contenuti attuali.

Live preview WordPress theme

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

È possibile uscire dal Personalizzatore di temi senza attivare il tema. Tuttavia, questa operazione non salverà i personalizzati.

Se siete soddisfatti dell’aspetto del tema, potete attivarlo facendo clic sul pulsante “Attiva e pubblica” nella parte superiore del menu.

Avete bisogno di aiuto per cambiare tema? Consultate il nostro tutorial su come cambiare correttamente il tema di WordPress.

Anteprima delle personalizzazioni del tema WordPress

Volete apportare modifiche al vostro tema WordPress ma non siete sicuri di come appaiono sul vostro sito?

WordPress offre diversi modi per visualizzare l’anteprima del tema WordPress prima di applicare le modifiche.

Per la maggior parte dei temi WordPress, è possibile visualizzare l’anteprima delle modifiche utilizzando il personalizzatore del tema. Basta andare alla pagina Aspetto ” Personalizzazione per avviarlo.

Customize theme preview

Da qui è possibile provare diverse opzioni del tema, modificare i menu, personalizzare i widget, aggiungere CSS personalizzati e altro ancora.

Ciò consente di visualizzare in anteprima le modifiche al tema senza applicarle effettivamente al sito web.

Una volta soddisfatti delle modifiche apportate, è possibile fare clic sul pulsante “Pubblica” per applicarle. Facoltativamente, si può 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.

Save and publish your changes

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

In questo caso, è possibile avviare l’editor visitando il menu Aspetto ” Editor.

Full site editor preview

L’editor completo del sito consente di modificare il tema di WordPress utilizzando i blocchi. È possibile modificare i singoli file del modello con un’anteprima live del sito.

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

Tuttavia, a differenza del Theme Customizer, non sarà possibile salvare le modifiche come bozza. Le modifiche diventeranno effettive quando verranno salvate o andranno perse se si esce senza salvare.

Anteprima del tema WordPress personalizzato

Volete creare un tema WordPress completamente personalizzato con un’anteprima dal vivo?

SeedProd è il miglior costruttore di temi WordPress che consente di creare un tema WordPress personalizzato utilizzando un’interfaccia drag-and-drop con anteprima dal vivo.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina SeedProd ” Impostazioni per inserire la chiave di licenza. Queste informazioni sono disponibili nel proprio account sul sito web di SeedProd.

SeedProd license key

Successivamente, è necessario visitare la pagina SeedProd ” Theme Builder.

Da qui, fare clic sul pulsante “Temi”.

Theme builder

Si aprirà una finestra a comparsa in cui si potrà scegliere un tema da utilizzare come punto di partenza.

SeedProd viene fornito con una serie di bellissimi temi e modelli che è possibile personalizzare.

Choose a starter theme

È sufficiente fare clic per selezionare un tema e SeedProd genererà tutti i file dei modelli di tema per voi.

È ora possibile fare clic su uno qualsiasi di questi file di tema per modificarlo nel costruttore di temi.

Theme templates

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

È possibile aggiungere blocchi al progetto dalla colonna di sinistra. Alla vostra destra, vedrete un’anteprima modificabile dal vivo del vostro modello di tema.

Build your theme with live preview

SeedProd è inoltre dotato di un supporto completo per WooCommerce.

Ciò significa che potete progettare e visualizzare in anteprima il vostro negozio online, comprese le pagine dei prodotti, le pagine di pagamento e altro ancora.

WooCommerce store preview

Volete un’anteprima del vostro tema per i dispositivi mobili?

È sufficiente fare clic sull’icona mobile nella barra inferiore e SeedProd mostrerà l’anteprima mobile del tema.

Mobile preview of your theme

Una volta terminata la modifica del tema, è possibile fare clic sul pulsante “Salva” in alto a destra e uscire dal costruttore. Se necessario, è possibile modificare altri modelli.

Quando si è pronti a distribuire il tema personalizzato, è sufficiente attivare la levetta “Abilita tema SeedProd” nella pagina di creazione del tema.

Enable custom theme

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

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

Anteprima delle landing page di WordPress prima del lancio

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

Alcuni temi WordPress sono dotati di modelli di pagine di destinazione che si possono personalizzare utilizzando l’editor di blocchi.

Tuttavia, se avete bisogno di più opzioni di progettazione, allora avrete bisogno di SeedProd. È il miglior costruttore di landing page per WordPress e vi permette di creare facilmente bellissime landing page per il vostro sito web.

SeedProd offre decine di modelli di pagine di destinazione dal design professionale per iniziare. Inoltre, le vostre pagine di destinazione saranno ugualmente belle su tutti i formati di schermo.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Dopo l’attivazione, è necessario visitare la pagina SeedProd ” Impostazioni per inserire la chiave di licenza.

Potete trovare queste informazioni nel vostro account sul sito web di SeedProd.

SeedProd license key

Successivamente, andare alla schermata SeedProd ” Pagine di destinazione dalla barra laterale dell’amministrazione di WordPress.

Per iniziare a progettare la vostra pagina, cliccate sul pulsante “Add New Landing Page”.

Add new landing page

Successivamente, è necessario scegliere un modello.

Esistono diversi modelli altamente ottimizzati che si possono utilizzare come punto di partenza, oppure si può iniziare con un modello vuoto.

Choose landing page template

Si aprirà un popup in cui si dovrà inserire un nome per la pagina di destinazione e scegliere uno slug dell’URL.

Quindi fare clic sul pulsante “Salva e inizia a modificare la pagina” per continuare.

Landing page name

In questo modo si avvia l’interfaccia del costruttore di pagine.

È uno strumento di progettazione drag-and-drop che consente di progettare la pagina con un’anteprima dal vivo.

Landing page preview

Una volta terminata la modifica della pagina di destinazione, è possibile fare clic sul pulsante “Salva” e selezionare “Pubblica” per renderla attiva sul proprio sito web.

Per saperne di più, consultate il nostro tutorial su come creare landing page in WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come vedere l’anteprima del vostro sito web WordPress prima di andare in onda. Potreste anche consultare la nostra guida su come creare un piano di disaster recovery per WordPress e il confronto tra modalità coming soon e modalità maintenance.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

4 commentiLascia una risposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    I used to use methods like HOSTS file but it is complicated mainly for people who don’t have IT knowledge to configure HOSTS file. Now I finally chose the path of hiding the website behind the plugin under constructions and creating users for the users who have to see the website. They log in and see the appearance of the website. It is also relatively complicated for some, but not as much as editing the HOSTS file for a website on a server where the domain does not go.

  3. Moinuddin Waheed

    I am working on a clients website and I was very curious to know how can I make the website updates show to my client before going live and here I found this article.Thanks wpbeginner, it made my work easy as I can now use the bypass url from access control and let the client see before going live.
    I have used coming soon from elementor page builder. if I uninstall it and use another plugin , will it remove all the plugin related things from my dashboard or will there remains something after uninstalling a plugin?

    • WPBeginner Support

      If you uninstall a plugin it should normally remove everything related to the plugin.

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.