Come creare una pagina di errore 404 di WordPress personalizzata

È molto probabile che tu sia atterrato su una pagina 404 e abbia lasciato immediatamente il sito Web perché non è stato molto utile. Una pagina 404 è ciò che WordPress visualizza quando qualcuno entra o fa clic su un URL che non esiste sul tuo sito web. Questa pagina è un errore generico che informa il visitatore che la pagina non è stata trovata. In questo articolo, esploreremo come creare una pagina 404 personalizzata per WordPress. Lungo la strada, vedremo sia progetti buoni che cattivi.

Perché creare una pagina 404 personalizzata per WordPress?

Si è tentati di saltare la progettazione della pagina 404 perché si spera che nessuno la veda. Tuttavia, deve essere utile ai tuoi visitatori. Può essere importante quanto qualsiasi altra pagina. Un messaggio generico è un'esperienza utente negativa. Non ha un bell'aspetto e non dà loro motivo di rimanere sul tuo sito web.

Innanzitutto, diamo un'occhiata alla pagina generica che stiamo cercando di evitare.

Pagina 404 generica

La pagina 404 standard visualizzata da WordPress è solo un messaggio di errore. È posizionato all'interno dell'area del contenuto del corpo e mostra l'intestazione, il piè di pagina e le barre laterali se li hai.

Sfortunatamente, non è utile. È un po' come chiedere a un addetto al negozio se qualcosa che stai cercando è nel corridoio in cui ti trovi e loro dicono semplicemente di no. Vuoi che ti indichino la corsia corretta. Vuoi maggiori informazioni.

Una pagina 404 dovrebbe darti maggiori informazioni. Dovrebbe essere utile. Dovrebbe fornire strumenti, collegamenti, consigli o qualche forma di aiuto. Non vuoi essere lasciato solo nel corridoio senza sapere dove andare dopo.

Esempi di pagine 404 personalizzate

Ci sono migliaia di incredibili pagine 404 sul web. Alcuni sono divertenti, alcuni sono seri. Alcuni sono più utili di altri. Alcuni sono semplici, mentre altri sono meravigliosi. Diamo uno sguardo ad alcune pagine 404 per avere un'idea di come sono progettate. Alcuni sono semplici e noiosi mentre altri sono utili e hanno un bell'aspetto.

1. Google

La pagina 404 di Google (non WordPress) è semplice. È una piccola area di contenuto al centro dello schermo. Il messaggio ti dice solo che c'è un errore e fornisce una grafica di un robot in pezzi. Non fornisce altre informazioni, ma è Google, quindi tutto ciò che devi fare è digitare qualcos'altro nella barra di ricerca.

2. WordPress.org

La pagina 404 di WordPress.org mostra l'intestazione e il piè di pagina standard. Il corpo include un titolo per mostrare che la pagina non è stata trovata, una breve spiegazione con un tocco di umorismo e poi un elenco di collegamenti per aiutarti a guidarti. I collegamenti si concentrano sull'essere utili.

3. WordPress.com

La pagina 404 di WordPress.com rimuove l'intestazione e il piè di pagina. Mostra un grafico, un titolo, una descrizione con collegamenti cliccabili, una casella di ricerca e il logo di WordPress.com. I link sono utili.

4. Temi eleganti

La pagina 404 di Elegant Themes (perché so che guarderai comunque) mostra l'intestazione ET, un titolo grande con una piccola spiegazione e un pulsante come CTA. Hai accesso a quasi tutto da qui.

5. Ventuno

Il tema Twenty Twenty-One di WordPress ha una pagina 404 che utilizza i menu principali e quelli a piè di pagina. Ha un titolo grande. Il corpo ha una breve descrizione e una casella di ricerca. Le linee sono usate per lo styling. Lo sfondo corrisponde al sito.

6. Venti e venti

Il tema Twenty Twenty di WordPress mostra l'intestazione e il piè di pagina. Il corpo mostra un grande titolo al centro, una spiegazione e una casella di ricerca. Tutti usano i colori del tema.

7. Slack

La pagina 404 di Slack (non WordPress) mostra una casella al centro con le informazioni sull'errore con un collegamento al centro assistenza. Anche tutti i menu sono qui. La parte interessante è lo sfondo. È uno sfondo di cartone animato che scorre a destra oa sinistra per seguire il mouse. Gli animali animati si muovono sullo schermo.

8. Amazon

La pagina 404 di Amazon (anche non WordPress) include il logo Amazon con una casella di ricerca, un messaggio grande, un messaggio più piccolo con un collegamento alla home page e una foto di un animale con un collegamento per saperne di più. Include molte foto diverse che possono essere visualizzate. Sono scelti a caso.

Contenuto della pagina 404

Quindi, di cosa ha bisogno una pagina 404? Vediamo alcuni elementi comuni negli esempi sopra.

Innanzitutto, deve essere utile. Non dovrebbe solo dire al visitatore che c'è un errore. Dovrebbe dire cosa significa l'errore. Immagina una spia di errore che si accende nella tua auto. La tua prima domanda sarebbe "cosa significa?" Non fornire informazioni utili sull'errore è frustrante.

