Trenger å kombinere innebygde felt og modulfelter i full bredde Kontakt skjema de Divi ?
Le Kontaktskjema er et viktig element å inkludere på nettstedet ditt hvis du ønsker å fange opp e-poster og konvertere de besøkende til kunder.
Modulen Kontakt skjema de Divi kan enkelt tilpasses for å lage skjemaer attraktive og fengslende kontaktkort for alle typer nettsider. Denne modulen kommer med to visningsalternativer som kan brukes på hvert skjemafelt: en ligne ou fulle bredde.
I denne opplæringen vil vi presentere fire unike layoutmuligheter for deg Kontaktskjema Divi ved hjelp av inline- og fullbreddefelt.
La oss begynne!
undersøkelsen
Her er en forhåndsvisning av hva vi skal designe.
Første layout
Andre layout
Tredje layout
Fjerde layout
Hva du trenger for å komme i gang
Før vi begynner, installer og aktiver Divi-temaet og sørg for at du har den nyeste versjonen av Divi på nettstedet ditt.
Nå er du klar til å begynne!
4 eksempeloppsett for Divis kontaktskjemamodul ved bruk av inline- og fullbreddefelt
Velg det forhåndsdefinerte oppsettet
Hver av de 4 malene er modifisert fra kontaktsiden for skoreparasjoner Skoreparasjonsoppsettpakke, som du finner i Divi-biblioteket.
Legg til en ny side på nettstedet ditt og gi den en tittel, og velg deretter alternativet Bruk Divi Builder.
Vi vil bruke en forhåndsdefinert layout fra Divi-biblioteket for dette eksemplet, så velg Bla gjennom layouter.
Finn og velg oppsettet for skoreparasjonskontaktside.
Velg Bruk denne layouten for å legge til oppsettet på siden din.
Vi er nå klare til å designe våre eksempler.
Første layout
Først flytter du linjen som inneholder modulen Kontakt skjema til seksjonen ovenfor, rett under linjen med Blurb-moduler. Deretter kan du slette den gjenværende tomme delen.
Åpne linjeinnstillinger og legg til venstre og høyre polstring,
- Polstring (venstre og høyre): 15 %
Velg responsive alternativer og sett polstring for mobil.
- Polstring (venstre og høyre): 5 %
Endret kontaktskjemalayout med inline og full-bredde felt
For denne layouten vil vi lage to separate felt for fornavn og etternavn.
Åpne kontaktskjemamodulinnstillingene og endre ID- og tittelfeltet for Etternavn-feltet til Fornavn.
Legg til et nytt felt under Fornavn-feltet. Sett ID og Tittel-feltet til Navn.
I navnefeltet åpner du layoutinnstillingene og setter Make Fullwidth til Nei.
- Gjør full bredde: NEI
Deretter, under innstillingene til Kontaktskjema, endre rekkefølgen på emnet og telefonen slik at telefonen er oppført før emnet.
Åpne innstillingene for emnefeltlayout og sett feltet til full bredde.
- Gjør full bredde: JA
Tilpasning av kontaktskjemadesign
La oss nå endre noen innstillinger for å fullføre designet. Naviger til Design-fanen i kontaktskjemamodulinnstillingene.
Først endrer du bakgrunnsfargen på knappen.
- Knappebakgrunn: #DBC2B3
Legg til en toppmarg på knappen.
- Knappemarg (øverst): 10px
Til slutt, gå til kantinnstillinger og legg til avrundede hjørner i felt.
- Innganger avrundede hjørner: 30px
Se også: Divi: Slik legger du til en responsiv logo i modulen "Fullwidth Menu".
Sluttresultat av eksempel 1
Her er det endelige resultatet på desktop og mobil.
Andre eksempel
For vårt andre eksempel flytter vi Blurb-modulene til venstre side av siden og plasserer kontaktskjemaet på høyre side av siden. Flytt Blurb-moduler til en kolonne.
Endre radoppsettet.
Åpne linjedesigninnstillinger og slå av Bruk egendefinert takrennebredde.
- Bruk egendefinert takrennebredde: NEI
Legg til kode i hovedelementets egendefinerte CSS for å justere Blurb- og Kontaktskjema-modulene vertikalt.
align-items:center;
Nå må vi fjerne den tynne kanten mellom kolonnene. Åpne radinnstillinger, og åpne deretter kolonneinnstillinger 1. Under Design-fanen går du til kantinnstillinger og fjerner kantlinjen.
- Høyre kantbredde: 0px
Deretter åpner du innstillingene for kolonne 2 og gjentar trinnene for å fjerne kantlinjen.
- Høyre kantbredde: 0px
Angi at "Kontakt oss"-teksten skal være sentrert.
Flytt kontaktskjemaet til høyre kolonne. Slett den gjenværende tomme delen.
Endret kontaktskjemalayout med inline og full-bredde felt
Denne layouten vil også ha to separate felt for fornavn og etternavn. Åpne kontaktskjemamodulinnstillingene og endre ID- og tittelfeltet for Etternavn-feltet til Fornavn.
Legg til et nytt felt under Fornavn-feltet. Sett ID og Tittel-feltet til Navn.
I navnefeltet åpner du layoutinnstillingene og setter Make Fullwidth til Nei.
- Gjør full bredde: NEI
Endre rekkefølgen på telefonen og emnefeltene slik at telefonen kommer før emnet.
Åpne feltinnstillingene for E-post, Telefon og Emne, og sett oppsettet til full bredde.
- Gjør full bredde: JA
Tilpasning av kontaktskjemadesign
Åpne radinnstillinger, og åpne deretter kolonneinnstillinger 2. Angi bakgrunnsfargen.
- Bakgrunn: #DBC2B3
I innstillinger for kolonne 2 går du til Design-fanen og legger til utfylling.
- Polstring (øverst, bunn, venstre og høyre: 50 px
Velg mobilikonet for å endre responsive innstillinger. Sett polstring for mobil.
- Polstring (øverst, bunn, venstre og høyre): 30 px
Legg deretter til en boksskygge i kolonnen.
Til slutt åpner du kontaktskjemamodulinnstillingene og endrer felttekstfargen.
- Felt tekstfarge: #000000
Sluttresultat av eksempel 2
Her er det endelige resultatet av den andre layouten.
Tredje eksempel
For det tredje oppsettet vil vi ha kontaktskjemaet til venstre og Blurb-modulene til høyre. La oss starte med å endre kolonnestrukturen til raden som inneholder Blurb-modulene.
Flytt adressemodulen til høyre kolonne.
Deretter flytter du tekstmodulen "Kontakt oss" til venstre kolonne, og sletter deretter den gjenværende tomme linjen.
Flytt kontaktskjemamodulen til venstre kolonne under tekstmodulen "Kontakt oss". Slett den gjenværende tomme delen.
Åpne linjeinnstillingene under kategorien Design og slå av Bruk egendefinert takrennebredde
- Bruk egendefinert takrennebredde: NEI
Legg til kode i hovedelementets egendefinerte CSS for å justere Blurb- og Kontaktskjema-modulene vertikalt.
align-items:center;
Åpne radinnstillinger, og åpne deretter kolonneinnstillinger 1. Under Design-fanen går du til kantinnstillinger og fjerner kantlinjen. Gjenta trinnene for å fjerne rammen fra kolonne 2.
- Høyre kantbredde: 0px
Endring av utformingen av kontaktskjemaet
Vi lar feltbreddene være som de er for det tredje designet, men åpne kontaktskjemainnstillingene og endre rekkefølgen på telefonnummeret og emnefeltet slik at telefonen kommer først.
Sluttresultat av eksempel 3
Her er det endelige resultatet av den tredje layouten.
Les også: Divi: Hvordan vise Fullwidth Header-modulen i fullskjerm
Fjerde eksempel
For den fjerde og siste layouten vil kontaktskjemamodulen være til venstre og Blurb-modulene til høyre. Igjen, vi starter med å endre kolonnestrukturen til raden som inneholder Blurb-modulene.
Flytt adressemodulen til høyre kolonne.
Deretter flytter du kontaktskjemamodulen til venstre kolonne. Slett den gjenværende tomme delen.
Åpne linjeinnstillingene i kategorien Design og deaktiver Bruk egendefinert takrennebredde.
- Bruk egendefinert takrennebredde: NEI
Legg til kode i hovedelementets egendefinerte CSS for å justere Blurb- og Kontaktskjema-modulene vertikalt.
align-items:center;
Åpne radinnstillinger, og åpne deretter kolonneinnstillinger 1. Under Design-fanen går du til kantinnstillinger og fjerner kantlinjen.
- Høyre kantbredde: 0px
Deretter åpner du innstillingene for kolonne 2 og gjentar trinnene for å fjerne kantlinjen.
- Høyre kantbredde: 0px
Åpne tekstmodulinnstillingene for "Kontakt oss"-teksten og sentrer teksten.
- Tekstjustering: Sentrert
Endret kontaktskjemalayout med inline og full-bredde felt
For dette designet vil alle feltene våre være i full bredde. Åpne kontaktskjemamodulinnstillingene, og åpne deretter innstillingene for hvert felt. På Design-fanen velger du Layout og definere Lag fullbredde på JA.
Når du har opprettet hvert felt i full bredde, skal skjemaet se slik ut.
Endre nå ID og Tittel-feltet for Etternavn-feltet til Fornavn.
Legg til et nytt felt under Fornavn-feltet. Sett ID og Tittel-feltet til Navn.
Endre rekkefølgen på telefonen og emnefeltene slik at telefonen kommer før emnet.
Tilpasse kontaktskjemamoduldesignet
I modulinnstillingene, i kategorien Design, setter du felttekstfargen til svart.
- Felt tekstfarge: #000000
Åpne seksjonsinnstillingene og legg til en bakgrunnsfarge.
- Bakgrunn: #DBC2B3
Til slutt legger du til en bakgrunnsmaske.
- Bakgrunnsmaske: Arch
- Masketransformasjon: horisontal
For å få bakgrunnsmasken til å fungere bedre på mobil, la oss bruke de responsive innstillingene.
- Mask Transform (telefon): horisontal og rotasjon
Endelig resultat
Her er det endelige resultatet av den fjerde layouten.
Endelige resultater
La oss ta en titt på alle eksemplene våre en gang til.
Første eksempel
Andre eksempel
Tredje eksempel
Fjerde eksempel
Last ned DIVI nå!!!
konklusjonen
Å ha et attraktivt kontaktskjema kan øke konverteringene dine og la besøkende få direkte kontakt med deg.
Som vi har demonstrert i denne artikkelen, kan du bruke feltalternativene inline og fullbredde for å lage forskjellige utseender og oppsett for skjemaet ditt, og Divis innebygde designalternativer lar deg lage unike design og attraktive for å hjelpe formen til å skille seg ut.
Forhåpentligvis vil denne teknikken legge til en annen nyttig designferdighet for fremtidige prosjekter.
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.
...
