Doriți să creați un formular de contact pe site-ul dvs. datorită modulului Formular de contact de la Divi? Iată 3 idei de personalizare...
Les formulare Datele de contact sunt o parte esențială a multor site-uri web. Scopul lor principal este să fie intuitiv și să ajute vizitatorii să ia legătura cu ușurință.
Dar asta nu înseamnă că totul formulare contactele trebuie să aibă un aspect precis și predefinit. Puteți combina cu ușurință o experiență intuitivă cu un design frumos. Este exact ceea ce vom face în acest tutorial.
Vom împărtăși 3 design unic al modulului Formular de contact de Divi pe care le puteți crea folosind doar opțiunile încorporate ale Divi.
Să mergem!
Prezentare generală a modelelor modulului Formular de contact Divi
Versiuni desktop
Să începem prin a arunca o privire asupra versiunii desktop a diferitelor modele ale modulului Formular de contact pe care îl vom proiecta în acest tutorial.
Versiuni mobile
Și iată cum arată pe ecrane de dimensiuni mai mici:
Descărcați DIVI acum!!!
Cum să personalizați modulul Formular de contact Divi: 3 exemple
Citiți și: Divi: Cum să creați o secțiune pentru membrii echipei ca un carusel
Crearea formularului de contact #1
Adăugați o secțiune nouă
Fundal gradient
Să începem cu primul exemplu! Adăugați o nouă secțiune, accesați setările de fundal și adăugați un fundal cu gradient.
- Se oprește gradient
- 34%: #4c00ff
- 34%: #ffd400
- Tip: rotund
- Direcția gradientului: stânga jos
spaţierea
Apoi, accesați opțiunea Spațiere din fila Design și modificați setările după cum urmează.
- Umplutură (sus și jos): 200px
Adăugați o linie nouă
Structura coloanei
Adăugați un rând nou utilizând următoarea structură de coloane:
Coloana 1: Culoare de fundal
Fără a adăuga încă module, deschideți setările rândului, apoi setările coloanei 1 și adăugați culoarea de fundal de mai jos
- Fundal: rgba(255,255,255,0.55)
Coloana 1: Imagine de fundal
De asemenea, adăugați o imagine de fundal la prima coloană.
- Repetare imagine de fundal: Fără repetare
- Amestecare imagini de fundal: ecran
Coloana 2: Imagine de fundal
Și o culoare de fundal albă la a doua coloană.
- Fundal: #ffffff
dimensionarea
Apoi modificați parametrii de dimensionare.
- Egalizare înălțimi coloane: DA
spaţierea
De asemenea, eliminați toate umpluturile personalizate implicite.
- Umplutură (sus și jos): 0px
Raza marginii coloanei
Adăugați o rază de margine la ambele coloane în fila avansată.
border-radius: 10px;
Adăugați un modul Text la coloana 1
Adăugați conținut
Este timpul să începeți să adăugați diferite module! Adăugați un modul Text la prima coloană cu conținutul dorit.
Setări text
Apoi, accesați fila Design a modulului Text și faceți câteva modificări.
- Text:
- Font: Satisface
- Culoare text: #333333
- Dimensiune: 100px
- Înălțimea liniei: 1 em
- Aliniere: Centru
spaţierea
Adăugați, de asemenea, valori de umplere personalizate.
- Umplutură (sus): 600px
- Umplutură (jos): 100px
Cutie de umbră
Pentru a adăuga profunzime designului, utilizați o umbră subtilă.
- Intensitatea estomparii umbrei casetei: 80px
- Intensitatea răspândirii umbrei casetei: -16px
- Culoare umbră: rgba(0,0,0,0.3)
Adăugați un modul Imagine la coloana 2
Încărcați o imagine
Continuați prin adăugarea unui modul Imagine în a doua coloană. Încărcați o imagine la alegere.
dimensionarea
Modificați setările de dimensionare pentru acest modul.
- Lățime: 25% (desktop), 50% (tabletă), 60% (telefon)
- Alinierea modulului: Centru
spaţierea
Creați o suprapunere folosind o marjă superioară negativă.
- Marja (sus): -60%
frontieră
Modificați marginile imaginii după cum urmează:
- Colțuri rotunjite: 100 px (toate colțurile)
Adăugați modulul Text #1 la coloana 2
Adăugați conținut
Chiar sub modulul Imagine, adăugați un modul Text cu conținut.
Setări text
Editați setările de text pentru acest modul.
- Text:
- Font: Satisface
- Culoare text: #333333
- Dimensiunea textului: 44px
- Orientare: centru
Adăugați modulul Text #2 la coloana 2
Adăugați conținut
Apoi adăugați un alt modul Text.
Setări text
Modificați, de asemenea, setările de text pentru acest modul.
- Text:
- Font: Arial
- Culoare text: #ffd400
- Culoare text: 18px
- Spațiere între litere: 2px
- Orientare: centru
spaţierea
Apoi adăugați o marjă inferioară.
- Marja (jos): 100px
Adăugați modulul Formular de contact în coloana 2
Activați opțiunea „Make Fullwidth” în câmpul Nume și e-mail
Ultimul modul necesar este modulul Formular de contact. Înainte de a face orice altceva, deschideți câmpurile pentru nume și e-mail și schimbați aspectul.
- Faceți lățime completă: da
Adăugați un câmp de subiect
Pentru a crea acest design, am adăugat un alt câmp pentru subiect.
Protecția împotriva spamului
Apoi dezactivați opțiunea captcha.
- Utilizați Captcha de bază: NU
Setări de text pentru câmpul formularului
Efectuați câteva modificări la setările de text din câmpul formularului din acest modul Formular de contact
- Câmpuri:
- Culoare de fundal: rgba(255,255,255,0)
- Font: Arial
- Greutatea fontului: ușoară
- Dimensiunea textului: 16px
- Spațiere între litere: 2px
Setări buton
Schimbăm și aspectul butoanelor.
- Utilizați dimensiune personalizată pentru buton: DA
- Buton:
- Culoare text: #ffd400
- Lățimea chenarului: 0 pixeli
- Spațiere între litere: 2px
- Font: Arial
- Stilul fontului: U
- subliniază Culoare: #4c00ff
spaţierea
Apoi adăugați câteva valori personalizate de umplutură.
- Căptușeală (jos): 100px
- Umplutură (stânga și dreapta): 50px
frontieră
Și adăugați un chenar subtil de jos fiecărui câmp.
- Intrări Lățimea chenarului inferior: 2px
- Intrări Culoare chenar inferioară: #efefef
Spațierea câmpurilor individuale
În cele din urmă, adăugați o marjă de jos la fiecare dintre câmpurile individuale, cu excepția câmpului de mesaj.
- Marja (jos): 20px
Crearea formularului de contact #2
Adăugați o secțiune nouă
Fundal gradient
Să trecem la următorul exemplu! Adăugați o nouă secțiune cu un fundal gradient.
- Opriri de gradient:
- 50%: #562fef
- 50%: #ffffff
- Tip de gradient: Linear
spaţierea
Adăugați valori personalizate de umplutură la setările de spațiere din această secțiune.
- Umplutură (sus și jos): 200px
Adăugați o linie nouă
Structura coloanei
Adăugați un rând nou utilizând următoarea structură de coloane:
Culoare de fundal
Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal la rând.
- Culoare de fundal: #ffffff
fundal gradient cu 2 coloane
Adăugați un fundal gradient la a doua coloană din rând.
- Opriri de gradient:
- 0%: #9932ff
- 100%: #562fef
- Tip: Linear
- Direcție: 160 de grade
dimensionarea
Modificați, de asemenea, parametrii de dimensiune a liniei.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Egalizare înălțimi coloane: DA
spaţierea
Apoi, adăugați valori de spațiere personalizate.
- linie:
- Umplutură (sus și jos): 0px
- Coloana 1:
- Umplutură: 100 px (sus), 50 px (jos)
- Umplutură (stânga și dreapta): 50px
- Coloana 2:
- Umplutură (sus și jos): 100px
- Umplutură (stânga și dreapta): 50px
frontieră
Adăugați „20px” la fiecare margine a liniilor.
Cutie de umbră
În cele din urmă, adăugați o umbră subtilă de casetă la linie.
- Intensitatea estomparii umbrei casetei: 45px
- Intensitatea răspândirii umbrei casetei: -11px
- Culoare Sadow: rgba(0,0,0,0.3)
Adăugați un modul Text la coloana 1
Adăugați conținut
Este timpul să începeți să adăugați modulele! Începeți cu un modul Text în prima coloană.
Setări text
Editați setările de text pentru acest modul.
- Text:
- Greutatea fontului: Ultra Bold
- Stil font: TT
- Culoare: #562fef
- Dimensiune: 100px (desktop), 80px (tabletă), 60px (telefon)
- Spațiere între litere: -10px
- Înălțimea liniei: 1 em
spaţierea
De asemenea, adăugați o marjă de jos.
- Marja (jos): 50px
Adăugați modulul Formular de contact în coloana 1
Element
Al doilea modul de care vom avea nevoie în prima coloană este un modul Formular de contact După ce ați adăugat modulul, dezactivați opțiunea „Utilizați Captcha de bază”.
- Utilizați Captcha de bază: NU
Setări de text pentru câmpul formularului
Apoi schimbați culoarea de fundal a câmpurilor de formular.
- Culoare de fundal câmpuri: #ffffff
Setări buton
De asemenea, jucați-vă cu setările butonului pentru a crea un buton pictogramă în loc de un buton text.
- Utilizați stiluri personalizate pentru buton: DA
- Buton:
- Dimensiunea textului: 73px
- Culoare text: rgba(0,0,0,0) (implicit),
- Culoare de fundal: rgba(255,255,255,0) (Hover)
- Lățimea chenarului: 0px
- Culoare pictogramă: #9932ff
- Afișați doar pictograma la trecerea cursorului pentru buton: NU
Cutie de umbră
În cele din urmă, adăugați o umbră subtilă de casetă la fiecare dintre câmpuri.
- Intensitatea estomparii umbrei casetei: 36px
- Intensitatea răspândirii umbrei casetei: -14px
- Culoare umbră: rgba(0,0,0,0.3)
Adăugați un modul Text la coloana 2
Adăugați conținut
Primul modul de care vom avea nevoie în a doua coloană este un alt modul Text.
Setări text
După ce ați adăugat conținutul, editați setările de text pentru acest modul.
- Text:
- Greutatea fontului: Ultra Bold
- Stil font: TT
- Culoare: #ffffff
- Dimensiune: 23px
- Spațiere între litere: -1px
Adăugați modulul Blurb #1 la coloana 2
Adăugați conținut
Al doilea modul de care vom avea nevoie este un modul Blurb. Continuați și introduceți câteva informații de contact.
Selectați pictograma
Apoi alegeți pictograma corespunzătoare.
Setări pentru pictograme
Modificați setările pentru această pictogramă.
- Culoare pictogramă: #ffffff
- Plasarea imaginii/pictogramei: dreapta
Setări text de titlu
Continuați făcând câteva modificări la setările textului titlului în continuare.
- Dimensiunea textului titlului: 15px
- Spațiere dintre litere de titlu: -0,5 pixeli
spaţierea
Și adăugați o marjă de sus.
- Marja (sus): 120px
Clonează modulul Blurb de două ori
După ce ați terminat de editat primul modul Blurb, puteți continua și clona modulul de două ori.
Modificați conținutul și pictograma celor două duplicate
Editați conținutul și pictogramele celor două duplicate pentru a partaja diferite tipuri de informații de contact cu vizitatorii.
Schimbați distanța dintre cele două duplicate
Marja de sus a celor două duplicate ar trebui, de asemenea, modificată.
- Marja (sus): 30px
Crearea formularului de contact #3
Adăugați o secțiune nouă
Culoare de fundal
Să trecem la al treilea exemplu! Adăugați o nouă secțiune cu următoarea culoare de fundal:
- Culoare de fundal: #3491CE
spaţierea
Continuați prin adăugarea unor valori personalizate de umplutură în setările de spațiere.
- Umplutură (sus și jos): 200px
Adăugați linia #1
Structura coloanei
Apoi, adăugați un nou rând folosind următoarea structură de coloane:
Adăugați un modul Text
Adăugați conținut
Este timpul să începeți să adăugați module! Primul modul pe care va trebui să-l adăugăm la prima coloană este un modul Text. Introduceți un conținut la alegere.
Setări text
Apoi, modificați setările de text.
- Text:
- Greutatea fontului: Ultra Bold
- Culoare text: rgba(255,255,255,0.24)
- Dimensiune text: 100 px (desktop), 70 px (tabletă), 36 px (telefon)
- Înălțimea liniei: 1 em
- Orientare: centru
spaţierea
De asemenea, adăugați o marjă de jos negativă.
- Marja (jos): -100px
Adăugați linia 2
Structura coloanei
Al doilea rând de care avem nevoie pentru a completa acest exemplu conține următoarea structură de coloane:
Fundal gradient
Fără a adăuga încă module, deschideți setările liniei și adăugați un fundal cu gradient.
- Opriri de gradient:
- 50%: #11CE84
- 50%: #10C77F
- Tip de gradient: Linear
- Direcție: 160 de grade
dimensionarea
Modificați de asemenea parametrii de dimensionare.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Egalizare înălțimi coloane: DA
spaţierea
Apoi adăugați câteva valori de umplutură.
- Umplutură: 150 px (sus), 100 px (jos)
- Umplutură: 50 px (stânga și dreapta)
frontieră
Apoi accesați setările de chenar și adăugați „20px” la fiecare dintre colțuri. Utilizați și un chenar de jos.
- Colțuri rotunjite: 20px
- Lățimea marginii inferioare: 10px
- Culoarea marginii inferioare: #1ba35a
Cutie de umbră
Completați setările liniei adăugând o umbră subtilă de casetă.
- Intensitatea estomparii umbrei casetei: 80px
- Intensitatea răspândirii umbrei casetei: -24px
- Culoare umbră: rgba(0,0,0,0.3)
Adăugați modulul Formular de contact în coloana 1
Activați opțiunea „Make Fullwidth” în câmpul Nume și e-mail
Primul modul de care avem nevoie în prima coloană a rândului este un modul Formular de contact. Deschideți câmpul pentru nume și e-mail și modificați setările de aspect.
- Faceți lățime completă: DA
Element
Apoi dezactivează captcha.
- Utilizați Captcha de bază: NU
Setări buton
Și modificați setările butoanelor.
- Utilizați stiluri personalizate pentru buton: DA
- Culoarea textului butonului: #ffffff
- Opriri de gradient:
- 50%: #3AA0E3
- 50%: #3491CE
- Tip gradient: Linear
- Direcția gradientului: 155 grade -
- Lățimea marginii butonului: 0 pixeli
- Raza chenarului butonului: 10px
- Intensitatea răspândirii umbrei casetei: -2px
- Culoare nuanță: #0a60af
Vezi si: Divi: Cum să personalizați coșul și pictogramele de căutare ale modulului „Fullwidth Menu”.
frontieră
Adăugăm, de asemenea, „5px” de colțuri rotunjite la fiecare dintre câmpuri.
Adăugați un modul Text la coloana 2
Adăugați conținut
În a doua coloană, primul modul de care vom avea nevoie este un modul Text. Continuați și introduceți conținut.
Culoare de fundal
Apoi schimbați culoarea de fundal.
- Fundal: rgba(255,255,255,0.13)
Setări text
Editați, de asemenea, cu setări de text.
- Text:
- Greutatea fontului: ușoară
- Culoare text: #ffffff
- Dimensiunea textului: 15px
- Spațiere între litere: -0,5 px
spaţierea
Și adăugați căptușeală personalizată pentru a oferi modulului spațiu de respirație.
- Umplutură (sus și jos): 12px
- Umplutură (stânga și dreapta): 10px
frontieră
Adăugăm, de asemenea, „20px” în colțurile din stânga sus și din stânga jos. Pe deasupra, vom adăuga un chenar din stânga.
- Colțuri rotunjite: 20 px (stânga sus și stânga jos)
- Lățimea chenarului din stânga: 34 px
- Culoarea marginii din stânga: #edf000
vizibilitate
Pentru ca acest design să se potrivească cu diferite dimensiuni de ecran, vom dezactiva modulul Text de pe telefon și tabletă.
Clonează modulul Text de două ori
După ce ați terminat de editat primul modul Text, continuați și clonați modulul de două ori.
Modificați conținutul celor două duplicate
Schimbați conținutul celor două duplicate cu altceva.
Schimbați distanța dintre cele două duplicate
Și adăugați o marjă de sus pentru a crea spațiu între fiecare dintre module.
- Marja (sus): 20px
Modificați chenarul celor două duplicate
În cele din urmă, schimbați individual culoarea marginii din stânga fiecărui duplicat.
- Culoare 1: #00faff
- Culoare 2: #00f76f
Vezi și articolul nostru pe Cum să creați un glisor de acordeon receptiv
studiu
Versiunea desktop
Acum că am parcurs toți pașii, să aruncăm o privire finală asupra modelelor modulului Formular de contact Divi pe desktop.
Mobil
Și iată ce vă puteți aștepta de la modelele modulului Formular de contact Divi pe ecrane de dimensiuni mai mici:
Descărcați DIVI acum!!!
Concluzie
În această postare, am împărtășit 3 modele minunate de module de formulare de contact Divi pe care le puteți utiliza și modifica cu ușurință pentru orice site web pe care îl creați.
Les formulare Contactele sunt o parte esențială a multor site-uri web, așa că este important să vă asigurați că designul dvs. convinge vizitatorii să ia legătura.
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.
...
