Cum să creați o fereastră de contact fixă ​​în colțul pop-up cu opțiunile de dimensionare Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să adăugați o fereastră fixă ​​de colț pop-up pe pagina dvs. utilizând opțiunile de dimensionare Divi. Această abordare vă va ajuta să configurați un formular de contact care urmărește vizitatorii prin șederea lor pe site-ul dvs. web, fără a fi nevoie de un plugin suplimentar!

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

1. Încărcați pagina de destinație a pachetului de dispunere a chiropractorului

Adăugați o pagină nouă

Începeți prin crearea unei pagini noi. După ce ați numit pagina și ați publicat-o, comutați la Visual Builder.

Încărcați pagina de destinație a pachetului de machiaj pentru chiropractici

Încărcați următoarea pagină de destinație pentru pachetul de aspect pentru chiropractici. Deși vom folosi acest aspect specific, puteți face ca tehnica să funcționeze pe orice pagină la care lucrați.

2. Să începem să recreăm!

Adăugați o secțiune nouă în partea de jos a paginii

Vom dedica o secțiune complet nouă formularului de contact fix pop-up pe clic. Adăugați această secțiune în partea de jos a paginii.

Culoare de fundal

Deschideți setările secțiunii și utilizați o culoare de fundal complet transparentă. Mai târziu în această postare, vom repara întreaga secțiune. Folosind o culoare de fundal transparentă, vă veți asigura că tot ceea ce apare sub containerul secțiunii este afișat.

• Culoare fundal: rgba (255,255,255,0)

Dimensionare

Treceți la fila de proiectare și modificați lățimea secțiunii pe diferite dimensiuni ale ecranului.

• Lățime: 37% (desktop), 95% (tabletă), 100% (telefon)
• Alinierea secțiunii: dreapta

Spațiere

Eliminați în continuare setul de umplere implicit.

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

Clasa CSS

Va trebui să oferim noii noastre secțiuni și o clasă CSS personalizată. Mai târziu, vom folosi această clasă CSS pentru a adăuga cod JQuery și CSS.

• Clasa CSS: secțiune deschisă

Indice Z implicit

Pentru a ne asigura că secțiunea apare deasupra întregului conținut al paginii, vom mări indexul secțiunii z în setările de vizibilitate.

• Indicele Z: 99

Plasați cursorul Z Index

Adăugați aceeași valoare a indexului z și pe hover.

• Indicele Z: 99

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Adăugați modul Blurb

Lăsați casetele de conținut goale

Primul și singurul modul de care avem nevoie în acest rând este un modul Blurb. Asigurați-vă că lăsați golurile pentru titlu și conținut.

Selectați pictograma

Selectați o pictogramă în continuare.

Culoare de fundal

Schimbați și culoarea fundalului.

• Culoare fundal: #FFFFFF

Setări pictograme

Treceți la fila de proiectare și aplicați următoarele setări pentru pictograme:

• Culoare pictogramă: # ff5f24
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Dimensiune font pictogramă: 46 px (desktop), 30 px (tabletă), 25 px (telefon)

Dimensionare

Modificați apoi setările de dimensionare pentru diferite dimensiuni de ecran.

• Lățime: 140 px (desktop), 105 px (tabletă), 80 px (telefon)
• Alinierea modulului: dreapta

Spațiere

Vom adăuga, de asemenea, câteva valori de umplere personalizate, de sus și de jos, pe diferite dimensiuni de ecran.

• Căptușeală superioară: 50 px (desktop), 35 px (tabletă), 25 px (telefon)
• Căptușeală inferioară: 20 px (desktop), 10 px (tabletă), 0 px (telefon)

Frontieră

Pentru a crea o formă circulară, va trebui să adăugăm o valoare mare fiecărui colț din setările de margine. Folosim „500px”.

Box Shadow

Vom adăuga, de asemenea, o umbră de casetă subtilă pentru a permite ca forma circulară să apară.

• Puterea neclarității umbrei cutiei: 80 px

Animaţie

Deschideți apoi setările de animație și eliminați animația pictogramei.

• Animație pictogramă: fără animație

Clasa CSS

Nu în ultimul rând, adăugați o clasă CSS la Blurb Module. Mai târziu în această postare, vom folosi această clasă CSS pentru a face funcția de clic funcțională.

• Clasa CSS: contact deschis

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând! Utilizați următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal albă.

• Culoare fundal: #FFFFFF

Frontieră

Adăugați o rază de margine „39px” la fiecare dintre colțurile următoare.

Box Shadow

Și completați setările rândului adăugând o umbră subtilă de casetă.

• Puterea neclarității umbrei cutiei: 80 px

Adăugați un formular de contact

Elemente

Singurul modul de care avem nevoie în acest rând este un modul de contact. După ce ați adăugat modulul, dezactivați captcha în setările elementelor.

• Afișați Captcha: nu

Câmpuri

Treceți la fila de proiectare și modificați culoarea de fundal a câmpurilor din setările câmpurilor.

• Culoare fundal câmpuri: rgba (0,126,255,0,13)

Buton

Continuați stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 16 px
• Culoarea textului butonului: #FFFFFF
• Culoarea fundalului butonului: # ff5f24
• Lățimea chenarului butonului: 2 px
• Culoare margine buton: rgba (0,0,0,0)
• Raza chenarului butonului: 0 px
• Buton Font: Karla
• Buton Font Greutate: Bold
• Căptușeală pentru butoane: 14 px
• Căptușeală pentru butoane: 14 px
• Căptușire stânga buton: 20 px
• Căptușire dreaptă buton: 20 px

Spațiere

Și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px
• Garnitura stânga: 40 px
• Căptușeală dreaptă: 40 px

Adăugați un modul de cod

Introduceți codul JQuery

Odată ce ați completat modulul Formular de contact, este timpul să faceți funcția de clic funcțională! Adăugați un modul de cod la al doilea rând din secțiune și introduceți următoarele linii de cod JQuery între etichetele de script așa cum puteți vedea în ecranul de imprimare de mai jos:

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Modificați setările secțiunii

Înălţime

Continuați deschizând setările secțiunii. Schimbați înălțimea pe diferite dimensiuni ale ecranului.

• Înălțime: 190 px (desktop), 140 px (tabletă), 125 px (telefon)

Element principal implicit

Adăugați un cod CSS personalizat la elementul principal al secțiunii de lângă acesta pentru a-l fixa în colțul din dreapta jos.

bottom: 0;
right: 0;
position: fixed;

Plasați cursorul pe elementul principal

Asigurați-vă că adăugați poziția fixă ​​și la elementul principal al cursorului.

position: fixed;

Adăugați cod CSS personalizat în pagină

Deschideți Setări pagină

Pentru a finaliza efectul de comutare, va trebui să adăugăm și un pic de cod CSS la pagină. Deschideți setările paginii.

Adăugați CSS personalizat

Accesați fila avansată și adăugați următoarele linii de cod CSS:

.section-open-active {
height: auto !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 fix la paginile dvs. utilizând setările de dimensionare ale Divi. Puteți face această abordare să funcționeze pe orice tip de site web pe care îl creați. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, unde încercăm să introducem ceva suplimentar în setul de instrumente de proiectare în fiecare săptămână. 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.