Treci la conținutul principal

Creați o secțiune de contact plutitoare cu efecte de derulare pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Fiecare site web are nevoie de o secțiune de contact, dar asta nu înseamnă că trebuie să alegeți un design standard. Cu efectele de derulare Divi, puteți crea o secțiune de contact plutitoare care să iasă în evidență. Îmbunătățiți interacțiunea cu utilizatorul printr-un aspect vertical al secțiunii de contact care va invita vizitatorii să interacționeze cu formularul dvs. de contact. În acest articol, vă vom arăta cum să creați o secțiune de contact plutitoare cu lățime completă 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 de pe site cu ajutorul 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 reprezintă o reprezentare pe Google Map a locației pe care doriți să o evidențiați. Puteți face acest lucru cu Photoshop sau cu 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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

  • 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 text, adăugați un 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 denumi modulul formularului 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ăutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • 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.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • 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

Resursele sale pot fi complementare cu ceea ce tocmai ați citit. Pot fi utilizate în plus sau de către cei care nu au tema Divi.

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!

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top