Vil du lage en Kontaktskjema til nettstedet ditt takket være modulen Kontakt skjema fra Divi? Her er 3 tilpasningsideer...
den skjemaer Kontaktinformasjon er en viktig del av mange nettsteder. Hovedmålet deres er å være intuitive og hjelpe besøkende med å komme i kontakt enkelt.
Men det betyr ikke at alt skjemaer kontakter må ha et presist og forhåndsdefinert utseende. Du kan enkelt kombinere en intuitiv opplevelse med et vakkert design. Dette er nøyaktig hva vi skal gjøre i denne opplæringen.
Vi vil dele 3 unike design av modulen Kontakt skjema de Divi som du kan lage kun ved å bruke Divis innebygde alternativer.
La oss gå!
Oversikt over designene til Divi Contact Form-modulen
Desktop-versjoner
La oss starte med å ta en titt på skrivebordsversjonen av de forskjellige designene til modulen Kontakt skjema som vi skal designe i denne opplæringen.
Mobilversjoner
Og her er hvordan de ser ut på mindre skjermstørrelser:
Last ned DIVI nå!!!
Hvordan tilpasse Divi Kontaktskjema-modulen: 3 eksempler
Les også: Divi: Hvordan lage en gruppemedlemmer som en karusell
Oppretting av kontaktskjema #1
Legg til en ny seksjon
Gradient bakgrunn
La oss starte med det første eksemplet! Legg til en ny seksjon, gå til bakgrunnsinnstillinger og legg til en gradientbakgrunn.
- Gradient stopper
- 34 %: #4c00ff
- 34 %: #ffd400
- Type: Rund
- Gradientretning: Nederst til venstre
avstanden
Deretter går du til alternativet Avstand i kategorien Design og endrer innstillingene som følger.
- Polstring (øverst og bunn): 200px
Legg til en ny linje
Struktur av kolonnen
Legg til en ny rad ved å bruke følgende kolonnestruktur:
Kolonne 1: Bakgrunnsfarge
Uten å legge til noen moduler ennå, åpne radinnstillinger, deretter kolonne 1-innstillinger og legg til bakgrunnsfargen nedenfor
- Bakgrunn: rgba(255,255,255,0.55)
Kolonne 1: Bakgrunnsbilde
Legg også til et bakgrunnsbilde i den første kolonnen.
- Gjenta bakgrunnsbilde: Ingen gjentakelse
- Bakgrunnsbildeblanding: Skjerm
Kolonne 2: Bakgrunnsbilde
Og en hvit bakgrunnsfarge til den andre kolonnen.
- Bakgrunn: #ffffff
dimensjonering
Endre deretter størrelsesparametrene.
- Utligne kolonnehøyder: JA
avstanden
Fjern også alle standard tilpassede polstringer.
- Polstring (øverst og bunn): 0px
Kolonnekantradius
Legg til en kantradius til begge kolonnene i avansert-fanen.
border-radius: 10px;
Legg til en tekstmodul i kolonne 1
Legg til innhold
Det er på tide å begynne å legge til de forskjellige modulene! Legg til en tekstmodul i den første kolonnen med innhold etter eget valg.
Tekstinnstillinger
Deretter går du til kategorien Design i tekstmodulen og gjør noen endringer.
- Tekst:
- Font: Tilfredsstill
- Tekstfarge: #333333
- Størrelse: 100px
- Linjehøyde: 1 em
- Justering: Senter
avstanden
Legg også til tilpassede fyllingsverdier.
- Polstring (øverst): 600 px
- Polstring (bunn): 100px
Skyggekasse
For å legge til dybde til designet, bruk en subtil boksskygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -16px
- Skyggefarge: rgba(0,0,0,0.3)
Legg til en bildemodul i kolonne 2
Last opp et bilde
Fortsett ved å legge til en bildemodul i den andre kolonnen. Last opp et bilde av ditt valg.
dimensjonering
Endre størrelsesinnstillingene for denne modulen.
- Bredde: 25 % (stasjonær PC), 50 % (nettbrett), 60 % (telefon)
- Moduljustering: Senter
avstanden
Lag en overlapping ved å bruke en negativ toppmargin.
- Margin (øverst): -60 %
grensen
Endre kantene på bildet som følger:
- Avrundede hjørner: 100px (alle hjørner)
Legg til tekst #1-modul i kolonne 2
Legg til innhold
Rett under bildemodulen legger du til en tekstmodul med innhold.
Tekstinnstillinger
Rediger tekstinnstillingene for denne modulen.
- Tekst:
- Font: Tilfredsstill
- Tekstfarge: #333333
- Tekststørrelse: 44px
- Orientering: Sentrum
Legg til tekst #2-modul i kolonne 2
Legg til innhold
Legg deretter til en annen tekstmodul.
Tekstinnstillinger
Endre også tekstinnstillingene for denne modulen.
- Tekst:
- Font: Arial
- Tekstfarge: #ffd400
- Tekstfarge: 18px
- Bokstavavstand: 2px
- Orientering: Sentrum
avstanden
Deretter legger du til en bunnmargin.
- Marg (bunn): 100 piksler
Legg til kontaktskjemamodulen i kolonne 2
Aktiver alternativet "Gjør full bredde" i feltet Navn og e-post
Den siste modulen som trengs er kontaktskjemamodulen. Før du gjør noe annet, åpne navn og e-postfelt og endre oppsettet.
- Gjør full bredde: ja
Legg til et emnefelt
For å lage dette designet la vi til et annet felt for emnet.
spam beskyttelse
Deaktiver deretter captcha-alternativet.
- Bruk Basic Captcha: NEI
Skjemafelttekstinnstillinger
Gjør noen endringer i skjemafelttekstinnstillingene i denne kontaktskjemamodulen
- Enger :
- Bakgrunnsfarge: rgba(255,255,255,0)
- Font: Arial
- Skriftvekt: Lett
- Tekststørrelse: 16px
- Bokstavavstand: 2px
Knappinnstillinger
Vi endrer også utseendet på knappene.
- Bruk egendefinert størrelse for knapp: JA
- Knapp:
- Tekstfarge: #ffd400
- Kantbredde: 0 piksler
- Bokstavavstand: 2px
- Font: Arial
- Fontstil: U
- understrek Farge: #4c00ff
avstanden
Legg deretter til noen egendefinerte utfyllingsverdier.
- Polstring (bunn): 100px
- Polstring (venstre og høyre): 50px
grensen
Og legg til en subtil bunnkant til hvert av feltene.
- Innganger Nedre kantbredde: 2px
- Innganger Nedre kantfarge: #efefef
Avstand mellom enkeltfelt
Til slutt legger du til en bunnmarg i hvert av de individuelle feltene bortsett fra meldingsfeltet.
- Marg (bunn): 20 piksler
Oppretting av kontaktskjema #2
Legg til en ny seksjon
Gradient bakgrunn
La oss gå videre til neste eksempel! Legg til en ny seksjon med en gradientbakgrunn.
- Gradientstopp:
- 50 %: #562fe
- 50 %: #ffffff
- Gradienttype: Lineær
avstanden
Legg til egendefinerte utfyllingsverdier til avstandsinnstillingene i denne delen.
- Polstring (øverst og bunn): 200px
Legg til en ny linje
Struktur av kolonnen
Legg til en ny rad ved å bruke følgende kolonnestruktur:
Bakgrunnsfarge
Uten å legge til noen moduler ennå, åpne radinnstillingene og legg til en bakgrunnsfarge til raden.
- Bakgrunnsfarge: #ffffff
2 kolonne gradient bakgrunn
Legg til en gradientbakgrunn i den andre kolonnen i raden.
- Gradientstopp:
- 0 %: #9932ff
- 100 %: #562fe
- Type: Lineær
- Styring: 160 grader
dimensjonering
Endre også parametrene for linjestørrelse.
- Bruk egendefinert takrennebredde: JA
- Rennebredde: 1
- Utligne kolonnehøyder: JA
avstanden
Deretter legger du til egendefinerte avstandsverdier.
- Linje:
- Polstring (øverst og bunn): 0px
- Kolonne 1:
- Polstring: 100px (øverst), 50px (bunn)
- Polstring (venstre og høyre): 50 px
- Kolonne 2:
- Polstring (øverst og bunn): 100px
- Polstring (venstre og høyre): 50 px
grensen
Legg til '20px' til hver av linjekantene.
Skyggekasse
Til slutt, legg til en subtil boksskygge til linjen.
- Box Shadow Blur Styrke: 45px
- Box Shadow Spread Styrke: -11px
- Sadow Farge: rgba(0,0,0,0.3)
Legg til en tekstmodul i kolonne 1
Legg til innhold
Det er på tide å begynne å legge til modulene! Start med en tekstmodul i den første kolonnen.
Tekstinnstillinger
Rediger tekstinnstillingene for denne modulen.
- Tekst:
- Skriftvekt: Ultra fet
- Skriftstil: TT
- Farge: #562fef
- Størrelse: 100px (skrivebord), 80px (nettbrett), 60px (telefon)
- Bokstavavstand: -10px
- Linjehøyde: 1 em
avstanden
Legg også til en bunnmarg.
- Marg (bunn): 50 px
Legg til kontaktskjemamodulen i kolonne 1
Elements
Den andre modulen vi trenger i den første kolonnen er en kontaktskjemamodul Når du har lagt til modulen, slår du av alternativet 'Bruk grunnleggende captcha'.
- Bruk Basic Captcha: NEI
Skjemafelttekstinnstillinger
Endre deretter bakgrunnsfargen til skjemafeltene.
- Felt Bakgrunnsfarge: #ffffff
Knappinnstillinger
Lek også med knappeinnstillingene for å lage en ikonknapp i stedet for en tekstknapp.
- Bruk egendefinerte stiler for knapp: JA
- Knapp:
- Tekststørrelse: 73px
- Tekstfarge: rgba(0,0,0,0) (standard),
- Bakgrunnsfarge: rgba(255,255,255,0) (Hover)
- Kantbredde: 0px
- Ikonfarge: #9932ff
- Vis kun ikon ved peker for knapp: NEI
Skyggekasse
Til slutt legger du til en subtil boksskygge til hvert av feltene.
- Box Shadow Blur Styrke: 36px
- Box Shadow Spread Styrke: -14px
- Skyggefarge: rgba(0,0,0,0.3)
Legg til en tekstmodul i kolonne 2
Legg til innhold
Den første modulen vi trenger i den andre kolonnen er en annen tekstmodul.
Tekstinnstillinger
Når du har lagt til innholdet, rediger tekstinnstillingene for denne modulen.
- Tekst:
- Skriftvekt: Ultra fet
- Skriftstil: TT
- Farge: #ffffff
- Størrelse: 23px
- Bokstavavstand: -1px
Legg til Blurb-modul #1 til kolonne 2
Legg til innhold
Den andre modulen vi trenger er en Blurb-modul. Gå videre og skriv inn noen kontaktinformasjon.
Velg ikonet
Velg deretter et tilsvarende ikon.
Ikoninnstillinger
Endre innstillingene for dette ikonet.
- Ikonfarge: #ffffff
- Bilde/ikonplassering: Høyre
Tekstinnstillinger for tittel
Fortsett med å gjøre noen endringer i titteltekstinnstillingene.
- Tittel Tekststørrelse: 15px
- Tittel Bokstavavstand: -0,5 piksler
avstanden
Og legg til en toppmargin.
- Margin (øverst): 120px
Clone Blurb-modul to ganger
Når du er ferdig med å redigere den første Blurb-modulen, kan du gå videre og klone modulen to ganger.
Endre innholdet og ikonet for de to duplikatene
Rediger innholdet og ikonene til de to duplikatene for å dele forskjellige typer kontaktinformasjon med besøkende.
Endre avstanden mellom de to duplikatene
Den øverste margen på de to duplikatene bør også endres.
- Margin (øverst): 30px
Oppretting av kontaktskjema #3
Legg til en ny seksjon
Bakgrunnsfarge
La oss gå videre til det tredje eksemplet! Legg til en ny seksjon med følgende bakgrunnsfarge:
- Bakgrunnsfarge: #3491CE
avstanden
Fortsett ved å legge til egendefinerte utfyllingsverdier i avstandsinnstillingene.
- Polstring (øverst og bunn): 200px
Legg til linje #1
Struktur av kolonnen
Deretter legger du til en ny rad ved å bruke følgende kolonnestruktur:
Legg til en tekstmodul
Legg til innhold
Det er på tide å begynne å legge til moduler! Den første modulen vi må legge til i den første kolonnen er en tekstmodul. Skriv inn et valgfritt innhold.
Tekstinnstillinger
Deretter endrer du tekstinnstillingene.
- Tekst:
- Skriftvekt: Ultra fet
- Tekstfarge: rgba(255,255,255,0.24)
- Tekststørrelse: 100px (skrivebord), 70px (nettbrett), 36px (telefon)
- Linjehøyde: 1 em
- Orientering: Sentrum
avstanden
Legg også til en negativ bunnmargin.
- Marg (bunn): -100 piksler
Legg til linje 2
Struktur av kolonnen
Den andre raden vi trenger for å fullføre dette eksemplet inneholder følgende kolonnestruktur:
Gradient bakgrunn
Uten å legge til noen moduler ennå, åpne linjeinnstillingene og legg til en gradientbakgrunn.
- Gradientstopp:
- 50 %: #11CE84
- 50 %: #10C77F
- Gradienttype: Lineær
- Styring: 160 grader
dimensjonering
Endre også dimensjoneringsparametrene.
- Bruk egendefinert takrennebredde: JA
- Rennebredde: 1
- Utligne kolonnehøyder: JA
avstanden
Legg deretter til noen utfyllingsverdier.
- Polstring: 150px (øverst), 100px (bunn)
- Polstring: 50 px (venstre og høyre)
grensen
Gå deretter til kantinnstillinger og legg til '20px' i hvert av hjørnene. Bruk også en bunnkant.
- Avrundede hjørner: 20px
- Nederste kantbredde: 10px
- Nederste kantfarge: #1ba35a
Skyggekasse
Fullfør linjeinnstillingene ved å legge til en subtil boksskygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -24px
- Skyggefarge: rgba(0,0,0,0.3)
Legg til kontaktskjemamodulen i kolonne 1
Aktiver alternativet "Gjør full bredde" i feltet Navn og e-post
Den første modulen vi trenger i den første kolonnen i raden er en kontaktskjemamodul. Åpne navn og e-postfeltet og endre layoutinnstillingene.
- Gjør full bredde: JA
Elements
Deaktiver deretter captchaen.
- Bruk Basic Captcha: NEI
Knappinnstillinger
Og endre knappeinnstillingene.
- Bruk egendefinerte stiler for knapp: JA
- Knapptekstfarge: #ffffff
- Gradientstopp:
- 50 %: #3AA0E3
- 50 %: #3491CE
- Gradienttype: Lineær
- Gradientretning: 155 grader -
- Knappekantbredde: 0 piksler
- Kantradius for knapp: 10 piksler
- Box Shadow Spread Styrke: -2px
- Skyggefarge: #0a60af
Se også: Divi: Hvordan tilpasse kurven og søkeikonene til modulen "Fullbreddsmeny".
grensen
Vi legger også til '5px' med avrundede hjørner til hvert av feltene.
Legg til en tekstmodul i kolonne 2
Legg til innhold
I den andre kolonnen er den første modulen vi trenger en tekstmodul. Gå videre og skriv inn noe innhold.
Bakgrunnsfarge
Endre deretter bakgrunnsfargen.
- Bakgrunn: rgba(255,255,255,0.13)
Tekstinnstillinger
Rediger også med tekstinnstillinger.
- Tekst:
- Skriftvekt: Lett
- Tekstfarge: #ffffff
- Tekststørrelse: 15px
- Bokstavavstand: -0,5 px
avstanden
Og legg til tilpasset polstring for å gi modulen plass til å puste.
- Polstring (øverst og bunn): 12px
- Polstring (venstre og høyre): 10 px
grensen
Vi legger også til '20px' i øvre venstre og nedre venstre hjørne. På toppen av det legger vi til en venstre kantlinje.
- Avrundede hjørner: 20px (øverst til venstre og nederst til venstre)
- Venstre kantbredde: 34px
- Venstre kantfarge: #edf000
synlighet
For å få dette designet til å matche forskjellige skjermstørrelser, vil vi deaktivere tekstmodulen på telefonen og nettbrettet.
Klone tekstmodul to ganger
Når du er ferdig med å redigere den første tekstmodulen, fortsett og klone modulen to ganger.
Endre innholdet i de to duplikatene
Endre innholdet i de to duplikatene til noe annet.
Endre avstanden mellom de to duplikatene
Og legg til en toppmargin for å skape plass mellom hver av modulene.
- Margin (øverst): 20px
Endre grensen til de to duplikatene
Til slutt endrer du fargen på venstre kant på hver av duplikatene individuelt.
- Farge 1: #00faff
- Farge 2: #00f76f
Se også vår artikkel om Hvordan lage en responsiv trekkspillglidebryter
undersøkelsen
Desktop-versjon
Nå som vi har gått gjennom alle trinnene, la oss ta en siste titt på Divi Contact Form-moduldesign på skrivebordet.
Mobil
Og her er hva du kan forvente av Divis kontaktskjema-moduldesign på mindre skjermstørrelser:
Last ned DIVI nå!!!
konklusjonen
I dette innlegget har vi delt 3 fantastiske Divi Contact Form-moduldesign som du enkelt kan bruke og endre for ethvert nettsted du lager.
den skjemaer Kontakter er en viktig del av mange nettsteder, så det er viktig å sørge for at designet ditt overbeviser de besøkende om å ta kontakt.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
