Come ridisegnare un sito WordPress (Senza tempi di inattività)

Il tuo sito web ha ancora l'aspetto di qualche anno fa? Un sito web può diventare rapidamente obsoleto e potresti notare che non cattura più l'attenzione dei visitatori come una volta.

Non si tratta solo di volere un look nuovo; vuoi che il tuo sito web sia uno strumento potente che porti avanti la tua attività.

Un restyling è una mossa strategica per rinnovare la tua presenza online e assicurarti che il tuo sito WordPress lavori al massimo per te.

Se fatto correttamente, un restyling può aumentare l'engagement, le conversioni e la notorietà del marchio. Ma come si fa?

In questo tutorial, ti mostrerò come ridisegnare il tuo sito WordPress!

Ecco i punti chiave:

• Usa i siti di staging per ridisegnare senza interruzioni: lavora al tuo restyling in privato mentre il tuo sito live rimane online
• Duplicator Pro semplifica l'intero processo: crea backup e migra le modifiche da e verso il tuo ambiente di staging con facilità
• Stabilisci prima i benchmark di performance: monitora le metriche attuali con MonsterInsights per misurare il successo del restyling
• Crea sempre punti di ripristino in caso di disastro: esegui il backup del tuo sito originale prima di andare online per consentire rollback istantanei, se necessario
• Audit completi post-lancio sono essenziali: controlla link interrotti, problemi SEO e problemi di funzionalità dopo il restyling

Riepilogo rapido: Come ridisegnare un sito WordPress

Indice

Perché ridisegnare il tuo sito WordPress?

Potresti rimandare il restyling del tuo sito perché temi che richieda troppo tempo o che metta il tuo sito web in modalità di manutenzione. Tuttavia, ecco alcune situazioni in cui un restyling sarebbe utile.

• Design obsoleto

Se il tuo sito web appare obsoleto, manca di funzionalità moderne o non soddisfa gli standard di progettazione attuali, potrebbe essere il momento di un restyling.

Un design del sito web aggiornato può migliorare l'esperienza dei tuoi visitatori e rendere il tuo sito più coinvolgente e professionale.

• Scarsa esperienza utente

Se gli utenti trovano difficile navigare nel tuo sito web o riscontrano tempi di caricamento lenti delle pagine, ciò può portare a un alto tasso di rimbalzo e a una diminuzione delle conversioni.

Ridisegnare il tuo sito WordPress con un focus sull'esperienza utente (UX) può aiutare ad affrontare questi problemi e a mantenere il tuo pubblico coinvolto.

• Non reattivo o non ottimizzato per dispositivi mobili

Molte persone usano i loro dispositivi mobili per navigare in internet. Ciò significa che è importante avere un sito web reattivo che si adatti a diverse dimensioni dello schermo.

Se il tuo sito web attuale non è ottimizzato per dispositivi mobili o manca di reattività, potrebbe essere il momento di ridisegnarlo per massimizzare l'accessibilità.

• Cambiamenti di branding o messaggistica

Se il tuo marchio ha subito cambiamenti significativi o desideri rinnovare la tua messaggistica, un restyling del sito web può darti una nuova identità di marca. Avere questa coerenza nel branding e nella messaggistica rafforzerà la tua immagine generale e ti aiuterà a raggiungere il tuo pubblico di destinazione.

• Miglioramenti SEO (Search Engine Optimization)

I motori di ricerca aggiornano frequentemente i loro algoritmi e le best practice SEO cambiano nel tempo. Un restyling del sito web offre l'opportunità di ottimizzare la struttura del tuo sito, migliorare la velocità di caricamento delle pagine e implementare elementi SEO-friendly per aumentare il tuo traffico organico.

• Nuove Funzionalità

Man mano che la tua attività si evolve, potresti aver bisogno di aggiungere un negozio e-commerce, un blog o feed di social media al tuo sito web. Con un restyling, puoi integrare queste nuove funzionalità in modo impeccabile e assicurarti che siano in linea con il tuo design generale e l'esperienza utente.

