Trebate dodati a kontakt obrazac na globalno zaglavlje?
Kada izradite prilagođeno zaglavlje za svoje web stranica Koristeći Divi Theme Builder, naći ćete se u potrazi za savršenim načinom za dodavanje CTA (Call to Action). Jedan od načina da to učinite je dodavanje a kontakt obrazac listanje.
To će vam pomoći da cjelokupni izgled vašeg zaglavlja bude čist, a istodobno će vam omogućiti ulazak kontakt bez potrebe za listanjem.
U ovom vodiču pokazat ćemo vam kako izraditi kontakt obrazac pomicanje pomoću Divi i JQuery & CSS koda.
Započnimo!
pregled
Prije nego što uđemo u ovaj vodič, pogledajmo pregled rezultata koji ćemo dobiti.
Izradite globalno zaglavlje
Idite na Theme Builder
Idite na Theme Builder s Divi izbornika koji se nalazi na vašoj WordPress nadzornoj ploči i kliknite na "Dodaj globalno zaglavlje".
Odaberite "Stvori globalno zaglavlje".
Napravite stil zaglavlja
Postavke odjeljka
Boja pozadine
Jednom u uređivaču predložaka, primijetit ćete odjeljak. Otvorite ovaj odjeljak i promijenite boju pozadine.
- Pozadina: #FFFFFF
razmak
Zatim uklonite zadane gornje i donje unutarnje margine iz odjeljka.
- Unutarnji rubni vrh: 0px
- Donja unutarnja margina: 0px
Kutija sjena
Također nanesite suptilnu sjenu u kutiji.
- Box Shadow Blue Jačina: 50px
- Boja fonta titla: rgba(0,0,0,0.15)
Dodajte novi redak
Struktura stupca
Dodajte novi redak u odjeljak koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja modula, otvorite postavke redaka i promijenite postavke veličine na sljedeći način:
- Koristite prilagođenu širinu žlijeba: Da
- Razmak između stupaca: 1
- Uskladiti visine stupova: Da
- Maksimalna širina: 95%
- Maksimalna širina: 100%
razmak
Zatim dodajte prilagođene gornje i donje obloge.
- Vršna unutarnja margina: 1vw
- Donja unutarnja margina: 1vw
glavni element
Poravnajte sav sadržaj stupca dodavanjem jednog retka CSS koda glavnom elementu retka.
align-items: center;
Z indeks stupca 2
Također pazimo da drugi stupac ima višu vrijednost z-indeksa za responzivni dizajn.
- Z-indeks: 12
Dodajte modul slike u stupac 1
Preuzmite logotip
Vrijeme je da počnete dodavati module! Počevši od slikovnog modula u stupcu 1. Prenesite logotip.
poravnanje
Zatim promijenite poravnanje modula.
- Poravnanje slike: centrirano
dimenzioniranje
Promijenite i širinu.
- Maksimalna širina: 3vw (desktop), 5vw (tablet), 7vw (telefon)
Dodajte modul izbornika u stupac 2
Odaberite Izbornik
U drugom stupcu ćemo dodati modul Izbornik.
raspored
Prijeđite na karticu Stil modula i promijenite stil izgleda.
- Stilovi: centrirani
Postavke teksta izbornika
Zatim promijenite tekstualne postavke u izborniku modula.
- Izbornik fonta: Otvori Ništa
- Izbornik prigušenog svjetla: polupodebljan
- Boja teksta izbornika: #000000
- Veličina teksta izbornika: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefon)
- Razmak između slova izbornika: 1px
Postavke teksta padajućeg izbornika
Zatim promijenite boju linije na padajućem izborniku.
- Boja linije padajućeg izbornika: #007dff
ikone
Promjena boje ikone izbornika hamburgera.
- Boja ikone izbornika za hamburger: #007dff
Dodajte tekstualni modul u stupac 3
Dodaj poruku
Na treći modul! Dodajte tekstualni modul s porukom po vašem izboru.
Boja pozadine
Dodajte boju pozadine.
- Boja pozadine: #007dff
Postavke teksta
Prebacite se na karticu Dizajn modula i prema tome promijenite postavke teksta:
- Font teksta: Otvori Sans
- Blago svjetlo Tekst: podebljano
- Boja teksta Tekst: #ffffff
- Veličina teksta: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefon)
- Poravnanje teksta: centrirano
dimenzioniranje
Zatim izmijenite parametre veličine modula.
- Maksimalna širina: 33%
- Poravnanje modula: središte
razmak
Zatim dodajte prilagođene gornji i donji paddings.
- Gornja unutarnja margina: 0,8 vw (desktop), 2 vw (tablet i telefon)
- Niska interna marža: 0,8 vw (desktop), 2 vw (tablet i telefon)
granica
Ispunite parametre modula dodavanjem radijusa obruba.
- Zaobljeni pravokutnik: 100px
Dodajte još jedan tekstualni modul u stupac 3
Dodajte simbol u područje sadržaja
Prijeđimo na sljedeći modul, koji je još jedan tekstualni modul. Dodajte sljedeći simbol strelice u područje sadržaja: '▼'.
Postavke teksta
Prebacite se na karticu Dizajn modula i prema tome promijenite postavke teksta:
- Font teksta: Otvori Sans
- Boja teksta: #007fff
- Tekst Veličina teksta: 3vw
- Visina retka teksta: 0em
- Poravnanje teksta: centrirano
Z-indeks
Povećajmo i z-indeks modula.
- Z-indeks: 11
Dodajte modul obrasca za kontakt u stupac 3
Dodajte polja pune širine po svom izboru
Sljedeći i posljednji modul koji nam treba u trećem stupcu je modul obrasca za kontakt. Dodajte sva polja pune širine koja su vam potrebna.
Dodajte naslov
Također koristite naslov.
Boja pozadine
Zatim promijenimo boju pozadine.
- Boja pozadine: #e7f2ff
Postavke polja
Idemo na karticu Stil modula i promijenimo postavke polja.
- Polja boje pozadine: #ffffff
- Boja teksta polja: #dddddd
- Boja teksta fokusa: #007dff
- Vertex Padding Polja: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Donja polja: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Polja fonta: ne otvaraju ništa
- Polja Veličina teksta: 0,7 vw (desktop), 1,8 vw (tablet), 3 vw (telefon)
Postavke teksta naslova
Uredite postavke teksta naslova.
- Umetnite naslov tri: H3
- Blago svjetlo Naslov: podebljani tekst
- Poravnanje teksta: centrirano
- Boja teksta naslova: #007dff
- Veličina teksta naslova: 1 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefon)
- Visina retka naslova: 1,6 em
Postavke teksta Captcha
S postavkama teksta captcha.
- Font Captcha: Otvorite Sans
- Boja Captcha teksta: #007dff
Postavke gumba
Nastavite prilagođavanjem gumba.
- Koristite prilagođene stilove za gumb: Da
- Veličina teksta gumba: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefon)
- Boja teksta gumba: #ffffff
- Gumb za pozadinu: #007dff
- Gumb širine obruba: 0 piksela
- Polumjer obruba gumba: 100 px
- Gumb za font: Otvori Ništa
- Gumb mekog svjetla: podebljani tekst
- Margina gumba: 1vw
- Gumb za gornji dio: 1vw (desktop), 2vw (tablet i telefon)
- Donji gumb za oblaganje: 1vw (desktop), 2vw (tablet i telefon)
- Lijevi pad tipke: 2vw (desktop), 7vw (tablet i telefon)
- Desna tipka za pad: 2vw (desktop), 7vw (tablet i telefon)
razmak
Koristite prilagođene vrijednosti paddinga na različitim veličinama zaslona.
- Maksimalni unutarnji prostor za glavu: 4vw (desktop), 6vw (tablet i telefon)
- Donja unutarnja margina: 4vw (desktop), 6vw (tablet i telefon)
- Lijeva unutarnja margina: 2vw (desktop), 6vw (tablet i telefon)
- Desna unutarnja margina: 2vw (desktop), 6vw (tablet i telefon)
granica
Zatim promijenite postavke obruba.
- Ulazni zaobljeni pravokutnik: 10px
Glavni element, naslov kontakta i Captcha CSS
Dovršite postavke modula dodavanjem malih CSS promjena na naprednu karticu.
Glavni element:
| 01 | border-radius: 20px; |
Naslov od kontakt :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Prilagodite elemente za stvaranje obrasca za kontakt jednim klikom
Dodajte visinu stupca 3
Nakon što ste postavili sve module, vrijeme je za stvaranje efekta. Prvi korak prema postizanju željenog rezultata je otvaranje postavki 3 stupca i dodavanje prilagođene visine odziva na naprednoj kartici.
stol :
| 01 | height: 3vw; |
tableta:
| 01 | height: 5vw; |
Poziv:
| 01 | height: 6vw; |
Dodajte CSS klasu gumbu i strelici
Zatim ćemo dodati istu CSS klasu u prva dva tekstualna modula u stupcu 3.
- CSS klasa: prikaži-kontakt
Dodajte CSS klasu u kontakt obrazac
Također će nam trebati prilagođena CSS klasa za modul obrasca za kontakt.
- CSS klasa: kontakt-forma-modul
Sakrij modul obrasca za kontakt
Nastavite dodavanjem dodatne linije CSS koda glavnom elementu modula obrasca za kontakt. To će nam omogućiti da sakrijemo modul prije klika.
| 01 | display: none; |
Dodajte modul koda u stupac 3 s JQuery i CSS kodom
A da bismo stvorili funkciju klika, trebat će nam JQuery kod. Također ćemo koristiti prilagođeni CSS kod. Dodajte novi modul koda u stupac 2 s kodom. Obavezno postavite JQuery kod između oznaka skripte i CSS koda između oznaka stila.
jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});
.show-contact {
cursor: pointer;
}
.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}
pregled
Sada kada smo prošli sve korake, pogledajmo zadnji rezultat.
Zaključak
U ovom članku smo vam pokazali kako dodati padajući obrazac za kontakt u prilagođeno zaglavlje.
Ako imate pitanja ili prijedloge, slobodno ostavite komentar u odjeljku za komentare u nastavku.
