Želite li kreirati a kontakt formular u Divi koji se pojavljuje nakon klika na dugme?
U ovom Divi tutorijalu pokazat ćemo vam kako da kreirate a kontakt formular koji se pojavljuje nakon što kliknete na dugme koristeći samo Divi, jQuery kod i CSS kod.
Pročitajte i naš vodič o: Divi: Kako napraviti ljepljivo podnožje sa efektom "Otkrij".
To je odličan način da zadržite posjetitelja vašeg sajt fokusirani na akciju na koju su se obavezali pritiskom na dugme. Ne vodi ih na drugu stranicu.
pregled
U nastavku možete brzo pogledati šta ćemo kreirati, a zatim uskočite u tutorijal!
Pregled na PC-u
Pregled na telefonu i tabletu
Kreirajte novu stranicu s unaprijed definiranim izgledom
Počnimo korištenjem unaprijed definiranog izgleda iz Divi biblioteke. Za ovaj primjer koristit ćemo kontakt stranicu Paket izgleda proizvoda za uljepšavanje .
Dodajte novu stranicu na svoju site Web i dajte mu naslov, a zatim odaberite opciju 'Koristite Divi Builder'.
Za ovaj primjer ćemo koristiti unaprijed napravljen izgled iz Divi biblioteke, pa odaberite 'Odaberite izgled'.
Pronađite i odaberite početnu stranicu izgleda 'Kompanija za dizajn enterijera'.
Odaberite 'Odaberite izgled' da dodate izgled vašoj stranici.
Sada smo spremni za nastavak našeg tutorijala.
Kreirajte odjeljak s modulom Button
Prva stvar koju ćemo morati da uradimo je da dodamo novi odeljak u koji postavljamo dugme koje će dozvoliti kontakt formular pojaviti se.
Vidi takođe: Divi: Kako napraviti prilagođeno podnožje
Samo dodajte standardni odjeljak
Zatim odaberite red sa jednom kolonom.
Kada to učinite, dodajte mu modul Button.
Dugme možete prilagoditi kako god želite, ali morate biti sigurni da URL gumba počinje s '#' nakon čega slijedi nešto drugo. Ne možete jednostavno ostaviti prazno ili samo koristiti znak '#'. Dodavanjem '#' i teksta, stranica se neće pomjeriti kada kliknete na dugme. Ako ostavite prazno, stranica će se osvježiti klikom. A ako koristite samo '#', bit ćete poslani na vrh stranice.
Sljedeća važna stvar koju ćemo morati da uradimo je da dugmetu dodelimo CSS klasu. Koristićemo ovu CSS klasu kasnije u ovom članku u jQuery kodu kako bismo osigurali da se kontakt obrazac pojavi nakon klika. Klasa koju ćemo morati da dodelimo dugmetu je jednostavno „dugme“.
- CSS klasa: dugme
Kreirajte kontakt obrazac za PC verziju
Sljedeće što ćemo morati učiniti je kreirati obrazac za kontakt na desktopu koji će se pojaviti kada neko klikne na dugme koje smo kreirali u prethodnom dijelu ovog članka. Kasnije u ovom članku ćemo vam također pokazati kako da kreirate mobilnu verziju.
Dodajte novi standardni odjeljak
Započnite dodavanjem novog standardnog odjeljka na stranicu na kojoj radite. U postavkama odjeljka idite na karticu Napredno dodajte "skočni prozor" u polje CSS Class.
Pomaknite se prema dolje na toj istoj kartici i postavite sljedeće linije CSS koda u polje Prije prilagođene CSS potkategorije:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Dodavanjem ovoga osiguravamo da odjeljak zauzima cijelu karticu. Možete podesiti boju pozadine u CSS kodu kako biste kreirali željeni sloj pozadine. U ovom slučaju koristimo crnu boju sa malo prozirnosti. Na ovoj istoj kartici, također dodajte sljedeći red CSS koda glavnom elementu:
display: none;
Posljednja stvar koju ćemo morati učiniti na kartici Napredno je da deaktiviramo odjeljak na telefonu i tabletu u potkategoriji Vidljivost.
Dodajte red u dvije kolone
Nastavite dodavanjem reda od dvije kolone i idite na karticu stil.
- Koristi prilagođenu širinu oluka: DA
- Maksimalna širina: 1291px
Unesite parametre svake od kolona.
Izmijenite unutrašnje margine (gornja, lijeva i desna) na sljedeći način:
- Interna margina (gore, lijevo, desno): 30px
Završite tako što ćete otići na karticu Napredno. U glavni element dodajte sljedeće linije CSS koda:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Dodajte prvi tekstualni modul
Nakon što izvršite sve promjene u sekciji i redu, vrijeme je da dodate različite module koje želite prikazati.
Prva stvar koju ćemo dodati je naslov koji se pojavljuje. Počnite dodavanjem novog tekstualnog modula u prvu kolonu reda, upišite tekst u karticu sadržaj i prebacite se na karticu stil.
Na kartici Stil koristili smo sljedeće postavke za podkategoriju Tekst:
- Font zaglavlja: Jastog
- Zaglavlje mekog svjetla: podebljani tekst
- Poravnanje teksta: podebljano
- Boja teksta zaglavlja: #002282
- Veličina teksta zaglavlja: 37px
- Visina reda zaglavlja: 1,7 em
Dodajte drugi tekstualni modul
Nastavite dodavanjem novog tekstualnog modula i otkucajte tekst koji želite da se pojavi na kartici Sadržaj. Prebacite se na karticu Stil i primijenite sljedeće postavke na podkategoriju Tekst:
- Poravnanje teksta: Centar
- Font teksta: Arial
- Tekst Veličina teksta: 13px
- Boja teksta Tekst: #002282
- Visina linije teksta: 1,7 em
Dodajte modul 'Pratite nas na društvenim mrežama'
Zatim ćemo u prvu kolonu dodati i modul 'Pratite nas na društvenim mrežama'. U ovom slučaju, odabrali smo tri ikone društvenih medija; Facebook, Twitter i Instagram.
Posljednja stvar koju ćemo morati učiniti je dodati padding (lijevo) ovom modulu na kartici Napredno. Dodajte sljedeću liniju CSS koda glavnom elementu:
padding-left: 40%;
Dodajte modul obrasca za kontakt
Zatim možemo preći na drugu kolonu u redu. U ovoj koloni, prva stvar koju ćemo postaviti je modul Kontakt obrazac.
Za ovaj primjer, odabrali smo samo dva polja; ime i email.
Nakon što dodate modul Obrazac za kontakt, idite na karticu Stil modula Kontakt obrazac i napravite sljedeće promjene u potkategoriji Polja:
- Polja boje teksta: #002282
- Polja veličine teksta: #002282
- Visina linije polja: 1,7 em
Na istoj kartici izvršite sljedeće promjene u potkategoriji Dugme:
- Koristite prilagođene stilove za dugme: Da
- Dugme za veličinu teksta: 20
- Boja teksta dugmeta: #FFFFFF
- Dugme u pozadini: #0086c4
Vidi takođe: Kako kreirati klizni i pritisnuti meni u DIVI
- Širina ivice dugmeta: 2
- Dugme za radijus granice: 3
Prebacite se na karticu Napredno i dodajte marginu od 5%.
Dodajte modul Sažetak
Još jedna stvar koju ćemo morati dodati drugoj koloni je modul Summary. Jedino za šta nam treba ovaj modul je ikona za izlaz u gornjem desnom uglu iskačućeg prozora. Odaberite sljedeću ikonu sa liste ikona i ostavite sve ostalo prazno.
Zatim idite na karticu Napredno i upišite “close” kao CSS klasu.
Na ovoj istoj kartici dodajte sljedeće linije koda glavnom elementu prilagođene CSS potkategorije:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Nanesite gradijent ispune na liniju
Na kraju ćemo dodati lijepu gradijentnu pozadinu na liniju. Otvorite postavke i primijenite sljedeće promjene na opciju gradijenta pozadine:
- Prva boja gradijenta: #FFFFFF
- Boja drugog gradijenta: #0c71c3
- Tip gradijenta: Linearni
- Smjer gradijenta: 124 stepeni
- Početna pozicija: 50%
- Konačna pozicija: 50%
Kreirajte kontakt formu za tablet i telefon
Sada kada smo kreirali PC verziju, verzija za tablet i telefon će ići mnogo brže. Većina modula koje smo koristili za PC verziju su isti kao i za mobilnu verziju.
Duplirajte prethodni odjeljak
Umjesto da ga onemogućimo za telefon i tablet, kao što smo učinili za PC verziju, onemogućit ćemo PC verziju u podkategoriji Vidljivost u postavkama modula:
Izmijenite CSS kod modula Summary
Umjesto korištenja desktop koda, koristite sljedeće:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Nanesite gradijent ispune na liniju
Za mobilnu verziju koristimo različite postavke za gradijentnu pozadinu linije:
- Prva boja gradijenta: #FFFFFF
- Boja drugog gradijenta: #0c71c3
- Tip gradijenta: Linearni
- Smjer gradijenta: 180 stepeni
- Početna pozicija: 40%
- Konačna pozicija: 40%
Dodajte jQuery kod
Poslednja stvar koju ćemo morati da uradimo za ovaj tutorijal je da dodamo jQuery kod. Dodajte modul Code i umetnite sljedeći JQuery kod:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
rezultat
Ako slijedite poruku korak po korak, trebali biste biti u mogućnosti da dobijete sljedeći rezultat na računaru:
I sljedeći rezultat na tabletima i telefonima:
Preuzmite DIVI odmah!!!
zaključak
U ovom članku smo vam pokazali kako da kreirate obrazac za kontakt jednim klikom. Koristite ovu metodu da stupite u kontakt sa svojim posjetitelja je suptilan, ali efikasan.
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
