Divi: Slik legger du til et kontaktskjema i en global overskrift

Må legge til en Kontaktskjema til en global header?

Når du oppretter en egendefinert overskrift for din nettstedet Web Ved å bruke Divi Theme Builder ser du etter den perfekte måten å legge til en CTA (Call to Action). En måte å gjøre dette på er å legge til en Kontaktskjema rulling. 

Dette vil hjelpe deg å holde det generelle utseendet til toppteksten din ren, samtidig som det gir deg muligheten til å komme inn kontakt uten å måtte bla. 

I denne opplæringen vil vi vise deg hvordan du lager en Kontaktskjema rullbar ved hjelp av Divi og JQuery & CSS-kode.

La oss starte!

undersøkelsen

Før vi dykker inn i denne opplæringen, la oss ta en titt på en forhåndsvisning av resultatet vi skal få.

Lag en global overskrift

Gå til Theme Builder

Gå til Theme Builder fra Divi-menyen i WordPress-dashbordet og klikk på "Legg til en global overskrift".

Velg "Opprett global overskrift".

Lag en overskriftsstil

Seksjonsinnstillinger

Bakgrunnsfarge

Når du er i maleditoren, vil du legge merke til en seksjon. Åpne denne delen og endre bakgrunnsfargen.

• Bakgrunn: #FFFFFF

avstanden

Fjern deretter standard indre marger for topp og bunn fra seksjonen.

• Inner Margin Vertex: 0px
• Nedre intern margin: 0px

Skyggekasse

Påfør også en subtil boksskygge.

• Box Shadow Blue Styrke: 50px
• Tekstfarge: rgba(0,0,0,0.15)

Legg til en ny linje

Struktur av kolonnen

Legg til en ny rad i seksjonen ved å bruke følgende kolonnestruktur:

dimensjonering

Uten å legge til noen moduler, åpne radinnstillingene og endre størrelsesinnstillingene som følger:

• Bruk egendefinert takrennebredde: Ja
• Kolonneavstand: 1
• Harmoniser kolonnehøyder: Ja
• Maksimal bredde: 95%
• Maksimal bredde: 100%

avstanden

Legg deretter til tilpasset øvre og nedre polstring.

• Topp indre margin: 1vw
• Innvendig bunnmargin: 1vw

hovedelement

Juster alt kolonneinnhold ved å legge til en enkelt linje med CSS-kode til hovedradelementet.

align-items: center;

Z-abonnement av kolonne 2

Vi sørger også for at den andre kolonnen har en høyere z-indeksverdi for responsiv design.

• Z-indeks: 12

Legg til bildemodul i kolonne 1

Last ned logo

Det er på tide å begynne å legge til moduler! Starter med en bildemodul i kolonne 1. Last opp en logo.

justering

Endre deretter justeringen av modulen.

• Bildejustering: Sentrert

dimensjonering

Endre også bredden.

• Maksimal bredde: 3vw (stasjonær), 5vw (nettbrett), 7vw (telefon)

Legg til menymodul i kolonne 2

Velg Meny

I den andre kolonnen vil vi legge til en menymodul.

Disposisjon

Bytt til fanen Modulstil og endre layoutstilen.

• Stiler: Sentrert

Innstillinger for menytekst

Endre deretter tekstinnstillingene i modulmenyen.

• Fontmeny: Åpne Ingen
• Dim lys meny: halvfet
• Menytekstfarge: #000000
• Menytekststørrelse: 0,8 vw (stasjonær), 2 vw (nettbrett), 3 vw (telefon)
• Menybokstavavstand: 1px

Tekstinnstillinger i rullegardinmenyen

Deretter endrer du linjefargen fra rullegardinmenyen.

• Farge på rullegardinmenyen: #007dff

ikoner

Endre hamburgermenyikonets farge.

• Hamburgermenyikon farge: #007dff

Legg til tekstmodul i kolonne 3

Legg til melding

Videre til den tredje modulen! Legg til en tekstmodul med en melding du ønsker.

Bakgrunnsfarge

Legg til en bakgrunnsfarge.

• Bakgrunnsfarge: #007dff

Tekstinnstillinger

Bytt til moduldesignfanen og endre tekstinnstillingene deretter:

• Tekstfont: Åpne Sans
• Myk lys tekst: fet
• Tekstfarge Tekst: #ffffff
• Tekst Tekststørrelse: 0,8 vw (stasjonær), 2 vw (nettbrett), 3 vw (telefon)
• Tekstjustering: Sentrert

dimensjonering

Endre deretter parametrene for modulstørrelse.

• Maksimal bredde: 33%
• Moduljustering: Senter

avstanden

Deretter legger du til tilpassede topp- og bunnpolstringer.

• Topp intern margin: 0,8 vw (stasjonær), 2 vw (nettbrett og telefon)
• Lav intern margin: 0,8 vw (stasjonær), 2 vw (nettbrett og telefon)

grensen

Og fullfør modulparametrene ved å legge til en grensradius.

• Avrundet rektangel: 100px

Legg til en annen tekstmodul i kolonne 3

Legg til et symbol i innholdsområdet

