Divi'de Duyarlı Bir İletişim Formu Tasarlamak için vw ve vh Uzunluk Birimleri Nasıl Kullanılır

Web formları, web sitenizin başarısı için son derece önemlidir. Bu, çoğu çevrimiçi işletmenin e-posta listeleri oluşturarak ve potansiyel alıcılarla iletişim kurarak para kazanmak için e-posta tercihleri ​​ve iletişim formları gibi formlara bağlı olduğunu düşünmek mantıklıdır. Ve bu günlerde, tüm tarayıcılarda ve mobil cihazlarda harika görünecek duyarlı formlar tasarladığımızdan emin olmamız gerekiyor.

Bu derste, Divi'de vw ve vh uzunluk birimlerini kullanarak nasıl duyarlı bir iletişim formu tasarlayacağınızı göstereceğim. Tarayıcınızın genişliğine ve yüksekliğine göre ayarlanacak giriş alanlarının ve düğmelerin nasıl boyutlandırılacağını ve boşluk bırakılacağını ele alacağız. Bu, cep telefonlarında yatay görünüm için bile tüm cihazlarda formun görünürlüğünü en üst düzeye çıkarmanıza olanak tanır.

Bunu yapmak için, form metnini, alanları ve düğmeleri kolaylıkla özelleştirmenize olanak tanıyan Divi'nin yerleşik ayarlarını kullanacağız.

Başlayalım.

Gizlice Bakış

masaüstü

Tablet

Telefon (portre)

Telefon (manzara)

Duyarlı İletişim Formu Düzenini ÜCRETSİZ olarak indirin (Duyarlı E-posta Tercih Formu da içerir!)

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdaki kuruluma sahip olmanız gerekir:

1. Divi Teması yüklü ve etkin
2. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
3. En Sevdiğiniz İçecek (henüz kahvenizi içmediyseniz isteğe bağlı)

Bundan sonra, Divi'de duyarlı formları oluşturmaya başlamak için boş bir tuvaliniz olacak.

Duyarlı tasarım için neden vw ve vh uzunluk birimleri kullanılmalı?

Uzunluk birimleri, web sayfanızdaki öğeleri boyutlandırmak ve boşluk bırakmak için gereken değerlerdir. Muhtemelen web tasarımında kullanılan en yaygın uzunluk birimleri piksel ve yüzdelerdir. Örneğin, bir piksel metni boyutlandırmak için kullanılan ortak bir uzunluk birimidir, em uzunluk birimi yaygın olarak satır yüksekliği için kullanılır ve bir yüzde uzunluk birimi, duyarlı tasarım için öğelerin aralığı ve boyutlandırılması için yaygın olarak kullanılır. Aslında, Divi öğeleri (modüller, satırlar, bölümler) için varsayılan uzunluk birimi değerleri, bu ortak uzunluk birimleri kullanılarak oluşturulur.

Uzunluk birimleri ya mutlak (diğer öğelerin boyutu ne olursa olsun aynı boyutta kalır) veya göreceli (diğer öğelerin boyutuna bağlı olarak değişiklik/ölçek) olacaktır. Örneğin, bir piksel mutlak bir uzunluk birimidir. Bu nedenle, bir metin gövdesi 16 piksel yazı tipi boyutuna sahipse, kapsayıcı boyutu ne olursa olsun metin 16 piksel olarak kalacaktır. Ancak yüzde ve em her ikisi de göreli uzunluk birimleridir. Bu nedenle, em değerine sahip bir satır yüksekliği, öğenin metin boyutu değiştikçe ayarlanacaktır. Yüzde aynı zamanda göreli bir uzunluk birimi olduğundan, genişliği %80 olan bir satır, kabının (veya bölümünün) %80'i olacaktır.

vw ve vh uzunluk birimleri de göreceli uzunluk birimleridir, ancak öğelerin ana kapsayıcısına göreli olmak yerine, gerçek tarayıcı görünüm alanına göredir. Görüntü alanı genişliği (vw) tarayıcının genişliğine göredir ve görüntü alanı yüksekliği (vh) tarayıcının yüksekliğine göredir. Görünüm alanına göre ölçekleneceğinden, bu uzunluk birimlerini kullanmak, tasarımınızı tüm tarayıcılarda tutarlı tutmanın bir yoludur. Bu, her bir öğeye her cihazda farklı bir boyut veya duyarlı kesme noktası verme konusunda çok fazla endişelenmenize gerek kalmadan her öğenin boyutunu daha öngörülebilir ve yönetimi kolay hale getirir. Vh uzunluk birimi, dikey ve yatay görünümde telefonun görüntü alanının yüksekliğini hesaba katacağından özellikle cep telefonu ekranları için kullanışlıdır.

