Cum să adăugați un formular de contact dropdown la antetul dvs. global

Când creați un antet personalizat pentru site-ul dvs. web, utilizând generatorul de teme al lui Divi, veți găsi căutarea modului ideal de a adăuga un CTA. O modalitate prin care puteți face acest lucru este prin adăugarea unui formular de contact drop-down. Acest lucru vă va ajuta să păstrați aspectul general al antetului curat, oferind în același timp posibilitatea de a intra în contact fără a fi nevoie să derulați. În acest tutorial, vă vom arăta cum să creați un formular de contact drop-down utilizând Divi și câteva coduri JQuery și CSS. 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 șablonul Global Header

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

1. Accesați Divi Theme Builder și începeți să creați antet global

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder din backend-ul site-ului dvs. WordPress.

Construiți antet global

Faceți clic pe „Adăugați antet global” și selectați „Construiți antet global” pentru a începe să creați un antet global personalizat.

2. Construiți designul antetului

Setări secțiune

Culoare de fundal

Odată ajuns în șablonul global de antet, veți observa o secțiune. Deschideți acea secțiune și utilizați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Spațiere

Eliminați umplutura implicită de sus și de jos a secțiunii în continuare.

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

Box Shadow

Aplicați și o umbră de casetă subtilă.

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

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

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 95%
• Lățime maximă: 100%

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

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

Elementul principal

Și aliniați tot conținutul coloanei adăugând o singură linie de cod CSS la elementul principal al rândului.

align-items: center;

Coloana 2 Index Z

De asemenea, ne asigurăm că a doua coloană are o valoare a indexului z mai mare în scopuri receptive.

• Indicele Z: 12

Adăugați modulul de imagine în coloana 1

Încărcați sigla

E timpul să începeți să adăugați module! Începând cu un modul de imagine în coloana 1. Încărcați o siglă.

Aliniere

Schimbați alinierea modulului în continuare.

• Aliniere imagine: centru

Dimensionare

Modificați și lățimea.

• Lățime: 3vw (desktop), 5vw (tabletă), 7vw (telefon)

Adăugați un modul de meniu în coloana 2

Selectați Meniu

În a doua coloană, vom adăuga un modul de meniu.

Aspect

Treceți la fila de proiectare a modulului și schimbați stilul de aspect.

• Stil: Centrat

Setări text meniu

Modificați apoi setările de text ale meniului modulului.

• Font meniu: Deschideți Sans
• Greutatea fontului meniului: Semi Bold
• Culoare text meniu: # 000000
• Dimensiune text meniu: 0,8vw (desktop), 2vw (tabletă), 3vw (telefon)
• Spațiere scrisori meniu: 1 px

Setări text din meniul drop-down

Apoi, modificați culoarea liniei meniului derulant.

• Culoare linie meniu derulant: # 007dff

Icoane

Împreună cu culoarea pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: # 007dff

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

Adăugați o copie

La al treilea modul! Adăugați un modul de text cu o copie la alegere.

Culoare de fundal

Adăugați o culoare de fundal în continuare.

• Culoare fundal: # 007dff

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
• Greutatea fontului textului: Bold
• Culoarea textului: #ffffff
• Dimensiune text: 0,8vw (desktop), 2vw (tabletă), 3vw (telefon)
• Aliniere text: centru

Dimensionare

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

• Lățime: 33%
• Alinierea modulului: centru

Spațiere

Apoi, adăugați câteva căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 0,8vw (desktop), 2vw (tabletă și telefon)
• Căptușeală inferioară: 0,8vw (desktop), 2vw (tabletă și telefon)

Frontieră

Și completați setările modulului adăugând o rază de margine.

• Toate colțurile: 100 px

Adăugați modulul de text 2 în coloana 3

Adăugați simbolul în caseta de conținut

Treceți la modulul următor, care este un alt modul de text. Adăugați următorul simbol săgeată în caseta de conținut: „▼”.

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: # 007fff
• Dimensiune text: 3vw
• Înălțimea liniei de text: 0em
• Aliniere text: centru

Indicele Z

Mărim și indexul z al modulului.

• Indicele Z: 11

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

Adăugați câmpuri de lățime completă

