Cum se adaugă automat un formular de contact în partea de jos a tuturor paginilor cu Divi's Theme Builder

Când sunteți ocupat să configurați toate paginile pe care doriți să le includeți pe site-ul dvs., sunt șanse mari să doriți să includeți un formular de contact la sfârșitul fiecărei pagini pentru a face călătoria vizitatorilor mai ușoară. Cu Divi, puteți, desigur, adăuga un formular de contact la pagina însăși, dar dacă preferați să simplificați procesul, este posibil și acest lucru. În tutorialul Divi de astăzi, vă vom arăta cum să adăugați automat un formular de contact în partea de jos a tuturor paginilor dvs. simultan. De asemenea, vom adăuga automat o pictogramă fixă ​​din dreapta jos cu un link ancoră care va redirecționa automat persoanele către secțiunea de contact a paginii pe care se află. Veți putea descărca și șablonul de pagină gratuit!

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ă GRATUIT

Pentru a pune mâna pe șablonul de pagină gratuit, 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!

Prezentare generală a tutorialului

• Configurați paginile de pe site-ul dvs. web utilizând un pachet de aspect la alegere
• Odată setat stilul de proiectare a paginii, puteți reutiliza stilul de design în formularul de contact din pagina de jos
• Pentru a adăuga formularul de contact din pagina de jos, va trebui mai întâi să creați un nou șablon dedicat tuturor paginilor
• Odată ce șablonul a fost creat, puteți începe să construiți corpul șablonului utilizând constructorul vizual Divi
• Pentru a ne asigura că tot conținutul unic al paginii apare pe fiecare pagină, vom adăuga modulul pentru conținutul postării
• Modulul de conținut al postării conține întregul design dinamic al paginii
• Sub modulul de conținut al postării, vom adăuga o altă secțiune pentru formularul nostru de contact
• Vom proiecta formularul de contact și ne vom asigura că adăugăm un ID CSS unic în secțiune, vom folosi acest ID CSS pentru a crea un link de ancorare
• Bonus: vom adăuga o pictogramă fixă ​​în colțul din dreapta jos al fiecăreia dintre paginile noastre și vom conecta pictograma la secțiunea de contact a acelei pagini.

1. Configurați paginile site-ului web folosind Layout Pack of Choice

Abordarea pe care o adoptăm funcționează pe orice fel de site web pe care îl construiți. Dar pentru acest tutorial anume, folosim stilul de design al revistei Layout Pack. Dacă utilizați această abordare pe orice alt site web, nu ezitați să modificați designul în funcție de nevoile dvs.

2. Accesați Divi Theme Builder și adăugați un șablon de pagină nou

Accesați Divi Theme Builder și adăugați un șablon de pagină nou

Accesați Divi Theme Builder de pe site-ul dvs. web. Acolo, adăugați un șablon nou.

Utilizați acest șablon nou în toate paginile dacă doriți ca formularul de contact din pagina de jos să apară pe toate paginile. Puteți face ca acesta să apară și pe anumite pagini și / sau să îl excludeți din anumite pagini.

• Utilizați pe: Toate paginile

Începeți să construiți corpul șablonului

După ce ați creat noul șablon, puteți începe să construiți corpul personalizat.

3. Adăugați conținutul paginii în corpul șablonului

Setări secțiune

Spațiere

În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și eliminați toate căptușelile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind 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 containerului secțiunii.

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

Spațiere

Eliminați și căptușeala implicită de sus și de jos a tuturor rândurilor.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de conținut pentru postare în coloană

Continuați prin adăugarea modulului Postați conținutul în coloana rândului dvs. Acest modul reprezintă tot conținutul dinamic al paginii pe care l-ați creat.

4. Adăugați un formular de contact în partea de jos a corpului șablonului

Adăugați o secțiune nouă

Fundal de gradient

Sub secțiunea care conține modulul Conținut post, vom adăuga o altă secțiune obișnuită. Această secțiune va fi dedicată formularului de contact. Deschideți setările secțiunii și adăugați un fundal de gradient.

• Culoare 1: #ffffff
• Culoare 2: # ffc077
• Poziția inițială: 50%
• Poziție finală: 50%

ID CSS

Includeți și un ID CSS.

• ID CSS: contact

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune și utilizați următoarea structură de coloane:

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H2

Primul modul de care avem nevoie în prima coloană este un modul de text. Introduceți un conținut la alegere.

Setări text H2

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

• Rubrica 2 Font: Montserrat
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Culoarea textului: # 000000
• Titlul 2 Dimensiune text: 70 px (desktop), 48 px (tabletă), 36 px (telefon)
• Titlul 2 Înălțimea liniei: 1.2em

Dimensionare

Adăugați și o lățime maximă.

• Lățime maximă: 750 px

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

Adauga continut

Adăugați un alt modul de text în coloana 1 cu un conținut la alegere.

