Svaka web stranica treba odjeljak s kontaktima, ali to ne znači da morate odabrati standardni dizajn. Uz efekte pomicanja Divi, možete stvoriti lebdeći dio kontakta koji će se istaknuti. Poboljšajte svoju korisničku interakciju okomitim pomicanjem kontakt odjeljka koji će pozvati posjetitelje da komuniciraju s vašim kontakt obrazac. U ovom ćemo vam članku pokazati kako izraditi plutajući odjeljak s kontaktima pune širine koji možete dodati na bilo koju stranicu. Možete ga čak dodati na vrh podnožja na cijelom web-mjestu pomoću Divi Theme Buildera.

Ispod ćete pronaći besplatnu datoteku za preuzimanje s JSON izgledom koja se može preuzeti u vašoj vlastitoj Divi biblioteci. Uključili smo i PSD predložak koji će vam pomoći u ponovnom stvaranju pozadine karte, kao i pribadaču SVG za kartu kako biste je mogli prilagoditi vlastitim bojama.

Stvorite strukturu elementa

U ovom dizajnu koristit ćemo pozadinsku sliku koja je prikaz lokacije koju želite prikazati na Google karti. To možete učiniti u Photoshopu ili bilo kojem drugom uređivaču slika.

Dodajte novi odjeljak

Sada je vrijeme da započnete s izradom plutajućeg odjeljka za kontakt s Divi Builder-om! Prvo što ćemo učiniti je otvoriti novu ili postojeću stranicu i dodati novi odjeljak.

Na kartici sadržaj dodajte pozadinu karte koju ste stvorili u Photoshopu.

  • Pozadinska slika: vaša izmijenjena karta
Pozadinska slika Divi

razmak

Zatim prilagodite postavke razmaka odjeljaka na kartici dizajna.

  • Gornja i donja margina: 50vh
  • Donja obloga: 0vw
Konfiguracija razmaka odjeljka Divi 1

vidljivost

Zatim postavite prelive na vidljive.

  • Vodoravni i okomiti preljev: vidljiv
plutajući kontaktni odjeljak

Položaj

Na kraju, postavite Z indeks odjeljka na 10.

  • Z indeks: 10
Položaj odjeljka Divi

Dodajte novi redak

Struktura stupaca

Sada je vrijeme da dodate nekoliko stvari. Prvo dodajte red s 2 stupca.

Red ima dva stupca divi

dimenzioniranje

Otvorite parametre linije i prilagodite veličinu na sljedeći način.

  • Širina
    • Ured: 90%
    • Tablet i telefon: 80%
  • Maks. Širina: 90%
Parametar Divi linije

vidljivost

Kliknite karticu Napredno, a zatim prilagodite preljeve.

  • Vodoravni i okomiti preljev: vidljiv
Konfiguracija preljeva Divi linije

Položaj

Dovršite postavke retka promjenom postavki položaja.

  • Pozicija: Relativno
  • Podrijetlo offset: gore lijevo
  • Okomiti odmak
    • Radna površina: -8vw
Konfigurirajte položaj divizije

Postavke stupca 1

pozadina

Prije dodavanja modula morat ćemo stilizirati pojedine stupce. Dodajte boju pozadine u stupac 1.

  • Puna boja: # 25274d
Boja stupca 1 divi

Razmještanje

Zatim prilagodite postavke razmaka.

  • Gornja i donja obloga
    • Desktop i tablet: 7vw
  • Lijeva i desna padding
    • Radna površina: 3vw
    • Tablet i telefon: 6vw
Konfiguracija razmaka presjeka dva stupca

Granica

Zatim dodajte nekoliko zaobljenih uglova u postavke okvira.

  • Zaobljeni kutovi: 10 px sva četiri ugla
Dio zaobljenih rubova

Pomaknite se efekti

Konačno, ali ne najmanje bitno, upotrijebite neko okomito kretanje u postavkama efekata pomicanja. To će nam pomoći stvoriti efekt plutanja.

  • Pomaknite se efekti transformacije: okomito gibanje
  • Okomiti pokret / radni stol
    • Početni pomak: 4
    • Srednji odmak: 0 (na 50%)
    • Završni offset: -4
  • Okomiti pokret / tablet i telefon
    • Početni pomak: 4
    • Srednji odmak: 0 (na 40% i 60%)
    • Krajnji odmak: -3
  • Učinak okidačkog pokreta: sredina elementa
