Crearea mai multor forme de contact vizate pe Hover într-un singur design cu Divi

Modul în care afișați formularele de contact pe site-ul dvs. web poate contribui cu siguranță la creșterea ratelor de conversie. În afară de crearea unor formulare de contact frumoase și ușor de utilizat, puteți aborda acest lucru într-un mod mai vizat. În această postare, vă vom arăta cum să creați un design cu mai multe formulare de contact care apar în funcție de serviciul pe care îl interesează vizitatorii dvs. Veți putea descărca fișierul JSON gratuit, de asemenea!

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 formularelor de contact vizate GRATUIT

Pentru a pune mâna pe aspectul gratuit al formularelor de contact direcționate, 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!

După ce ați încărcat aspectul pe pagina dvs., va trebui să adăugați în continuare codul CSS la pagina la care lucrați. Puteți găsi codul CSS la sfârșitul acestui tutorial.

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Adăugați secțiunea nr. 1

Deschideți o pagină nouă sau existentă și adăugați o nouă secțiune obișnuită.

Adăugați un rând nou

Structura coloanei

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

Adăugați un modul de text

Adăugați conținut H2

Adăugați un modul de text în coloană cu un conținut H2 la alegere.

Setări text H2

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

• Titlul 2 Greutate font: Ultra Bold
• Titlul 2 Stil font: majuscule
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text: 6vw
• Rubrica 2 Spațierea literelor: -0,4vw
• Titlul 2 Înălțimea liniei: 0,8em

Spațiere

Adăugați și câteva marje personalizate de sus și de jos.

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

Adăugați secțiunea 2

Fundal de gradient

Adăugați o altă secțiune chiar sub cea anterioară și aplicați următorul fundal de gradient (sau orice fundal de gradient la alegere):

• Culoare 1: # 30fff1
• Culoare 2: # 4635ff
• Direcția gradientului: 110 grade
• Poziție finală: 85%

Divizor de top

Treceți la fila de proiectare și adăugați un separator superior.

• Stil divizor: Găsiți în listă
• Aranjament divizor: Conținutul sub secțiune

Separator inferior

Adăugați și un separator inferior.

• Stil divizor: Găsiți în listă
• Aranjament divizor: Conținutul sub secțiune

Dimensionare

Schimbați înălțimea în setările de dimensionare următoare.

• Înălțime: 200 px

Spațiere

Adăugați câteva setări de spațiere personalizate în continuare.

• Marja inferioară: 30vw (desktop), 45vw (tabletă), 200vw (telefon)
• Căptușeală de sus: 0vw
• Căptușeală inferioară: 0vw

Clasa CSS

Mai târziu în postare, vom adăuga un cod CSS pentru ca efectul să funcționeze. În pregătirea pentru aceasta, vom adăuga o clasă CSS la secțiune.

• Clasa CSS: secțiunea de contact

Adăugați un rând nou

Structura coloanei

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

Revărsare

Deschideți setările rândului și ascundeți revărsările.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Tranziții

Eliminați și durata tranziției.

• Durata tranziției: 0 ms

Adăugați modul Blurb

Adăugați un titlu în caseta de conținut

E timpul să începeți să adăugați module! Adăugați un modul Blurb și introduceți un titlu la alegere, care reprezintă unul dintre serviciile dvs.

Selectați pictograma

Selectați o pictogramă în continuare.

Culoare de fundal implicită

Continuați adăugând o culoare de fundal implicită.

• Culoare fundal: #ffffff

Plasați cursorul pe culoarea de fundal

Schimbați culoarea de fundal la cursor.

• Culoare fundal: # 000000

Setări implicite pentru pictograme

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

• Culoare pictogramă: # 000000
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 2,5vw (Desktop), 5vw (Tabletă), 7vw (Telefon)

Plasați cursorul pe setările pictogramei

Modificați culoarea pictogramei la cursor.

• Culoare pictogramă: #ffffff

Setări implicite pentru textul titlului

Deschideți apoi setările pentru textul titlului și aplicați următoarele modificări:

