Želite li stvoriti a kontakt obrazac u Diviju koji se pojavljuje nakon klika na gumb?
U ovom Divi vodiču pokazat ćemo vam kako izraditi kontakt obrazac koji se pojavljuje nakon klika na gumb koristeći samo Divi, jQuery kod i CSS kod.
Pročitajte i naš vodič na: Divi: Kako stvoriti ljepljivo podnožje s "Reveal" efektom
To je sjajan način da zadržite posjetitelji vaš web stranica usredotočeni na radnju kojoj su se posvetili pritiskom na gumb. Ne vodi ih na drugu stranicu.
pregled
U nastavku možete na brzinu pogledati što ćemo stvarati, a zatim skočite na vodič!
Pregled na računalu
Pregled na telefonu i tabletu
Napravite novu stranicu s unaprijed definiranim izgledom
Započnimo korištenjem unaprijed definiranog izgleda iz biblioteke Divi. Za ovaj primjer koristit ćemo kontakt stranicu od Paket rasporeda kozmetičkih proizvoda .
Dodajte novu stranicu svojoj web stranica i dodijelite mu naslov, a zatim odaberite opciju "Koristi Divi Builder".
Za ovaj ćemo primjer koristiti unaprijed izrađeni izgled iz biblioteke Divi, pa odaberite 'Odaberite izgled'.
Pronađite i odaberite početnu stranicu izgleda 'Tvrtka za dizajn interijera'.
Odaberi 'Odaberite izgled' da biste dodali izgled svojoj stranici.
Sada smo spremni nastaviti naš tutorial.
Stvorite odjeljak s modulom Button
Prvo što ćemo morati učiniti je dodati novi odjeljak gdje ćemo postaviti gumb koji će omogućiti kontakt obrazac prikazati.
Vidi također: Divi: Kako stvoriti prilagođeno podnožje
Samo dodajte standardni odjeljak
Zatim odaberite redak s jednim stupcem.
Nakon što to učinite, dodajte mu modul Button.
Možete prilagoditi gumb kako god želite, ali morate biti sigurni da URL gumba počinje s '#' nakon čega slijedi nešto drugo. Ne možete samo ostaviti prazno ili samo koristiti znak '#'. Dodavanjem '#' i teksta, stranica se neće pomaknuti nakon što kliknete gumb. Ako ostavite prazno, stranica će se osvježiti na klik. A ako koristite samo '#', bit ćete poslani na vrh stranice.
Sljedeća važna stvar koju ćemo morati učiniti je dodijeliti CSS klasu gumbu. Koristit ćemo ovu CSS klasu kasnije u ovom članku u jQuery kodu kako bismo osigurali da se obrazac za kontakt pojavi nakon klika. Klasa koju ćemo morati dodijeliti gumbu je jednostavno "gumb".
- CSS klasa: gumb
Napravite obrazac za kontakt za PC verziju
Sljedeća stvar koju trebamo napraviti je kreirati obrazac za kontakt na radnoj površini koji će se pojaviti kada netko klikne gumb koji smo izradili u prethodnom dijelu ovog članka. Kasnije u ovom članku također ćemo vam pokazati kako izraditi 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 retke CSS koda u polje Prije podkategorije Prilagođeni CSS:
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 prilagoditi boju pozadine u CSS kodu kako biste stvorili željeni sloj pozadine. U ovom slučaju koristimo crnu boju s malo prozirnosti. U toj istoj kartici također dodajte sljedeći redak CSS koda u glavni element:
display: none;
Zadnje što ćemo morati učiniti u kartici Napredno je deaktivirati odjeljak na telefonu i tabletu u potkategoriji Vidljivost.
Dodajte red u dva stupca
Nastavite dodavanjem retka s dva stupca i dođite do kartice Stil.
- Koristi prilagođenu širinu žlijeba: DA
- Maksimalna širina: 1291px
Unesite parametre svakog od stupaca.
Izmijenite unutarnje margine (gore, lijevo i desno) na sljedeći način:
- Unutarnja margina (gore, lijevo, desno): 30 px
Završite odlaskom na karticu Napredno. U glavni element dodajte sljedeće retke 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 odjeljku i retku, vrijeme je da dodate različite module koje želite prikazati.
Prvo što ćemo dodati je naslov koji se pojavljuje. Započnite dodavanjem novog tekstualnog modula u prvi stupac retka, napišite tekst u kartici Sadržaj i prebacite se na karticu Stil.
Na kartici Stil koristili smo sljedeće postavke za potkategoriju Tekst:
- Font zaglavlja: jastog
- Zaglavlje mekog svjetla: podebljani tekst
- Poravnanje teksta: Podebljano
- Boja teksta zaglavlja: #002282
- Veličina teksta zaglavlja: 37 px
- Visina reda zaglavlja: 1,7 em
Dodajte drugi tekstualni modul
Nastavite dodavanjem novog tekstualnog modula i upišite tekst koji želite da se pojavi na kartici Sadržaj. Prijeđite na karticu Stil i primijenite sljedeće postavke na potkategoriju Tekst:
- Poravnanje teksta: Središte
- Font teksta: Arial
- Tekst Veličina teksta: 13px
- Boja teksta Tekst: #002282
- Visina retka teksta: 1,7 em
Dodajte modul 'Pratite nas na društvenim mrežama'
Zatim ćemo također dodati modul 'Pratite nas na društvenim medijima' u prvi stupac. U ovom slučaju odabrali smo tri ikone društvenih medija; Facebook, Twitter i Instagram.
Posljednje što trebamo učiniti je dodati ispunu (lijevo) ovom modulu na kartici Napredno. Dodajte sljedeći redak CSS koda u glavni element:
padding-left: 40%;
Dodajte modul obrasca za kontakt
Zatim možemo prijeći na drugi stupac u redu. U ovom stupcu prvo što ćemo smjestiti je modul Contact Form.
Za ovaj primjer odabrali smo samo dva polja; ime i e-mail.
Nakon što dodate modul Obrazac za kontakt, idite na karticu Stil modula Obrazac za kontakt i izvršite sljedeće promjene u potkategoriji Polja:
- Polja boja teksta: #002282
- Polja veličine teksta: #002282
- Visina linije polja: 1,7 em
Na toj istoj kartici napravite sljedeće promjene u potkategoriji gumba:
- Koristite prilagođene stilove za gumb: Da
- Gumb za veličinu teksta: 20
- Boja teksta gumba: #FFFFFF
- Pozadinski gumb: #0086c4
Vidi također: Kako napraviti klizni i potisni izbornik u DIVI
- Širina obruba gumba: 2
- Gumb Radijus granice: 3
Prijeđite na karticu Napredno i dodajte marginu od 5%.
Dodajte modul Sažetak
Još jedna stvar koju ćemo morati dodati u drugi stupac je modul Sažetak. Jedino za što nam treba ovaj modul je ikona za izlaz u gornjem desnom kutu skočnog prozora. Odaberite sljedeću ikonu s popisa ikona i ostavite sve ostalo prazno.
Zatim idite na karticu Napredno i upišite "close" kao CSS klasu.
U toj istoj kartici, dodajte sljedeće retke koda glavnom elementu prilagođene CSS potkategorije:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Primijenite gradijentnu ispunu na liniju
Na kraju ćemo liniji dodati lijepu gradijentnu pozadinu. Otvorite postavke i primijenite sljedeće promjene na opciju gradijenta pozadine:
- Boja prvog gradijenta: #FFFFFF
- Boja drugog gradijenta: #0c71c3
- Vrsta gradijenta: linearni
- Smjer gradijenta: 124 stupnjeva
- Početna pozicija: 50%
- Konačna pozicija: 50%
Napravite obrazac za kontakt za tablet i telefon
Sada kada smo izradili verziju za računalo, verzija za tablet i telefon radit će mnogo brže. Većina modula koje smo koristili za PC verziju su isti kao i za mobilnu verziju.
Dupliciraj 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 potkategoriji Vidljivost u postavkama modula:
Izmijenite CSS kod modula Sažetak
Umjesto koda za radnu površinu, upotrijebite sljedeće:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Primijenite gradijentnu ispunu na liniju
Za mobilnu verziju koristimo različite postavke za gradijentnu pozadinu linije:
- Boja prvog gradijenta: #FFFFFF
- Boja drugog gradijenta: #0c71c3
- Vrsta gradijenta: linearni
- Smjer gradijenta: 180 stupnjeva
- Početna pozicija: 40%
- Konačna pozicija: 40%
Dodajte jQuery kod
Posljednje što ćemo morati učiniti za ovaj vodič je dodati jQuery kod. Dodajte modul koda 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 moći dobiti sljedeći rezultat na računalu:
I sljedeći rezultat na tabletima i telefonima:
Preuzmite DIVI odmah!!!
Zaključak
U ovom članku smo vam pokazali kako izraditi obrazac za kontakt jednim klikom. Koristite ovu metodu da stupite u kontakt sa svojim posjetitelji je suptilan, ali učinkovit.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