La oss gå videre til neste modul, som er en annen tekstmodul. Legg til følgende pilsymbol i innholdsområdet: '▼'.

Tekstinnstillinger

Bytt til moduldesignfanen og endre tekstinnstillingene deretter:

• Tekstfont: Åpne Sans
• Tekstfarge: #007fff
• Tekst Tekststørrelse: 3vw
• Tekstlinjehøyde: 0em
• Tekstjustering: Sentrert

Z-indeks

La oss også øke modulens z-indeks.

• Z-indeks: 11

Legg til kontaktskjemamodulen i kolonne 3

Legg til felt i full bredde etter eget valg

Den neste og siste modulen vi trenger i tredje kolonne er en kontaktskjemamodul. Legg til felter i full bredde du trenger.

Legg til en tittel

Bruk også en tittel.

Bakgrunnsfarge

La oss deretter endre bakgrunnsfargen.

• Bakgrunnsfarge: #e7f2ff

Feltinnstillinger

La oss gå til modulens Style-fane og endre feltinnstillingene.

• Bakgrunnsfargefelt: #ffffff
• Felttekstfarge: #dddddd
• Fokus tekstfarge: #007dff
• Vertex-polstringsfelt: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
• Bunnpolstringsfelt: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
• Skriftfelt: Åpne Ingen

• Felter Tekststørrelse: 0,7 vw (stasjonær), 1,8 vw (nettbrett), 3 vw (telefon)

Tekstinnstillinger for tittel

Endre titteltekstinnstillingene.

• Sett inn overskrift tre: H3
• Mykt lys Tittel: Fet tekst
• Tekstjustering: sentrert
• Titteltekstfarge: #007dff
• Tittel Tekststørrelse: 1 vw (stasjonær), 2,5 vw (nettbrett), 3,5 vw (telefon)
• Tittellinjehøyde: 1,6 em

Captcha-tekstinnstillinger

Med captcha-tekstinnstillinger.

• Font Captcha: Open Sans
• Captcha tekstfarge: #007dff

Knappinnstillinger

Fortsett ved å tilpasse knappen.

• Bruk egendefinerte stiler for Knapp: Ja
• Knappetekststørrelse: 0,8 vw (stasjonær), 2 vw (nettbrett), 3 vw (telefon)
• Tekstfarge på knapp: #ffffff
• Bakgrunnsknapp: #007dff
• Kantbreddeknapp: 0 piksler
• Knappkantradius: 100 px

• Fontknapp: Åpne Ingen
• Myk lysknapp: fet tekst

• Knappemargin: 1vw
• Topppolstringsknapp: 1vw (stasjonær), 2vw (nettbrett og telefon)
• Nedre polstringsknapp: 1vw (stasjonær), 2vw (nettbrett og telefon)
• Venstre padknapp: 2vw (stasjonær), 7vw (nettbrett og telefon)
• Høyre puteknapp: 2vw (stasjonær), 7vw (nettbrett og telefon)

avstanden

Bruk egendefinerte utfyllingsverdier på forskjellige skjermstørrelser.

• Maksimal innvendig takhøyde: 4vw (stasjonær), 6vw (nettbrett og telefon)
• Intern margin Bunn: 4vw (stasjonær), 6vw (nettbrett og telefon)
• Venstre indre marg: 2vw (stasjonær), 6vw (nettbrett og telefon)
• Høyre intern marg: 2vw (stasjonær), 6vw (nettbrett og telefon)

grensen

Endre deretter kantinnstillingene.

• Inndata avrundet rektangel: 10px

Hovedelement, kontakttittel og Captcha CSS

Fullfør modulinnstillingene ved å legge til noen små CSS-endringer i avansert-fanen.

Hovedelement:

01	border-radius: 20px;

Tittel på kontakt :

01	margin-bottom: 1vw;

Captcha:

01	margin-top: 1.5vw;

Tilpass elementer for å lage et kontaktskjema med ett klikk

Legg til høyden på kolonne 3

Når du har alle modulene på plass, er det på tide å skape effekten. Det første trinnet mot å få ønsket resultat er å åpne de 3 kolonneinnstillingene og legge til en tilpasset responsiv høyde i avansert-fanen.

Skrivebord :

01	height: 3vw;

tablett:

01	height: 5vw;

Anrop:

01	height: 6vw;

Legg til en CSS-klasse på knappen og pilen

Deretter legger vi 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 vil også trenge en tilpasset CSS-klasse for kontaktskjemamodulen.

• CSS-klasse: kontaktskjema-modul

Skjul kontaktskjemamodul

Fortsett ved å legge til en ekstra linje med CSS-kode til hovedelementet i kontaktskjemamodulen. Dette vil tillate oss å skjule modulen før du klikker.

01	display: none;

Legg til kodemodul i kolonne 3 med JQuery og CSS-kode

Og for å lage klikkfunksjonen trenger vi 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 skripttagger og CSS-kode mellom stiltagger.

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 siste titt på resultatet.

konklusjonen

I denne artikkelen viste vi deg hvordan du legger til et rullegardinkontaktskjema i din egendefinerte overskrift.

Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.