Bu teknik, masaüstünde, kullanıcı tarayıcı genişliğini ayarladıkça boyut olarak sorunsuz bir şekilde ölçeklenecek olan tam genişlikte geniş ekranlara bağlı tasarımlar için en iyi sonucu verir.

Uzunluk birimlerinin daha ayrıntılı bir açıklaması için, Divi'de uzunluk birimlerinin kullanımına ilişkin bu kılavuza bakın.

Bölüm 1: Divi'de Duyarlı İletişim Formu Tasarlama

Bölüm ve Satır Oluşturma

Tek sütunlu bir satırla normal bir bölüm oluşturun. Herhangi bir modül eklemeden önce bölüm ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Gradyanı Sol Renk: #fd7b5b
Sağ Arka Plan Gradyanı Renk: #a92200

Ardından satır ayarlarını açın ve arka plan gradyanı verin.

Arka Plan Gradyanı Sol Renk: #ffdb8b
Sağ Arka Plan Gradyanı Renk: #fdb15b

Ardından, tarayıcı ile ölçeklenmesi için vw uzunluk birimini kullanarak satırı boyutlandıralım.

Genişlik: 66vw (masaüstü), 66vw (tablet), %100 (telefon)
Maksimum Genişlik: 66vw (masaüstü), 66vw (tablet), %100 (telefon)
Min Yükseklik: 100vh (telefon)

Dolgu: 0 piksel üst, 0 piksel alt

66vw değeri, satırın tarayıcı görünüm alanının yaklaşık üçte ikisi genişliğinde kalmasını sağlayacaktır. Telefon ekranındaki 100vh değeri, satır yüksekliğinin telefon görüntü alanının yüksekliğine eşit olmasını sağlayacaktır (isteğe bağlı, ancak telefonlarda satır içeriği alanının en iyi şekilde görüntülenmesi için hoş bir dokunuş).

Satır genişliğinin %100 (100vw değil) olarak ayarlandığına dikkat edin. Bunun nedeni, siz sayfayı aşağı kaydırırken 100vw'nin kaydırma çubuğu genişliğini hesaba katmamasıdır. Bu nedenle, tam genişlikte ekranlar için yüzde kullanmak her zaman daha iyidir.

İletişim Formu Oluşturma

Satırımız yerindeyken artık İletişim Formu Modülünü satıra ekleyebiliriz.

İletişim formu eklendikten sonra içeriği bir başlık olarak güncelleyin ve captcha'yı devre dışı bırakın.

Başlık: Bize Ulaşın
Captcha'yı Göster: HAYIR

Alanları Tam Genişletme

Bu tasarım için tam genişlikte alanlar kullanacağım. Bu, alanlar arasında tutarlı boşluklar eklememe izin verecek (çünkü hiçbir kayan nokta kullanılmadığından) ve daha sonra benzersiz bir tasarım için alanların her birine özel bir genişlik vermeme izin verecek. Şimdilik, hem ad hem de e-posta alanları için ayarları açın ve “Tam Genişlik Yap” seçeneğini “EVET” olarak ayarlayın.

Duyarlı Tasarım Alanlarını Optimize Etme

Şimdi iletişim formu ayarlarına geri dönün. Artık vw ve vh uzunluk birimlerini kullanarak form alanlarını özelleştirebiliriz. Aşağıdakileri güncelleyin:

Alan Metni Rengi: #333333
Alan Marjı (masaüstü ve tablet): 2vw üst, 2vw alt
Alan Marjı (telefon): 2vh üst, 2vh alt

Alan Doldurma (masaüstü ve tablet): 1vw üst, 1vw alt, 2vw sol, 2vw sağ
Alan Doldurma (telefon): 2vh üst, 2vh alt, 2vh sol, 2vh sağ

Alanlar Metin Boyutu: 2.5vw (masaüstü), 4vh (telefon)

Not: Telefon için 4vh'yi kullanmak, metin boyutu ölçeğinizi cep telefonunuzun ekranının yüksekliğiyle sağlar ve bu, formu yatay telefon ekranında (telefonu yana çevirerek) görüntülemenize yardımcı olur. Ancak daha tutarlı bir metin boyutu istiyorsanız, telefon ekranındaki alan metni boyutu için bir piksel uzunluğu birimi kullanmak isteyebilirsiniz.

Başlık Metnini Tasarlama

Başlık metni için aşağıdakileri özelleştirin:

