Divi: Hur man anpassar modulen "Kontaktformulär".

Vill du skapa en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP till din webbplats tack vare modulen Kontaktformulär från Divi? Här är 3 anpassningsidéer...

den former Kontaktuppgifter är en viktig del av många webbplatser. Deras huvudsakliga mål är att vara intuitiva och hjälpa besökare att enkelt komma i kontakt.

Men det betyder inte att allt former kontakter måste ha ett exakt och fördefinierat utseende. Du kan enkelt kombinera en intuitiv upplevelse med en vacker design. Det är precis vad vi ska göra i denna handledning.

Vi kommer att dela 3 unika design av modulen Kontaktformulär de Divi som du kan skapa med endast Divis inbyggda alternativ.

Låt oss gå!

Översikt över designen av Divi Contact Form-modulen

Desktopversioner

Låt oss börja med att ta en titt på skrivbordsversionen av modulens olika design Kontaktformulär som vi kommer att designa i den här handledningen.

lägg till ett kontaktformulär på din webbplats med hjälp av Divis kontaktformulärmodul

Mobila versioner

Och så här ser de ut på mindre skärmstorlekar:

Ladda ner DIVI nu!!!

Så här anpassar du Divi Contact Form-modulen: 3 exempel

Läs också: Divi: Hur man skapar en gruppmedlemssektion som en karusell

Skapande av kontaktformulär #1

Lägg till en ny sektion

Lutningbakgrund

Låt oss börja med det första exemplet! Lägg till ett nytt avsnitt, gå till bakgrundsinställningar och lägg till en gradientbakgrund.

Gradient stannar
- 34 %: #4c00ff
- 34 %: #ffd400
Typ: Rund
Gradientriktning: Nederst till vänster

avstånd

Gå sedan till alternativet Avstånd på fliken Design och ändra inställningarna enligt följande.

Utfyllnad (topp och botten): 200px

Lägg till en ny rad

Strukturen av kolonnen

Lägg till en ny rad med följande kolumnstruktur:

Kolumn 1: Bakgrundsfärg

Utan att lägga till några moduler ännu, öppna radinställningar, sedan kolumn 1-inställningar och lägg till bakgrundsfärgen nedan

Bakgrund: rgba(255,255,255,0.55)

Kolumn 1: Bakgrundsbild

Lägg även till en bakgrundsbild i den första kolumnen.

Upprepa bakgrundsbild: Ingen upprepning
Bakgrundsbildsblandning: Skärm

Kolumn 2: Bakgrundsbild

Och en vit bakgrundsfärg till den andra kolumnen.

Bakgrund: #ffffff

dimensionering

Ändra sedan storleksparametrarna.

Utjämna kolumnhöjder: JA

avstånd

Ta också bort alla standard anpassade stoppningar.

Utfyllnad (topp och botten): 0px

Kolumnkantradie

Lägg till en kantradie till båda kolumnerna på fliken Avancerat.

border-radius: 10px;

Lägg till en textmodul i kolumn 1

Lägg till innehåll

Det är dags att börja lägga till de olika modulerna! Lägg till en textmodul i den första kolumnen med innehåll som du väljer.

Textinställningar

Gå sedan till fliken Design i textmodulen och gör några ändringar.

Text:
- Typsnitt: Tillfredsställ
- Textfärg: #333333
- Storlek: 100px
- Linjehöjd: 1 em
- Inriktning: Center

avstånd

Lägg också till anpassade fyllningsvärden.

Utfyllnad (överst): 600px
Utfyllnad (botten): 100px

Skugga låda

För att lägga till djup till designen, använd en subtil boxskugga.

Box Shadow Blur Styrka: 80px
Box Shadow Spridningsstyrka: -16px
Skuggfärg: rgba(0,0,0,0.3)

Lägg till en bildmodul i kolumn 2

Ladda upp en bild

Fortsätt genom att lägga till en bildmodul i den andra kolumnen. Ladda upp en bild som du väljer.

dimensionering

Ändra storleksinställningarna för denna modul.

Bredd: 25 % (dator), 50 % (surfplatta), 60 % (telefon)
Modulinriktning: Center

avstånd

Skapa en överlappning med en negativ toppmarginal.

Marginal (överst): -60 %

gräns

Ändra bildens kanter enligt följande:

Rundade hörn: 100px (alla hörn)

Lägg till text #1-modul till kolumn 2

Lägg till innehåll

Precis under bildmodulen lägger du till en textmodul med innehåll.

Textinställningar

Redigera textinställningarna för denna modul.

Text:
- Typsnitt: Tillfredsställ
- Textfärg: #333333
- Textstorlek: 44px
- Inriktning: Centrum

Lägg till text #2-modul till kolumn 2

Lägg till innehåll

Lägg sedan till ytterligare en textmodul.

Textinställningar

Ändra även textinställningarna för denna modul.

Text:
- Typsnitt: Arial
- Textfärg: #ffd400
- Textfärg: 18px
- Bokstavsavstånd: 2px
- Inriktning: Centrum

avstånd

Lägg sedan till en nedre marginal.

Marginal (botten): 100 px

Lägg till modulen Kontaktformulär i kolumn 2

Aktivera alternativet "Gör full bredd" i fältet Namn och e-post

Den sista modulen som behövs är modulen Kontaktformulär. Innan du gör något annat, öppna namn- och e-postfälten och ändra layouten.

Gör fullbredd: ja

Lägg till ett ämnesfält

För att skapa denna design lade vi till ett annat fält för ämnet.

spam skydd

Inaktivera sedan captcha-alternativet.

Använd Basic Captcha: NEJ

Inställningar för formulärfältstext

Gör några ändringar i formulärfältets textinställningar för denna kontaktformulärmodul

Fält:
- Bakgrundsfärg: rgba(255,255,255,0)
- Typsnitt: Arial
- Teckensnittsvikt: Lätt
- Textstorlek: 16px
- Bokstavsavstånd: 2px

Knappinställningar

Vi ändrar också utseendet på knapparna.

Använd anpassad storlek för knapp: JA
Knapp :
- Textfärg: #ffd400
- Kantbredd: 0 pixlar
- Bokstavsavstånd: 2px
- Typsnitt: Arial
- Typsnitt: U
- understryka Färg: #4c00ff

avstånd

Lägg sedan till några anpassade utfyllnadsvärden.

Utfyllnad (botten): 100px
Utfyllnad (vänster och höger): 50px

gräns

Och lägg till en subtil bottenkant till vart och ett av fälten.

Ingångar Nedre kantbredd: 2px
Ingångar Bottenkant Färg: #efefef

Avstånd mellan enskilda fält

Lägg slutligen till en bottenmarginal till vart och ett av de individuella fälten utom meddelandefältet.

Marginal (botten): 20 px