Doriți să creați un formular de contact lipicios în DIVI?
Opțiunile lipicioase încorporate ale Divi vă permit să creați efecte vizuale uimitoare pe pagina dvs. cu doar câteva clicuri.
Puteți aplica efecte lipicioase oricărui element de pe pagina dvs., dar în acest tutorial ne vom concentra asupra modului de a crea un formular de contact lipicios pe orice pagină Divi pe care o creați.
Citiți și ghidul nostru pe Cum să creați un antet global lipicios în DIVI
Pentru acest exemplu, vom adăuga imagini și informații de contact care vor derula în timp ce formular de contact va rămâne pe loc.
studiu
Iată o previzualizare a ceea ce vom proiecta. Pe mobil, nu aplicăm un efect lipicios.
Cum să adăugați un formular de contact lipicios pe pagina dvs. Divi
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 contact a aspectului "Produs de frumusețe".
Selectați 'Alegeți aspectul' pentru a adăuga aspectul paginii dvs.
Acum suntem gata să continuăm tutorialul nostru.
Modificarea aspectului formularului de contact lipicios
Pentru acest tutorial, dorim ca formularul de contact din coloana din stânga (coloana 1) să rămână lipicios în timp ce utilizatorul defilează prin celelalte module de conținut din coloana din dreapta (coloana 2). Acest lucru ne va oferi un efect de defilare dinamic care va scoate în evidență formularul dvs. de contact. Să începem prin a modifica șablonul nostru predefinit.
Vezi și: Cum se creează un meniu glisant și push în DIVI
Creați o nouă secțiune
Adăugați o nouă secțiune pe pagina dvs.
Apoi introduceți un nou rând cu două coloane. Puteți adăuga această secțiune oriunde pe pagină, alte secțiuni vor fi în cele din urmă eliminate pe măsură ce progresăm prin acest tutorial.
Deschideți setările secțiunii și modificați culoarea de fundal pentru a se potrivi cu designul aspectului:
- Context: #EEE8E2
Adăugarea modulelor tale lipicioase la coloana 1
Adăugați un modul Formular de contact în coloana 1. Dacă urmați acest tutorial sau aveți deja un formular de contact pe pagina dvs., puteți pur și simplu să trageți modulul 'formular de contact' existent în coloana 1.
Mutați modulul Text Contactati-ne în partea de sus a acestei secțiuni. De asemenea, va fi lipicios. Adăugați un chenar alb în setările de text pentru a se potrivi cu stilul aspectului:
- Lățimea chenarului: 20px
- Culoare chenar: #FFFFFF
Aspectul inițial a inclus umplutură între text și chenar, dar vom omite acest lucru, deoarece decupează partea de jos a formularului de contact pe ecranele mai mici.
Adăugați modulele de defilare în coloana 2
În coloana 2, adăugați toate modulele de defilare. Pentru cazul nostru, mutați cele două module de imagine, informațiile de contact și informațiile despre locație în coloana 2. După ce ați mutat modulele în noua secțiune, puteți șterge toate secțiunile goale rămase.
Sfat: dacă trebuie să mutați mai multe module în același timp, țineți apăsată tasta „maj' de pe tastatură și selectați modulele pe care doriți să le mutați. Utilizați funcția de mutare a modulelor pentru a vă muta toate modulele în același timp.
Imaginea offset mare a aspectului pe care am ales-o poate cauza probleme de defilare orizontală. Deci, să schimbăm unele setări pentru a rezolva această problemă.
Citiți și: Cum se creează antet global cu formularul de conectare în DIVI
Deschideți setările secțiunii. Sub avansat, accesați Vizibilitate, apoi actualizați setările de depășire orizontală și verticală:
- Debordare orizontală: ascuns
- Debordare verticală: ascuns
Pagina dvs. ar trebui să arate acum astfel, cu conținutul lipicios în coloana 1 și conținutul derulant în coloana 2.
Suntem gata să facem ultimul pas: să facem formularul de contact lipicios.
Faceți formularul de contact lipicios
Cu aspectul nostru la loc, putem activa setări lipicioase pentru formularul nostru de contact. Selectați 'Setări de rând', apoi selectați setările coloanei 1.
Sub fila Avansat, navigați la „Efecte de derulare”. Aici vom seta parametrii sticky.
- Poziție lipicioasă: lipiți de sus
- Deplasare superioară stick: 15px
- Limită inferioară lipicioasă: linie
Și asta e tot! Acum ați adăugat setări lipicioase la coloana 1, făcându-vă lipicioase formularul de contact și titlul pe măsură ce derulați în jos în pagină. Ar trebui să vedeți conținutul coloanei 2 defilare lângă formularul de contact.
Rezultat final
Acum să aruncăm o privire la formularul nostru de contact lipicios în acțiune.
Descărcați DIVI acum!!!
Concluzie
Asa de ! Asta e pentru acest articol. Setările fixe ale Divi sunt o modalitate ușoară de a îmbunătăți aspectul formularului de contact sau al oricărui alt element al paginii. Puteți aplica setări persistente pentru orice secțiune, rând sau modul, redând aproape orice pe dvs site-ul web lipicios.
Dacă doriți să aflați mai multe despre ce puteți face cu funcțiile lipicioase ale Divi, consultați tutorialele noastre. De exemplu, puteți consulta tutorialul nostru pe Cum să adăugați un formular de contact la un antet global.
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.
...
