Come creare un modello di pagina 404 con Divi's Theme Builder

Divi's Theme Builder e le opzioni di design integrate hanno aperto un sacco di nuove porte. Più che mai, ora puoi personalizzare ogni singola pagina su cui arrivano i tuoi clienti. Ciò include la creazione di una pagina 404. In questo tutorial, ti mostreremo come creare un bellissimo modello di pagina 404 e applicarlo subito al tuo sito web. Utilizzeremo solo le opzioni integrate di Divi e potrai anche scaricare gratuitamente il file JSON del modello. Speriamo che questo tutorial ispiri a diventare creativo con il tuo prossimo design di pagina 404.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il modello di pagina 404 GRATIS

Per mettere le mani sul modello di pagina 404 gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

1. Vai a Divi Theme Builder e crea un nuovo modello

Vai a Divi Theme Builder

Per iniziare a creare il modello di pagina 404, vai a Divi Theme Builder nelle impostazioni Divi.

Crea nuovo modello

Fai clic su "Aggiungi nuovo modello" e imposta un nuovo modello per la tua pagina 404.

• Utilizzare su: pagina 404

Nascondi area intestazione e piè di pagina

Continua nascondendo l'intestazione e il piè di pagina personalizzati della tua pagina 404 facendo clic sull'icona a forma di occhio.

Costruisci un corpo globale

Dopo aver eseguito tutti i passaggi precedenti, puoi iniziare a creare il corpo della pagina 404 selezionando "Crea corpo personalizzato".

2. Inizia a costruire il corpo della pagina 404

Aggiungi nuova sezione

Colore di sfondo

Una volta entrato nell'editor dei modelli, noterai una sezione sulla tua pagina. Apri questa sezione e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Divisore inferiore

Passa alla scheda di progettazione della sezione e aggiungi un divisore inferiore:

• Stile divisore: trova nell'elenco
• Colore divisore: #ffee00
• Altezza divisore: 25vw (desktop), 77vw (tablet), 90vw (telefono)
• Capovolgimento divisore: verticale
• Disposizione dei divisori: sotto il contenuto della sezione

Spaziatura

Successivamente, aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 4.6vw (desktop), 23vw (tablet), 25vw (telefono)
• Imbottitura inferiore: 4.6vw (desktop), 13vw (tablet), 11vw (telefono)

Aggiungi riga n. 1

Struttura della colonna

Una volta completate le impostazioni della sezione, puoi aggiungere la prima riga. Scegli la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Modificare successivamente i valori di riempimento superiore e inferiore della riga.

• Imbottitura superiore: 2vw
• Imbottitura inferiore: 2vw

Aggiungi il modulo di testo 1 alla colonna

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui avremo bisogno è un modulo di testo. Inserisci del contenuto del paragrafo a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: monotono
• Colore del testo: #000000
• Dimensione del testo: 24vw (desktop), 35vw (tablet e telefono)
• Altezza riga di testo: 1em
• Allineamento del testo: Centro

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Al modulo successivo, che è un altro modulo di testo. Aggiungi alcuni contenuti a tua scelta.

Impostazioni testo

Modifica di conseguenza le impostazioni del testo del modulo:

• Carattere del testo: Montserrat
• Colore del testo: #000000
• Dimensione del testo: 1.2vw (desktop), 2.6vw (tablet), 3vw (telefono)
• Altezza riga di testo: 1,8 em
• Allineamento del testo: Centro

Spaziatura

Completa le impostazioni del modulo aggiungendo un margine superiore e inferiore personalizzato.

• Margine superiore: 2vw
• Margine inferiore: 6vw

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e regola le impostazioni di dimensionamento come segue:

• Larghezza: 32vw (desktop), 50vw (tablet e telefono)
• Larghezza massima: 100%

Spaziatura

Modifica anche le impostazioni di spaziatura.

• Margine superiore: 7vw (desktop), 22vw (tablet), 59vw (telefono)
• Imbottitura superiore: 0vw
• Imbottitura inferiore: 0vw

Impostazioni colonna 1 e 2

Colore di sfondo predefinito

Una volta completate le impostazioni generali delle righe, puoi aprire ciascuna colonna singolarmente e apportare alcune modifiche, a partire dal colore di sfondo.

• Colore di sfondo: #FFFFFF

Colore di sfondo al passaggio del mouse

Modifica il colore di sfondo al passaggio del mouse.

• Colore di sfondo: #fffa00

Frontiera

Aggiungi anche degli angoli arrotondati.

• Angoli arrotondati: 20 px (tutti gli angoli)

Ombra casella predefinita

Passa alle impostazioni dell'ombra della casella e applica le seguenti modifiche:

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0)

Ombra del riquadro al passaggio del mouse

Modifica il colore dell'ombra al passaggio del mouse.

• Colore ombra: rgba(0,0,0,0.12)

Scala di trasformazione predefinita

Quindi, vai alle impostazioni della scala di trasformazione e assicurati che i valori predefiniti rimangano "100%".

• Destra: 100%
• Fondo: 100%

Scala di trasformazione al passaggio del mouse

Modifica i valori della scala di trasformazione al passaggio del mouse:

• Destra: 110%
• Fondo: 110%

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Una volta completate le impostazioni di riga e colonna, aggiungi un modulo di testo alla colonna 1 con il contenuto del paragrafo di tua scelta.

Aggiungi collegamento

Aggiungi un collegamento al modulo successivo.

• URL collegamento modulo: #
• Target del collegamento al modulo: nella stessa finestra

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Montserrat
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: maiuscolo
• Colore del testo: #000000
• Dimensione del testo: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
• Spaziatura delle lettere del testo: 1px
• Altezza riga di testo: 1,8 em
• Allineamento del testo: Centro

Spaziatura

Quindi, vai alle impostazioni di spaziatura e applica alcuni valori di riempimento superiore e inferiore personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 3vw (tablet), 4vw (telefono)

Clona modulo testo e posiziona duplicato nella colonna 2

Una volta completato il modulo di testo e tutte le sue impostazioni, puoi clonare l'intero modulo e posizionare il duplicato nella colonna 2.

Modifica contenuto

Assicurati di modificare il contenuto del modulo duplicato.

Cambia collegamento

Cambia anche il collegamento.

3. Salva le modifiche al generatore di temi

Una volta terminato il design, puoi salvare tutte le impostazioni del modello. Questo è tutto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come impostare e creare un modello di pagina 404. Il generatore di temi di Divi e le opzioni di progettazione integrate ti consentono di toccare ogni pagina del tuo sito Web utilizzando modelli personalizzati. Ci auguriamo che tutti i tutorial di Divi Theme Builder ti stiano divertendo! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.