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
razmak
Zatim prilagodite postavke razmaka odjeljaka na kartici dizajna.
- Gornja i donja margina: 50vh
- Donja obloga: 0vw
vidljivost
Zatim postavite prelive na vidljive.
- Vodoravni i okomiti preljev: vidljiv
Položaj
Na kraju, postavite Z indeks odjeljka na 10.
- Z indeks: 10
Dodajte novi redak
Struktura stupaca
Sada je vrijeme da dodate nekoliko stvari. Prvo dodajte red s 2 stupca.
dimenzioniranje
Otvorite parametre linije i prilagodite veličinu na sljedeći način.
- Širina
- Ured: 90%
- Tablet i telefon: 80%
- Maks. Širina: 90%
vidljivost
Kliknite karticu Napredno, a zatim prilagodite preljeve.
- Vodoravni i okomiti preljev: vidljiv
Položaj
Dovršite postavke retka promjenom postavki položaja.
- Pozicija: Relativno
- Podrijetlo offset: gore lijevo
- Okomiti odmak
- Radna površina: -8vw
Postavke stupca 1
pozadina
Prije dodavanja modula morat ćemo stilizirati pojedine stupce. Dodajte boju pozadine u stupac 1.
- Puna boja: # 25274d
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
Granica
Zatim dodajte nekoliko zaobljenih uglova u postavke okvira.
- Zaobljeni kutovi: 10 px sva četiri ugla
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
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
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
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.
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
Dodajte modul obrasca za kontakt u stupac 1
Sadržaj
Ispod tekstualnog modula dodajte a kontakt obrazac. Ovo su polja koja koristimo:
- ime
- materijal
- Poruka
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
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
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
dimenzioniranje
Zatim mijenjamo parametre veličine.
- Širina: 100%
- Maks. Širina: 100%
razmak
Također ćemo dodati gornji padding.
- Gornja obloga: 4vw
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
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.
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
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
Razmak predmeta
Zatim dodajte malu marginu kako biste ikone odvojili jedna od druge.
- Desna margina: 1vw
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.
poravnanje
Prebacite se na glavnu karticu dizajna i provjerite je li modul poravnat lijevo.
- Poravnanje modula: lijevo
dimenzioniranje
Zatim podesite veličinu modula.
- Širina: 100%
razmak
Također obrišite sve zadane ispune.
- Gornja, donja, lijeva i desna obloga: 0vw
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
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]
kontekst
Promijenite boju pozadine modula.
- Boja: tamno plava # 25274d
Tekstovi
Prebacite se na karticu dizajna i oblikujte tekst.
- Krstionica: Palanquin
- Boja: žuta # ffd868
- Veličina: 18px
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
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.
pregled
Sad kad smo završili s rekreiranjem odjeljka s plutajućim kontaktima, konačno pogledajte rezultat na različitim veličinama zaslona.
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.
- Kako dodati kontakt obrasca popup na WordPress
- Kako dodati padajući obrazac na globalno zaglavlje na Divi
- 5 dodataka za stvaranje kontaktnih obrazaca
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!