Doriți să creați un formular de contact în Divi care apare după ce faceți clic pe un buton?
În acest tutorial Divi, vă vom arăta cum să creați un formular de contact care apare după ce faceți clic pe un buton folosind nimic altceva decât Divi, codul jQuery și codul CSS.
Citiți și ghidul nostru despre: Divi: Cum se creează un subsol lipicios cu efect „Reveal”.
Este o modalitate grozavă de a păstra vizitatori dumneavoastră site-ul web concentrat pe acțiunea la care s-au angajat la un clic pe un buton. Nu îi duce pe o altă pagină.
studiu
Mai jos, puteți arunca o privire rapidă la ceea ce vom crea, apoi puteți sări în tutorial!
Previzualizare pe PC
Previzualizare pe telefon și tabletă
Creați o pagină nouă cu un aspect predefinit
Să începem prin a folosi un aspect predefinit din biblioteca Divi. Pentru acest exemplu, vom folosi pagina de contact a Pachet de aspect pentru produse de frumusețe .
Adăugați o pagină nouă la dvs site-ul web și dă-i un titlu, apoi selectează opțiunea „Utilizați Divi Builder”.
Vom folosi un aspect prestabilit din biblioteca Divi pentru acest exemplu, deci selectați „Alegeți aspectul".
Găsiți și selectați pagina de pornire a aspectului "Companie de design interior".
Selectați 'Alegeți aspectul' pentru a adăuga aspectul paginii dvs.
Acum suntem gata să continuăm tutorialul nostru.
Creați o secțiune cu modulul Button
Primul lucru pe care va trebui să-l facem este să adăugăm o nouă secțiune în care plasăm butonul care va permite formular de contact a afișa.
Doar adăugați o secțiune standard
Apoi, selectați un rând cu o singură coloană.
După ce ați făcut asta, adăugați un modul Button la acesta.
Puteți personaliza butonul după cum doriți, dar trebuie să vă asigurați că adresa URL a butonului începe cu „#” urmat de altceva. Nu îl puteți lăsa necompletat sau pur și simplu utilizați caracterul „#”. Adăugând „#” și text, pagina nu se va muta după ce faceți clic pe butonul. Dacă îl lăsați necompletat, pagina se va reîmprospăta la clic. Și dacă folosești doar „#”, vei fi trimis în partea de sus a paginii.
Următorul lucru important pe care trebuie să-l facem este să atribuim o clasă CSS butonului. Vom folosi această clasă CSS mai târziu în acest articol în codul jQuery pentru a ne asigura că formularul de contact apare după ce faceți clic. Clasa pe care va trebui să o atribuim butonului este pur și simplu „buton”.
- Clasa CSS: buton
Creați un formular de contact pentru versiunea PC
Următorul lucru pe care trebuie să-l facem este să creăm formularul de contact de pe desktop, care va apărea odată ce cineva face clic pe butonul pe care l-am creat în partea anterioară a acestui articol. Mai târziu în acest articol, vă vom arăta și cum să creați versiunea mobilă.
Adăugați o nouă secțiune standard
Începeți prin a adăuga o nouă secțiune standard la pagina la care lucrați. În setările secțiunii, accesați fila Avansat adăugați „pop-up” la câmpul CSS Class.
Derulați în jos în aceeași filă și plasați următoarele rânduri de cod CSS în câmpul Înainte al subcategoriei CSS personalizate:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Adăugând aceasta, ne asigurăm că secțiunea ocupă întreaga filă. Puteți ajusta culoarea de fundal în codul CSS pentru a crea suprapunerea de fundal dorită. În acest caz folosim culoarea neagră cu o oarecare transparență. În aceeași filă, adăugați, de asemenea, următoarea linie de cod CSS la elementul principal:
display: none;
Ultimul lucru pe care va trebui să îl facem în fila Avansat este să dezactivăm secțiunea de pe telefon și tabletă din subcategoria Vizibilitate.
Adăugați un rând la două coloane
Continuați prin adăugarea unui rând cu două coloane și navigați la filă Stil.
- Utilizați lățimea jgheab personalizată: DA
- Latime maxima: 1291px
Introduceți în parametrii fiecărei coloane.
Modificați marginile interne (Sus, Stânga și Dreapta) după cum urmează:
- Marja internă (sus, stânga, dreapta): 30 px
Terminați accesând fila Avansat. În elementul principal, adăugați următoarele linii de cod CSS:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Adăugați primul modul Text
După ce ați făcut toate modificările secțiunii și rândului, este timpul să adăugați diferitele module pe care doriți să le afișați.
Primul lucru pe care îl vom adăuga este titlul care apare. Începeți prin adăugarea unui nou modul Text în prima coloană a rândului, scrieți textul în filă Conținut și comutați la fila Stil.
În fila Stil, am folosit următoarele setări pentru subcategoria Text:
- Font antet: homar
- Antet cu lumină moale: text aldine
- Alinierea textului: aldine
- Culoarea textului antetului: #002282
- Dimensiunea textului antetului: 37 px
- Înălțimea liniei antetului: 1,7 em
Adăugați un al doilea modul Text
Continuați prin adăugarea unui nou modul Text și introduceți textul care doriți să apară în fila Conținut. Comutați la fila Stil și aplicați următoarele setări subcategoriei Text:
- Alinierea textului: Centru
- Font text: Arial
- Dimensiunea textului textului: 13px
- Culoare text Text: #002282
- Înălțimea liniei textului: 1,7 em
Adăugați un modul „Urmăriți-ne pe rețelele sociale”.
În continuare, vom adăuga, de asemenea, modulul „Urmărește-ne pe rețelele sociale” în prima coloană. În acest caz, am ales trei pictograme social media; Facebook, Twitter și Instagram.
Ultimul lucru pe care va trebui să-l facem este să adăugăm padding (stânga) la acest modul în fila Avansat. Adăugați următoarea linie de cod CSS la elementul principal:
padding-left: 40%;
Adăugați un modul Formular de contact
Apoi putem trece la a doua coloană din rând. În această coloană, primul lucru pe care îl vom plasa este modulul Formular de contact.
Pentru acest exemplu, am ales doar două câmpuri; nume și e-mail.
După ce ați adăugat modulul Formular de contact, navigați la fila Stil a modulului Formular de contact și efectuați următoarele modificări în subcategoria Câmpuri:
- Câmpuri de culoare text: #002282
- Câmpuri pentru dimensiunea textului: #002282
- Înălțimea liniei câmpului: 1,7 em
În aceeași filă, faceți următoarele modificări în subcategoria Buton:
- Utilizați stiluri personalizate pentru Buton: Da
- Buton pentru dimensiunea textului: 20
- Culoarea textului butonului: #FFFFFF
- Buton de fundal: #0086c4
- Lățimea chenarului butonului: 2
- Butonul Raza chenarului: 3
Treceți la fila Avansat și adăugați o marjă de 5%.
Adăugați un modul Rezumat
Un alt lucru pe care va trebui să îl adăugam la a doua coloană este un modul Rezumat. Singurul lucru pentru care avem nevoie de acest modul este pictograma de ieșire din partea dreaptă sus a ferestrei pop-up. Alegeți următoarea pictogramă din lista de pictograme și lăsați totul necompletat.
Apoi accesați fila Avansat și tastați „închidere” ca clasă CSS.
În aceeași filă, adăugați următoarele linii de cod la elementul principal al subcategoriei CSS personalizate:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Aplicați o umplere cu gradient pe linie
În cele din urmă, vom adăuga un fundal gradient frumos liniei. Deschideți setările și aplicați următoarele modificări opțiunii de fundal cu gradient:
- Prima culoare gradient: #FFFFFF
- A doua culoare gradient: #0c71c3
- Tip de gradient: Linear
- Direcția gradient: 124 de grade
- Poziția de pornire: 50%
- Poziția finală: 50%
Creați un formular de contact pentru tabletă și telefon
Acum că am creat versiunea pentru PC, versiunea pentru tabletă și telefon va merge mult mai repede. Majoritatea modulelor pe care le-am folosit pentru versiunea pentru PC sunt aceleași ca și pentru versiunea mobilă.
Duplicați secțiunea anterioară
În loc să o dezactivăm pentru telefon și tabletă, așa cum am făcut pentru versiunea pentru PC, vom dezactiva versiunea pentru PC în subcategoria Vizibilitate din setările modulului:
Modificați codul CSS al modulului Rezumat
În loc să utilizați codul desktop, utilizați următoarele:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Aplicați o umplere cu gradient pe linie
Pentru versiunea mobilă, folosim diferite setări pentru fundalul gradient al liniei:
- Prima culoare gradient: #FFFFFF
- A doua culoare gradient: #0c71c3
- Tip de gradient: Linear
- Direcția gradient: 180 de grade
- Poziția de pornire: 40%
- Poziția finală: 40%
Adăugați codul jQuery
Ultimul lucru pe care va trebui să-l facem pentru acest tutorial este să adăugăm codul jQuery. Adăugați un modul Cod și introduceți următorul cod JQuery:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
rezultat
Dacă urmați mesajul pas cu pas, ar trebui să puteți obține următorul rezultat pe computer:
Și următorul rezultat pe tablete și telefoane:
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să creați un formular de contact cu un singur clic. Utilizați această metodă pentru a intra în contact cu dvs vizitatori este subtil, dar eficient.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
