Kunne du tænke dig at oprette en Kontaktformular til din hjemmeside takket være modulet Kontaktformular fra Divi? Her er 3 tilpasningsideer...
De formularer Kontaktoplysninger er en væsentlig del af mange websteder. Deres hovedmål er at være intuitive og hjælpe besøgende med nemt at komme i kontakt.
Men det betyder ikke det hele formularer kontakter skal have et præcist og foruddefineret udseende. Du kan nemt kombinere en intuitiv oplevelse med et smukt design. Det er præcis, hvad vi skal gøre i denne tutorial.
Vi deler 3 unikke design af modulet Kontaktformular de Divi som du kan oprette ved kun at bruge Divis indbyggede muligheder.
Lad os gå!
Oversigt over design af Divi Contact Form modulet
Desktop versioner
Lad os starte med at tage et kig på desktopversionen af modulets forskellige designs Kontaktformular som vi vil designe i denne tutorial.
Mobilversioner
Og her er, hvordan de ser ud på mindre skærmstørrelser:
Download DIVI nu!!!
Sådan tilpasser du Divi Kontaktformularmodulet: 3 eksempler
Læs også: Divi: Sådan opretter du en sektion for teammedlemmer som en karrusel
Oprettelse af kontaktformular #1
Tilføj en ny sektion
Gradient baggrund
Lad os starte med det første eksempel! Tilføj en ny sektion, gå til baggrundsindstillinger og tilføj en gradientbaggrund.
- Gradient stopper
- 34 %: #4c00ff
- 34 %: #ffd400
- Type: Rund
- Gradientretning: Nederst til venstre
afstand
Derefter skal du gå til indstillingen Mellemrum på fanen Design og ændre indstillingerne som følger.
- Polstring (top og bund): 200px
Tilføj en ny linje
Struktur af søjlen
Tilføj en ny række ved hjælp af følgende kolonnestruktur:
Kolonne 1: Baggrundsfarve
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillinger, derefter kolonne 1-indstillinger og tilføje baggrundsfarven nedenfor
- Baggrund: rgba(255,255,255,0.55)
Kolonne 1: Baggrundsbillede
Tilføj også et baggrundsbillede til den første kolonne.
- Gentagelse af baggrundsbillede: Ingen gentagelse
- Baggrundsbilledblanding: Skærm
Kolonne 2: Baggrundsbillede
Og en hvid baggrundsfarve til den anden kolonne.
- Baggrund: #ffffff
dimensionering
Rediger derefter størrelsesparametrene.
- Udlign kolonnehøjder: JA
afstand
Fjern også alle standard tilpassede polstringer.
- Polstring (top og bund): 0px
Søjlekantradius
Tilføj en kantradius til begge kolonner i den avancerede fane.
border-radius: 10px;
Tilføj et tekstmodul til kolonne 1
Tilføj indhold
Det er tid til at begynde at tilføje de forskellige moduler! Tilføj et tekstmodul til den første kolonne med indhold efter eget valg.
Tekstindstillinger
Gå derefter til fanen Design i tekstmodulet og foretag nogle ændringer.
- Tekst:
- Skrifttype: Tilfreds
- Tekstfarve: #333333
- Størrelse: 100px
- Linjehøjde: 1 em
- Justering: Center
afstand
Tilføj også tilpassede udfyldningsværdier.
- Polstring (øverst): 600px
- Polstring (bund): 100px
Skyggeæske
For at tilføje dybde til designet, brug en subtil boksskygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -16px
- Skyggefarve: rgba(0,0,0,0.3)
Tilføj et billedmodul til kolonne 2
Upload et billede
Fortsæt ved at tilføje et billedmodul til den anden kolonne. Upload et billede efter eget valg.
dimensionering
Skift størrelsesindstillingerne for dette modul.
- Bredde: 25 % (computer), 50 % (tablet), 60 % (telefon)
- Moduljustering: Center
afstand
Opret et overlap ved hjælp af en negativ topmargen.
- Margin (øverst): -60 %
grænse
Rediger kanterne på billedet som følger:
- Afrundede hjørner: 100px (alle hjørner)
Tilføj tekst #1-modul til kolonne 2
Tilføj indhold
Lige under billedmodulet tilføjer du et tekstmodul med indhold.
Tekstindstillinger
Rediger tekstindstillingerne for dette modul.
- Tekst:
- Skrifttype: Tilfreds
- Tekstfarve: #333333
- Tekststørrelse: 44px
- Orientering: Center
Tilføj tekst #2-modul til kolonne 2
Tilføj indhold
Tilføj derefter endnu et tekstmodul.
Tekstindstillinger
Skift også tekstindstillingerne for dette modul.
- Tekst:
- Skrifttype: Arial
- Tekstfarve: #ffd400
- Tekstfarve: 18px
- Bogstavafstand: 2px
- Orientering: Center
afstand
Tilføj derefter en nederste margen.
- Margen (bund): 100px
Tilføj kontaktformularmodulet til kolonne 2
Aktiver indstillingen "Gør fuld bredde" i feltet Navn og e-mail
Det sidste nødvendige modul er kontaktformularmodulet. Før du gør noget andet, skal du åbne navne- og e-mail-felterne og ændre layoutet.
- Gør fuld bredde: ja
Tilføj et emnefelt
For at skabe dette design har vi tilføjet et andet felt til emnet.
Spam Beskyttelse
Deaktiver derefter captcha-indstillingen.
- Brug Basic Captcha: NEJ
Indstillinger for formularfelttekst
Foretag nogle ændringer i formularfelttekstindstillingerne i dette kontaktformularmodul
- Felter:
- Baggrundsfarve: rgba(255,255,255,0)
- Skrifttype: Arial
- Skrifttypevægt: Let
- Tekststørrelse: 16px
- Bogstavafstand: 2px
Knapindstillinger
Vi ændrer også udseendet af knapperne.
- Brug brugerdefineret størrelse til knap: JA
- Knap:
- Tekstfarve: #ffd400
- Kantbredde: 0 pixels
- Bogstavafstand: 2px
- Skrifttype: Arial
- Skrifttype: U
- understreg farve: #4c00ff
afstand
Tilføj derefter nogle brugerdefinerede udfyldningsværdier.
- Polstring (bund): 100px
- Polstring (venstre og højre): 50px
Border
Og tilføj en subtil bundramme til hvert af felterne.
- Indgange nederste kantbredde: 2px
- Indgange Bundkant Farve: #efefef
Afstand mellem individuelle felter
Tilføj endelig en bundmargen til hvert af de enkelte felter undtagen meddelelsesfeltet.
- Margen (bund): 20px
Oprettelse af kontaktformular #2
Tilføj en ny sektion
Gradient baggrund
Lad os gå videre til næste eksempel! Tilføj en ny sektion med en gradientbaggrund.
- Gradientstop:
- 50 %: #562fe
- 50 %: #ffffff
- Gradienttype: Lineær
afstand
Tilføj tilpassede udfyldningsværdier til afstandsindstillingerne i dette afsnit.
- Polstring (top og bund): 200px
Tilføj en ny linje
Struktur af søjlen
Tilføj en ny række ved hjælp af følgende kolonnestruktur:
Baggrundsfarve
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillingerne og tilføje en baggrundsfarve til rækken.
- Baggrundsfarve: #ffffff
2 kolonne gradient baggrund
Tilføj en gradientbaggrund til den anden kolonne i rækken.
- Gradientstop:
- 0 %: #9932ff
- 100 %: #562fe
- Type: Lineær
- Styring: 160 grader
dimensionering
Rediger også linjestørrelsesparametrene.
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Udlign kolonnehøjder: JA
afstand
Tilføj derefter tilpassede afstandsværdier.
- Linje:
- Polstring (top og bund): 0px
- Kolonne 1:
- Polstring: 100px (øverst), 50px (bund)
- Polstring (venstre og højre): 50px
- Kolonne 2:
- Polstring (top og bund): 100 pixels
- Polstring (venstre og højre): 50px
Border
Tilføj '20px' til hver af linjekanterne.
Skyggeæske
Tilføj endelig en subtil boksskygge til linjen.
- Box Shadow Blur Styrke: 45px
- Box Shadow Spread Styrke: -11px
- Sadow Farve: rgba(0,0,0,0.3)
Tilføj et tekstmodul til kolonne 1
Tilføj indhold
Det er tid til at begynde at tilføje modulerne! Start med et tekstmodul i den første kolonne.
Tekstindstillinger
Rediger tekstindstillingerne for dette modul.
- Tekst:
- Skrifttypevægt: Ultra fed
- Skrifttype: TT
- Farve: #562fef
- Størrelse: 100px (desktop), 80px (tablet), 60px (telefon)
- Bogstavafstand: -10px
- Linjehøjde: 1 em
afstand
Tilføj også en bundmargen.
- Margen (bund): 50px
Tilføj kontaktformularmodulet til kolonne 1
Elementer
Det andet modul, vi skal bruge i den første kolonne, er et kontaktformularmodul. Når du har tilføjet modulet, skal du slå 'Brug grundlæggende captcha' fra.
- Brug Basic Captcha: NEJ
Indstillinger for formularfelttekst
Skift derefter baggrundsfarven på formularfelterne.
- Felter Baggrundsfarve: #ffffff
Knapindstillinger
Leg også med knapindstillingerne for at oprette en ikonknap i stedet for en tekstknap.
- Brug brugerdefinerede stilarter til knap: JA
- Knap:
- Tekststørrelse: 73px
- Tekstfarve: rgba(0,0,0,0) (standard),
- Baggrundsfarve: rgba(255,255,255,0) (Hover)
- Kantbredde: 0px
- Ikonfarve: #9932ff
- Vis kun ikon ved svæv for knap : NEJ
Skyggeæske
Tilføj endelig en subtil boksskygge til hvert af felterne.
- Box Shadow Blur Styrke: 36px
- Box Shadow Spread Styrke: -14px
- Skyggefarve: rgba(0,0,0,0.3)
Tilføj et tekstmodul til kolonne 2
Tilføj indhold
Det første modul, vi skal bruge i den anden kolonne, er et andet tekstmodul.
Tekstindstillinger
Når du har tilføjet indholdet, skal du redigere tekstindstillingerne for dette modul.
- Tekst:
- Skrifttypevægt: Ultra fed
- Skrifttype: TT
- Farve: #ffffff
- Størrelse: 23px
- Bogstavafstand: -1px
Tilføj Blurb-modul #1 til kolonne 2
Tilføj indhold
Det andet modul, vi skal bruge, er et Blurb-modul. Gå videre og indtast nogle kontaktoplysninger.
Vælg ikonet
Vælg derefter et tilsvarende ikon.
Ikonindstillinger
Skift indstillingerne for dette ikon.
- Ikonfarve: #ffffff
- Billede/ikonplacering: Højre
Titeltekstindstillinger
Fortsæt med at foretage nogle ændringer i titeltekstindstillingerne.
- Titel Tekststørrelse: 15px
- Titelbogstavafstand: -0,5 pixel
afstand
Og tilføj en topmargen.
- Margen (øverst): 120px
Klon Blurb-modul to gange
Når du er færdig med at redigere det første Blurb-modul, kan du gå videre og klone modulet to gange.
Rediger indholdet og ikonet for de to dubletter
Rediger indholdet og ikonerne for de to dubletter for at dele forskellige typer kontaktoplysninger med besøgende.
Skift afstanden mellem de to dubletter
Den øverste margen på de to dubletter bør også ændres.
- Margen (øverst): 30px
Oprettelse af kontaktformular #3
Tilføj en ny sektion
Baggrundsfarve
Lad os gå videre til det tredje eksempel! Tilføj en ny sektion med følgende baggrundsfarve:
- Baggrundsfarve: #3491CE
afstand
Fortsæt ved at tilføje tilpassede udfyldningsværdier i afstandsindstillingerne.
- Polstring (top og bund): 200px
Tilføj linje #1
Struktur af søjlen
Tilføj derefter en ny række ved hjælp af følgende kolonnestruktur:
Tilføj et tekstmodul
Tilføj indhold
Det er tid til at begynde at tilføje moduler! Det første modul, vi skal tilføje til den første kolonne, er et tekstmodul. Indtast et valgfrit indhold.
Tekstindstillinger
Derefter skal du ændre tekstindstillingerne.
- Tekst:
- Skrifttypevægt: Ultra fed
- Tekstfarve: rgba(255,255,255,0.24)
- Tekststørrelse: 100px (desktop), 70px (tablet), 36px (telefon)
- Linjehøjde: 1 em
- Orientering: Center
afstand
Tilføj også en negativ bundmargen.
- Margen (bund): -100px
Tilføj linje 2
Struktur af søjlen
Den anden række, vi skal bruge for at fuldføre dette eksempel, indeholder følgende kolonnestruktur:
Gradient baggrund
Uden at tilføje nogen moduler endnu, skal du åbne linjeindstillingerne og tilføje en gradientbaggrund.
- Gradientstop:
- 50 %: #11CE84
- 50 %: #10C77F
- Gradienttype: Lineær
- Styring: 160 grader
dimensionering
Skift også størrelsesparametre.
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Udlign kolonnehøjder: JA
afstand
Tilføj derefter nogle udfyldningsværdier.
- Polstring: 150px (øverst), 100px (bund)
- Polstring: 50px (venstre og højre)
Border
Gå derefter til kantindstillinger og tilføj '20px' til hvert af hjørnerne. Brug også en bundkant.
- Afrundede hjørner: 20px
- Nederste kantbredde: 10px
- Bundkantsfarve: #1ba35a
Skyggeæske
Fuldfør linjeindstillingerne ved at tilføje en subtil boksskygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -24px
- Skyggefarve: rgba(0,0,0,0.3)
Tilføj kontaktformularmodulet til kolonne 1
Aktiver indstillingen "Gør fuld bredde" i feltet Navn og e-mail
Det første modul, vi skal bruge i den første kolonne i rækken, er et kontaktformularmodul. Åbn feltet for navn og e-mail, og skift layoutindstillingerne.
- Gør fuld bredde: JA
Elementer
Deaktiver derefter captchaen.
- Brug Basic Captcha: NEJ
Knapindstillinger
Og ændre knapindstillingerne.
- Brug brugerdefinerede stilarter til knap: JA
- Knap Tekstfarve: #ffffff
- Gradientstop:
- 50 %: #3AA0E3
- 50 %: #3491CE
- Gradienttype: Lineær
- Gradientretning: 155 grader -
- Knapkantbredde: 0 pixels
- Knapkantradius: 10px
- Box Shadow Spread Styrke: -2px
- Skyggefarve: #0a60af
Se også: Divi: Sådan tilpasser du kurven og søgeikonerne i modulet "Fuldbreddemenu".
Border
Vi tilføjer også '5px' af afrundede hjørner til hvert af felterne.
Tilføj et tekstmodul til kolonne 2
Tilføj indhold
I den anden kolonne er det første modul, vi skal bruge, et tekstmodul. Gå videre og indtast noget indhold.
Baggrundsfarve
Skift derefter baggrundsfarven.
- Baggrund: rgba(255,255,255,0.13)
Tekstindstillinger
Rediger også med tekstindstillinger.
- Tekst:
- Skrifttypevægt: Let
- Tekstfarve: #ffffff
- Tekststørrelse: 15px
- Bogstavafstand: -0,5px
afstand
Og tilføj tilpasset polstring for at give modulet plads til at ånde.
- Polstring (top og bund): 12px
- Polstring (venstre og højre): 10px
Border
Vi tilføjer også '20px' i øverste venstre og nederste venstre hjørne. Oven i det tilføjer vi en venstre kant.
- Afrundede hjørner: 20px (øverst til venstre og nederst til venstre)
- Venstre kantbredde: 34px
- Venstre kantfarve: #edf000
synlighed
For at få dette design til at matche forskellige skærmstørrelser, deaktiverer vi tekstmodulet på telefonen og tabletten.
Klon tekstmodul to gange
Når du er færdig med at redigere det første tekstmodul, skal du gå videre og klone modulet to gange.
Rediger indholdet af de to dubletter
Skift indholdet af de to dubletter til noget andet.
Skift afstanden mellem de to dubletter
Og tilføj en topmargen for at skabe plads mellem hvert af modulerne.
- Margen (øverst): 20px
Rediger grænsen for de to dubletter
Til sidst skal du ændre farven på venstre kant af hver af dubletterne individuelt.
- Farve 1: #00faff
- Farve 2: #00f76f
Se også vores artikel om Sådan opretter du en lydhør harmonika-skyder
undersøgelse
Desktop version
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på Divi Contact Form-moduldesignerne på skrivebordet.
Mobil
Og her er, hvad du kan forvente af Divi's Contact Form-moduldesign på mindre skærmstørrelser:
Download DIVI nu!!!
Konklusion
I dette indlæg har vi delt 3 fantastiske Divi Contact Form-moduldesign, som du nemt kan bruge og ændre til enhver hjemmeside, du opretter.
De formularer Kontakter er en væsentlig del af mange hjemmesider, så det er vigtigt at sikre, at dit design overbeviser dine besøgende om at komme i kontakt.
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.
...
