Nais mo bang lumikha ng isang Makipag-ugnay sa form na sa iyong website salamat sa module Makipag-ugnayan sa Form galing kay Divi? Narito ang 3 ideya sa pagpapasadya...
Les mga form Ang mga detalye ng contact ay isang mahalagang bahagi ng maraming mga website. Ang kanilang pangunahing layunin ay maging intuitive at tulungan ang mga bisita na madaling makipag-ugnayan.
Ngunit hindi iyon ang ibig sabihin ng lahat mga form ang mga contact ay dapat na may tumpak at paunang natukoy na hitsura. Madali mong pagsamahin ang isang intuitive na karanasan sa magandang disenyo. Ito mismo ang gagawin natin sa tutorial na ito.
Magbabahagi kami ng 3 natatanging disenyo ng modyul Makipag-ugnayan sa Form de Divi na maaari mong gawin gamit lamang ang mga built-in na opsyon ng Divi.
Sabihin pumunta!
Pangkalahatang-ideya ng mga disenyo ng module ng Divi Contact Form
Mga bersyon ng desktop
Magsimula tayo sa pamamagitan ng pagtingin sa desktop na bersyon ng iba't ibang disenyo ng module Makipag-ugnayan sa Form na aming ididisenyo sa tutorial na ito.
Mga Bersyon sa Mobile
At narito ang hitsura ng mga ito sa mas maliliit na laki ng screen:
I-download ang DIV ngayon!!!
Paano i-customize ang module ng Divi Contact Form: 3 halimbawa
Basahin din ang: Divi: Paano gumawa ng seksyon ng mga miyembro ng koponan bilang isang carousel
Paglikha ng contact form #1
Magdagdag ng bagong seksyon
Gradient na background
Magsimula tayo sa unang halimbawa! Magdagdag ng bagong seksyon, pumunta sa mga setting ng background at magdagdag ng gradient na background.
- Huminto ang Gradient
- 34%: #4c00ff
- 34%: #ffd400
- Uri: Bilog
- Gradient na Direksyon: Kaliwa sa Ibaba
pagitan
Susunod, pumunta sa pagpipiliang Spacing sa tab na Disenyo at baguhin ang mga setting tulad ng sumusunod.
- Padding (Itaas at Ibaba): 200px
Magdagdag ng bagong linya
Istraktura ng haligi
Magdagdag ng bagong row gamit ang sumusunod na column structure:
Column 1: Kulay ng background
Nang hindi pa nagdaragdag ng anumang mga module, buksan ang mga setting ng row, pagkatapos ay ang mga setting ng column 1 at idagdag ang kulay ng background sa ibaba
- Background: rgba(255,255,255,0.55)
Column 1: Background na larawan
Magdagdag din ng larawan sa background sa unang column.
- Ulitin ang Larawan sa Background: Walang Ulitin
- Pinaghalong Larawan sa Background: Screen
Column 2: Background na larawan
At isang puting kulay ng background sa ikalawang hanay.
- Background: #ffffff
pagpapalaki
Pagkatapos ay baguhin ang mga parameter ng sukat.
- Equalize Column Heights: OO
pagitan
Alisin din ang lahat ng default na custom na padding.
- Padding (Itaas at Ibaba): 0px
Radius ng hangganan ng column
Magdagdag ng border radius sa parehong column sa advanced na tab.
border-radius: 10px;
Magdagdag ng Text module sa column 1
Magdagdag ng nilalaman
Panahon na upang simulan ang pagdaragdag ng iba't ibang mga module! Magdagdag ng Text module sa unang column na may content na gusto mo.
Mga setting ng teksto
Susunod, pumunta sa tab na Disenyo ng Text module at gumawa ng ilang pagbabago.
- Teksto:
- Font: Satisfy
- Kulay ng Teksto: #333333
- Laki: 100px
- Taas ng Linya: 1 em
- Alignment: Gitna
pagitan
Magdagdag din ng mga halaga ng pasadyang punan.
- Padding (Itaas): 600px
- Padding (Ibaba): 100px
Kahon ng anino
Upang magdagdag ng lalim sa disenyo, gumamit ng banayad na anino ng kahon.
- Lakas ng Box Shadow Blur: 80px
- Lakas ng Box Shadow Spread: -16px
- Kulay ng anino: rgba(0,0,0,0.3)
Magdagdag ng module ng Larawan sa column 2
Mag-upload ng isang imahe
Magpatuloy sa pamamagitan ng pagdaragdag ng module ng Imahe sa pangalawang column. Mag-upload ng larawan na iyong pinili.
pagpapalaki
Baguhin ang mga setting ng sukat para sa module na ito.
- Lapad: 25% (desktop), 50% (tablet), 60% (telepono)
- Paghahanay ng Module: Gitna
pagitan
Gumawa ng overlap gamit ang isang negatibong margin sa itaas.
- Margin (Itaas): -60%
Hangganan
Baguhin ang mga hangganan ng larawan tulad ng sumusunod:
- Mga Bilog na Sulok: 100px (Lahat ng sulok)
Magdagdag ng Text #1 module sa column 2
Magdagdag ng nilalaman
Sa ibaba lamang ng Image module, magdagdag ng Text module na may nilalaman.
Mga setting ng teksto
I-edit ang mga setting ng teksto para sa modyul na ito.
- Teksto:
- Font: Satisfy
- Kulay ng Teksto: #333333
- Laki ng Teksto: 44px
- Oryentasyon: Gitna
Magdagdag ng Text #2 module sa column 2
Magdagdag ng nilalaman
Pagkatapos ay magdagdag ng isa pang Text module.
Mga setting ng teksto
Baguhin din ang mga setting ng teksto para sa modyul na ito.
- Teksto:
- Font: Arial
- Kulay ng Teksto: #ffd400
- Kulay ng Teksto: 18px
- Spacing ng Letter: 2px
- Oryentasyon: Gitna
pagitan
Pagkatapos ay magdagdag ng isang ilalim na margin.
- Margin (Ibaba): 100px
Idagdag ang module ng Contact Form sa column 2
I-activate ang opsyong "Gumawa ng Buongwidth" sa field na Pangalan at email
Ang huling module na kailangan ay ang Contact Form module. Bago gumawa ng anumang bagay, buksan ang mga field ng pangalan at email at baguhin ang layout.
- Gawin ang Fullwidth: oo
Magdagdag ng field ng paksa
Upang lumikha ng disenyong ito, nagdagdag kami ng isa pang field para sa paksa.
spam Protection
Pagkatapos ay huwag paganahin ang captcha na opsyon.
- Gumamit ng Basic Captcha: HINDI
Mga setting ng text field ng form
Gumawa ng ilang pagbabago sa mga setting ng text field ng form ng module ng Contact Form na ito
- Mga patlang:
- Kulay ng Background: rgba(255,255,255,0)
- Font: Arial
- Timbang ng Font: Banayad
- Laki ng Teksto: 16px
- Spacing ng Letter: 2px
Mga setting ng pindutan
Binabago din namin ang hitsura ng mga pindutan.
- Gamitin ang Custom na Sukat Para sa Button: YES
- Button:
- Kulay ng Teksto: #ffd400
- Lapad ng Border: 0 pixels
- Spacing ng Letter: 2px
- Font: Arial
- Estilo ng Font: U
- salungguhit Kulay: #4c00ff
pagitan
Pagkatapos ay magdagdag ng ilang custom na padding value.
- Padding (Ibaba): 100px
- Padding (Kaliwa at Kanan): 50px
Hangganan
At magdagdag ng banayad na hangganan sa ibaba sa bawat isa sa mga patlang.
- Mga Input sa Bottom Border Lapad: 2px
- Mga Input na Kulay ng Bottom Border: #efefef
Spacing ng mga indibidwal na field
Panghuli, magdagdag ng ibabang margin sa bawat isa sa mga indibidwal na field maliban sa field ng mensahe.
- Margin (Ibaba): 20px
Paglikha ng contact form #2
Magdagdag ng bagong seksyon
Gradient na background
Lumipat tayo sa susunod na halimbawa! Magdagdag ng bagong seksyon na may gradient na background.
- Mga Paghinto ng Gradient:
- 50%: #562fef
- 50%: #ffffff
- Uri ng Gradient: Linear
pagitan
Magdagdag ng mga custom na halaga ng padding sa mga setting ng spacing sa seksyong ito.
- Padding (Itaas at Ibaba): 200px
Magdagdag ng bagong linya
Istraktura ng haligi
Magdagdag ng bagong row gamit ang sumusunod na column structure:
Kulay ng background
Nang hindi pa nagdaragdag ng anumang mga module, buksan ang mga setting ng row at magdagdag ng kulay ng background sa row.
- Kulay ng Background: #ffffff
2 column na gradient na background
Magdagdag ng gradient na background sa pangalawang column sa row.
- Mga Paghinto ng Gradient:
- 0%: #9932ff
- 100%: #562fef
- Uri: Linear
- Pagpipiloto: 160 degrees
pagpapalaki
Baguhin din ang mga parameter ng line sizing.
- Gamitin ang Custom na Gutter Width: OO
- Lapad ng alulod: 1
- Equalize Column Heights: OO
pagitan
Susunod, magdagdag ng mga value ng custom na spacing.
- Linya :
- Padding (Itaas at Ibaba): 0px
- Hanay 1:
- Padding: 100px (Itaas), 50px (Ibaba)
- Padding (Kaliwa at Kanan): 50px
- Hanay 2:
- Padding (Itaas at Ibaba): 100px
- Padding (Kaliwa at Kanan): 50px
Hangganan
Magdagdag ng '20px' sa bawat isa sa mga hangganan ng linya.
Kahon ng anino
Panghuli, magdagdag ng banayad na anino ng kahon sa linya.
- Lakas ng Box Shadow Blur: 45px
- Lakas ng Box Shadow Spread: -11px
- Kulay ng Sadow: rgba(0,0,0,0.3)
Magdagdag ng Text module sa column 1
Magdagdag ng nilalaman
Oras na para simulan ang pagdaragdag ng mga module! Magsimula sa isang Text module sa unang column.
Mga setting ng teksto
I-edit ang mga setting ng teksto para sa modyul na ito.
- Teksto:
- Timbang ng Font: Napaka-bold
- Estilo ng Font: TT
- Kulay: #562fef
- Laki: 100px (Desktop), 80px (Tablet), 60px (Telepono)
- Spacing ng Letter: -10px
- Taas ng Linya: 1 em
pagitan
Magdagdag din ng ilalim na margin.
- Margin (Ibaba): 50px
Idagdag ang module ng Contact Form sa column 1
Item
Ang pangalawang module na kakailanganin namin sa unang column ay isang Contact Form module Kapag naidagdag mo na ang module, patayin ang opsyon na 'Gumamit ng Basic Captcha'.
- Gumamit ng Basic Captcha: HINDI
Mga setting ng text field ng form
Pagkatapos ay baguhin ang kulay ng background ng mga field ng form.
- Kulay ng Background ng Mga Field: #ffffff
Mga setting ng pindutan
Maglaro din sa mga setting ng button para gumawa ng icon button sa halip na text button.
- Gumamit ng Mga Custom na Estilo Para sa Button: YES
- Button:
- Laki ng Teksto: 73px
- Kulay ng Teksto: rgba(0,0,0,0) (Default),
- Kulay ng Background: rgba(255,255,255,0) (Mag-hover)
- Lapad ng Border: 0px
- Kulay ng Icon: #9932ff
- Ipakita Lamang ang Icon Sa Hover Para sa Button : HINDI
Kahon ng anino
Panghuli, magdagdag ng banayad na anino ng kahon sa bawat isa sa mga patlang.
- Lakas ng Box Shadow Blur: 36px
- Lakas ng Box Shadow Spread: -14px
- Kulay ng anino: rgba(0,0,0,0.3)
Magdagdag ng Text module sa column 2
Magdagdag ng nilalaman
Ang unang module na kakailanganin natin sa pangalawang column ay isa pang Text module.
Mga setting ng teksto
Kapag naidagdag mo na ang nilalaman, i-edit ang mga setting ng teksto para sa module na ito.
- Teksto:
- Timbang ng Font: Napaka-bold
- Estilo ng Font: TT
- Kulay: #ffffff
- Laki: 23px
- Spacing ng Letter: -1px
Magdagdag ng Blurb Module #1 sa Column 2
Magdagdag ng nilalaman
Ang pangalawang module na kakailanganin natin ay isang Blurb module. Sige at maglagay ng ilang impormasyon sa pakikipag-ugnayan.
Piliin ang icon
Pagkatapos ay pumili ng kaukulang icon.
Mga setting ng icon
Baguhin ang mga setting para sa icon na ito.
- Kulay ng Icon: #ffffff
- Paglalagay ng Larawan/Icon: Kanan
Mga setting ng teksto ng pamagat
Magpatuloy sa pamamagitan ng paggawa ng ilang pagbabago sa susunod na mga setting ng teksto ng pamagat.
- Laki ng Teksto ng Pamagat: 15px
- Spacing ng Letra ng Pamagat: -0,5 pixel
pagitan
At magdagdag ng tuktok na margin.
- Margin (Itaas): 120px
I-clone ang module ng Blurb nang dalawang beses
Kapag tapos ka nang i-edit ang unang Blurb module, maaari kang magpatuloy at i-clone ang module nang dalawang beses.
Baguhin ang nilalaman at ang icon ng dalawang duplicate
I-edit ang nilalaman at mga icon ng dalawang duplicate upang magbahagi ng iba't ibang uri ng impormasyon sa pakikipag-ugnayan sa mga bisita.
Baguhin ang spacing ng dalawang duplicate
Dapat ding baguhin ang itaas na margin ng dalawang duplicate.
- Margin (Itaas): 30px
Paglikha ng contact form #3
Magdagdag ng bagong seksyon
Kulay ng background
Lumipat tayo sa pangatlong halimbawa! Magdagdag ng bagong seksyon na may sumusunod na kulay ng background:
- Kulay ng Background: #3491CE
pagitan
Magpatuloy sa pamamagitan ng pagdaragdag ng mga custom na halaga ng padding sa mga setting ng spacing.
- Padding (Itaas at Ibaba): 200px
Magdagdag ng linya #1
Istraktura ng haligi
Susunod, magdagdag ng bagong row gamit ang sumusunod na column structure:
Magdagdag ng isang Text module
Magdagdag ng nilalaman
Oras na para magsimulang magdagdag ng mga module! Ang unang module na kakailanganin nating idagdag sa unang column ay isang Text module. Maglagay ng content na pipiliin.
Mga setting ng teksto
Susunod, baguhin ang mga setting ng teksto.
- Teksto:
- Timbang ng Font: Napaka-bold
- Kulay ng Teksto: rgba(255,255,255,0.24)
- Laki ng Teksto: 100px (Desktop), 70px (Tablet), 36px (Telepono)
- Taas ng Linya: 1 em
- Oryentasyon: Gitna
pagitan
Magdagdag din ng negatibong margin sa ibaba.
- Margin (Ibaba): -100px
Magdagdag ng linya 2
Istraktura ng haligi
Ang pangalawang row na kailangan nating kumpletuhin ang halimbawang ito ay naglalaman ng sumusunod na istraktura ng column:
Gradient na background
Nang hindi pa nagdaragdag ng anumang mga module, buksan ang mga setting ng linya at magdagdag ng gradient na background.
- Mga Paghinto ng Gradient:
- 50%: #11CE84
- 50%: #10C77F
- Uri ng Gradient: Linear
- Pagpipiloto: 160 degrees
pagpapalaki
Baguhin din ang mga laki ng mga parameter.
- Gamitin ang Custom na Gutter Width: OO
- Lapad ng alulod: 1
- Equalize Column Heights: OO
pagitan
Pagkatapos ay magdagdag ng ilang mga halaga ng padding.
- Padding: 150px (Itaas), 100px (Ibaba)
- Padding: 50px (Kaliwa at Kanan)
Hangganan
Pagkatapos ay pumunta sa mga setting ng hangganan at magdagdag ng '20px' sa bawat sulok. Gumamit din ng ilalim na hangganan.
- Mga Bilog na Sulok: 20px
- Ibabang Lapad ng Border: 10px
- Kulay ng Bottom Border: #1ba35a
Kahon ng anino
Kumpletuhin ang mga setting ng linya sa pamamagitan ng pagdaragdag ng banayad na anino ng kahon.
- Lakas ng Box Shadow Blur: 80px
- Lakas ng Box Shadow Spread: -24px
- Kulay ng anino: rgba(0,0,0,0.3)
Idagdag ang module ng Contact Form sa column 1
I-activate ang opsyong "Gumawa ng Buongwidth" sa field na Pangalan at email
Ang unang module na kailangan namin sa unang column ng row ay isang Contact Form module. Buksan ang field ng pangalan at email at baguhin ang mga setting ng layout.
- Gawin ang Fullwidth: OO
Item
Pagkatapos ay huwag paganahin ang captcha.
- Gumamit ng Basic Captcha: HINDI
Mga setting ng pindutan
At baguhin ang mga setting ng button.
- Gumamit ng Mga Custom na Estilo Para sa Button: YES
- Kulay ng Teksto ng Pindutan: #ffffff
- Mga Paghinto ng Gradient:
- 50%: #3AA0E3
- 50%: #3491CE
- Uri ng Gradient: Linear
- Gradient na Direksyon: 155 degrees -
- Lapad ng border ng button: 0 pixels
- Radius ng Border ng Button: 10px
- Lakas ng Box Shadow Spread: -2px
- Kulay ng shade: #0a60af
Tingnan din: Divi: Paano i-customize ang basket at mga icon ng paghahanap ng module na "Fullwidth Menu".
Hangganan
Nagdaragdag din kami ng '5px' ng mga bilugan na sulok sa bawat isa sa mga field.
Magdagdag ng Text module sa column 2
Magdagdag ng nilalaman
Sa ikalawang hanay, ang unang modyul na kakailanganin natin ay isang Text module. Sige at maglagay ng ilang nilalaman.
Kulay ng background
Pagkatapos ay baguhin ang kulay ng background.
- Background: rgba(255,255,255,0.13)
Mga setting ng teksto
I-edit din gamit ang mga setting ng teksto.
- Teksto:
- Timbang ng Font: Banayad
- Kulay ng Teksto: #ffffff
- Laki ng Teksto: 15px
- Spacing ng Letter: -0,5px
pagitan
At magdagdag ng custom na padding upang mabigyan ng silid ang module na huminga.
- Padding (Itaas at Ibaba): 12px
- Padding (Kaliwa at Kanan): 10px
Hangganan
Nagdaragdag din kami ng '20px' sa kaliwang itaas at kaliwang sulok sa ibaba. Higit pa rito, magdaragdag kami ng kaliwang hangganan.
- Mga Bilog na Sulok: 20px(Itaas sa Kaliwa at Ibaba sa Kaliwa)
- Kaliwang Border Lapad: 34px
- Kulay ng Kaliwang Border: #edf000
visibility
Upang gawing tumugma ang disenyong ito sa iba't ibang laki ng screen, idi-disable namin ang Text module sa telepono at tablet.
I-clone ang module ng Text nang dalawang beses
Kapag tapos ka nang i-edit ang unang Text module, magpatuloy at i-clone ang module nang dalawang beses.
Baguhin ang mga nilalaman ng dalawang duplicate
Baguhin ang mga nilalaman ng dalawang duplicate sa ibang bagay.
Baguhin ang spacing ng dalawang duplicate
At magdagdag ng tuktok na margin upang lumikha ng espasyo sa pagitan ng bawat isa sa mga module.
- Margin (Itaas): 20px
Baguhin ang hangganan ng dalawang duplicate
Panghuli, palitan ang kulay ng kaliwang hangganan ng bawat isa sa mga duplicate nang paisa-isa.
- Kulay 1: #00faff
- Kulay 2: #00f76f
Tingnan din ang aming artikulo sa Paano lumikha ng isang tumutugon na accordion slider
pagsisiyasat
Bersyon sa desktop
Ngayong napagdaanan na natin ang lahat ng hakbang, tingnan natin ang mga disenyo ng module ng Divi Contact Form sa desktop.
mobile
At narito ang maaari mong asahan mula sa mga disenyo ng module ng Contact Form ng Divi sa mas maliliit na laki ng screen:
I-download ang DIV ngayon!!!
Konklusyon
Sa post na ito, nagbahagi kami ng 3 kahanga-hangang Divi Contact Form na mga disenyo ng module na madali mong magagamit at mababago para sa anumang website na iyong gagawin.
Les mga form Ang mga contact ay isang mahalagang bahagi ng maraming website, kaya mahalagang tiyaking nakumbinsi ng iyong disenyo ang iyong mga bisita na makipag-ugnayan.
Umaasa kami na ang tutorial na ito ay magbibigay inspirasyon sa iyo para sa iyong mga susunod na proyekto ng Divi. Kung mayroon kang anumang mga alalahanin o mungkahi, hanapin kami sa ang seksyon ng mga komento upang talakayin ito.
Maaari ka ring kumonsulta aming mga mapagkukunan, kung kailangan mo ng maraming mga elemento upang maisagawa ang iyong mga proyekto ng paglikha ng mga site sa Internet.
Huwag mag-atubiling kumunsulta din sa aming gabay sa Paglikha ng blog ng WordPress o ang isa sa Divi: ang pinakamahusay na tema ng WordPress sa lahat ng oras.
Ngunit pansamantala, ibahagi ang artikulong ito sa iyong iba't ibang mga social network.
...