Setări text

Modificați setările de text ale modulului după cum urmează:

• Font text: Cardo
• Greutatea fontului textului: Bold
• Culoare text: rgba (0,0,0,0.03)
• Dimensiune text: 150 px (desktop), 100 px (tabletă), 60 px (telefon)
• Înălțimea liniei de text: 1em

Spațiere

Și jucați-vă cu setările de spațiere pe diferite dimensiuni de ecran.

• Marja superioară: -0.8em (desktop), -100px (tabletă), -80px (telefon)
• Marja stângă: -0.8em (desktop și tabletă), -60px (telefon)

Adăugați formular de contact în coloana 2

Adăugați toate câmpurile necesare

În a doua coloană, singurul modul de care avem nevoie este un modul de contact. Adăugați câte câmpuri aveți nevoie și conectați-vă contul de e-mail la modul.

Întoarceți câmpul Nume și e-mail Lățime completă

Continuați prin rotirea lățimii complete a câmpurilor de nume și adresă de e-mail.

• Faceți lățime completă: Da

Setări câmpuri

Reveniți la setările generale ale formularului de contact și modificați culoarea de fundal a câmpurilor.

• Culoarea fundalului câmpurilor: #ffffff

Setări buton

Modificați apoi setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 14 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000 (Implicit), # ff2a38 (Plasați cursorul)
• Lățimea chenarului butonului: 8 px

• Culoare margine buton: rgba (0,0,0,0)
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font Greutate: Ultra Bold
• Stilul fontului butonului: majuscule
• Pictogramă buton: Găsiți în listă

Frontieră

Adăugați și o rază de margine.

• Toate colțurile: 5 px

Box Shadow

Și completați setările modulului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 50 px
• Puterea răspândirii umbrei cutiei: -4px
• Culoare umbră: rgba (0,0,0,0.08)

Bonus: Adăugați pictograma ancoră fixă ​​în partea de jos-dreapta la corpul șablonului

Adăugați o secțiune nouă

Spațiere

Acum, pentru a adăuga pictograma fixă ​​din dreapta jos la fiecare pagină, va trebui să adăugăm o altă secțiune obișnuită. Deschideți secțiunea și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Indicele Z

Măriți și indexul z al secțiunii. Acest lucru vă va asigura că pictograma va rămâne deasupra întregului conținut al paginii.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

Adăugați un rând nou la secțiune folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și permiteți rândului să ia întreaga lățime a secțiunii.

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

Spațiere

Eliminați și toate căptușelile implicite, de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați Blurb Module în coloană

Lasă caseta de titlu și conținut goală

Pentru a afișa pictograma din dreapta jos, vom folosi un modul Blurb. Asigurați-vă că lăsați golul titlului și al conținutului.

Selectați pictograma

Apoi, selectați o pictogramă la alegere.

Legătură

Conectați pictograma la secțiunea de contact adăugând ID-ul la adresa URL a linkului modulului.

• Adresă URL a modulului: #contact

Culoare de fundal

Schimbați și culoarea de fundal a modulului.

• Culoare fundal: # ffc077

Setări pictograme

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

• Culoare pictogramă: #ffffff
• Plasare imagine / pictogramă: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 30 px

Dimensionare

Modificați și setările de dimensionare ale modulului.

• Lățime: 100 px
• Alinierea modulului: dreapta

Spațiere

Și adăugați niște căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 33 px
• Căptușeală inferioară: 33 px

Frontieră

Apoi, accesați setările de margine și adăugați câteva colțuri rotunjite.

• Toate colțurile: 100 px

Box Shadow

Adăugați și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 50 px
• Puterea răspândirii umbrei cutiei: -15 px
• Culoare umbră: rgba (0,0,0,0.23)

Element principal CSS

Pentru a remedia pictograma, vom aplica trei linii de cod CSS elementului principal al modulului din fila avansată.

bottom: 20px;
right: 20px;
position: fixed;

Blurb Image CSS

Și eliminați și umplutura de jos implicită a imaginii modulului.

margin-bottom: 0px;

6. Salvați toate modificările și rezultatul previzualizării constructorului de teme

După ce ați completat corpul șablonului de pagină, puteți salva toate modificările, ieși din Generatorul de teme și vizualiza rezultatul pe toate paginile dvs.!

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ă adăugați un formular de contact în partea de jos a tuturor paginilor dvs. simultan. Pentru a realiza acest lucru, am creat un nou șablon de pagină, am inclus Modulul de conținut Post și am adăugat o secțiune de contact la sfârșitul șablonului. De asemenea, am inclus o pictogramă fixă ​​din dreapta jos cu un link ancoră care va redirecționa vizitatorii către secțiunea de contact a paginii pe care se află. Ați reușit să descărcați gratuit fișierul JSON șablon de pagină! 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.