Trebuie să combinați câmpurile inline și câmpurile cu lățime completă a modulului Formular de contact de Divi ?
Le formular de contact este un element important de inclus pe site-ul dvs. dacă doriți să capturați e-mailuri și să vă convertiți vizitatorii în clienți.
Modulul Formular de contact de Divi poate fi ușor personalizat pentru a crea formulare cărți de contact atractive și captivante pentru toate tipurile de site-uri web. Acest modul vine cu două opțiuni de afișare care pot fi aplicate fiecărui câmp de formular: en ligne ou lăţime completă.
În acest tutorial, vom prezenta patru posibilități unice de aspect pentru dvs formular de contact Divi folosind câmpuri inline și cu lățime completă.
Să începem!
studiu
Iată o previzualizare a ceea ce vom proiecta.
Primul aspect
Al doilea aspect
Al treilea aspect
Al patrulea aspect
Ce ai nevoie pentru a începe
Înainte de a începe, instalați și activați tema Divi și asigurați-vă că aveți cea mai recentă versiune de Divi pe site-ul dvs. web.
Acum sunteți gata să începeți!
4 exemple de machete pentru modulul Formular de contact Divi folosind câmpuri inline și pe lățime completă
Selectați aspectul predefinit
Fiecare dintre cele 4 șabloane sunt modificate din aspectul paginii de contact pentru repararea pantofilor Pachet de aranjament pentru repararea încălțămintei, pe care o găsiți în Biblioteca Divi.
Adăugați o pagină nouă pe site-ul dvs. și dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder.
Vom folosi un aspect prestabilit din biblioteca Divi pentru acest exemplu, așa că selectați Răsfoiți Aspecte.
Găsiți și selectați aspectul Pagina de contact pentru repararea pantofilor.
selecta Utilizați acest aspect pentru a adăuga aspectul paginii dvs.
Acum suntem gata să ne proiectăm exemplele.
Primul aspect
Mai întâi, mutați linia care conține modulul Formular de contact la secțiunea de mai sus, chiar sub linia cu module Blurb. Apoi puteți șterge secțiunea goală rămasă.
Deschideți setările liniei și adăugați umplutură la stânga și la dreapta,
- Umplutură (stânga și dreapta): 15%
Selectați opțiunile receptive și setați umplutura pentru mobil.
- Umplutură (stânga și dreapta): 5%
S-a schimbat aspectul formularului de contact cu câmpuri inline și pe lățime completă
Pentru acest aspect, vom crea două câmpuri separate pentru prenume și nume.
Deschideți setările modulului Formular de contact și modificați câmpul ID și Titlu pentru câmpul Nume la Prenume.
Adăugați un câmp nou sub câmpul Prenume. Setați câmpul ID și Titlu la Nume.
În setările câmpului de nume, deschideți setările de aspect și setați Make Fullwidth la Nu.
- Faceți lățime completă: NU
Apoi, sub setările formular de contact, schimbați ordinea subiectului și a telefonului, astfel încât telefonul să fie afișat înaintea subiectului.
Deschideți setările de aspect al câmpului Subiect și setați câmpul la lățime completă.
- Faceți lățime completă: DA
Personalizare design formular de contact
Acum să modificăm câteva setări pentru a finaliza designul. Navigați la fila Design a setărilor modulului Formular de contact.
Mai întâi, schimbați culoarea de fundal a butonului.
- Fundalul butonului: #DBC2B3
Adăugați o marjă superioară butonului.
- Marja butonului (sus): 10px
În cele din urmă, accesați setările de chenar și adăugați colțuri rotunjite la câmpuri.
- Intrări Colțuri rotunjite: 30px
Vezi si: Divi: Cum să adăugați o siglă receptivă la modulul „Meniu cu lățime completă”.
Rezultatul final al exemplului 1
Iată rezultatul final pe desktop și mobil.
Al doilea exemplu
Pentru al doilea exemplu, vom muta modulele Blurb în partea stângă a paginii și vom plasa formularul de contact în partea dreaptă a paginii. Mutați modulele Blurb într-o coloană.
Schimbați aspectul rândului.
Deschideți setările de proiectare a liniilor și dezactivați Utilizați lățimea jgheab personalizată.
- Utilizați lățimea jgheab personalizată: NU
Adăugați cod la CSS-ul personalizat al elementului principal pentru a alinia vertical modulele Blurb și Formularul de contact.
align-items:center;
Acum trebuie să eliminăm chenarul subțire dintre coloane. Deschideți setările de rând, apoi deschideți setările de coloană 1. Sub fila Design, accesați setările de chenar și eliminați chenarul.
- Lățimea marginii din dreapta: 0px
Apoi, deschideți setările coloanei 2 și repetați pașii pentru a elimina chenarul.
- Lățimea marginii din dreapta: 0px
Setați textul „Contactați-ne” să fie centrat.
Mutați formularul de contact în coloana din dreapta. Ștergeți secțiunea goală rămasă.
S-a schimbat aspectul formularului de contact cu câmpuri inline și pe lățime completă
Acest aspect va avea, de asemenea, două câmpuri separate pentru prenume și nume. Deschideți setările modulului Formular de contact și modificați câmpul ID și Titlu pentru câmpul Nume la Prenume.
Adăugați un câmp nou sub câmpul Prenume. Setați câmpul ID și Titlu la Nume.
În setările câmpului de nume, deschideți setările de aspect și setați Make Fullwidth la Nu.
- Faceți lățime completă: NU
Schimbați ordinea câmpurilor pentru telefon și subiect, astfel încât telefonul să fie înaintea subiectului.
Deschideți setările de câmp pentru E-mail, Telefon și Subiect și setați aspectul la lățime completă.
- Faceți lățime completă: DA
Personalizare design formular de contact
Deschideți setările rândului, apoi deschideți setările coloanei 2. Setați culoarea de fundal.
- Context: #DBC2B3
În setările coloanei 2, accesați fila Design și adăugați umplutură.
- Umplutură (sus, jos, stânga și dreapta: 50 px
Selectați pictograma mobil pentru a modifica setările de răspuns. Setați căptușeală pentru mobil.
- Umplutură (sus, jos, stânga și dreapta): 30px
Apoi adăugați o umbră de casetă la coloană.
În cele din urmă, deschideți setările modulului Formular de contact și schimbați culoarea textului câmpului.
- Culoare text câmpuri: #000000
Rezultatul final al exemplului 2
Iată rezultatul final al celui de-al doilea aspect.
Al treilea exemplu
Pentru al treilea aspect, vom avea formularul de contact în stânga și modulele Blurb în dreapta. Să începem prin a modifica structura coloanei rândului care conține modulele Blurb.
Mutați modulul de adresă în coloana din dreapta.
Apoi, mutați modulul de text „Contactați SUA” în coloana din stânga, apoi ștergeți rândul gol rămas.
Mutați Modulul Formular de contact în coloana din stânga, sub modulul Text „Contactați SUA”. Ștergeți secțiunea goală rămasă.
Deschideți setările liniei, sub fila Design și dezactivați Utilizați lățimea jgheab personalizată
- Utilizați lățimea jgheab personalizată: NU
Adăugați cod la CSS-ul personalizat al elementului principal pentru a alinia vertical modulele Blurb și Formularul de contact.
align-items:center;
Deschideți setările de rând, apoi deschideți setările de coloană 1. Sub fila Design, accesați setările de chenar și eliminați chenarul. Repetați pașii pentru a elimina chenarul din coloana 2.
- Lățimea marginii din dreapta: 0px
Modificarea aspectului formularului de contact
Vom lăsa lățimile câmpurilor așa cum sunt pentru al treilea design, totuși, deschideți setările formularului de contact și schimbați ordinea numărului de telefon și a câmpului de subiect, astfel încât telefonul să fie primul.
Rezultatul final al exemplului 3
Iată rezultatul final al celui de-al treilea aspect.
Citiți și: Divi: Cum să afișați modulul Fullwidth Header pe ecran complet
Al patrulea exemplu
Pentru al patrulea și ultimul aspect, modulul Formular de contact va fi în stânga și modulele Blurb în dreapta. Din nou, vom începe prin a modifica structura coloanei rândului care conține modulele Blurb.
Mutați modulul de adresă în coloana din dreapta.
Apoi, mutați modulul Formular de contact în coloana din stânga. Ștergeți secțiunea goală rămasă.
Deschideți setările liniei, în fila Design și dezactivați Utilizați lățimea jgheab personalizată.
- Utilizați lățimea jgheab personalizată: NU
Adăugați cod la CSS-ul personalizat al elementului principal pentru a alinia vertical modulele Blurb și Formularul de contact.
align-items:center;
Deschideți setările de rând, apoi deschideți setările de coloană 1. Sub fila Design, accesați setările de chenar și eliminați chenarul.
- Lățimea marginii din dreapta: 0px
Apoi, deschideți setările coloanei 2 și repetați pașii pentru a elimina chenarul.
- Lățimea marginii din dreapta: 0px
Deschideți setările modulului Text pentru textul „Contactați-ne” și centrați textul.
- Alinierea textului: centrat
S-a schimbat aspectul formularului de contact cu câmpuri inline și pe lățime completă
Pentru acest design, toate câmpurile noastre vor avea lățime completă. Deschideți setările modulului Formular de contact, apoi deschideți setările pentru fiecare câmp. În fila Design, selectați Aspect și definiți Faceți lățime completă pe DA.
Odată ce ați creat fiecare câmp cu lățime completă, formularul ar trebui să arate astfel.
Acum schimbați câmpul ID și Titlu pentru câmpul Nume la Prenume.
Adăugați un câmp nou sub câmpul Prenume. Setați câmpul ID și Titlu la Nume.
Schimbați ordinea câmpurilor pentru telefon și subiect, astfel încât telefonul să fie înaintea subiectului.
Personalizarea designului modulului Formular de contact
În setările modulului, în fila Design, setați culoarea textului câmpului la negru.
- Culoare text câmpuri: #000000
Deschideți setările secțiunii și adăugați o culoare de fundal.
- Context: #DBC2B3
În cele din urmă, adăugați o mască de fundal.
- Mască de fundal: Arh
- Transformarea măștii: orizontală
Pentru ca masca de fundal să funcționeze mai bine pe mobil, să folosim setările de răspuns.
- Mask Transform (Telefon): orizontală și rotație
Rezultat final
Iată rezultatul final al celui de-al patrulea aspect.
Rezultate finale
Să aruncăm o privire la toate exemplele noastre încă o dată.
Primul exemplu
Al doilea exemplu
Al treilea exemplu
Al patrulea exemplu
Descărcați DIVI acum!!!
Concluzie
Având un formular de contact atractiv, vă poate crește conversiile și permite vizitatorilor să se conecteze direct cu dvs.
După cum am demonstrat în acest articol, puteți utiliza opțiunile de câmp în linie și lățime completă pentru a crea diferite aspect și machete pentru formularul dvs., iar opțiunile de design încorporate ale Divi vă permit să creați modele unice și atractive pentru a ajuta formularul să iasă în evidență.
Sperăm că această tehnică va adăuga o altă abilitate de design utilă pentru proiectele viitoare.
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.
Nu ezitați să consultați și ghidul nostru despre 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.
...
