Kailangang pagsamahin ang mga inline na field at module na fullwidth na mga field Makipag-ugnayan sa Form de Divi ?
Le Makipag-ugnay sa form na ay isang mahalagang elemento na isasama sa iyong website kung gusto mong kumuha ng mga email at i-convert ang iyong mga bisita sa mga customer.
Ang modyul Makipag-ugnayan sa Form de Divi ay madaling ma-customize upang lumikha mga form kaakit-akit at mapang-akit na mga contact card para sa lahat ng uri ng mga website. Ang module na ito ay may dalawang opsyon sa pagpapakita na maaaring ilapat sa bawat field ng form: en ligne ou buong lapad.
Sa tutorial na ito, magpapakita kami ng apat na natatanging posibilidad ng layout para sa iyong Makipag-ugnay sa form na Divi gamit ang inline at full-width na mga field.
Magsimula tayo!
pagsisiyasat
Narito ang isang preview ng kung ano ang aming ididisenyo.
Unang layout
Pangalawang layout
Pangatlong layout
Ikaapat na layout
Ano ang kailangan mong makapagsimula
Bago tayo magsimula, i-install at i-aktibo ang tema ng Divi at tiyaking mayroon kang pinakabagong bersyon ng Divi sa iyong website.
Ngayon ay handa ka nang magsimula!
4 na sample na layout para sa module ng Contact Form ng Divi gamit ang mga inline at full-width na field
Piliin ang paunang natukoy na layout
Ang bawat isa sa 4 na template ay binago mula sa layout ng Shoe Repair Contact Page ng Layout Pack ng Pag-aayos ng Sapatos, na makikita mo sa Divi Library.
Magdagdag ng bagong page sa iyong website at bigyan ito ng pamagat, pagkatapos ay piliin ang opsyon Gumamit ng Divi Builder.
Gagamit kami ng pre-made na layout mula sa Divi Library para sa halimbawang ito, kaya pumili Mag-browse ng Mga Layout.
Hanapin at piliin ang layout ng Contact Page sa Pag-aayos ng Sapatos.
Sélectionnez Gamitin ang Layout na Ito upang idagdag ang layout sa iyong pahina.
Handa na kaming magdisenyo ng aming mga halimbawa.
Unang layout
Una, ilipat ang linya na naglalaman ng module Makipag-ugnayan sa Form sa seksyon sa itaas, sa ibaba lamang ng linya na may mga Blurb module. Pagkatapos ay maaari mong tanggalin ang natitirang walang laman na seksyon.
Buksan ang mga setting ng linya at magdagdag ng kaliwa at kanang padding,
- Padding (Kaliwa at Kanan): 15%
Pumili ng mga opsyong tumutugon at magtakda ng padding para sa mobile.
- Padding (Kaliwa at Kanan): 5%
Binago ang layout ng contact form na may mga inline at full-width na field
Para sa layout na ito, gagawa kami ng dalawang magkahiwalay na field para sa pangalan at apelyido.
Buksan ang mga setting ng module ng Contact Form at baguhin ang field ng ID at Pamagat para sa field ng Apelyido sa Pangalan.
Magdagdag ng bagong field sa ibaba ng field ng First Name. Itakda ang ID at Title field sa Pangalan.
Sa mga setting ng field ng pangalan, buksan ang mga setting ng layout at itakda ang Gawing Fullwidth sa No.
- Gawin ang Buong lapad: HINDI
Pagkatapos, sa ilalim ng mga setting ng Makipag-ugnay sa form na, baguhin ang pagkakasunud-sunod ng paksa at telepono upang ang telepono ay nakalista bago ang paksa.
Buksan ang mga setting ng layout ng field ng Paksa at itakda ang field sa buong lapad.
- Gawin ang Fullwidth: OO
Pag-customize ng disenyo ng contact form
Ngayon ay baguhin natin ang ilang mga setting upang makumpleto ang disenyo. Mag-navigate sa tab na Disenyo ng mga setting ng module ng Contact Form.
Una, baguhin ang kulay ng background ng button.
- Background ng Button: #DBC2B3
Magdagdag ng margin sa itaas sa button.
- Margin ng Button (Itaas): 10px
Panghuli, pumunta sa mga setting ng hangganan at magdagdag ng mga bilugan na sulok sa mga field.
- Mga Input na Rounded Corners: 30px
Tingnan din: Divi: Paano magdagdag ng tumutugon na logo sa module na "Fullwidth Menu."
Pangwakas na resulta ng halimbawa 1
Narito ang huling resulta sa desktop at mobile.
Pangalawang halimbawa
Para sa aming pangalawang halimbawa, ililipat namin ang mga Blurb module sa kaliwang bahagi ng page at ilalagay ang contact form sa kanang bahagi ng page. Ilipat ang mga Blurb module sa isang column.
Baguhin ang layout ng row.
Buksan ang mga setting ng disenyo ng linya at i-off Gumamit ng Custom na Gutter Width.
- Gamitin ang Custom na Lapad ng Gutter: HINDI
Magdagdag ng code sa custom na CSS ng pangunahing elemento upang patayong ihanay ang mga module ng Blurb at Contact Form.
align-items:center;
Ngayon ay kailangan nating alisin ang manipis na hangganan sa pagitan ng mga haligi. Buksan ang mga setting ng row, pagkatapos ay buksan ang mga setting ng column 1. Sa ilalim ng tab na Disenyo, pumunta sa mga setting ng hangganan at alisin ang hangganan.
- Kanang Lapad ng Border: 0px
Susunod, buksan ang mga setting ng column 2 at ulitin ang mga hakbang upang alisin ang hangganan.
- Kanang Lapad ng Border: 0px
Itakda ang tekstong "Makipag-ugnay sa Amin" na nakagitna.
Ilipat ang contact form sa kanang column. Tanggalin ang natitirang walang laman na seksyon.
Binago ang layout ng contact form na may mga inline at full-width na field
Ang layout na ito ay magkakaroon din ng dalawang magkahiwalay na field para sa pangalan at apelyido. Buksan ang mga setting ng module ng Contact Form at baguhin ang field ng ID at Pamagat para sa field ng Apelyido sa Pangalan.
Magdagdag ng bagong field sa ibaba ng field ng First Name. Itakda ang ID at Title field sa Pangalan.
Sa mga setting ng field ng pangalan, buksan ang mga setting ng layout at itakda ang Gawing Fullwidth sa No.
- Gawin ang Buong lapad: HINDI
Baguhin ang pagkakasunud-sunod ng mga field ng telepono at paksa upang ang telepono ay mauna sa paksa.
Buksan ang mga setting ng field para sa Email, Telepono, at Paksa, at itakda ang layout sa buong lapad.
- Gawin ang Fullwidth: OO
Pag-customize ng disenyo ng contact form
Buksan ang mga setting ng row, pagkatapos ay buksan ang mga setting ng column 2. Itakda ang kulay ng background.
- Background: #DBC2B3
Sa mga setting ng column 2, pumunta sa tab na Disenyo at magdagdag ng padding.
- Padding (Itaas, Ibaba, Kaliwa at Kanan: 50px
Piliin ang icon ng mobile para baguhin ang mga tumutugon na setting. Itakda ang padding para sa mobile.
- Padding (Itaas, Ibaba, Kaliwa at Kanan): 30px
Pagkatapos ay magdagdag ng anino ng kahon sa column.
Panghuli, buksan ang mga setting ng module ng Contact Form at baguhin ang kulay ng text ng field.
- Kulay ng Teksto ng Mga Patlang: #000000
Pangwakas na resulta ng halimbawa 2
Narito ang huling resulta ng pangalawang layout.
Pangatlong halimbawa
Para sa ikatlong layout, magkakaroon tayo ng contact form sa kaliwa at ang Blurb modules sa kanan. Magsimula tayo sa pagbabago ng istruktura ng column ng row na naglalaman ng mga Blurb module.
Ilipat ang address module sa kanang column.
Susunod, ilipat ang "Contact US" Text module sa kaliwang column, pagkatapos ay tanggalin ang natitirang walang laman na linya.
Ilipat ang Contact Form Module sa kaliwang column, sa ilalim ng "Contact US" Text module. Tanggalin ang natitirang blangkong seksyon.
Buksan ang mga setting ng linya, sa ilalim ng tab na Disenyo at i-off Gumamit ng Custom na Gutter Width
- Gamitin ang Custom na Lapad ng Gutter: HINDI
Magdagdag ng code sa custom na CSS ng pangunahing elemento upang patayong ihanay ang mga module ng Blurb at Contact Form.
align-items:center;
Buksan ang mga setting ng row, pagkatapos ay buksan ang mga setting ng column 1. Sa ilalim ng tab na Disenyo, pumunta sa mga setting ng hangganan at alisin ang hangganan. Ulitin ang mga hakbang upang alisin ang hangganan mula sa column 2.
- Kanang Lapad ng Border: 0px
Pagbabago ng layout ng contact form
Iiwan namin ang mga lapad ng field para sa ikatlong disenyo, gayunpaman, buksan ang mga setting ng contact form at baguhin ang pagkakasunud-sunod ng numero ng telepono at field ng paksa upang ang telepono ay mauna.
Pangwakas na resulta ng halimbawa 3
Narito ang huling resulta ng ikatlong layout.
Basahin din ang: Divi: Paano ipakita ang Fullwidth Header module sa buong screen
Ikaapat na halimbawa
Para sa pang-apat at panghuling layout, ang module ng Contact Form ay nasa kaliwa at ang mga Blurb module sa kanan. Muli, magsisimula tayo sa pamamagitan ng pagbabago sa istruktura ng column ng row na naglalaman ng mga Blurb module.
Ilipat ang address module sa kanang column.
Susunod, ilipat ang module ng Contact Form sa kaliwang column. Tanggalin ang natitirang blangkong seksyon.
Buksan ang mga setting ng linya, sa tab na Disenyo at huwag paganahin Gumamit ng Custom na Gutter Width.
- Gamitin ang Custom na Lapad ng Gutter: HINDI
Magdagdag ng code sa custom na CSS ng pangunahing elemento upang patayong ihanay ang mga module ng Blurb at Contact Form.
align-items:center;
Buksan ang mga setting ng row, pagkatapos ay buksan ang mga setting ng column 1. Sa ilalim ng tab na Disenyo, pumunta sa mga setting ng hangganan at alisin ang hangganan.
- Kanang Lapad ng Border: 0px
Susunod, buksan ang mga setting ng column 2 at ulitin ang mga hakbang upang alisin ang hangganan.
- Kanang Lapad ng Border: 0px
Buksan ang mga setting ng Text module para sa text na "Makipag-ugnayan sa amin" at igitna ang text.
- Paghahanay ng Teksto: Nakagitna
Binago ang layout ng contact form na may mga inline at full-width na field
Para sa disenyong ito, magiging full-width ang lahat ng aming field. Buksan ang mga setting ng module ng Contact Form, pagkatapos ay buksan ang mga setting para sa bawat field. Sa tab na Disenyo, piliin Kaayusan at tukuyin Gumawa ng Fullwidth sur OO.
Kapag nagawa mo na ang bawat full-width na field, dapat ganito ang hitsura ng form.
Ngayon ay baguhin ang ID at Title field para sa Apelyido na field sa First Name.
Magdagdag ng bagong field sa ibaba ng field ng First Name. Itakda ang ID at Title field sa Pangalan.
Baguhin ang pagkakasunud-sunod ng mga field ng telepono at paksa upang ang telepono ay mauna sa paksa.
Pag-customize sa disenyo ng module ng Contact Form
Sa mga setting ng module, sa tab na Disenyo, itakda ang kulay ng text ng field sa itim.
- Kulay ng Teksto ng Mga Patlang: #000000
Buksan ang mga setting ng seksyon at magdagdag ng kulay ng background.
- Background: #DBC2B3
Panghuli, magdagdag ng background mask.
- Mask sa Background: Arch
- Pagbabago ng maskara: pahalang
Upang gawing mas mahusay ang background mask sa mobile, gamitin natin ang mga setting ng tumutugon.
- Mask Transform (Telepono): pahalang at pag-ikot
Pangwakas na resulta
Narito ang huling resulta ng ikaapat na layout.
Pangwakas na mga resulta
Tingnan natin muli ang lahat ng ating mga halimbawa.
Unang halimbawa
Pangalawang halimbawa
Pangatlong halimbawa
Ikaapat na halimbawa
I-download ang DIV ngayon!!!
Konklusyon
Ang pagkakaroon ng kaakit-akit na form sa pakikipag-ugnayan ay maaaring tumaas ang iyong mga conversion at payagan ang iyong mga bisita na direktang kumonekta sa iyo.
Gaya ng ipinakita namin sa artikulong ito, maaari mong gamitin ang inline at fullwidth na mga opsyon sa field upang lumikha ng iba't ibang hitsura at layout para sa iyong form, at ang built-in na mga pagpipilian sa disenyo ng Divi ay nagbibigay-daan sa iyo upang lumikha ng mga natatanging disenyo at kaakit-akit upang matulungan ang form na makita.
Sana ang diskarteng ito ay magdaragdag ng isa pang kapaki-pakinabang na kasanayan sa disenyo para sa mga proyekto sa hinaharap.
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.
...