Başlık Başlık Düzeyi: H2
Başlık Yazı Tipi: Karla
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Metin Rengi: #f56845
Başlık Metin Boyutu: 7vw (masaüstü), 8vh (telefon)
Başlık Harf Aralığı: 1vw
Başlık Satırı Yüksekliği: 0.6em

Duyarlı Tasarım için Düğmeyi Optimize Etme

İletişim formu düğmesi için, daha önce tasarladığımız alanlara benzer boşluk ve metin boyutu ekleyeceğiz.

Özel düğme stillerini kullanmak ve aşağıdakileri güncellemek için tıklayın:

Düğme Metin Boyutu: 2.5vw (masaüstü), 4vh (telefon)
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #333333
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 0px
Düğme Yazı Tipi: Montserrat
Düğme Kenar Boşluğu (masaüstü): 1vw üst, 0px sol, 0px sağ
Düğme Marjı (telefon): 1vh üst
Düğme Dolgusu (masaüstü): 3vw üst, 3vw alt
Düğme Dolgusu (telefon): 3vh üst, 3vh alt

Düğme Kutusu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Yatay Konumu: 2em
Kutu Gölge Dikey Konumu: 0.4em
Gölge Rengi: rgba(245,104,69,0.29)

İletişim Formuna Boşluk Ekle

Ardından, vw uzunluk birimini kullanarak iletişim formuna biraz dolgu ve form alanlarına aşağıdaki gibi bir kutu gölgesi ekleyin:

Dolgu (masaüstü): 3vw üst, 3vw alt, 5vw sol, 5vw sağ
Dolgu (telefon): 5vh üst, 5vh alt, 3vh sol, 3vh sağ

Düğme Kutusu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Yatay Konumu: 2em
Kutu Gölge Dikey Konumu: 0.4em
Gölge Rengi: rgba(245,104,69,0.29)

Sonuç Şimdiye Kadar

masaüstü

Tablet

Telefon (portre)

Telefon (manzara)

Son dokunuşlar

Form Alanlarının Genişliklerini Ayarlama

Benzersiz bir tasarım seçeneği için alanların her birinin genişliğini özelleştirebilirsiniz. Ad alanı ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin:

Genişlik: %50 (masaüstü), %100 (telefon)

Ardından e-posta alanı ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin:

Genişlik: %65 (masaüstü), %100 (telefon)

Ardından, mesaj alanı ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin:

Genişlik: %80 (masaüstü), %100 (telefon)

Düğmeyi Tam Genişlikte Yapmak

Duyarlı iletişim formu düğmesini tam genişlikte yapmak için öncelikle İletişim Düğmesi giriş kutusuna aşağıdaki özel CSS'yi eklememiz gerekir:

width: 97%;

Ardından sayfa ayarlarını açın ve aşağıdaki özel css'yi ekleyin:

.et_contact_bottom_container {
  float: none;
}

Son tasarım

Artık işimiz bittiğinde, duyarlı formumuzun nihai sonucuna göz atın. Masaüstünde ve tablette tarayıcının genişliğini ayarlarken iletişim formunun nasıl ölçeklendiğine ve ayrıca cep telefonunda görünümün yüksekliğini ayarlarken tasarımın nasıl ayarlandığına dikkat edin.

masaüstü

Tablet

Telefon (portre)

Telefon (manzara)

E-posta Optin Formları için Aynı Tasarım Ayarlarını Kullanın

Duyarlı bir e-posta tercih formu tasarlamak için aynı vw ve vh uzunluk birimlerini kullanabilirsiniz. İşte bu yayında bulunan ücretsiz indirmeye dahil olan bir e-posta tercih formu tasarımının ekran görüntüsü.

masaüstü

Tablet

Telefon (portre)

Telefon (manzara)

Son düşünceler

vw ve vh uzunluk birimlerini kullanarak, tüm tarayıcı boyutlarında ve mobil cihazlarda harika görünen duyarlı bir iletişim formu (veya herhangi bir Divi formu) oluşturabiliriz. Duyarlı tasarım, siz tarayıcı genişliğini ayarlarken form öğelerini sorunsuz bir şekilde ölçeklendirir. Ve telefon ekranında vh uzunluk birimini kullanırsanız, formu dikey ve yatay telefon ekranı için de optimize edebilirsiniz.

Duyarlı bir iletişim formu ve e-posta seçeneği için çalışan bir örnek almak için ücretsiz indirmeye göz atmayı unutmayın.

Umarım, bu gönderi size bir sonraki projeniz için güzel, duyarlı formlar oluşturma konusunda birkaç ipucu verebilir.

Yorumlarda sizden haber bekliyorum.

Şerefe!