Când creați un antet personalizat pentru dvs site-ul web, folosind generatorul de teme de la Divi, vă veți găsi în căutarea modului perfect de a adăuga un AAL (îndemn la acțiune). O modalitate de a face acest lucru este să adăugați un formular de contact defilare. Acest lucru vă va ajuta să păstrați aspectul general al antetului curat, oferind în același timp posibilitatea de a intra contactați-ne cu tine, fără a fi nevoie să derulezi în jos. În acest tutorial, vă vom arăta cum să creați un formular de contact meniu derulant folosind Divi și JQuery și codul CSS. De asemenea, veți putea descărca fișierul JSON gratuit!
Să mergem.
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.
1. Accesați Divi Theme Builder și începeți să creați un antet global
Accesați Divi Theme Builder
Începeți accesând Divi Theme Builder în backend-ul site-ului dvs. WordPress.
Creați un antet global
Faceți clic pe „Adăugați antet global” și selectați „Creare antet global” pentru a începe crearea unui antet global personalizat.
2. Construiți designul antetului
Setări secțiune
Culoare de fundal
Odată ajuns în șablonul de antet general, veți observa o secțiune. Deschideți această secțiune și utilizați o culoare de fundal alb.
- Culoare fundal: #FFFFFF
spaţierea
Apoi îndepărtați captusea implicită superioară și inferioară din secțiune.
- Garnitură superioară: 0px
- Garnitura de jos: 0px
Cutie de umbră
Aplicați, de asemenea, o nuanță de cutie subtilă.
- Cutie de umbră Box Box: 50px
- Culoare umbră: rgba (0,0,0,0,15)
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:
dimensionarea
Fără a adăuga mai multe module, deschideți parametrii liniei și modificați parametrii de dimensionare după cum urmează:
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Egalizați înălțimile coloanei: Da
- Lățime: 95%
- Lățime maximă: 100%
spaţierea
Apoi adăugați o umplere personalizată superioară și inferioară.
- Căptușeală superioară: 1vw
- Garnitura de jos: 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 Z Index
De asemenea, ne asigurăm că a doua coloană are o valoare a indexului z mai mare în scopuri reactive.
- Indicele Z: 12
Adăugați un modul de imagine în coloana 1
Descărcați logo-ul
Este timpul să începeți să adăugați module! Începeți cu un modul de imagine în coloana 1. Încărcați o siglă.
aliniere
Apoi schimbați alinierea modulului.
- Aliniere imagine: centru
dimensionarea
De asemenea, schimbați lățimea.
- Lățime: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
Adăugați un modul de meniu la coloana 2
Selectați meniul
În a doua coloană, vom adăuga un modul de meniu.
Dispoziţie
Treceți la fila de proiectare a modulului și schimbați stilul de aspect.
- Stil: Centrat
Setări text de meniu
Apoi schimbați setările textului din meniul modulului.
- Font de meniu: Deschideți fără
- Greutatea fontului de meniu: Semi îndrăzneț
- Culoarea textului meniului: # 000000
- Dimensiunea textului meniului: 0.8vw (desktop), 2vw (tabletă), 3vw (telefon)
- Spațiu de litere de meniu: 1px
Setări text meniu derulant
Apoi schimbați culoarea liniei din meniul derulant.
- Culoarea liniei din meniul derulant: # 007dff
icoane
Cu culoarea pictogramei meniului hamburger.
- Culoarea pictogramei meniului Hamburger: # 007dff
Adăugați modulul de text 1 la coloana 3
Adăugați o copie
Să trecem la al treilea modul! Adăugați un modul text cu o copie la alegere.
Culoare de fundal
Apoi adăugați o culoare de fundal.
- 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 Sans
- Greutatea fontului textului: bold
- Culoarea textului: #ffffff
- Dimensiunea textului: 0.8vw (desktop), 2vw (tabletă), 3vw (telefon)
- Alinierea textului: centru
dimensionarea
Apoi modificați parametrii de dimensionare a modulului.
- Lățime: 33%
- Alinierea modulului: centru
spaţierea
Apoi adăugați o umplere personalizată superioară și inferioară.
- Înveliș superior: 0.8vw (desktop), 2vw (tabletă și telefon)
- Garnitură de jos: 0.8vw (birou), 2vw (tabletă și telefon)
frontieră
Și completați parametrii modulului adăugând o rază de frontieră.
- Toate colțurile: 100px
Adăugați modulul de text 2 la coloana 3
Adăugați un simbol în zona de conținut
Să trecem la modulul următor, care este un alt modul text. Adăugați următoarea săgeată în zona 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 Sans
- Culoarea textului: # 007fff
- Dimensiunea textului: 3vw
- Înălțimea liniei de text: 0em
- Alinierea textului: centru
Indicele Z
De asemenea, mărim indicele z al modulului.
- Indicele Z: 11
Adăugați modulul formularului de contact la coloana 3
Acum puteți adăuga un formular de contact chiar în partea de jos a modulului de text care conține săgeata. Acest modul este destul de simplu de utilizat, așa că va trebui să personalizați câmpurile pe care doriți să le faceți vizibile.
3. Personalizați elementele pentru a crea un formular de contact cu un singur clic
Adăugați înălțimea coloanei 3
Odată ce toate modificările sunt la locul lor, este timpul să creați efectul. Primul pas către obținerea rezultatului dorit este să deschideți setările din coloana 3 și să adăugați înălțimea personalizată receptivă în fila avansată.
Oficiul pentru:
height: 3vw;
tabletă:
height: 5vw;
Telefon:
height: 6vw;
Adăugați o clasă CSS la buton și săgeată
Apoi vom adăuga aceeași clasă CSS la primele două module de text din coloana 3.
- Clasa CSS: arata-contactați-ne
Adăugați o clasă CSS în formularul de contact
De asemenea, vom avea nevoie de o clasă CSS personalizată pentru modulul Formular de contact.
- Clasa CSS: contactați-ne-form-modul
Ascundeți modulul Formular 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 la coloana 3 cu codul JQuery și CSS
Și pentru a crea funcția de clic, vom avea nevoie de un cod JQuery. De asemenea, vom folosi 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;}
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Birou
Ce să-ți amintești
În acest articol, v-am arătat cum să adăugați un formular de contact drop-down la antetul dvs. personalizat. Este o modalitate excelentă de a declanșa acțiune din timp.
