Trebuie să adăugați un formular de contact la un antet global?
Când creați un antet personalizat pentru dvs site-ul web Folosind Divi Theme Builder, te trezești că cauți modalitatea perfectă de a adăuga un CTA (Call to Action). 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 capacitatea de a intra contactați-ne fără a fi nevoie să defilați.
În acest tutorial vă vom arăta cum să creați un formular de contact defilabil folosind Divi și JQuery și codul CSS.
Să începem!
studiu
Înainte de a merge în acest tutorial, să aruncăm o privire la o previzualizare a rezultatului pe care îl vom obține.
Creați un antet global
Accesați Creatorul de teme
Accesați Theme Builder din meniul Divi prezent în tabloul de bord WordPress și faceți clic pe „Adăugați un antet global”.
Selectați „Creați antet global”.
Creați un stil de antet
Setări secțiune
Culoare de fundal
Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți această secțiune și schimbați culoarea de fundal.
- Context: #FFFFFF
spaţierea
Apoi eliminați marginile interioare de sus și de jos implicite din secțiune.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
Cutie de umbră
Aplicați și o umbră subtilă de casetă.
- Cutie Shadow Blue Strength: 50px
- Culoare font subtitrare: rgba(0,0,0,0.15)
Adăugați o linie nouă
Structura coloanei
Adăugați un nou rând la secțiune folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga module, deschideți setările de rând și modificați setările de dimensionare după cum urmează:
- Utilizați lățimea jgheab personalizată: da
- Distanța între coloane: 1
- Armonizarea înălțimii coloanei: Da
- Lățime maximă: 95%
- Lățime maximă: 100%
spaţierea
Apoi adăugați o umplere personalizată superioară și inferioară.
- Marja internă de vârf: 1vw
- Marja internă inferioară: 1vw
elementul principal
Aliniați tot conținutul coloanei adăugând o singură linie de cod CSS la elementul rândul principal.
align-items: center;
indicele Z al coloanei 2
De asemenea, ne asigurăm că a doua coloană are o valoare mai mare a indicelui z pentru designul receptiv.
- Indicele Z: 12
Adăugați modul de imagine în coloana 1
Descărcați logo-ul
Este timpul să începeți să adăugați module! Începând cu un modul Imagine în coloana 1. Încărcați o siglă.
aliniere
Apoi schimbați alinierea modulului.
- Alinierea imaginii: centrat
dimensionarea
De asemenea, schimbați lățimea.
- Lățimea maximă: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
Adăugați modul Meniu în coloana 2
Selectați Meniu
În a doua coloană vom adăuga un modul Meniu.
Dispoziţie
Comutați la fila Stil modul și modificați stilul de aspect.
- Stiluri: centrat
Setări text de meniu
Apoi schimbați setările textului din meniul modulului.
- Meniul Font: Deschideți Niciunul
- Meniu de lumină slabă: semi-aldine
- Culoarea textului meniului: #000000
- Dimensiunea textului meniului: 0,8 vw (desktop), 2 vw (tabletă), 3 vw (telefon)
- Spațiere între litere din meniu: 1px
Setări text din meniul derulant
Apoi, schimbați culoarea liniei din meniul drop-down.
- Culoarea liniei meniului derulant: #007dff
icoane
Schimbați culoarea pictogramei meniului de hamburger.
- Culoare pictogramă meniu Hamburger: #007dff
Adăugați modulul Text în coloana 3
Adăugați un mesaj
Trecem la al treilea modul! Adăugați un modul Text cu un mesaj la alegere.
Culoare de fundal
Adăugați o culoare de fundal.
- Culoare de 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
- Text cu lumină moale: aldine
- Culoare text Text: #ffffff
- Dimensiunea textului text: 0,8 vw (desktop), 2 vw (tabletă), 3 vw (telefon)
- Alinierea textului: centrat
dimensionarea
Apoi modificați parametrii de dimensionare a modulului.
- Lățime maximă: 33%
- Alinierea modulului: Centru
spaţierea
Apoi, adăugați căptușeli personalizate de sus și de jos.
- Marja internă superioară: 0,8 vw (desktop), 2 vw (tabletă și telefon)
- Marja internă scăzută: 0,8 vw (desktop), 2 vw (tabletă și telefon)
frontieră
Și completați parametrii modulului adăugând o rază de frontieră.
- Dreptunghi rotunjit: 100px
Adăugați un alt modul Text în coloana 3
Adăugați un simbol în zona de conținut
Să trecem la următorul modul, care este un alt modul text. Adăugați următorul simbol 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
- Culoare text: #007fff
- Dimensiunea textului text: 3vw
- Înălțimea liniei textului: 0em
- Alinierea textului: centrat
indicele Z
Să creștem și indexul z al modulului.
- Indicele Z: 11
Adăugați modulul Formular de contact în coloana 3
Adăugați câmpuri cu lățime completă la alegere
Următorul și ultimul modul de care avem nevoie în a treia coloană este un modul de formular de contact. Adăugați orice câmpuri cu lățime completă de care aveți nevoie.
Adăugați un titlu
Folosiți și un titlu.
Culoare de fundal
În continuare, să schimbăm culoarea de fundal.
- Culoare de fundal: #e7f2ff
Setări câmp
Să mergem la fila Stil a modulului și să modificăm setările câmpului.
- Câmpuri de culoare de fundal: #ffffff
- Culoarea textului câmpului: #dddddd
- Culoare text focalizat: #007dff
- Câmpuri de umplutură Vertex: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Câmpuri de umplutură inferioare: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Câmpuri de font: Deschideți Niciunul
- Câmpuri Dimensiunea textului: 0,7 vw (desktop), 1,8 vw (tabletă), 3 vw (telefon)
Setări text de titlu
Editați setările pentru textul titlului.
- Introduceți titlul trei: H3
- Soft Light Titlu: Text aldine
- Alinierea textului: centrat
- Culoarea textului titlului: #007dff
- Titlu Dimensiunea textului: 1 vw (desktop), 2,5 vw (tabletă), 3,5 vw (telefon)
- Înălțimea liniei de titlu: 1,6 em
Setări de text Captcha
Cu setări de text captcha.
- Font Captcha: Open Sans
- Culoare text Captcha: #007dff
Setări buton
Continuați prin personalizarea butonului.
- Utilizați stiluri personalizate pentru Buton: Da
- Dimensiunea textului butonului: 0,8 vw (desktop), 2 vw (tabletă), 3 vw (telefon)
- Culoarea textului butonului: #ffffff
- Buton de fundal: #007dff
- Buton pentru lățimea chenarului: 0 pixeli
- Raza chenarului butonului: 100 px
- Buton Font: Deschideți Niciunul
- Buton Soft Light: text îngroșat
- Marja buton: 1vw
- Buton de umplutură superior: 1vw (desktop), 2vw (tabletă și telefon)
- Buton de umplutură de jos: 1vw (desktop), 2vw (tabletă și telefon)
- Butonul din stânga: 2vw (desktop), 7vw (tabletă și telefon)
- Butonul din dreapta: 2vw (desktop), 7vw (tabletă și telefon)
spaţierea
Utilizați valori personalizate de umplutură pe diferite dimensiuni de ecran.
- Spațiu maxim intern: 4vw (desktop), 6vw (tabletă și telefon)
- Marja internă inferioară: 4vw (desktop), 6vw (tabletă și telefon)
- Marja interioară stângă: 2vw (desktop), 6vw (tabletă și telefon)
- Marginea internă dreaptă: 2vw (desktop), 6vw (tabletă și telefon)
frontieră
Apoi modificați setările de chenar.
- Dreptunghi rotunjit de intrare: 10px
Element principal, Titlul contactului și CSS Captcha
Finalizați setările modulului adăugând câteva mici modificări CSS în fila avansată.
Element principal:
| 01 | border-radius: 20px; |
Titlul contactați-ne :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Personalizați elementele pentru a crea un formular de contact cu un singur clic
Adăugați înălțimea coloanei 3
Odată ce aveți toate modulele la locul lor, este timpul să creați efectul. Primul pas spre obținerea rezultatului dorit este să deschideți setările celor 3 coloane și să adăugați o înălțime de răspuns personalizată în fila avansată.
Birou:
| 01 | height: 3vw; |
tabletă:
| 01 | height: 5vw; |
Apel:
| 01 | height: 6vw; |
Adăugați o clasă CSS la buton și săgeată
În continuare, 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 de formular de contact.
- Clasa CSS: contact-form-module
Ascunde 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.
| 01 | display: none; |
Adăugați modul de cod în coloana 3 cu cod JQuery și CSS
Și pentru a crea funcția de clic, vom avea nevoie de cod JQuery. Vom folosi, de asemenea, codul 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 ultimă privire asupra rezultatului.
Concluzie
În acest articol, v-am arătat cum să adăugați un formular de contact drop-down la antetul personalizat.
Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
