Behöver kombinera inline-fält och modulfullbreddsfält Kontaktformulär de Divi ?
Le kontakt~~POS=TRUNC formulär~~POS=HEADCOMP är ett viktigt element att ha med på din webbplats om du vill fånga e-postmeddelanden och omvandla dina besökare till kunder.
Modulen Kontaktformulär de Divi kan enkelt anpassas för att skapa former attraktiva och fängslande kontaktkort för alla typer av webbplatser. Denna modul kommer med två visningsalternativ som kan tillämpas på varje formulärfält: en ligne ou hela bredden.
I den här handledningen kommer vi att presentera fyra unika layoutmöjligheter för din kontakt~~POS=TRUNC formulär~~POS=HEADCOMP Divi med inline- och fullbreddsfält.
Låt oss börja!
undersökningen
Här är en förhandstitt på vad vi kommer att designa.
Första layouten
Andra layouten
Tredje layouten
Fjärde layouten
Vad du behöver för att komma igång
Innan vi börjar installera och aktivera Divi-temat och se till att du har den senaste versionen av Divi på din webbplats.
Nu är du redo att börja!
4 exempellayouter för Divis kontaktformulärmodul med inline- och fullbreddsfält
Välj den fördefinierade layouten
Var och en av de 4 mallarna är modifierade från kontaktsidan för skoreparationer Skoreparation Layout Pack, som du hittar i Divi-biblioteket.
Lägg till en ny sida på din webbplats och ge den en titel och välj sedan alternativet Använd Divi Builder.
Vi kommer att använda en färdig layout från Divi Library för det här exemplet, så välj Bläddra i layouter.
Hitta och välj layouten för skoreparationskontaktsidan.
Välj Använd den här layouten för att lägga till layouten på din sida.
Vi är nu redo att utforma våra exempel.
Första layouten
Flytta först raden som innehåller modulen Kontaktformulär till avsnittet ovan, precis under raden med Blurb-moduler. Sedan kan du ta bort den återstående tomma sektionen.
Öppna linjeinställningar och lägg till vänster och höger utfyllnad,
- Vaddering (vänster och höger): 15%
Välj responsiva alternativ och ställ in stoppning för mobilen.
- Vaddering (vänster och höger): 5%
Ändrad kontaktformulärlayout med inline- och fullbreddsfält
För denna layout kommer vi att skapa två separata fält för förnamn och efternamn.
Öppna modulinställningarna för kontaktformulär och ändra fältet ID och titel för fältet Efternamn till Förnamn.
Lägg till ett nytt fält under fältet Förnamn. Ställ in fältet ID och Titel till Namn.
Öppna layoutinställningarna i namnfältsinställningarna och ställ in Make Fullwidth till Nej.
- Gör fullbredd: NEJ
Sedan, under inställningarna för kontakt~~POS=TRUNC formulär~~POS=HEADCOMP, ändra ordningen på ämnet och telefonen så att telefonen listas före ämnet.
Öppna layoutinställningarna för ämnesfältet och ställ in fältet på full bredd.
- Gör full bredd: JA
Anpassning av kontaktformulärdesign
Låt oss nu ändra några inställningar för att slutföra designen. Navigera till fliken Design i modulinställningarna för Kontaktformulär.
Ändra först bakgrundsfärgen på knappen.
- Knappbakgrund: #DBC2B3
Lägg till en övre marginal på knappen.
- Knappmarginal (överst): 10px
Slutligen, gå till kantinställningar och lägg till rundade hörn i fält.
- Ingångar Rundade hörn: 30px
Se även: Divi: Hur man lägger till en responsiv logotyp till modulen "Fullwidth Menu".
Slutresultat av exempel 1
Här är slutresultatet på desktop och mobil.
Andra exemplet
För vårt andra exempel flyttar vi Blurb-modulerna till vänster på sidan och placerar kontaktformuläret till höger på sidan. Flytta Blurb-moduler till en kolumn.
Ändra radlayouten.
Öppna linjedesigninställningar och stäng av Använd anpassad rännbredd.
- Använd anpassad rännbredd: NEJ
Lägg till kod i huvudelementets anpassade CSS för att vertikalt anpassa modulerna Blurb och Contact Form.
align-items:center;
Nu måste vi ta bort den tunna gränsen mellan kolumnerna. Öppna radinställningar och öppna sedan kolumninställningar 1. Under fliken Design, gå till gränsinställningar och ta bort gränsen.
- Höger kantbredd: 0px
Öppna sedan inställningarna för kolumn 2 och upprepa stegen för att ta bort gränsen.
- Höger kantbredd: 0px
Ställ in "Kontakta oss"-texten så att den centreras.
Flytta kontaktformuläret till högerkolumnen. Ta bort det återstående tomma avsnittet.
Ändrad kontaktformulärlayout med inline- och fullbreddsfält
Denna layout kommer också att ha två separata fält för förnamn och efternamn. Öppna modulinställningarna för kontaktformulär och ändra fältet ID och titel för fältet Efternamn till Förnamn.
Lägg till ett nytt fält under fältet Förnamn. Ställ in fältet ID och Titel till Namn.
Öppna layoutinställningarna i namnfältsinställningarna och ställ in Make Fullwidth till Nej.
- Gör fullbredd: NEJ
Ändra ordningen på telefonen och ämnesfälten så att telefonen kommer före ämnet.
Öppna fältinställningarna för E-post, Telefon och Ämne och ställ in layouten på full bredd.
- Gör full bredd: JA
Anpassning av kontaktformulärdesign
Öppna radinställningar och öppna sedan kolumninställningar 2. Ställ in bakgrundsfärgen.
- Bakgrund: #DBC2B3
I kolumn 2 inställningar, gå till fliken Design och lägg till utfyllnad.
- Utfyllnad (överst, botten, vänster och höger: 50px
Välj mobilikonen för att ändra responsiva inställningar. Ställ vaddering för mobil.
- Utfyllnad (överst, botten, vänster och höger): 30px
Lägg sedan till en boxskugga i kolumnen.
Öppna slutligen modulinställningarna för kontaktformulär och ändra fältets textfärg.
- Fält Textfärg: #000000
Slutresultat av exempel 2
Här är slutresultatet av den andra layouten.
Tredje exemplet
För den tredje layouten kommer vi att ha kontaktformuläret till vänster och Blurb-modulerna till höger. Låt oss börja med att ändra kolumnstrukturen för raden som innehåller Blurb-modulerna.
Flytta adressmodulen till höger kolumn.
Flytta sedan textmodulen "Kontakta USA" till den vänstra kolumnen och ta sedan bort den återstående tomma raden.
Flytta kontaktformulärmodulen till den vänstra kolumnen under textmodulen "Kontakta oss". Ta bort det återstående tomma avsnittet.
Öppna linjeinställningarna under fliken Design och stäng av Använd anpassad rännbredd
- Använd anpassad rännbredd: NEJ
Lägg till kod i huvudelementets anpassade CSS för att vertikalt anpassa modulerna Blurb och Contact Form.
align-items:center;
Öppna radinställningar och öppna sedan kolumninställningar 1. Under fliken Design, gå till gränsinställningar och ta bort gränsen. Upprepa stegen för att ta bort kanten från kolumn 2.
- Höger kantbredd: 0px
Ändra layouten på kontaktformuläret
Vi lämnar fältbredderna som de är för den tredje designen, men öppna kontaktformulärets inställningar och ändra ordningen på telefonnumret och ämnesfältet så att telefonen kommer först.
Slutresultat av exempel 3
Här är slutresultatet av den tredje layouten.
Läs också: Divi: Hur man visar Fullwidth Header-modulen i helskärm
Fjärde exemplet
För den fjärde och sista layouten kommer modulen Kontaktformulär att finnas till vänster och Blurb-modulerna till höger. Återigen, vi börjar med att ändra kolumnstrukturen för raden som innehåller Blurb-modulerna.
Flytta adressmodulen till höger kolumn.
Flytta sedan modulen Kontaktformulär till den vänstra kolumnen. Ta bort det återstående tomma avsnittet.
Öppna linjeinställningarna på fliken Design och inaktivera Använd anpassad rännbredd.
- Använd anpassad rännbredd: NEJ
Lägg till kod i huvudelementets anpassade CSS för att vertikalt anpassa modulerna Blurb och Contact Form.
align-items:center;
Öppna radinställningar och öppna sedan kolumninställningar 1. Under fliken Design, gå till gränsinställningar och ta bort gränsen.
- Höger kantbredd: 0px
Öppna sedan inställningarna för kolumn 2 och upprepa stegen för att ta bort gränsen.
- Höger kantbredd: 0px
Öppna textmodulens inställningar för "Kontakta oss"-texten och centrera texten.
- Textjustering: Centrerad
Ändrad kontaktformulärlayout med inline- och fullbreddsfält
För denna design kommer alla våra fält att vara i full bredd. Öppna modulinställningarna för kontaktformulär och öppna sedan inställningarna för varje fält. Välj på fliken Design Layout och definiera Gör full bredd sur JA.
När du har skapat varje fält i full bredd bör formuläret se ut så här.
Ändra nu fältet ID och Titel för fältet Efternamn till Förnamn.
Lägg till ett nytt fält under fältet Förnamn. Ställ in fältet ID och Titel till Namn.
Ändra ordningen på telefonen och ämnesfälten så att telefonen kommer före ämnet.
Anpassa kontaktformulärmodulens design
I modulinställningarna, på fliken Design, ställ in fältets textfärg till svart.
- Fält Textfärg: #000000
Öppna avsnittsinställningarna och lägg till en bakgrundsfärg.
- Bakgrund: #DBC2B3
Lägg slutligen till en bakgrundsmask.
- Bakgrundsmask: Arch
- Mask Transform: horisontell
För att få bakgrundsmasken att fungera bättre på mobilen, låt oss använda de responsiva inställningarna.
- Mask Transform (telefon): horisontell och rotation
Slutresultat
Här är slutresultatet av den fjärde layouten.
Slutresultat
Låt oss ta en titt på alla våra exempel en gång till.
Första exemplet
Andra exemplet
Tredje exemplet
Fjärde exemplet
Ladda ner DIVI nu!!!
Slutsats
Att ha ett attraktivt kontaktformulär kan öka dina omvandlingar och låta dina besökare få kontakt direkt med dig.
Som vi har visat i den här artikeln kan du använda inline- och fullwidth-fältalternativen för att skapa olika utseenden och layouter för din form, och Divis inbyggda designalternativ låter dig skapa unika designs och attraktiva för att hjälpa formen att sticka ut.
Förhoppningsvis kommer denna teknik att lägga till ytterligare en användbar designfärdighet för framtida projekt.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
