Kada izradite prilagođeno zaglavlje za svoje web stranica, koristeći Divijev alat za izradu tema, naći ćete se u potrazi za savršenim načinom za dodavanje AAL-a (poziv na akciju). 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 unos kontakt s vama, bez potrebe za listanjem prema dolje. U ovom vodiču pokazat ćemo vam kako izraditi kontakt obrazac padajući izbornik koristeći Divi i JQuery & CSS kod. Također ćete moći besplatno preuzeti JSON datoteku!
Idemo.
pregled
Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.
1. Idite na Divi Builder tema i počnite stvarati globalno zaglavlje
Idite na Divi Builder tema
Započnite odlaskom na Divi Builder tema u podrijetlu vašeg WordPress web mjesta.
Izradite globalno zaglavlje
Kliknite "Dodaj globalno zaglavlje" i odaberite "Stvori globalno zaglavlje" za početak stvaranja prilagođenog zaglavlja u svijetu.
2. Izradite dizajn zaglavlja
Postavke odjeljka
Boja pozadine
Kad uđete u ukupan predložak zaglavlja, primijetit ćete odjeljak. Otvorite ovaj odjeljak i upotrijebite bijelu boju pozadine.
- Boja pozadine: #FFFFFF
razmak
Zatim uklonite zadane gornje i donje obloge iz odjeljka.
- Gornja obloga: 0px
- Donja obloga: 0px
Kutija sjena
Također nanesite suptilnu nijansu okvira.
- Jačina zamagljivanja sjene okvira: 50px
- Boja sjene: rgba (0,0,0,0,15)
Dodajte novi redak
Struktura stupaca
Nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja dodatnih modula, otvorite parametre retka i izmijenite parametre veličine na sljedeći način:
- Koristite prilagođenu širinu oluka: Da
- Širina oluka: 1
- Izjednačite visine stupaca: Da
- Širina: 95%
- Maks. Širina: 100%
razmak
Zatim dodajte prilagođene gornje i donje obloge.
- Gornja obloga: 1vw
- Donja obloga: 1vw
Glavni element
I poravnajte sav sadržaj stupca dodavanjem jednog retka CSS koda glavnom elementu retka.
align-items: center;
Stupac 2 Z Indeks
Također osiguravamo da drugi stupac ima veću vrijednost z-indeksa u reaktivne svrhe.
- Z indeks: 12
U stupac 1 dodajte modul slike
Preuzmite logotip
Vrijeme je da počnete dodavati module! Započnite s modulom slike u stupcu 1. Prenesite logotip.
poravnanje
Zatim promijenite poravnanje modula.
- Poravnanje slike: sredina
dimenzioniranje
Promijenite i širinu.
- Širina: 3vw (desktop), 5vw (tablet), 7vw (telefon)
Dodajte modul izbornika u stupac 2
Odaberite izbornik
U drugom stupcu ćemo dodati modul sa izbornikom.
raspored
Prebacite se na karticu dizajna modula i promijenite stil izgleda.
- Stil: u središtu
Postavke teksta izbornika
Zatim promijenite tekstualne postavke u izborniku modula.
- Font menija: Otvori bez
- Težina slova u izborniku: Polut podebljano
- Boja teksta izbornika: # 000000
- Veličina teksta izbornika: 0.8vw (desktop), 2vw (tablet), 3vw (telefon)
- Razmak slova u izborniku: 1 px
Postavke teksta padajućeg izbornika
Zatim promijenite boju linije u padajućem izborniku.
- Boja linije padajućeg izbornika: # 007dff
ikone
S bojom ikone izbornika hamburgera.
- Boja ikone izbornika Hamburger: # 007dff
Dodajte tekstualni modul 1 u stupac 3
Dodajte kopiju
Krenimo na treći modul! Dodajte tekstualni modul s kopijom po vašem izboru.
Boja pozadine
Zatim dodajte boju pozadine.
- Boja pozadine: # 007dff
Postavke teksta
Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta:
- Font teksta: Open Sans
- Težina fonta teksta: podebljano
- Boja teksta: #ffffff
- Veličina teksta: 0.8vw (desktop), 2vw (tablet), 3vw (telefon)
- Usklađivanje teksta: središte
dimenzioniranje
Zatim izmijenite parametre veličine modula.
- Širina: 33%
- Usklađivanje modula: centar
razmak
Zatim dodajte prilagođene gornje i donje obloge.
- Gornja obloga: 0.8vw (desktop), 2vw (tablet i telefon)
- Donja obloga: 0.8vw (stol), 2vw (tablet i telefon)
granica
Ispunite parametre modula dodavanjem radijusa obruba.
- Svi kutovi: 100px
Dodajte tekstualni modul 2 u stupac 3
Dodajte simbol u područje sadržaja
Prijeđimo na sljedeći modul, koji je drugi tekstualni modul. Dodajte sljedeću strelicu u područje sadržaja: "▼".
Postavke teksta
Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta:
- Font teksta: Open Sans
- Boja teksta: # 007fff
- Veličina teksta: 3vw
- Visina retka teksta: 0em
- Usklađivanje teksta: središte
Z indeks
Također povećavamo z indeks z modula.
- Z indeks: 11
Dodajte modul kontaktnog obrasca u stupac 3
Sada možete dodati a kontakt obrazac samo na dnu tekstualnog modula koji sadrži strelicu. Ovaj modul je vrlo jednostavan za korištenje, tako da ćete morati prilagoditi koja polja želite učiniti vidljivima.
3. Prilagodite elemente za stvaranje kontaktnog obrasca u jednom kliku
Dodajte visinu stupca 3
Jednom kada su svi modovi na svom mjestu, vrijeme je za stvaranje efekta. Prvi korak ka postizanju željenog rezultata je otvaranje postavki u stupcu 3 i dodavanje prilagodljive visine u naprednoj kartici.
ureda:
height: 3vw;
tableta:
height: 5vw;
Telefon:
height: 6vw;
Dodajte CSS klasu gumbu i strelici
Tada ćemo dodati prvu CSS klasu 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 Obrazac za kontakt.
- CSS klasa: kontakt-forma-modul
Sakrij modul Kontaktnog obrasca
Nastavite dodavanjem dodatnog retka CSS koda glavnom elementu modula Kontakt obrazac. To će nam omogućiti da sakrijemo modul prije klika.
display: none;
Dodajte kodni modul u stupac 3 s JQuery i CSS kodom
A da bismo stvorili funkciju klika, trebat će nam neki JQuery kôd. Također ćemo koristiti prilagođeni CSS kod. Dodajte novi modul koda u stupac 2 s kodom. Obavezno postavite JQuery kôd između oznaka skripte i CSS kôd 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
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Biro
Što zapamtiti
U ovom smo članku pokazali kako dodati prilagođeni obrazac padajućeg obrasca za kontakt. To je izvrstan način da se rano pokrene akcija.
