Behov for at kombinere inline-felter og modulfelter i fuld bredde Kontaktformular de Divi ?
Le Kontaktformular er et vigtigt element at have med på din hjemmeside, hvis du vil fange e-mails og konvertere dine besøgende til kunder.
Modulet Kontaktformular de Divi kan nemt tilpasses til at skabe formularer attraktive og fængslende kontaktkort til alle typer hjemmesider. Dette modul kommer med to visningsmuligheder, der kan anvendes på hvert formularfelt: online ou fuld bredde.
I denne tutorial vil vi præsentere fire unikke layoutmuligheder for din Kontaktformular Divi ved hjælp af inline og fuld bredde felter.
Lad os starte!
undersøgelse
Her er en forhåndsvisning af, hvad vi skal designe.
Første layout
Andet layout
Tredje layout
Fjerde layout
Hvad du behøver for at komme i gang
Før vi starter, installer og aktiver Divi-temaet og sørg for at have den nyeste version af Divi på din hjemmeside.
Nu er du klar til at starte!
4 eksempellayouts til Divis kontaktformularmodul ved hjælp af inline- og felter i fuld bredde
Vælg det foruddefinerede layout
Hver af de 4 skabeloner er ændret fra skoreparationskontaktsidens layout Layoutpakke til skoreparation, som du kan finde i Divi-biblioteket.
Tilføj en ny side til dit websted og giv den en titel, og vælg derefter muligheden Brug Divi Builder.
Vi vil bruge et forudlavet layout fra Divi-biblioteket til dette eksempel, så vælg Gennemse layouts.
Find og vælg Skoreparations kontaktsidelayout.
Vælg Brug dette layout for at tilføje layoutet til din side.
Vi er nu klar til at designe vores eksempler.
Første layout
Flyt først linjen, der indeholder modulet Kontaktformular til afsnittet ovenfor, lige under linjen med Blurb-moduler. Så kan du slette den resterende tomme sektion.
Åbn linjeindstillinger og tilføj venstre og højre polstring,
- Polstring (venstre og højre): 15 %
Vælg responsive muligheder og indstil polstring til mobil.
- Polstring (venstre og højre): 5 %
Ændret kontaktformularlayout med inline og fuld bredde felter
Til dette layout vil vi oprette to separate felter til fornavn og efternavn.
Åbn kontaktformularmodulets indstillinger, og skift ID og titelfeltet for feltet Efternavn til Fornavn.
Tilføj et nyt felt under feltet Fornavn. Indstil ID og Titel-feltet til Navn.
I navnefeltindstillingerne skal du åbne layoutindstillingerne og indstille Make Fullwidth til No.
- Gør fuld bredde: NEJ
Derefter, under indstillingerne af Kontaktformular, ændre rækkefølgen af emnet og telefonen, så telefonen er anført før emnet.
Åbn indstillingerne for emnefeltlayout, og indstil feltet til fuld bredde.
- Gør fuld bredde: JA
Kontaktformular design tilpasning
Lad os nu ændre et par indstillinger for at fuldføre designet. Naviger til fanen Design i kontaktformularmodulets indstillinger.
Først skal du ændre baggrundsfarven på knappen.
- Knapbaggrund: #DBC2B3
Tilføj en topmargen til knappen.
- Knapmargen (øverst): 10px
Til sidst skal du gå til kantindstillinger og tilføje afrundede hjørner til felter.
- Indgange afrundede hjørner: 30px
Se også: Divi: Sådan tilføjer du et responsivt logo til modulet "Fuldbreddemenu".
Slutresultat af eksempel 1
Her er det endelige resultat på desktop og mobil.
Andet eksempel
For vores andet eksempel flytter vi Blurb-modulerne til venstre side af siden og placerer kontaktformularen til højre på siden. Flyt Blurb-moduler til en kolonne.
Skift rækkelayout.
Åbn linjedesignindstillinger og sluk Brug tilpasset tagrendebredde.
- Brug tilpasset tagrendebredde: NEJ
Tilføj kode til hovedelementets brugerdefinerede CSS for at justere Blurb- og Kontaktformularmodulerne lodret.
align-items:center;
Nu skal vi fjerne den tynde kant mellem søjlerne. Åbn rækkeindstillinger, og åbn derefter kolonneindstillinger 1. Under fanen Design skal du gå til kantindstillinger og fjerne grænsen.
- Højre kantbredde: 0px
Åbn derefter kolonne 2-indstillinger og gentag trinene for at fjerne grænsen.
- Højre kantbredde: 0px
Indstil "Kontakt os"-teksten til at være centreret.
Flyt kontaktformularen til højre kolonne. Slet den resterende tomme sektion.
Ændret kontaktformularlayout med inline og fuld bredde felter
Dette layout vil også have to separate felter til fornavn og efternavn. Åbn kontaktformularmodulets indstillinger, og skift ID og titelfeltet for feltet Efternavn til Fornavn.
Tilføj et nyt felt under feltet Fornavn. Indstil ID og Titel-feltet til Navn.
I navnefeltindstillingerne skal du åbne layoutindstillingerne og indstille Make Fullwidth til No.
- Gør fuld bredde: NEJ
Skift rækkefølgen af telefonen og emnefelterne, så telefonen kommer før emnet.
Åbn feltindstillingerne for E-mail, Telefon og Emne, og indstil layoutet til fuld bredde.
- Gør fuld bredde: JA
Kontaktformular design tilpasning
Åbn rækkeindstillinger, åbn derefter kolonneindstillinger 2. Indstil baggrundsfarven.
- Baggrund: #DBC2B3
I indstillinger for kolonne 2 skal du gå til fanen Design og tilføje polstring.
- Polstring (top, bund, venstre og højre: 50px
Vælg mobilikonet for at ændre responsive indstillinger. Sæt polstring til mobil.
- Polstring (top, bund, venstre og højre): 30px
Tilføj derefter en boksskygge til kolonnen.
Til sidst skal du åbne kontaktformularmodulets indstillinger og ændre feltets tekstfarve.
- Felter Tekstfarve: #000000
Slutresultat af eksempel 2
Her er det endelige resultat af det andet layout.
Tredje eksempel
Til det tredje layout vil vi have kontaktformularen til venstre og Blurb-modulerne til højre. Lad os starte med at ændre kolonnestrukturen i rækken, der indeholder Blurb-modulerne.
Flyt adressemodulet til højre kolonne.
Flyt derefter tekstmodulet "Kontakt os" til venstre kolonne, og slet derefter den resterende tomme række.
Flyt kontaktformularmodulet til venstre kolonne under tekstmodulet "Kontakt os". Slet den resterende tomme sektion.
Åbn linjeindstillingerne under fanen Design og sluk Brug tilpasset tagrendebredde
- Brug tilpasset tagrendebredde: NEJ
Tilføj kode til hovedelementets brugerdefinerede CSS for at justere Blurb- og Kontaktformularmodulerne lodret.
align-items:center;
Åbn rækkeindstillinger, og åbn derefter kolonneindstillinger 1. Under fanen Design skal du gå til kantindstillinger og fjerne grænsen. Gentag trinene for at fjerne rammen fra kolonne 2.
- Højre kantbredde: 0px
Ændring af layout på kontaktformularen
Vi lader feltbredderne være som de er for det tredje design, men åbn kontaktformularens indstillinger og ændre rækkefølgen af telefonnummeret og emnefeltet, så telefonen kommer først.
Slutresultat af eksempel 3
Her er det endelige resultat af det tredje layout.
Læs også: Divi: Sådan får du vist Fullwidth Header-modulet i fuld skærm
Fjerde eksempel
For det fjerde og sidste layout vil kontaktformularmodulet være til venstre og Blurb-modulerne til højre. Igen starter vi med at ændre kolonnestrukturen i rækken, der indeholder Blurb-modulerne.
Flyt adressemodulet til højre kolonne.
Flyt derefter kontaktformularmodulet til venstre kolonne. Slet den resterende tomme sektion.
Åbn linjeindstillingerne på fanen Design og deaktiver Brug tilpasset tagrendebredde.
- Brug tilpasset tagrendebredde: NEJ
Tilføj kode til hovedelementets brugerdefinerede CSS for at justere Blurb- og Kontaktformularmodulerne lodret.
align-items:center;
Åbn rækkeindstillinger, og åbn derefter kolonneindstillinger 1. Under fanen Design skal du gå til kantindstillinger og fjerne grænsen.
- Højre kantbredde: 0px
Åbn derefter kolonne 2-indstillinger og gentag trinene for at fjerne grænsen.
- Højre kantbredde: 0px
Åbn tekstmodulets indstillinger for teksten "Kontakt os", og centrer teksten.
- Tekstjustering: Centreret
Ændret kontaktformularlayout med inline og fuld bredde felter
Til dette design vil alle vores felter være i fuld bredde. Åbn kontaktformularmodulets indstillinger, og åbn derefter indstillingerne for hvert felt. På fanen Design skal du vælge Layout og definere Lav fuld bredde ud af JA.
Når du har oprettet hvert felt i fuld bredde, skal formularen se sådan ud.
Skift nu ID og Titel-feltet for Efternavn-feltet til Fornavn.
Tilføj et nyt felt under feltet Fornavn. Indstil ID og Titel-feltet til Navn.
Skift rækkefølgen af telefonen og emnefelterne, så telefonen kommer før emnet.
Tilpasning af kontaktformularmodulets design
Indstil felttekstfarven til sort i modulindstillingerne på fanen Design.
- Felter Tekstfarve: #000000
Åbn sektionsindstillingerne og tilføj en baggrundsfarve.
- Baggrund: #DBC2B3
Tilføj endelig en baggrundsmaske.
- Baggrundsmaske: Arch
- Masketransformation: vandret
Lad os bruge de responsive indstillinger for at få baggrundsmasken til at fungere bedre på mobilen.
- Mask Transform (Telefon): vandret og rotation
Endelig resultat
Her er det endelige resultat af det fjerde layout.
Endelige resultater
Lad os tage et kig på alle vores eksempler en gang til.
Første eksempel
Andet eksempel
Tredje eksempel
Fjerde eksempel
Download DIVI nu!!!
Konklusion
At have en attraktiv kontaktformular kan øge dine konverteringer og give dine besøgende mulighed for at forbinde direkte med dig.
Som vi har demonstreret i denne artikel, kan du bruge feltindstillingerne inline og fuld bredde til at skabe forskellige udseender og layouts til din form, og Divis indbyggede designmuligheder giver dig mulighed for at skabe unikke designs og attraktive for at hjælpe formen til at skille sig ud.
Forhåbentlig vil denne teknik tilføje endnu en nyttig designfærdighed til fremtidige projekter.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