Cosa fare prima di ridisegnare il tuo sito WordPress

Più tardi ti mostreremo come ridisegnare completamente il tuo sito WordPress. Tuttavia, ci sono alcuni passaggi che dovresti intraprendere prima.

Valuta il tuo design attuale

Prima di ridisegnare il tuo sito web, considera il suo design attuale. Dovrai essere consapevole delle sue buone caratteristiche, così come di tutto ciò che vorresti migliorare.

Assicurati di annotare cosa ti piace del tuo sito web originale. Mentre procedi con il restyling, vorrai mantenere queste caratteristiche e funzionalità.

Tuttavia, considerare le sue aree deboli è importante per un buon restyling. Correggendo layout e palette di colori scadenti, avrai un sito web che funziona bene ed è piacevole da guardare.

Controlla i tuoi benchmark attuali

Per vedere se un restyling è stato efficace, dovrai conoscere le statistiche attuali del tuo sito.

Puoi facilmente controllare i tuoi benchmark attuali installando MonsterInsights. Questo è un plugin che collega Google Analytics al tuo back-end di WordPress, compilando tutti i tuoi dati di performance in un'unica posizione.

Una volta aggiunto MonsterInsights al tuo sito web, trova il report Pagine/Articoli più visti. Qui vedrai quanti visitatori stai ricevendo:

Se vuoi salvare dati da MonsterInsights, premi il pulsante Esporta report PDF. Questo scaricherà un file zip con le visualizzazioni delle tue pagine, le sessioni utente, il tasso di rimbalzo e altro:

Salvando queste statistiche, puoi facilmente vedere se il tuo restyling è valso la pena. Sarai in grado di confrontare le analisi prima e dopo la messa online del nuovo design. 

Vuoi vedere cos'altro può fare MonsterInsights? Leggi la nostra recensione completa!

Avere obiettivi per il restyling

Una volta che conosci i tuoi benchmark di performance, puoi impostare obiettivi per il restyling.

Con un buon restyling, puoi:

• Accelerare il tempo di caricamento
• Aumentare i tassi di conversione
• Ridurre il tasso di rimbalzo
• Aumentare il tempo medio per pagina
• Migliora l'esperienza utente
• E molto altro!

Potresti anche provare un rebranding con nuovi colori, loghi o layout. Assicurati di registrare i tuoi benchmark di performance prima e dopo il restyling. Queste metriche ti aiutano a decidere se il restyling ha avuto successo o meno.

Stabilire un budget

Infine, dovrai decidere quale sarà il tuo budget per il progetto. Alcuni costi di base per un restyling includono l'acquisto di un nuovo tema o l'assunzione di un web designer professionista.

Se vuoi risparmiare denaro per altre aree della tua attività, ti consigliamo di fare il restyling da solo. Con un buon theme builder, non avrai bisogno di alcuna competenza di codifica per costruire il tuo nuovo sito.

Come ridisegnare un sito WordPress

Una volta deciso di migliorare il design del tuo sito, potresti non sapere come procedere. Non preoccuparti, ti guiderò passo dopo passo!

• Passaggio 1: Installa Duplicator Pro: Un plugin di backup e migrazione rende facile migrare il tuo sito in un'area di staging per il ridisegno
• Passaggio 2: Crea una Copia del Tuo Sito Web Live: Genera un backup completo del tuo sito attuale e scaricalo
• Passaggio 3: Crea un Sito di Staging: Imposta un ambiente di test sicuro utilizzando LocalWP o gli strumenti di staging del tuo provider di hosting
• Passaggio 4: Importa il Tuo Backup: Carica il backup del tuo sito nell'ambiente di staging per importare i tuoi dati live
• Passaggio 5: Crea il Tuo Nuovo Design: Utilizza SeedProd o altri strumenti di progettazione per creare il tuo sito web ridisegnato
• Passaggio 6: Lancia il Tuo Nuovo Sito Web: Crea punti di ripristino in caso di disastro, quindi migra il tuo ridisegno completato al server live
• Passaggio 7: Controlla il Tuo Sito Ridisegnato: Verifica errori, collegamenti interrotti, problemi SEO e funzionalità generali

