Fiecare site web are nevoie de o secțiune de contact, dar asta nu înseamnă că trebuie să optezi pentru un design standard. Cu efectele de defilare ale Divi, puteți crea o secțiune de contact plutitoare care va ieși în evidență. Îmbunătățiți interacțiunea cu utilizatorul cu un aspect al secțiunii de contact cu defilare verticală, care va invita vizitatorii să interacționeze cu dvs formular de contact. În acest articol, vă vom arăta cum să creați o secțiune de contact plutitoare pe toată lățimea pe care o puteți adăuga la orice pagină. Puteți chiar să-l adăugați în partea de sus a unui subsol la nivelul întregului site cu Divi Theme Builder.
Mai jos veți găsi un fișier descărcabil gratuit cu aspectul JSON pentru a fi descărcat în propria bibliotecă Divi. Am inclus, de asemenea, un șablon PSD pentru a vă ajuta să recreați fundalul hărții, precum și un pin SVG pentru hartă, astfel încât să îl puteți personaliza cu propriile culori.
Creați o structură de elemente
În acest design, vom folosi o imagine de fundal care este o reprezentare pe Google Map a locației pe care doriți să o prezentați. Puteți face acest lucru cu Photoshop sau orice alt editor de imagini.
Adăugați o secțiune nouă
Acum este momentul să începeți să creați secțiunea de contact plutitoare cu Divi Builder! Primul lucru pe care îl vom face este să deschidem o pagină nouă sau existentă și să adăugăm o nouă secțiune.
În fila conținut, adăugați fundalul hărții pe care ați creat-o în Photoshop.
- Imagine de fundal: harta dvs. modificată
spaţierea
Apoi, personalizați setările de spațiere a secțiunii în fila de proiectare.
- Marja superioară și inferioară: 50vh
- Garnitura de jos: 0vw
vizibilitate
Apoi setați revarsările la vizibile.
- Depășire orizontală și verticală: vizibilă
Poziţie
În cele din urmă, setați indexul Z al secțiunii la 10.
- Indicele Z: 10
Adăugați o linie nouă
Structura coloanei
Acum este momentul să adăugăm câteva lucruri. Mai întâi, adăugați un rând cu 2 coloane.
dimensionarea
Deschideți parametrii liniei și reglați dimensiunea după cum urmează.
- Lățime
- Birou: 90%
- Tabletă și telefon: 80%
- Lățime maximă: 90%
vizibilitate
Faceți clic pe fila avansată și apoi ajustați revărsările.
- Depășire orizontală și verticală: vizibilă
Poziţie
Completați setările de rând modificând setările de poziție.
- Poziție: relativă
- Origine compensată: stânga sus
- Offset vertical
- Desktop: -8vw
Setări coloana 1
Context
Înainte de a adăuga module, va trebui să stilăm coloanele individuale. Adăugați o culoare de fundal la coloana 1.
- Culoare solidă: # 25274d
spațiere
Reglați setările de distanțare în continuare.
- Căptușire de sus și de jos
- Desktop și tabletă: 7vw
- Căptușirea stânga și dreapta
- Desktop: 3vw
- Tabletă și telefon: 6vw
Frontieră
Apoi, adăugați câteva colțuri rotunjite la setările de graniță.
- Colțuri rotunjite: 10px toate cele patru colțuri
Efecte de derulare
Nu în ultimul rând, folosiți o mișcare verticală în setările efectelor de derulare. Acest lucru ne va ajuta să creăm un efect plutitor.
- Efecte de transformare defilare: mișcare verticală
- Set de mișcare verticală / desktop
- Offset de pornire: 4
- Offset mediu: 0 (la 50%)
- Offset de încheiere: -4
- Vertical Motion / Tablet and Phone Set
- Offset de pornire: 4
- Offset mediu: 0 (la 40% și 60%)
- Decalaj final: -3
- Efect de declanșare a mișcării: mijlocul elementului
Setări pentru coloana 2
Poziţie
Acum să trecem la parametrii celei de-a doua coloane. Reglați parametrii de poziție în consecință.
- Poziție: relativă
- Originea compensării: stânga sus
- Offset vertical
- Birou: 25vw
Efecte de derulare
De asemenea, adăugăm o mișcare verticală la această coloană.
- Efecte de transformare a defilării: mișcare verticală
- Definiți mișcarea verticală / desktop
- Start offset: 2
- Offset mediu: 0 (la 50%)
- Decalaj final: -2
- Definiți mișcarea verticală / tabletă și telefon
- Start offset: 0
- Offset mediu: 0 (la 50%)
- Decalaj final: -2
- Declanșatorul efectului de mișcare: elementul de sus
Adăugați un modul text la coloana 1
Conținut
Este timpul să adăugați module, începând cu un modul text în coloana 1. Adăugați orice conținut H2 doriți.
Titlul textului
Accesați fila de proiectare și stilizați textul H2 după cum urmează.
- Nivelul titlului: H2
- Font: Palanquin Dark
- Greutatea fontului: îndrăzneț
- Stilul fontului: TT
- Culoare: galben # ffd868
- Dimensiune
- Birou: 5vw
- Tabletă: 10vw
- Telefon: 12vw
- Distanța literelor: 4px
Adăugați un modul de formular de contact la coloana 1
Conținut
Sub modulul de text, adăugați a formular de contact. Acestea sunt câmpurile pe care le folosim:
- nume
- material
- Mesaj
Protecția împotriva spamului
Înainte de a stiliza modulul de formular de contact. activați protecția împotriva spamului și conectați-vă contul ReCaptcha.
- Folosiți un serviciu de protecție împotriva spamului: Da
- Furnizor de servicii: ReCaptcha
- Selectați un cont
domenii
Comutați la fila de proiectare și stilizați câmpurile după cum urmează.
- Culoare fundal: Albastru închis # 25274d
- Culoarea textului: gri deschis # d1d1d1
- Culoare fundal focalizare: albastru închis # 25274d
- Culoarea textului focalizat: gri deschis # d1d1d1
- Font: Palanquin
- Stil: TT
- Dimensiunea textului
- Birou: 0.9vw
- Tabletă: 2vw
- Telefon: 3vw
- Distanța literelor: 1px
buton
Apoi, stilizează butonul.
- Stiluri personalizate: Da
- Dimensiunea textului: 20px
- Culoarea textului: albastru închis # 25274d
- Culoare fundal: Galben # ffd868
- Raza de frontieră: 7px
- Culoare pictogramă: Albastru închis # 25274d
- Marja superioară: 5px
dimensionarea
Modificăm apoi parametrii de dimensionare.
- Lățime: 100%
- Lățime maximă: 100%
spaţierea
Vom adăuga, de asemenea, umplutură de top.
- Căptușeală superioară: 4vw
frontieră
Completați parametrii modulului prin personalizarea parametrilor de frontieră.
- Intrări cu colțuri rotunjite: 6px la cele patru colțuri
- Intrări Stiluri de graniță: toate cele patru părți
- Lățimea bordului de intrare: 2px
- Intrări Culoare graniță: galben # ffd868
Adăugați modulul de urmărire social media la coloana 2
Conținut
Accesați coloana 2 și adăugați un modul de socializare. Folosește toate rețelele sociale de care ai nevoie.
Legătură
Înainte de styling, adăugați link-uri la rețelele corespunzătoare.
Contextul articolului
Acum deschideți prima rețea socială și schimbați culoarea de fundal.
- Culoare: Albastru închis # 25274d
Pictogramă element
În fila de proiectare a aceluiași element, modificați setările pictogramei după cum urmează.
- Culoare: galben # ffd868
- Dimensiunea fontului pictogramei
- Birou și tabletă: 31 px
- Telefon: 26 px
Spațiu element
Apoi adăugați o marjă mică pentru a separa pictogramele una de cealaltă.
- Marginea dreaptă: 1vw
Copiați și lipiți stiluri de elemente
Pentru a stiliza rețelele de socializare rămase, reveniți la fereastra principală de conținut și copiați stilurile elementelor din prima pictogramă. Apoi lipiți stilurile de element pe rețelele sociale rămase.
aliniere
Comutați la fila principală de proiectare și asigurați-vă că modulul este aliniat la stânga.
- Alinierea modulului: stânga
dimensionarea
Apoi reglați dimensiunea modulului.
- Lățime: 100%
spaţierea
De asemenea, ștergeți toate completările implicite.
- Căptușire superioară, inferioară, stânga și dreapta: 0vw
frontieră
În cele din urmă, adăugați colțuri rotunjite în setările de margine. Aceasta va ajusta marginile tuturor pictogramelor simultan.
- colțuri rotunjite
- Stânga sus și dreapta: 7 pixeli
- Stânga și dreapta jos: 0px
Adăugați un modul text la coloana 2
Conținut
Sub modulul social media, adăugați un alt modul text. Adăugați conținut la alegere. Am adăugat două adrese, un număr de telefon și un e-mail. Utilizați caractere aldine pe titlul fiecărui articol din toate majusculele.
- Zona generală: 1587 Sukhumvit Soi 21, Bangkok, Thailanda.
- Punct de vânzare : Emporium Mall, etaj 2
- Telefon: (321) 564 2398
- E-mail: [e-mail protejat]
context
Schimbați culoarea de fundal a modulului.
- Culoare: Albastru închis # 25274d
Text
Treceți la fila de proiectare și stilizați textul.
- Font: Palanquin
- Culoare: galben # ffd868
- Dimensiune: 18px
spaţierea
Adăugați, de asemenea, valori de spațiere personalizate.
- Marja de sus
- Birou: -60px
- Tabletă și telefon: -50 pixeli
- Căptușeală superioară, inferioară, stânga și dreapta
- Birou: 3vw
- Tabletă: 6vw
- Telefon: 8vw
frontieră
Și completați modulul adăugând colțuri rotunjite în setările de margine. Asta e!
- Colțuri rotunjite: 10 pixeli în dreapta sus, în stânga jos și în dreapta jos.
studiu
Acum că am terminat de recreat secțiunea de contacte plutitoare, aruncați o privire finală asupra rezultatului pe diferite dimensiuni de ecran.
Resurse suplimentare
acest lucru este Resurse poate fi complementar cu ceea ce tocmai ai citit. Ele pot trebui folosite în plus sau de către cei care nu au Divi tema.
- Cum de a adăuga un formular de contact pop-up pe WordPress
- Cum se adaugă un formular drop-down pe antetul global de pe Divi
- 5 plugin-uri pentru a crea formulare de contact
Pentru a termina
Folosirea noilor efecte de defilare Divi transformă orice aspect standard într-un design frumos. Prin crearea propriului fundal, aveți mai mult control asupra aspectului designului finit. Dacă aveți întrebări sau sugestii, lăsați un comentariu în secțiunea de comentarii de mai jos!