Prilagodite efekt pomicanja odjeljka za dijelove

Postavke 2. stupca

Položaj

Sada prijeđimo na parametre drugog stupca. Parametre položaja prilagodite u skladu s tim.

  • Pozicija: Relativno
  • Podrijetlo pomaka: gore lijevo
  • Okomiti odmak
    • Ured: 25vw
Prilagođavanje stupca Divi

Efekti pomicanja

Ovom stupcu dodamo i vertikalno kretanje.

  • Učinci transformacije pomicanja: okomito kretanje
  • Definirajte okomito / kretanje radne površine
    • Startni pomak: 2
    • Prosječni odmak: 0 (na 50%)
    • Krajnji odmak: -2
  • Odredite vertikalno kretanje / tablet i telefon
    • Startni pomak: 0
    • Prosječni odmak: 0 (na 50%)
    • Krajnji odmak: -2
  • Okidač efekta pokreta: vrh elementa
Učinak pomicanja Divi

Dodajte tekstualni modul u stupac 1

Sadržaj

Vrijeme je za dodavanje modula, počevši od tekstualnog modula u stupcu 1. Dodajte bilo koji H2 sadržaj koji želite.

Sadržaj modula stupca 1

Tekst naslova

Idite na karticu dizajn i oblikujte H2 tekst kako slijedi.

  • Razina naslova: H2
  • Krstionica: Palanquin Dark
  • Težina slova: podebljano
  • Stil fonta: TT
  • Boja: žuta # ffd868
  • Veličina
    • Ured: 5vw
    • Tablet: 10vw
    • Telefon: 12vw
  • Razmak slova: 4px
Divi prilagodba fonta na vrhu

Dodajte modul obrasca za kontakt u stupac 1

Sadržaj

Ispod tekstualnog modula dodajte a kontakt obrazac. Ovo su polja koja koristimo:

  • ime
  • E-mail
  • materijal
  • Poruka
Dodajte obrazac za kontakt divi

spam zaštita

Prije oblikovanja modula kontakt obrazac. uključite zaštitu od spama i povežite svoj ReCaptcha račun.

  • Koristite uslugu zaštite od neželjene pošte: Da
  • Pružatelj usluge: ReCaptcha
  • Odaberite račun
Divi kontakt obrazac za zaštitu od neželjene pošte

polja

Prebacite se na karticu dizajna i stilizirajte polja kako slijedi.

  • Boja pozadine: Tamnoplava # 25274d
  • Boja teksta: svijetlo siva # d1d1d1
  • Boja pozadine fokusa: Tamnoplava # 25274d
  • Boja teksta fokusa: svijetlo siva # d1d1d1
  • Krstionica: Palanquin
  • Stil: TT
  • Veličina teksta
    • Ured: 0.9vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Razmak slova: 1px
Prilagodite polja boja 1

dugme

Zatim stilizirajte gumb.

  • Prilagođeni stilovi: Da
  • Veličina teksta: 20px
  • Boja teksta: tamno plava # 25274d
  • Boja pozadine: žuta # ffd868
  • Polumjer obruba: 7px
  • Boja ikone: Tamnoplava # 25274d
  • Gornja margina: 5px
Prilagodite stil divi gumba 1
Konfiguracija boje gumba Divi

dimenzioniranje

Zatim mijenjamo parametre veličine.

  • Širina: 100%
  • Maks. Širina: 100%
Konfiguracija veličine divi

razmak

Također ćemo dodati gornji padding.

  • Gornja obloga: 4vw
Razmak divi

granica

Ispunite parametre modula prilagodbom parametara obruba.

  • Ulazi sa zaobljenim uglovima: 6 px u četiri ugla
  • Unosi Stil granica: sve četiri strane
  • Širina ulazne granice: 2 px
  • Unosi Boja obruba: žuta # ffd868
Konfiguracija granice Divi

Dodajte modul za praćenje društvenih medija u stupac 2

Sadržaj