Passaggio 1: Installa Duplicator Pro

Se stai considerando un ridisegno, non vorrai creare un'installazione WordPress completamente nuova da zero. Anche se stai rifacendo l'intero sito web, è importante conservare tutti i tuoi post, pagine, plugin e altri dettagli chiave.

Per evitare qualsiasi perdita di dati, ti consiglio di creare una copia del tuo sito web live e spostarla su un sito di staging. Qui, puoi creare un nuovo design senza influire sui tuoi utenti live.

Lo strumento migliore per questo lavoro è Duplicator. Questo plugin per WordPress è un potente strumento per backup, migrazioni e clonazioni. Scarica l'intero sito web come un unico file zip, rendendo facile lo spostamento.

Non sei sicuro se hai bisogno di Duplicator durante il processo di ridisegno? Scopri come Rock Lobster Webdesign aumenta l'efficienza del design con Duplicator!

Innanzitutto, seleziona un abbonamento per Duplicator Pro. È disponibile una versione gratuita, ma Duplicator Pro offre migrazioni drag-and-drop. Questo può aiutarti a mettere online il tuo ridisegno in pochissimo tempo.

Dopo aver completato l'acquisto, copia la tua chiave di licenza. Quindi, apri la dashboard del tuo sito WordPress live e installa Duplicator.

Successivamente, vai su Duplicator Pro » Impostazioni » Generali.

Incolla la tua chiave di licenza e fai clic sul pulsante Attiva. Ora sei pronto per iniziare il processo di ridisegno!

Passaggio 2: Crea una copia del tuo sito web live

Per il prossimo passaggio, dovrai creare una copia (o backup) del tuo sito web. I backup manuali possono essere un lavoro duro, ma Duplicator lo rende semplice per i principianti.

Duplicator funziona eseguendo il backup di tutti i tuoi file WordPress, temi, plugin e tabelle di database in un file zip. Una volta che crei un backup, puoi facilmente spostarlo su un server completamente nuovo.

Innanzitutto, vai su Backup » Aggiungi Nuovo.

Puoi utilizzare tag dinamici per nominare il backup. Sotto Archiviazione, seleziona Locale.

Nella tua riprogettazione, potresti voler eliminare determinate parti del tuo sito. In questo caso, puoi personalizzare il file di archivio. Espandi semplicemente la sezione Backup e deseleziona qualsiasi componente che non desideri includere.

Per eseguire il backup dell'intero sito, non apportare modifiche. Quindi, premi Avanti. 

Duplicator eseguirà una scansione completa del tuo sito web live. Assicurati di rivedere eventuali avvisi prima di creare il backup.

Dopo che il tuo backup è stato creato, puoi scaricarlo.

Se hai intenzione di utilizzare un ambiente di staging locale come LocalWP, questo software spesso installerà WordPress per te. In questo caso, dovrai solo scaricare il file di archivio.

Tuttavia, per caricare il tuo backup direttamente su un server con un client FTP o cPanel, assicurati di salvare anche lo script installer.php. 

Passaggio 3: Crea un sito di staging

Quando ti prepari per un'attività importante come una riprogettazione, è importante avere un sito di staging. Questa è una versione clonata del tuo sito web che puoi utilizzare per testare le modifiche senza influire sulla funzionalità o sull'aspetto del tuo sito live. 

Se riprogetti il tuo sito web live, potresti pubblicare accidentalmente dei glitch al tuo pubblico.

Utilizzando un sito di staging, avrai uno spazio sicuro e controllato per assicurarti che tutto funzioni correttamente prima di andare online. Inoltre, non dovrai mettere il tuo sito web esistente in modalità di manutenzione mentre lo riprogetti. 

A volte, il tuo provider di web hosting creerà automaticamente un'area di staging per te. Tuttavia, puoi anche crearne facilmente una da solo o con un plugin di staging per WordPress.

