Cum să creați un șablon de 404 pagini cu Divi's Theme Builder

Divi's Theme Builder și opțiunile de proiectare încorporate au deschis o mulțime de uși noi. Mai mult ca oricând, acum puteți personaliza fiecare pagină pe care ajung clienții dvs. Aceasta include configurarea unei pagini 404. În acest tutorial, vă vom arăta cum să creați un șablon de 404 pagini frumos și să îl aplicați imediat pe site-ul dvs. web. Vom folosi doar opțiunile încorporate ale Divi și veți putea descărca gratuit fișierul șablon JSON. Sperăm că acest tutorial vă inspiră pentru a deveni creativi cu următorul design de 404 de pagini.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați șablonul de pagină 404 GRATUIT

Pentru a pune mâna pe șablonul de pagină gratuit 404, va trebui mai întâi să-l descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abonați-vă la canalul nostru Youtube

1. Accesați Divi Theme Builder și creați un șablon nou

Accesați Divi Theme Builder

Pentru a începe crearea șablonului de pagină 404, accesați Divi Theme Builder în setările Divi.

Creați un șablon nou

Faceți clic pe „Adăugați un șablon nou” și configurați un șablon nou pentru pagina dvs. 404.

• Utilizare pe: 404 pag

Ascunde zona antet și subsol

Continuați ascunzând antetul și subsolul personalizat al paginii dvs. 404 făcând clic pe pictograma ochi.

Construiți un corp global

După ce ați parcurs toți pașii anteriori, puteți începe să construiți corpul de 404 de pagini selectând „Creați corp personalizat”.

2. Începeți să creați corpul 404 pagini

Adăugați o secțiune nouă

Culoare de fundal

Odată ce vă aflați în editorul de șabloane, veți observa o secțiune pe pagina dvs. Deschideți această secțiune și adăugați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Separator inferior

Treceți la fila de proiectare a secțiunii și adăugați un separator de jos:

• Stil divizor: Găsiți în listă
• Culoare divizor: # ffee00
• Înălțimea divizorului: 25vw (desktop), 77vw (tabletă), 90vw (telefon)
• Flip divizor: vertical
• Aranjament divizor: Conținutul sub secțiune

Spațiere

Adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 4.6vw (desktop), 23vw (tabletă), 25vw (telefon)
• Căptușeală inferioară: 4.6vw (desktop), 13vw (tabletă), 11vw (telefon)

Adăugați rândul # 1

Structura coloanei

După ce ați completat setările secțiunii, puteți adăuga primul rând. Alegeți următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Modificați valorile de umplere de sus și de jos ale rândului în continuare.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw

Adăugați modulul text 1 în coloană

Adauga continut

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul de text. Introduceți un conținut de paragraf la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Monoton
• Culoarea textului: # 000000
• Dimensiune text: 24vw (desktop), 35vw (tabletă și telefon)
• Înălțimea liniei de text: 1em
• Aliniere text: centru

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Treceți la modulul următor, care este un alt modul de text. Adăugați un conținut la alegere.

Setări text

Modificați setările de text ale modulului în consecință:

• Font text: Montserrat
• Culoarea textului: # 000000
• Dimensiune text: 1,2vw (desktop), 2,6vw (tabletă), 3vw (telefon)
• Înălțimea liniei textului: 1,8em
• Aliniere text: centru

Spațiere

Completați setările modulului adăugând câteva margini personalizate în partea de sus și de jos.

• Marja superioară: 2vw
• Marja inferioară: 6vw

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și reglați setările de dimensionare după cum urmează:

• Lățime: 32vw (desktop), 50vw (tabletă și telefon)
• Lățime maximă: 100%

Spațiere

Modificați și setările de spațiere.

• Marja superioară: 7vw (desktop), 22vw (tabletă), 59vw (telefon)
• Căptușeală de sus: 0vw
• Căptușeală inferioară: 0vw

Setările coloanelor 1 și 2

Culoare de fundal implicită

După ce ați finalizat setările generale de rând, puteți deschide fiecare coloană individual și puteți face unele modificări, începând cu culoarea de fundal.

• Culoare fundal: #FFFFFF

Plasați cursorul pe culoarea de fundal

Modificați culoarea de fundal la cursor.

• Culoare fundal: # fffa00

Frontieră

Adăugați și câteva colțuri rotunjite.

• Colțuri rotunjite: 20 px (toate colțurile)

Default Box Shadow

Treceți la setările de umbră a casetei și aplicați următoarele modificări:

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0)

Hover Box Shadow

Modificați culoarea umbrei la cursor.

• Culoare umbră: rgba (0,0,0,0.12)

Scala de transformare implicită

Apoi, accesați setările scalei de transformare și asigurați-vă că valorile implicite rămân „100%”.

• Dreapta: 100%
• Partea de jos: 100%

Scala de transformare a cursorului

Schimbați valorile scalei de transformare la cursor:

• Dreapta: 110%
• Jos: 110%

Adăugați un modul de text în coloana 1

Adauga continut

După ce ați completat setările de rând și coloană, adăugați un modul de text la coloana 1 cu un conținut de paragraf la alegere.

Adăugați un link

Adăugați un link către modulul următor.

• Adresă URL a modulului: #
• Țintă link modul: În aceeași fereastră

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Montserrat
• Greutatea fontului textului: Bold
• Stil de text text: majuscule
• Culoarea textului: # 000000
• Dimensiune text: 0,8vw (desktop), 2vw (tabletă), 3vw (telefon)
• Spațiere scrisoare text: 1 px
• Înălțimea liniei textului: 1,8em
• Aliniere text: centru

Spațiere

Apoi, accesați setările de spațiere și aplicați câteva valori personalizate de umplere sus și jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 2vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 3vw (tabletă), 4vw (telefon)

Clonați modulul text și plasați duplicatul în coloana 2

După ce ați finalizat modulul de text și toate setările acestuia, puteți clona întregul modul și puteți plasa duplicatul în coloana 2.

Schimbați conținutul

Asigurați-vă că modificați conținutul modulului duplicat.

Schimbați legătura

Schimbați și linkul.

3. Salvați modificările constructorului de teme

După finalizarea proiectării, puteți salva toate setările șablonului. Asta e!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să configurați și să creați un șablon de 404 pagini. Generatorul de teme al Divi și opțiunile de proiectare încorporate vă permit să atingeți fiecare pagină a site-ului dvs. web folosind șabloane personalizate. Sperăm că vă bucurați de toate tutorialele Divi Theme Builder! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.