Următorul și ultimul modul de care avem nevoie în a treia coloană este un modul de formular de contact. Adăugați toate câmpurile de lățime completă de care aveți nevoie.

Adauga titlu

Folosiți și un titlu.

Culoare de fundal

În continuare schimbăm culoarea de fundal.

• Culoare fundal: # e7f2ff

Setări câmpuri

Apoi, treceți la fila de proiectare a modulului și modificați setările câmpurilor.

• Culoarea fundalului câmpurilor: #ffffff
• Culoare text câmpuri: #dddddd
• Câmpuri de focalizare Culoare text: # 007dff
• Căptușire superioară a câmpurilor: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Câmpurile de umplere de jos: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Câmpuri Font: Deschideți Sans

• Dimensiune text câmpuri: 0,7vw (desktop), 1,8vw (tabletă), 3vw (telefon)

Setări text titlu

Modificați apoi setările pentru textul titlului.

• Titlu Nivel antet: H3
• Greutatea fontului titlului: Bold
• Alinierea textului titlului: centru
• Culoare text titlu: # 007dff
• Dimensiune text titlu: 1vw (desktop), 2,5vw (tabletă), 3,5vw (telefon)
• Înălțimea liniei de titlu: 1.6em

Setări text Captcha

Împreună cu setările de text captcha.

• Font Captcha: Deschideți Sans
• Culoare text Captcha: # 007dff

Setări buton

Continuați stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,8vw (Desktop), 2vw (Tabletă), 3vw (Telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 007dff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Buton Font: Deschideți Sans
• Buton Font Greutate: Bold

• Marja butonului superior: 1vw
• Căptușeală pentru butoane: 1vw (desktop), 2vw (tabletă și telefon)
• Căptușirea butonului: 1vw (Desktop), 2vw (tabletă și telefon)
• Căptușire stânga buton: 2vw (desktop), 7vw (tabletă și telefon)
• Căptușire dreaptă buton: 2vw (desktop), 7vw (tabletă și telefon)

Spațiere

Apoi, utilizați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 4vw (desktop), 6vw (tabletă și telefon)
• Căptușeală inferioară: 4vw (desktop), 6vw (tabletă și telefon)
• Căptușeală stângă: 2vw (desktop), 6vw (tabletă și telefon)
• Căptușeală dreaptă: 2vw (desktop), 6vw (tabletă și telefon)

Frontieră

Modificați apoi setările de margine.

• Toate colțurile: 10 px

Element principal, Titlu de contact și Captcha CSS

Completați setările modulului adăugând câteva mici modificări CSS în fila avansată.

Element principal:

border-radius: 20px;

Titlu de contact:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Personalizați elementele pentru a crea formular de contact făcând clic

Adăugați Coloana 3 Înălțime

Odată ce aveți toate modulele la locul lor, este timpul să creați efectul. Primul pas către atingerea rezultatului dorit este deschiderea setărilor coloanei 3 și adăugarea unor înălțimi personalizate receptive în fila avansată.

Desktop:

height: 3vw;

Comprimat:

height: 5vw;

Telefon:

height: 6vw;

Adăugați Clasa CSS la Buton și Săgeată

Apoi, vom adăuga aceeași clasă CSS la ambele prime module de text din coloana 3.

• Clasa CSS: show-contact

Adăugați Clasa CSS la Formularul de contact

Vom avea nevoie de o clasă CSS personalizată și pentru modulul Formular de contact.

• Clasa CSS: contact-formular-modul

Ascundeți modulul formularului de contact

Continuați adăugând o linie suplimentară de cod CSS la elementul principal al modulului Formular de contact. Acest lucru ne va permite să ascundem modulul înainte de a face clic.

display: none;

Adăugați un modul de cod în coloana 3 cu codul JQuery și CSS

Și pentru a crea funcția de clic, vom avea nevoie de un cod JQuery. Vom folosi și un cod CSS personalizat. Adăugați un nou modul de cod în coloana 2 cu codul. Asigurați-vă că plasați codul JQuery între etichetele de script și codul CSS între etichetele de stil.

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

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 drop-down la antetul dvs. personalizat. Aceasta este o modalitate excelentă de a declanșa acțiune chiar de la început. De asemenea, am distribuit gratuit fișierul JSON! 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.