Per questo tutorial, utilizzeremo LocalWP, che è un software di sviluppo locale adatto ai principianti. Imposterà e ospiterà un'installazione di WordPress sul tuo computer personale. Inoltre, è gratuito da usare.

Per iniziare, assicurati di scaricare la versione di LocalWP che corrisponde al sistema operativo del tuo computer. Quindi, aggiungi un nuovo sito facendo clic sull'icona +.

Successivamente, dai un nome al tuo sito di staging. Se sei uno sviluppatore, sentiti libero di impostare una versione personalizzata di PHP, Apache e MySQL. In alternativa, l'opzione Preferita ti creerà un sito WordPress di base.

Come ultimo passaggio, inserisci un nome utente, una password e un indirizzo email di WordPress. Utilizzerai queste credenziali per accedere alla dashboard del tuo sito di staging.

Potresti voler ospitare il tuo sito di staging sullo stesso server del tuo sito live. Ciò garantirà che non ci siano errori durante la migrazione delle modifiche tra i due siti.

Per aiutarti in questo, consulta il nostro tutorial su come creare un sito di staging per WordPress. 

Passaggio 4: Importa il tuo backup

Dopo che LocalWP avrà creato il tuo sito di staging, sarà un'installazione WordPress predefinita. Per farlo assomigliare al tuo sito live, puoi semplicemente importare il backup salvato.

Nella tua app Local, seleziona il tuo sito e premi WP Admin. Questo aprirà la dashboard per il sito locale.

Qui, installa e attiva Duplicator Pro come plugin. Trova quindi la pagina Importa backup e carica il file di archivio che hai salvato in precedenza.

Duplicator ti avviserà quando il backup verrà caricato. Fai clic su Continua per avviare l'installazione.

Nella pagina successiva, premi Avvia installazione.

Dopodiché, vedrai istruzioni passo passo per distribuire l'installazione del tuo sito.

Accetta i termini e le notifiche. Quindi, fai clic su Avanti.

Infine, rivedi le impostazioni di installazione. Se sembrano corrette, premi OK.

Duplicator sostituirà quindi il sito locale predefinito con una copia esatta del tuo sito live! Puoi usare il pulsante Accesso amministratore per accedere alla tua nuova dashboard. 

Passaggio 5: Crea il tuo nuovo design

Ora che hai un sito di staging, puoi apportare una riprogettazione completa mentre il tuo sito web originale è ancora attivo.

Anche se potresti progettare il tuo sito web con gli editor integrati di WordPress, questi non sono molto intuitivi o flessibili. 

Per progettare facilmente qualsiasi tipo di sito web, ti consiglio di usare SeedProd. SeedProd è il miglior costruttore di siti web perché è dotato di editing drag-and-drop, oltre 150 modelli di landing page e persino temi di siti web predefiniti.

Sebbene SeedProd sia nato come costruttore di landing page, si è evoluto per personalizzare ogni parte del tuo sito web. Utilizzando il suo theme builder, puoi facilmente progettare nuove pagine, intestazioni, piè di pagina e altro ancora.

Per sfruttare tutte queste funzionalità, installa e attiva SeedProd sul tuo sito WordPress locale. Quindi, vai su SeedProd » Theme Builder » Theme Template Kits.

Questo ti fornirà molti diversi kit di temi predefiniti tra cui scegliere. Invece di codificare manualmente ogni modello di pagina da zero, SeedProd può accelerare il processo di progettazione.

Troverai siti web per portfolio, attività online, blog e molto altro.

Una volta selezionato un nuovo tema, avrai modelli per la tua home page, i post, le intestazioni e i piè di pagina. Per modificare uno qualsiasi di questi, fai clic su Modifica design.

Puoi quindi utilizzare il page builder di SeedProd per personalizzare completamente il tuo tema. Sentiti libero di trascinare e rilasciare nuovi blocchi sulla pagina, modificare i font, aggiornare i colori predefiniti ed effettuare qualsiasi altra modifica.

Assicurati di salvare le modifiche al termine. Quindi, pubblica ogni modello di tema. Nella parte superiore della pagina, abilita il nuovo tema SeedProd.

