Når du oppretter en egendefinert overskrift for din nettstedet Web, ved å bruke Divis temabygger, vil du finne deg selv på jakt etter den perfekte måten å legge til en AAL (call to action). En måte å gjøre dette på er å legge til en Kontaktskjema rulling. Dette vil hjelpe deg med å holde det generelle utseendet til headeren rent, samtidig som det gir deg muligheten til å gå inn kontakt med deg, uten å måtte rulle nedover. I denne opplæringen vil vi vise deg hvordan du lager en Kontaktskjema rullegardinmenyen ved å bruke Divi og JQuery & CSS-kode. Du vil også kunne laste ned JSON-filen gratis!
La oss gå.
undersøkelsen
Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.
1. Gå til Divi Theme Builder og begynn å lage en global header
Gå til Divi Theme Builder
Start med å gå til Divi Theme Builder i backend på ditt WordPress-nettsted.
Lag en global overskrift
Klikk på "Legg til global topptekst" og velg "Lag global topptekst" for å begynne å lage en tilpasset global topptekst.
2. Bygg topptekstdesignet
Seksjonsinnstillinger
Bakgrunnsfarge
Når du er inne i den overordnede toppmalen, vil du legge merke til en seksjon. Åpne denne delen og bruk en hvit bakgrunnsfarge.
- Bakgrunnsfarge: #FFFFFF
avstanden
Fjern deretter standard øvre og nedre polstring fra seksjonen.
- Øvre polstring: 0px
- Bunnpolstring: 0px
Skyggekasse
Påfør også en subtil boksskygge.
- Box Shadow Blur Styrke: 50px
- Skyggefarge: rgba (0,0,0,0,15)
Legg til en ny linje
Kolonne struktur
Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:
dimensjonering
Uten å legge til flere moduler, åpne linjeparametrene og endre dimensjoneringsparametrene som følger:
- Bruk en tilpasset rennebredde: Ja
- Rennesteinsbredde: 1
- Utjevne kolonnehøyder: Ja
- Bredde: 95%
- Maks bredde: 100%
avstanden
Legg deretter til tilpasset øvre og nedre polstring.
- Øvre polstring: 1vw
- Bunnpolstring: 1vw
Hovedelement
Og juster alt kolonneinnhold ved å legge til en enkelt linje med CSS-kode til hovedelementet på raden.
align-items: center;
Kolonne 2 Z-indeks
Vi sørger også for at den andre kolonnen har en høyere z-indeksverdi for reaktive formål.
- Z-indeks: 12
Legg til en bildemodul i kolonne 1
Last ned logo
Det er på tide å begynne å legge til moduler! Start med en bildemodul i kolonne 1. Last opp en logo.
justering
Endre deretter justeringen av modulen.
- Bildejustering: sentrum
dimensjonering
Endre også bredden.
- Bredde: 3vw (stasjonær), 5vw (nettbrett), 7vw (telefon)
Legg til en menymodul i kolonne 2
Velg menyen
I den andre kolonnen vil vi legge til en menymodul.
Disposisjon
Bytt til moduldesignfanen og endre layoutstil.
- Stil: Sentrert
Innstillinger for menytekst
Endre deretter tekstinnstillingene i modulmenyen.
- Menytype: Åpent uten
- Meny skriftvekt: halv fet skrift
- Menytekstfarge: # 000000
- Menytekststørrelse: 0.8vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Menybokstavavstand: 1px
Nedtrekksmeny tekstinnstillinger
Endre deretter fargen på linjen i rullegardinmenyen.
- Farge på linjen i rullegardinmenyen: # 007dff
ikoner
Med hamburgermenyikonfarge.
- Hamburger-menyikonfarge: # 007dff
Legg til 1-tekstmodulen i 3-kolonnen
Legg til en kopi
La oss gå videre til den tredje modulen! Legg til en tekstmodul med en kopi du ønsker.
Bakgrunnsfarge
Deretter legger du til en bakgrunnsfarge.
- Bakgrunnsfarge: # 007dff
Tekstinnstillinger
Bytt til moduldesignfanen og endre tekstinnstillingene deretter:
- Tekst font: Open Sans
- Skrifttypevekt på teksten: fet skrift
- Tekstfarge: #ffffff
- Tekststørrelse: 0.8vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Justering av teksten: senter
dimensjonering
Endre deretter parametrene for modulstørrelse.
- Bredde: 33%
- Justering av modulen: senter
avstanden
Legg deretter til tilpasset øvre og nedre polstring.
- Øvre polstring: 0.8vw (stasjonær), 2vw (nettbrett og telefon)
- Bunnpolstring: 0.8vw (skrivebord), 2vw (nettbrett og telefon)
grensen
Og fullfør modulparametrene ved å legge til en grensradius.
- Alle hjørner: 100px
Legg til 2-tekstmodulen i 3-kolonnen
Legg til et symbol i innholdsområdet
La oss gå videre til neste modul, som er en annen tekstmodul. Legg til følgende pil i innholdsområdet: "▼".
Tekstinnstillinger
Bytt til moduldesignfanen og endre tekstinnstillingene deretter:
- Tekst font: Open Sans
- Tekstfarge: # 007fff
- Tekststørrelse: 3vw
- Høyde på tekstlinjen: 0em
- Justering av teksten: senter
Z-indeks
Vi øker også z-indeksen til modulen.
- Z-indeks: 11
Legg til kontaktskjema-modulen i kolonne 3
Du kan nå legge til en Kontaktskjema bare nederst i tekstmodulen som inneholder pilen. Denne modulen er ganske enkel å bruke, så du må tilpasse hvilke felt du vil gjøre synlige.
3. Tilpass elementene for å opprette et kontaktskjema med ett klikk
Legg til høyden på kolonne 3
Når alle modene er på plass, er det på tide å skape effekten. Det første trinnet mot å oppnå ønsket resultat er å åpne innstillingene i kolonne 3 og legge til responsiv tilpasset høyde i den avanserte kategorien.
office:
height: 3vw;
tablett:
height: 5vw;
Telefon:
height: 6vw;
Legg til en CSS-klasse på knappen og pilen
Så vil vi legge til den samme CSS-klassen til de to første tekstmodulene i kolonne 3.
- CSS-klasse: vis-kontakt
Legg til en CSS-klasse i kontaktskjemaet
Vi trenger også en tilpasset CSS-klasse for kontaktskjema-modulen.
- CSS-klasse: kontakt-form-modul
Skjul kontaktskjema-modulen
Fortsett med å legge til en ekstra linje med CSS-kode til hovedelementet i kontaktskjema-modulen. Dette vil tillate oss å skjule modulen før vi klikker.
display: none;
Legg til en kodemodul i kolonne 3 med JQuery og CSS-kode
Og for å opprette klikkfunksjonen trenger vi litt JQuery-kode. Vi vil også bruke tilpasset CSS-kode. Legg til en ny kodemodul i kolonne 2 med koden. Sørg for å plassere JQuery-kode mellom skriptkoder og CSS-kode mellom stilkoder.
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;}
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
kontor
Hva å huske
I denne artikkelen har vi vist deg hvordan du legger til et rullegardinkontaktskjema i den tilpassede overskriften din. Det er en fin måte å utløse handling tidlig på.
