La pagina 404 è forse uno degli incubi maggiori per chi gestisce un sito. Ottimizzare questo contenuto così particolare permette di dirottare il traffico verso una risorsa utile, soprattutto quando per necessità abbiamo dovuto cancellare pagine e/o articoli. Per fortuna il nostro tema preferito ci aiuta: trasforma la tua pagina 404 in un layout originale con DIVI e regala ai tuoi navigatori uno strumento davvero efficace! La guida che vogliamo presentarti oggi prevede l’uso del Theme Builder, una delle ultime novità del prodotto di Elegant Themes. Mettiamo subito le mani in avanti: come altri nostri tutorial, anche il seguente è un riadattamento del post originale della casa madre, tradotto in italiano per i nostri utenti meno ferrati con la lingua straniera.
Sommario
Anteprima
Prima di entrare nel dettaglio, diamo subito uno sguardo a quale sarà il risultato finale. Tieni presente che abbiamo usato le indicazioni originali presenti nell’articolo (in inglese) di Donjete Vuniqi e che abbiamo apportato alcune modifiche per ottenere un miglioramento aggiuntivo. Ricordati anche che potrai modificare qualsiasi parametro a seconda del tuo gusto personale. L’armonia prima di tutto!
Scarica SUBITO il Layout della pagina 404
Se sei di corsa oppure se sei alle prime armi, vorrai di certo passare al dunque senza perderti nei meandri del tutorial di Wp Win. Non ti preoccupare: in qualsiasi momento potrai fare il download del layout della pagina 404 che abbiamo creato insieme ed importarlo nella tua libreria per avere subito il contenuto a portata di mano. Per poter procedere, dovrai solo seguire i passaggi qui di seguito e potrai salvare all’istante il tuo contenuto (non ti verrà inviato via email).
Inizia a creare: gli step da seguire
La prima cosa da fare per realizzare la nostra pagina 404 con DIVI è creare un nuovo layout di base. Vai su Theme Builder, la voce che trovi nelle opzioni del tema e clicca su Aggiungi template. Nel menù a tendina trovi diversi abbinamenti e la possibilità di scegliere una pagina o post specifici per la tua nuova creazione. In questo caso a noi serve la voce 404 Page: la trovi in fondo alla lista, sotto Other. In questo modo verranno aggiunte in automatico tre voci: Add Custom Header, Add Custom Body, Add Custom Footer per le diverse sezioni.
In questo caso ci interessa solo il corpo della pagina, quindi silenziamo la prima e la seconda opzione cliccando sull’occhietto a destra. Selezionando Add Custom Body, scegliamo Build Custom Body per iniziare a costruire. Se preferisci realizzare il contenuto direttamente sul frontend, ricordati di optare per il primo box, ovvero Build from Scratch.
Prima ancora di pensare alle righe, scegliamo uno sfondo per la sezione inserendo il colore #FFFFFF (bianco). Spostiamoci in Design/Modulo separatore e clicchiamo su In Fondo per aggiungere un elemento. Dalla lista Stile Divisore scegli la quint’ultima opzione, orientandoti con l’immagine che trovi qui sotto. Come colore bordo usiamo #ffee00 (giallo acceso), mentre per lo Spessore inseriamo 25vw per il Desktop, 77vw per il Tablet e 90vw per il Mobile. Il Modulo Separatore sarà verticale e lo Spessore linea in Inserisci sezione.
Per far sì che il layout della pagina 404 sia centrato, aggiungiamo un po’ di padding in Spaziatura:
- In Cima – 4.6vw (Desktop), 23vw (Tablet), 25vw (Mobile)
- In Fondo – 4.6vw (Desktop), 13vw (Tablet), 11vw (Mobile)
Aggiungi una riga
A questo punto possiamo passare al secondo elemento. Inseriamo una riga da un box e modifichiamo i valori in Design/Dimensionamento. Attiviamo la casella di Personalizzate Grondaia Larghezza portando ad 1 la Spaziatura Colonne. La Larghezza Massima e massima dovrà essere al 100% in entrambi i casi. Purtroppo la traduzione in italiano non ci permette di distinguere le due dimensioni. Sappi solo che la prima si riferisce alla larghezza generale, mentre la seconda al picco massimo della sezione. Modifichiamo anche la Spaziatura, aggiungendo del padding in alto e in basso: 2vw in tutti e due i campi.
Modulo di testo
Passiamo ora al testo vero e proprio. In questa fase vogliamo creare il titolo della pagina 404. Spostiamoci quindi nella scheda Design/Testo per fare un po’ di modifiche:
- Font: Monoton
- Colore: #000000
- Dimensioni: 24vw (Desktop), 35vw (Tablet & Mobile)
- Interlinea: 1em
- Allineamento: Centro
Se hai qualche dubbio puoi verificare i vari passaggi grazie all’immagine seguente.
Secondo modulo di testo
Adesso non ci resta che scrivere una frase per comunicare agli utenti che la pagina cercata non esiste. I valori dovranno essere i seguenti:
- Font: Montserrat
- Colore: #000000
- Dimensione: 2vw (Desktop), 2.7vw (Tablet), 3 (Mobile)
- Interlinea: 1.8em
- Allineamento: Centro
Aumentiamo anche il margine in Spaziatura: 2vw In Cima e 6vw In Fondo.
Seconda riga
Per poter inserire gli altri elementi dovremo aggiungere una seconda riga al di sotto di quella appena creata. In questo caso selezioniamo però il layout da due box e cambiamo subito il Dimensionamento:
- Larghezza Massima: 32vw (Desktop), 50vw (Tablet & Mobile)
- Larghezza massima 100%
Modifichiamo anche la Spaziatura, andando a inserire i seguenti valori sia per il margine sia per il padding:
- Margine In Cima – 7vw (Desktop), 22vw (Tablet), 59vw (Mobile)
- Padding In Cima e In Fondo: 0vw
Torniamo indietro nella scheda Contenuti e clicchiamo sulla rotellina della prima colonna per accedere alle impostazioni. Scegliamo come colore per lo sfondo #FFFFFF, il nostro caro e vecchio bianco. Visto che vogliamo che la tonalità cambi al passaggio del mouse, attiviamo la casella dell’hover cliccando sulla freccia vicino a Sfondo e scriviamo #fffa00 sotto la voce Librarsi (orribile in italiano, che vuol dire?). Adesso possiamo spostarci in Design/Bordo e rendere il box rotondo. Come? Portando a 20px tutti e quattro gli angoli.
Per non farci mancare nulla inseriamo anche un’ombra, selezionando la prima opzione della voce Box Shadow, in modo che sia visibile in tutti e quattro i lati. Portiamo al 50% la Forza della Sfocatura dell’Ombra ed utilizziamo due tipi di colori. Il primo rgba(0,0,0,0) sarà la trasparenza del nostro modulo ‘normale’, il secondo rgba(0,0,0,0.12) sarà invece il colore dell’ombra al passaggio del mouse. Infine andiamo alla voce Trasformare e assicuriamoci che Trasforma la scala sia al 100% per entrambe le coordinate. Per l’Hover (librarsi) aumentiamo fino al 110% per tutti e due.
Prima colonna – modulo di testo
Ora che abbiamo finito di creare lo stile della seconda riga, possiamo continuare con il successivo passaggio per realizzare la pagina 404: costruire una sorta di piccolo menù di navigazione. Aggiungiamo quindi un modulo di testo e scriviamo “Home” al suo interno, inserendo la URL della homepage e facendo sì che il collegamento si apra nella stessa finestra. I parametri per il testo saranno invece i seguenti:
- Font – Montserrat
- Luce Soffusa – Testo in grassetto
- Stile – Tutto maiuscolo
- Colore – #000000
- Dimensione: 1.4vw (Desktop), 2vw (Tablet), 3vw (Mobile)
- Spaziatura lettere – 1px
- Interlinea – 1.8em
- Allineamento – Centro
Prima di chiudere la scheda, aggiungiamo il padding: In Cima e In Fondo – 2vw (Desktop), 3vw (Tablet), 4vw (Mobile).
Clona e modifica
Adesso che abbiamo creato il nostro primo pulsantino, possiamo clonare il modulo testo e spostarlo nella seconda colonna della stessa riga. Se durante lo spostamento ti accorgi di aver perso lo stile appena creato, non dovrai far altro che tornare nelle impostazioni di riga, cliccare sui tre pallini della prima colonna e scegliere Copia Elemento Stili. Infine incollarlo nella seconda colonna seguendo la stessa procedura. Ricordati solo di cambiare il testo all’interno del box, inserendo magari un link alla pagina dei Contatti, e la URL di atterraggio nella sezione Contenuti/Collegamento del secondo modulo testo.
Conclusioni
Grazie al nostro tutorial sulla pagina 404 e il Layout di DIVI hai capito come personalizzare i tuoi contenuti e regalare una pagina utile ai tuoi utenti. Il risultato? Dirotterai il traffico verso articoli e pagine esistenti, invogliando il navigatore a rimanere nel sito ancora per un po’. Se hai domande o dubbi non esitare a scrivere un commento nel box qui sotto!