• Titlu Greutate font: Ultra Bold
• Stilul fontului titlului: majuscule
• Alinierea textului titlului: centru
• Culoare text titlu: # 000000
• Dimensiune text titlu: 0,9vw (desktop), 1,8vw (tabletă), 3vw (telefon)

Plasați cursorul pe setările pentru textul titlului

Schimbați culoarea textului titlului la cursor.

• Culoarea textului titlului: #ffffff

Dimensionare

Modificați lățimea pe diferite dimensiuni de ecran în continuare.

• Lățime: 10vw (desktop), 17vw (tabletă), 30vw (telefon)
• Alinierea modulului: centru

Spațiere

Și adăugați câteva valori de marjă și umplere personalizate la setările de spațiere.

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

Frontieră

De asemenea, transformăm modulul într-un cerc adăugând „50vw” la fiecare dintre colțurile din setările de margine.

Box Shadow

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

Scala de transformare implicită

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

Scala de transformare a cursorului

Schimbați aceste valori la plecare.

• Jos: 120%
• Dreapta: 120%

Adăugați un formular de contact

Faceți câmpuri de nume și e-mail lățime completă

Al doilea modul de care avem nevoie în acest rând este un modul de contact. După ce ați adăugat formularul de contact, deschideți numele și câmpurile de e-mail și faceți-le lățime completă.

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

Eliminați câmpul mesajului și introduceți trei câmpuri de intrare pentru întrebări specifice serviciului

Adăugați trei întrebări care se aplică serviciului respectiv.

Dezactivați Captcha

Dezactivați și opțiunea captcha.

• Afișați Captcha: nu

Setări câmpuri

Treceți la fila de proiectare și modificați setările câmpurilor în consecință:

• Căptușire superioară a câmpurilor: 0,6vw (desktop), 0,9vw (tabletă), 1,5vw (telefon)
• Căptușeală inferioară câmpuri: 0,6vw (desktop), 0,9vw (tabletă), 1,5vw (telefon)
• Dimensiune text câmpuri: 0,8vw (desktop), 1,6vw (tabletă), 2,3vw (telefon)

Setări buton

Schimbați în continuare aspectul butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px
• Buton Font Greutate: Ultra Bold
• Stilul fontului butonului: majuscule

Spațiere

Adăugați și câteva valori de umplere.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw
• Garnitura stânga: 2vw
• Garnitura dreapta: 2vw

Setări de margine

Nu în ultimul rând, accesați setările de margine și adăugați „10 px” la fiecare dintre colțuri.

Clone Row de trei ori

După ce ați finalizat primul rând, puteți continua și clona de trei ori.

Schimbați conținutul și pictograma Blurb pentru fiecare rând duplicat

Asigurați-vă că modificați titlul și pictograma blurb pentru fiecare duplicat.

Modificați întrebările specifice serviciului pentru fiecare rând duplicat

Modificați și întrebările specifice ale formularului de contact.

Setări suplimentare de rând

Înălțime implicită

Deschideți din nou setările primului rând, accesați setările de dimensionare și modificați înălțimea pe diferite dimensiuni ale ecranului.

• Înălțime: 18vw (desktop), 27vw (tabletă), 38vw (telefon)

Plasați înălțimea

Aduceți înapoi înălțimea pentru a porni automat.

• Înălțime: auto

Extindeți setările pentru dimensionarea rândurilor la toate rândurile din secțiune

După ce ați modificat setările de dimensionare pentru primul rând, puteți extinde setările la toate rândurile din secțiune.

Plasați rândurile una lângă cealaltă pe desktop și tabletă

Deschideți Setări pagină

Nu în ultimul rând, vom plasa toate cele patru rânduri una lângă alta pe tabletă și desktop. Pentru aceasta, deschideți setările paginii.

Introduceți CSS personalizat

Treceți la caseta CSS personalizată și adăugați următoarele linii de cod CSS:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

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ă creați mai multe formulare de contact vizate într-un singur design. Acesta este un mod minunat de a afla mai multe despre vizitatorii dvs. și de ce serviciu anume îi interesează. Dacă aveți întrebări sau sugestii, asigurați-vă că 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.