I visitatori devono sapere se hanno fatto qualcosa di sbagliato o se il contenuto non esiste. Se non lo sanno, continueranno a cercare il contenuto fino a quando non lasceranno furiosamente il sito Web, giurando di non tornare mai più. È meglio farlo con un messaggio semplice e possibilmente un'immagine che attiri l'attenzione. Qualcosa che si distingua dai tuoi normali contenuti che attirerebbe il tuo pubblico.

Successivamente, deve fornire alcune indicazioni su cosa fare dopo. Potrebbe essere un elenco di articoli, una casella di ricerca, un elenco di categorie, i post più popolari, i post più recenti, un modo per contattarti, ecc.

È così semplice. Le pagine 404 non hanno bisogno di molti contenuti. Quanto basta per essere d'aiuto.

L'esempio sopra include:

• Colori di sfondo e motivi che corrispondono al sito web/
• Un titolo con un breve messaggio sull'errore.
• Testo grande che mostra che si tratta di una pagina 404.
• Alcuni pulsanti che forniscono al visitatore alcune indicazioni.

È semplice ma elegante e utile. Questo è tutto ciò di cui hai bisogno.

Diamo un'occhiata a come creare una pagina 404 personalizzata per WordPress utilizzando le idee per i contenuti di cui abbiamo appena discusso.

Come creare una pagina 404 personalizzata in WordPress con Divi Theme Builder

Il Divi Theme Builder semplifica la creazione e l'assegnazione di una pagina 404. Elegant Themes ha diverse pagine 404 predefinite che puoi scaricare gratuitamente. Puoi personalizzarli come vuoi. Sono un ottimo modo per ottenere un vantaggio su un design di pagina 404. Se preferisci, puoi costruirne uno da zero.

L'esempio sopra è tratto dal pacchetto di layout Fourth Theme Builder. Ci sono molte pagine 404 disponibili nel blog di ET. Per trovarli, cerca "pacchetto di layout per il generatore di temi" o dai un'occhiata qui:

• Scarica il primo pacchetto di creazione di temi GRATUITO per Divi
• Scarica il secondo pacchetto di creazione di temi GRATUITO per Divi
• Scarica il terzo pacchetto di creazione di temi GRATUITO per Divi
• Scarica il quarto pacchetto di creazione di temi GRATUITO per Divi
• Scarica il quinto pacchetto di creazione di temi GRATUITO per Divi
• Scarica il sesto pacchetto di creazione di temi GRATUITO per Divi

Importazione di una pagina 404 personalizzata in Divi Theme Builder

Troverai Divi Theme Builder nella dashboard di WordPress andando su Divi > Theme Builder . Si apre la pagina in cui è possibile creare o importare modelli e assegnarli. Nell'angolo in alto a destra vedrai l'icona di importazione. Fare clic su questa icona per importare il modello di pagina 404.

Nota: per i tutorial sull'uso di Divi Theme Builder, cerca "theme builder" qui nel blog Elegant Themes.

Si apre un modale in cui puoi importare il tuo modello. Seleziona Importa e vai al tuo file in Scegli file . Le opzioni per sovrascrivere i valori predefiniti e le assegnazioni sono selezionate per impostazione predefinita. Consiglio di lasciarli selezionati. Fare clic per importare il modello nella parte inferiore del modale. Sto importando la pagina 404 per il Crowdfunding Layout Pack.

Importando una pagina 404, viene assegnata automaticamente. Quindi, fai clic sull'icona di modifica per aprire il generatore.

Ora apporta le tue modifiche all'interno di ciascun modulo aggiungendo i tuoi collegamenti, immagini, colori, testo, ecc. Salva il layout e fai clic sulla x nell'angolo in alto a destra per chiudere il builder.

Infine, salva le modifiche per applicare il modello. Ora hai una pagina 404 personalizzata.

Creazione di una pagina 404 personalizzata con Divi Theme Builder

Nel Generatore di temi, seleziona per aggiungere un nuovo modello.

Questo apre le impostazioni del modello. Scorri fino in fondo e seleziona Pagina 404 in Altro . Quindi, fai clic su Crea modello . Le impostazioni del modello verranno chiuse.

Ora puoi creare la pagina 404. La maggior parte non usa un'intestazione o un piè di pagina. Seleziona Aggiungi corpo personalizzato .

Questo mostra due selezioni che ti consentono di creare un corpo personalizzato o aggiungere dalla libreria. Seleziona Crea corpo personalizzato .

Costruisci la pagina 404 con Divi Builder normalmente. Salva ed esci.

Infine, salva le modifiche. Hai finito.

Considerazioni finali sulla creazione di una pagina 404 personalizzata per WordPress

Questo è il nostro sguardo su come creare una pagina 404 personalizzata per WordPress. 404 pagine devono essere utili. Sfortunatamente, la pagina generica di WordPress 404 non è utile e fornisce un'esperienza utente scadente. Fortunatamente, puoi creare la tua pagina 404 usando Divi Theme Builder.

Utilizzando le informazioni che abbiamo fornito qui, sei sulla buona strada per creare una bellissima pagina 404 che offra agli utenti un'esperienza eccezionale e sia sorprendente mentre lo fa.

Vogliamo sentire da voi. Hai creato una pagina 404 personalizzata per il tuo sito Web WordPress? Fateci sapere la nostra esperienza nei commenti.

Immagine in primo piano tramite Letters-Shmetters / shutterstock.com