Cum să includeți fără probleme un formular de contact în coloana glisantă în secțiunea Divi Hero

Când vă gândiți la modalități de a include CTA-uri în proiectarea paginii dvs., puteți lua în considerare includerea unui formular de contact în secțiunea erou. Această abordare permite oamenilor să ia legătura imediat cu dvs. fără a fi nevoie să navigați mai departe pe site-ul dvs. web. Dacă sunteți în căutarea unui mod perfect de a face acest lucru să funcționeze în cadrul Divi, veți iubi această postare. În acest tutorial, vă vom arăta cum să adăugați un formular de contact în coloana de diapozitive în secțiunea erou folosind doar opțiunile încorporate ale Divi. Veți putea descărca gratuit fișierul JSON!

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 GRATUIT aspectul secțiunii erou a formularului de contact al coloanei

Pentru a pune mâna pe aspectul secțiunii erou a formularului de contact pentru coloana 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!

Să începem să recreăm

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # ff8949

Imagine de fundal

Urmează să încărcăm un model de fundal care face parte din pachetul de aspect al consilierului financiar. Puteți găsi această imagine de fundal în dosarul pe care l-ați putut descărca la începutul acestei postări.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centru

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

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

Revărsări

Completați setările secțiunii ascunzând debordurile în fila avansată. Acest lucru se va asigura că animațiile pe care le adăugăm mai târziu nu vor depăși containerul secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Egalizați înălțimile coloanei: Da
• Lățime: 80% (desktop), 100% (tabletă și telefon)
• Lățime maximă: 1380 px
• Alinierea rândurilor: corect

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și modificați setările de spațiere pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 22%
• Căptușeală inferioară: 22%
• Căptușeală stângă: 10% (numai tabletă și telefon)
• Căptușeală dreaptă: 10% (numai tabletă și telefon)

Setări coloana 2

Culoare de fundal

Apoi, vom deschide setările coloanei 2 și vom folosi o culoare de fundal alb.

• Culoare fundal: #ffffff

Animaţie

Vom completa setările coloanei 2 aplicând următoarele setări de animație:

• Direcția animației: stânga (desktop), sus (tabletă și telefon)
• Durata animației: 1500 ms
• Intensitatea animației: 70%
• Animație Opacitate de pornire: 100%

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

Adăugați conținut H1

Este timpul să adăugați module, începând cu un prim modul de text din coloana 1. Adăugați conținut H1 la alegere.

Setări text H1

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

• Titlu Font: Oswald
• Stilul fontului de titlu: majuscule
• Culoare text antet: #ffffff
• Dimensiune text antet: 120 px (desktop), 70 px (tabletă), 60 px (telefon)

Dimensionare

Modificăm și setările de dimensionare ale modulului.

• Lățime: 75% (desktop), 100% (tabletă și telefon)
• Alinierea modulului: stânga

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

Adăugați conținut de descriere

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

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Deschideți Sans
• Culoarea textului: #ffffff
• Înălțimea liniei textului: 1.9em

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 75% (desktop), 100% (tabletă și telefon)
• Alinierea modulului: stânga

Adăugați modulul buton la coloana 1

Adăugați o copie

Ultimul modul de care avem nevoie în coloana 1 este un modul buton. Adăugați o copie la alegere.

Setări buton

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

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: #ffffff
• Raza chenarului butonului: 1 px

• Buton Font: Oswald
• Stilul fontului butonului: majuscule

Adăugați Blurb Module în coloana 2

Adauga continut

La a doua coloană. Acolo, primul modul de care avem nevoie este un modul Blurb. Adăugați un titlu la alegere.

Selectați pictograma

Apoi, selectați o pictogramă.

Setări pictograme

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

• Culoare pictogramă: # ffd8c6
• Plasarea pictogramelor: sus
• Alinierea pictogramelor: centru
• Utilizați pictograma Dimensiune font: Da
• Dimensiune font pictogramă: 250 px (desktop), 150 px (tabletă și telefon)

Setări text titlu

Modificați apoi setările pentru textul titlului.

• Titlu Nivel antet: H2
• Titlu Font: Oswald
• Stilul fontului titlului: majuscule
• Alinierea textului titlului: centru
• Culoare text titlu: # ff8949
• Dimensiune text titlu: 38 px

Spațiere

Adăugați și o umplutură la stânga și la dreapta.

• Căptușeală stângă: 11%
• Căptușeală dreaptă: 11%

Animaţie

Și completați modulul adăugând următoarele setări de animație:

• Direcția animației: Jos
• Durata animației: 1100 ms
• Întârziere animație: 400 ms
• Animație Opacitate de pornire: 100%

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

Întoarceți câmpurile la lățime completă

Până la ultimul modul, care este un modul de formular de contact. Deschideți numele și câmpurile de e-mail individual și faceți-le lățime completă în setările de aspect.

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

Culoare de fundal

Apoi, reveniți la setările generale ale formularului de contact și adăugați o culoare de fundal.

• Culoare fundal: # f7f7f7

Setări câmpuri

Treceți la fila de proiectare și faceți câteva modificări la setările câmpurilor următoare.

• Culoarea fundalului câmpurilor: #ffffff
• Culoare text câmpuri: # ff8949
• Marja superioară a câmpurilor: 15 px
• Câmpuri Marja de jos: 15 px
• Căptușire de câmp: 20 px
• Căptușeală inferioară a câmpurilor: 20 px

• Fields Font: Oswald
• Câmpuri Stil Font: majuscule
• Aliniere text câmpuri: centru
• Dimensiune text câmpuri: 21 px

Setări buton

Apoi, stilizați butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: # ff8949
• Raza chenarului butonului: 1 px

• Buton Font: Oswald
• Stilul fontului butonului: majuscule

Dimensionare

De asemenea, ne asigurăm că lățimea este „100%” în setările de dimensionare.

• Lățime: 100%

Spațiere

Treceți la setările de spațiere și aplicați câteva valori de umplere personalizate.

• Căptușeală superioară: 14%
• Căptușeală inferioară: 14%
• Căptușeală stângă: 12%
• Garnitura dreapta: 12%

Animaţie

Apoi, utilizați următoarele setări de animație:

• Stil de animație: Slide
• Direcția animației: sus
• Durata animației: 1100 ms
• Întârziere animație: 400 ms
• Animație Opacitate de pornire: 100%

Poziţie

Și completați setările modulului (și tutorialul) prin repoziționarea modulului numai pe desktop:

• Poziție: Absolută (desktop), implicită (tabletă și telefon)
• Locație: Centrul de jos

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ă includeți fără probleme un formular de contact în secțiunea erou. Mai exact, am creat un formular de contact în coloană, care arată excelent pe toate dimensiunile ecranului. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, 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.