Se desideri una guida più approfondita sulla progettazione di un sito web con SeedProd, consulta questo post su come creare un tema WordPress personalizzato senza codice. 

Passaggio 6: Lancia il tuo nuovo sito web

Una volta ridisegnato completamente il tuo nuovo sito web, è ora di pubblicare le tue modifiche!

Con Duplicator, tutto ciò che dovrai fare è creare un backup del sito di staging. Quindi, scarica il file di archivio del backup.

Prima di importarlo sul tuo sito web live, considera l'impostazione di un punto di ripristino in caso di disastro. In sostanza, questo salverà un backup del tuo sito subito prima di aggiornare il suo design. Se noti errori critici che ti sono sfuggiti durante lo sviluppo, puoi semplicemente tornare a questo backup.

Per fare ciò, crea un backup del tuo sito originale. Assicurati di selezionare Locale come posizione di archiviazione.

Continua a creare il backup. Una volta terminato, fai clic sull'icona della casa blu.

Premi Imposta ripristino di emergenza.

A questo punto, copia il link di ripristino o scarica il file del launcher. Se li salvi in un luogo sicuro, puoi usarli per ripristinare istantaneamente il tuo sito.

Ora è il momento di importare il tuo restyling. Per fare ciò, vai alla pagina Importa backup e carica il file zip del tuo sito di staging. Quindi, Duplicator ti guiderà nell'importazione del tuo backup sul sito web. 

Per maggiori dettagli, consulta il nostro tutorial su come spostare un sito WordPress locale su un server live.

Passaggio 7: Esegui l'audit del tuo sito ridisegnato

Anche se hai verificato la presenza di errori sul tuo sito di staging, potresti esserti perso qualcosa. Dopo aver reso live il tuo restyling, è importante controllare a fondo il tuo sito web per assicurarti che abbia un aspetto e funzioni correttamente.

Per assicurarti che la tua Search Engine Optimization (SEO) sia a punto, considera di eseguire un audit SEO completo. All-in-One SEO è il miglior plugin SEO per questo, poiché ti fornisce un elenco di suggerimenti SEO per il tuo sito web, facile da usare anche per i principianti.

Consiglierei anche di creare un modulo di richiesta di supporto. In questo modo, il tuo pubblico potrà segnalare eventuali bug o errori 404 che influiscono sulla loro esperienza sul tuo sito.

Utilizzando un plugin come WPForms, puoi iniziare con un modello di modulo di richiesta di supporto e modificare il modulo di contatto per soddisfare le tue esigenze specifiche.

Ecco alcune altre attività che dovresti eseguire subito dopo un restyling:

• Controlla i link non funzionanti e aggiungi reindirizzamenti se necessario
• Rivedi nuovamente le tue pagine e i tuoi post web più performanti
• Assicurati che titoli, intestazioni e meta descrizioni siano rimasti coerenti prima e dopo la migrazione
• Testa la velocità di caricamento delle tue pagine
• Elimina i plugin che non vengono utilizzati attivamente
• Rivedi la tua sitemap XML e correggi eventuali errori
• Testa il tuo restyling per diversi browser

Dopo tutto questo, avrai un restyling magnifico che attirerà nuovi visitatori e li farà tornare sul tuo sito ancora e ancora! 

Domande frequenti (FAQ)

Conclusione

Ecco fatto! Hai imparato come ridisegnare un sito WordPress.

Mentre sei qui, potresti apprezzare questi tutorial di WordPress e recensioni di plugin:

• I 15 migliori temi WordPress per creare un sito web straordinario
• Come pulire un sito WordPress (11 consigli da esperti)
• Come cambiare il tuo tema WordPress
• Come creare un backup cloud di WordPress
• I 9 migliori plugin per clonare un sito WordPress
• Come ottimizzare il tuo database WordPress

Non devi passare molto tempo a spostare manualmente il tuo sito web da e verso un'area di staging. Scarica Duplicator Pro per iniziare a usare migrazioni drag-and-drop!