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ă
Imagine de fundal Divi

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
Configurația spațierii secțiunii Divi 1

vizibilitate

Apoi setați revarsările la vizibile.

  • Depășire orizontală și verticală: vizibilă
secțiune de contact plutitoare

Poziţie

În cele din urmă, setați indexul Z al secțiunii la 10.

  • Indicele Z: 10
Poziția secțiunii Divi

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.

Row are două coloane divi

dimensionarea

Deschideți parametrii liniei și reglați dimensiunea după cum urmează.

  • Lățime
    • Birou: 90%
    • Tabletă și telefon: 80%
  • Lățime maximă: 90%
Parametru linie Divi

vizibilitate

Faceți clic pe fila avansată și apoi ajustați revărsările.

  • Depășire orizontală și verticală: vizibilă
Configurare linie Divi overflow

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
Configurați poziția liniei divi

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
Culoare coloană 1 divi

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
Configurație de spațiere în două coloane

Frontieră

Apoi, adăugați câteva colțuri rotunjite la setările de graniță.

  • Colțuri rotunjite: 10px toate cele patru colțuri
Secțiunea divi a marginilor rotunjite

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
Personalizați efectul de derulare a secțiunii divi

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
Personalizarea coloanei Divi

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
Efect de defilare Divi

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.

Modulul de conținut al coloanei 1

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
Personalizarea fontului Divi în partea de sus

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
  • E-mail
  • material
  • Mesaj
Adăugați formular de contact divi

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
Formular de contact Divi protecție spam

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
Personalizați câmpurile de culori 1

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
Personalizați stilul butonului divi 1
Configurare culoare buton Divi

dimensionarea

Modificăm apoi parametrii de dimensionare.

  • Lățime: 100%
  • Lățime maximă: 100%
Configurare dimensionare divizare

spaţierea

Vom adăuga, de asemenea, umplutură de top.

  • Căptușeală superioară: 4vw
Spațiere Divi

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
Configurare frontieră Divi

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.

  • Facebook
  • Twitter
  • LinkedIn
Modulul urmează-ne pe rețelele de socializare

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
Modificați fundalul divi 1

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
Personalizați culoarea divi

Spațiu element

Apoi adăugați o marjă mică pentru a separa pictogramele una de cealaltă.

  • Marginea dreaptă: 1vw
Configurarea spațiului de partajare socială

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.

Copiați elementul de stil
Lipiți elementul stilului divi

aliniere

Comutați la fila principală de proiectare și asigurați-vă că modulul este aliniat la stânga.

  • Alinierea modulului: stânga
Alegeți alinierea

dimensionarea

Apoi reglați dimensiunea modulului.

  • Lățime: 100%
Configurați dimensiunea diviziunii

spaţierea

De asemenea, ștergeți toate completările implicite.

  • Căptușire superioară, inferioară, stânga și dreapta: 0vw
Configurați spațiul div

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
Configurarea marginii modulului Divi

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]
Configurarea adresei modulului text Divi

context

Schimbați culoarea de fundal a modulului.

  • Culoare: Albastru închis # 25274d
Configurarea fundalului modulului text

Text

Treceți la fila de proiectare și stilizați textul.

  • Font: Palanquin
  • Culoare: galben # ffd868
  • Dimensiune: 18px
Fontul textului modulului Divi

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
Marja de distanțare Divi

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.
Modul text divi cu margini rotunjite

studiu

Acum că am terminat de recreat secțiunea de contacte plutitoare, aruncați o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

secțiune de contact plutitoare

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.

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!