Idite na stupac 2 i dodajte modul društvenih mreža. Koristite sve društvene mreže koje su vam potrebne.

  • Facebook
  • Twitter
  • LinkedIn
Modul nas pratite na društvenim mrežama

Veza

Prije stylinga, dodajte veze na odgovarajuće mreže.

Kontekst članka

Sada otvorite prvu društvenu mrežu i promijenite boju pozadine.

  • Boja: tamno plava # 25274d
Izmijenite pozadinu divi 1

Ikona elementa

Na kartici dizajna istog elementa promijenite postavke ikone kako slijedi.

  • Boja: žuta # ffd868
  • Veličina fonta ikone
    • Stol i tablet: 31 px
    • Telefon: 26 px
Prilagodite divi u boji

Razmak predmeta

Zatim dodajte malu marginu kako biste ikone odvojili jedna od druge.

  • Desna margina: 1vw
Konfiguracija razmaka društvenog dijeljenja

Kopirajte i zalijepite stilove predmeta

Da biste oblikovali preostale društvene mreže, vratite se u glavni prozor sadržaja i kopirajte stilove elemenata s prve ikone. Zatim zalijepite stilove elemenata na preostale društvene mreže.

Kopiraj element stila
Zalijepi element stila divi

poravnanje

Prebacite se na glavnu karticu dizajna i provjerite je li modul poravnat lijevo.

  • Poravnanje modula: lijevo
Odaberite poravnanje

dimenzioniranje

Zatim podesite veličinu modula.

  • Širina: 100%
Konfigurirajte veličinu divi

razmak

Također obrišite sve zadane ispune.

  • Gornja, donja, lijeva i desna obloga: 0vw
Konfigurirajte razmak divi

granica

Na kraju dodajte zaobljene kutove u postavkama obruba. Ovo će prilagoditi granice svih ikona odjednom.

  • Okrugli uglovi
    • Gore lijevo i desno: 7 piksela
    • Dno lijevo i desno: 0px
Konfiguracija granice modula Divi

Dodajte tekstualni modul u stupac 2

Sadržaj

Ispod modula društvenih medija dodajte još jedan tekstualni modul. Dodajte sadržaj po vašem izboru. Dodali smo dvije adrese, telefonski broj i e-poštu. U naslovima svake stavke velikim slovima upotrijebite podebljano.

  • Opće područje: 1587. Sukhumvit Soi 21, Bangkok, Tajland.
  • Mjesto prodaje : Emporium Mall, 2. kat
  • telefon: (321) 564 2398
  • E-mail: [e-pošta zaštićena]
Konfiguracija adrese modula Divi

kontekst

Promijenite boju pozadine modula.

  • Boja: tamno plava # 25274d
Konfiguracija pozadine tekstualnog modula

Tekstovi

Prebacite se na karticu dizajna i oblikujte tekst.

  • Krstionica: Palanquin
  • Boja: žuta # ffd868
  • Veličina: 18px
Font teksta modula Divi

razmak

Također dodajte prilagođene vrijednosti razmaka.

  • Gornja marža
    • Ured: -60px
    • Tablet i telefon: -50 piksela
  • Gornja, donja, lijeva i desna obloga
    • Ured: 3vw
    • Tablet: 6vw
    • Telefon: 8vw
Marža razmaka Divi

granica

I dovršite modul dodavanjem zaobljenih kutova u postavkama obruba. To je to!

  • Zaobljeni uglovi: 10 piksela gore desno, dolje lijevo i dolje desno.
Tekstualni modul divi zaobljene granice

pregled

Sad kad smo završili s rekreiranjem odjeljka s plutajućim kontaktima, konačno pogledajte rezultat na različitim veličinama zaslona.

plutajući kontaktni odjeljak

Dodatni resursi

Ovo je sredstva može biti komplementarna onome što ste upravo pročitali. Mogu ih koristiti dodatno ili oni koji ih nemaju Divi tema.

za završiti

Korištenje novih Divi efekata pomicanja pretvara bilo koji standardni izgled u lijep dizajn. Stvaranjem vlastite pozadine imate veću kontrolu nad izgledom gotovog dizajna. Ako imate bilo kakvih pitanja ili prijedloga, ostavite komentar u odjeljku za komentare u nastavku!