Divi’de duyarlı bir iletişim formu tasarlamak için uzun bir VW ve VH ünitesi nasıl kullanılır
Web formları web sitenizin başarısı için çok önemlidir. Bu, çoğu çevrimiçi işletmenin e -postaların bir listesini yaparak ve potansiyel alıcılarla iletişim kurarak para kazanmak için optin e -posta ve iletişim formları gibi formlara bağlı olduğunu düşünmek mantıklıdır. Ve son zamanlarda tüm tarayıcılarda ve mobil cihazlarda iyi görünecek duyarlı formlar tasarladığımızdan emin olmalıyız. Bu öğreticide, Divi’deki VW ve VH uzunluk birimlerini kullanarak nasıl duyarlı bir iletişim formu tasarlayacağınızı göstereceğim. Tarlanın ve tarayıcınızın genişliğine ve yüksekliğine göre ayarlanacak düğmelerin boyut ve giriş odasının nasıl tartışılacağız. Bu, cep telefonundaki peyzaj ekranı için bile formun tüm cihazlarda görünürlüğünü en üst düzeye çıkarmanıza olanak tanır.
Bunu yapmak için, Divi’nin metni, alanları ve düğmeleri kolayca ayarlamanızı sağlayan varsayılan ayarlarını kullanacağız. Başlayalım. Gizlice göz atma
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdaki ayarlara sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
En sevdiğiniz içecek (kahve içmediğiniz sürece isteğe bağlı)
Bundan sonra, Divi’de duyarlı formlar oluşturmaya başlamak için boş bir tuvaliniz olacak. Birim uzunluğunun duyarlı tasarımı için neden VW ve VH uzun ünitesini kullanın, web sayfanızdaki öğenin boyutu ve alanı için gereken değerdir. Belki de web tasarımında en sık kullanılan uzun birimler piksel ve yüzdedir. Örneğin, pikseller metni ölçmek için kullanılan ortak uzunluk birimidir, EM uzunluğu birimleri genellikle çizgi yüksekliği için kullanılır ve uzun yüzde birimleri genellikle süspansiyon elemanları ve boyutları duyarlı tasarım için kullanılır. Aslında, bu genel uzunluk birimi kullanılarak divi öğeleri (modüller, satırlar, bölümler) için varsayılan uzunluk birim değeri yapılır.
Birim uzunluğu mutlak (diğer elemanların boyutu ne olursa olsun aynı boyutta sabit) veya akraba olacaktır (değişiklik/ölçek diğer elemanların boyutuna bağlıdır). Örneğin, pikseller mutlak uzunluk birimleridir. Dolayısıyla, metin gövdesi 16px yazı tipi boyutuna sahipse, kabın boyutu ne olursa olsun metin hala 16px olacaktır. Ancak yüzde ve EM’nin her ikisi de göreceli uzun birimlerdir. Dolayısıyla, EM değeri olan çizginin yüksekliği, öğe metni boyutu değiştiğinde ayarlanır. Yüzde aynı zamanda göreceli bir uzunluk birimi olduğu için,% 80 genişliğe sahip satırlar, kabın (veya kısım)% 80’i olacaktır. VW ve VH uzunluk birimleri de nispi uzunluk birimidir, ancak üst elemanlara göre yerine kapsayıcı, bu ünite gerçek görünüm portu tarayıcısına göre. ViewPort genişliği (VW) tarayıcının genişliğine göre ve görünümün (VH) yüksekliği tarayıcının yüksekliğine göredir. Bu uzun birimi kullanmak, tasarımınızı tüm tarayıcılarda tutarlı tutmanın bir yoludur, çünkü ölçek görünüm alanına ayarlanacaktır. Bu, her bir cihazda her bir cihazda farklı boyut elemanını veya kesme noktası yanıt verebilmek için çok fazla endişelenmeden her bir öğenin boyutunu daha öngörülebilir ve kolayca yönetilir. VH uzun birimi, cep telefonunun görünümü için çok kullanışlıdır, çünkü bir portre ve peyzaj ekranındaki mobil görünüm alanının yüksekliğini dikkate alacaktır.
Bu teknik, kullanıcı tarayıcının genişliğini ayarladığında, ölçeği düzgün bir şekilde ayarlanacak olan masaüstünde büyük bir tam genişliğe bağlı bir tasarım için en iyi şekilde çalışıyor. Uzunluk biriminin daha ayrıntılı bir açıklaması için, Divi’de birim uzunluğunun kullanımı hakkında bu kılavuza bakın. Bölüm 1: Divi’de duyarlı bir temas formu tasarlamak, bir sütunla bir satırla normal bölüm için bölümü ve satırı yapar. Herhangi bir modül eklemeden önce, bölüm ayarlarını aşağıdaki gibi güncelleyin: Sol renk gradyan arka plan: #fd7b5b arka plan gradyanı sağ renk: #a92200 Daha sonra satır ayarlarını açın ve arka plan gradyanını verin. Sol renk gradyan arka plan: #ffdb8b arka plan gradyanı sağ renk: #fdb15b
Ardından, bir tarayıcı ile dağılmış olacak şekilde VW uzunluğu birimini kullanarak çizgiyi ölçelim. Genişlik: 66VW (masaüstü), 66VW (tablet),% 100 (cep telefonu) maksimum genişlik: 66VW (masaüstü), 66VW (tablet),% 100 (cep telefonu) yükseklik min: 100VH (telefon) dolgu: 0px üst, 0px üst, değeri değer 66VW, hattın ViewPort tarayıcısının genişliğinin üçte ikisi arasında kalmasını sağlayacaktır. Mobil ekrandaki 100VH değeri, satırın yüksekliğinin mobil görünüm alanının yüksekliği ile aynı olmasını sağlayacaktır (isteğe bağlı, ancak cep telefonundaki hat içeriğinin optimum görüntü alanı için iyi bir dokunuş).
Sıra genişliğinin% 100 olarak ayarlandığını unutmayın (100VW değil). Bunun nedeni, 100VW’nin sayfayı aşağı kaydırdığınızda kaydırmaların genişliğini dikkate almamasıdır. Bu nedenle, tam geniş bir görünüm için bir yüzdeyi kullanmak her zaman daha iyidir. Bir temas formu oluşturma noktamızda yerinde, artık hatta bir iletişim formu modülü ekleyebiliriz. İletişim formu eklendikten sonra, içeriği başlık ile güncelleyin ve Captcha’yı devre dışı bırakın. Başlık: Bize Ulaşın Captcha: Bu tasarım için tam geniş alanlar yapmamak, tam geniş alanlar kullanacağım. Bu, alanlar arasında tutarlı bir mesafe eklememe izin verecek (çünkü şamandıra kullanılmadığı için) ve bu, daha sonra benzersiz bir tasarım için her alan için özel bir genişlik sağlamamı sağlayacaktır. Şimdilik, adın ve e -postanın adı için ayarları açın ve “seçeneği” tam geniş “olarak” Evet “olarak ayarlayın.
Alanın duyarlı tasarım için optimize edilmesi artık iletişim formu ayarlarına geri döndü. Şimdi alanları VW ve VH uzun birimlerini kullanarak ayarlayabiliriz. Aşağıdakileri GÜNCELLE: Renk Metin alanı: #333333 Marj Alanı (Masaüstü ve Tablet): 2VW TOP, 2VW Alt Marj Alanı (Telefon): 2VH üst, 2VH alt dolgu alanları (masaüstü ve tablet): 1VW üst, 1VW Aşağıda, 2VW sol , 2vw sol, 2vw sol, 2vw sol, 2vw sol, 2vw sol, 2vw sol, 2vw sağ dolgu alanları (telefon): 2VH üst, 2vh taban, 2VH sol, 2vh sağ alan metin boyutu: 2.5vw (masaüstü) , 4VH (Telefon) NOT: Telefon için 4VH kullanma, metninizin ölçeğini cep telefonu ekranının yüksekliğiyle, peyzaj telefon ekranındaki formu görmeye yardımcı olacak (telefonu yana çevirecek). Ancak daha tutarlı bir metin boyutu istiyorsanız, mobil ekrandaki düzlem metninin metni için piksel uzunluğu birimini kullanmak isteyebilirsiniz. Başlık Metnini Tasarlama Başlık Metni, Başlık Ayarla: Başlık Seviyesi: H2 Yazı Tipi Başlık: Karla Heavy Yazı Tipi Başlık: Renk Kalınlığı Metin Başlık: #F56845 Metin Başlık Boyutu: 7VW (Desktop), 8VH (Telefon) Uzay Mektubu Başlık: 1VW Yüksek Satır Başlığı: 0.6em
Telefon (Peyzaj)
Optin e -posta formları için aynı tasarım ayarlarını kullanın, duyarlı bir e -posta optin formu da tasarlamak için aynı VW ve VH uzun ünitesini kullanabilirsiniz. Aşağıda, bu yazıda bulunan Ücretsiz İndir’de yer alan Optin e -posta formu tasarımının bir ekran görüntüsüdür. Masaüstü Tablet Telefon (portre) Telefon (Peyzaj)
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdaki ayarlara sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
En sevdiğiniz içecek (kahve içmediğiniz sürece isteğe bağlı)
Bundan sonra, Divi’de duyarlı formlar oluşturmaya başlamak için boş bir tuvaliniz olacak. Birim uzunluğunun duyarlı tasarımı için neden VW ve VH uzun ünitesini kullanın, web sayfanızdaki öğenin boyutu ve alanı için gereken değerdir. Belki de web tasarımında en sık kullanılan uzun birimler piksel ve yüzdedir. Örneğin, pikseller metni ölçmek için kullanılan ortak uzunluk birimidir, EM uzunluğu birimleri genellikle çizgi yüksekliği için kullanılır ve uzun yüzde birimleri genellikle süspansiyon elemanları ve boyutları duyarlı tasarım için kullanılır. Aslında, bu genel uzunluk birimi kullanılarak divi öğeleri (modüller, satırlar, bölümler) için varsayılan uzunluk birim değeri yapılır.
Birim uzunluğu mutlak (diğer elemanların boyutu ne olursa olsun aynı boyutta sabit) veya akraba olacaktır (değişiklik/ölçek diğer elemanların boyutuna bağlıdır). Örneğin, pikseller mutlak uzunluk birimleridir. Dolayısıyla, metin gövdesi 16px yazı tipi boyutuna sahipse, kabın boyutu ne olursa olsun metin hala 16px olacaktır. Ancak yüzde ve EM’nin her ikisi de göreceli uzun birimlerdir. Dolayısıyla, EM değeri olan çizginin yüksekliği, öğe metni boyutu değiştiğinde ayarlanır. Yüzde aynı zamanda göreceli bir uzunluk birimi olduğu için,% 80 genişliğe sahip satırlar, kabın (veya kısım)% 80’i olacaktır. VW ve VH uzunluk birimleri de nispi uzunluk birimidir, ancak üst elemanlara göre yerine kapsayıcı, bu ünite gerçek görünüm portu tarayıcısına göre. ViewPort genişliği (VW) tarayıcının genişliğine göre ve görünümün (VH) yüksekliği tarayıcının yüksekliğine göredir. Bu uzun birimi kullanmak, tasarımınızı tüm tarayıcılarda tutarlı tutmanın bir yoludur, çünkü ölçek görünüm alanına ayarlanacaktır. Bu, her bir cihazda her bir cihazda farklı boyut elemanını veya kesme noktası yanıt verebilmek için çok fazla endişelenmeden her bir öğenin boyutunu daha öngörülebilir ve kolayca yönetilir. VH uzun birimi, cep telefonunun görünümü için çok kullanışlıdır, çünkü bir portre ve peyzaj ekranındaki mobil görünüm alanının yüksekliğini dikkate alacaktır.
Bu teknik, kullanıcı tarayıcının genişliğini ayarladığında, ölçeği düzgün bir şekilde ayarlanacak olan masaüstünde büyük bir tam genişliğe bağlı bir tasarım için en iyi şekilde çalışıyor. Uzunluk biriminin daha ayrıntılı bir açıklaması için, Divi’de birim uzunluğunun kullanımı hakkında bu kılavuza bakın. Bölüm 1: Divi’de duyarlı bir temas formu tasarlamak, bir sütunla bir satırla normal bölüm için bölümü ve satırı yapar. Herhangi bir modül eklemeden önce, bölüm ayarlarını aşağıdaki gibi güncelleyin: Sol renk gradyan arka plan: #fd7b5b arka plan gradyanı sağ renk: #a92200 Daha sonra satır ayarlarını açın ve arka plan gradyanını verin. Sol renk gradyan arka plan: #ffdb8b arka plan gradyanı sağ renk: #fdb15b
Ardından, bir tarayıcı ile dağılmış olacak şekilde VW uzunluğu birimini kullanarak çizgiyi ölçelim. Genişlik: 66VW (masaüstü), 66VW (tablet),% 100 (cep telefonu) maksimum genişlik: 66VW (masaüstü), 66VW (tablet),% 100 (cep telefonu) yükseklik min: 100VH (telefon) dolgu: 0px üst, 0px üst, değeri değer 66VW, hattın ViewPort tarayıcısının genişliğinin üçte ikisi arasında kalmasını sağlayacaktır. Mobil ekrandaki 100VH değeri, satırın yüksekliğinin mobil görünüm alanının yüksekliği ile aynı olmasını sağlayacaktır (isteğe bağlı, ancak cep telefonundaki hat içeriğinin optimum görüntü alanı için iyi bir dokunuş).
Sıra genişliğinin% 100 olarak ayarlandığını unutmayın (100VW değil). Bunun nedeni, 100VW’nin sayfayı aşağı kaydırdığınızda kaydırmaların genişliğini dikkate almamasıdır. Bu nedenle, tam geniş bir görünüm için bir yüzdeyi kullanmak her zaman daha iyidir. Bir temas formu oluşturma noktamızda yerinde, artık hatta bir iletişim formu modülü ekleyebiliriz. İletişim formu eklendikten sonra, içeriği başlık ile güncelleyin ve Captcha’yı devre dışı bırakın. Başlık: Bize Ulaşın Captcha: Bu tasarım için tam geniş alanlar yapmamak, tam geniş alanlar kullanacağım. Bu, alanlar arasında tutarlı bir mesafe eklememe izin verecek (çünkü şamandıra kullanılmadığı için) ve bu, daha sonra benzersiz bir tasarım için her alan için özel bir genişlik sağlamamı sağlayacaktır. Şimdilik, adın ve e -postanın adı için ayarları açın ve “seçeneği” tam geniş “olarak” Evet “olarak ayarlayın.
Alanın duyarlı tasarım için optimize edilmesi artık iletişim formu ayarlarına geri döndü. Şimdi alanları VW ve VH uzun birimlerini kullanarak ayarlayabiliriz. Aşağıdakileri GÜNCELLE: Renk Metin alanı: #333333 Marj Alanı (Masaüstü ve Tablet): 2VW TOP, 2VW Alt Marj Alanı (Telefon): 2VH üst, 2VH alt dolgu alanları (masaüstü ve tablet): 1VW üst, 1VW Aşağıda, 2VW sol , 2vw sol, 2vw sol, 2vw sol, 2vw sol, 2vw sol, 2vw sol, 2vw sağ dolgu alanları (telefon): 2VH üst, 2vh taban, 2VH sol, 2vh sağ alan metin boyutu: 2.5vw (masaüstü) , 4VH (Telefon) NOT: Telefon için 4VH kullanma, metninizin ölçeğini cep telefonu ekranının yüksekliğiyle, peyzaj telefon ekranındaki formu görmeye yardımcı olacak (telefonu yana çevirecek). Ancak daha tutarlı bir metin boyutu istiyorsanız, mobil ekrandaki düzlem metninin metni için piksel uzunluğu birimini kullanmak isteyebilirsiniz. Başlık Metnini Tasarlama Başlık Metni, Başlık Ayarla: Başlık Seviyesi: H2 Yazı Tipi Başlık: Karla Heavy Yazı Tipi Başlık: Renk Kalınlığı Metin Başlık: #F56845 Metin Başlık Boyutu: 7VW (Desktop), 8VH (Telefon) Uzay Mektubu Başlık: 1VW Yüksek Satır Başlığı: 0.6em
Kontak formu düğmesi için Duyarlı Tasarım için düğmeyi optimize ederek, daha önce tasarladığımız alana benzer boşluklar ve metin boyutları ekleyeceğiz. Aşağıdaki özel düğme stilini kullanmak için tıklayın: Metin Boyutu Düğmesi: 2.5VW (Masaüstü), 4VH (Telefon) Metin Renk Düğmesi: #FFFFFF Renk Arka Plan Anahtar Düğmesi: #333333 Sınır Genişliği: 0px Yasavat Yasağı Yasağı Düğmesi: 0PX Yasavat Yasağı Düğmesi: Montserrat Marj Düğmesi (Masaüstü): 1VW üst, 0px sol, 0px sağ kenar boşluğu düğmesi (Telefon): 1VH Üst Düzenleme Düğmesi: 3VW üst, 3VW Alt Dolgu Düğmesi (Telefon): 3VH üst, 3VH Altında Yatay Ekran Gölge Kutusu: 2EM dikey konum Gölge Kutusu: 0.4EM Gölge Renk: RGBA (245,104,69.0.29)
Bir sonraki kontak formuna boşluk ekleyin, VW uzunluğu birimini ve kutunun gölgesini kullanarak birkaç dolgu temas formu ekleyin, formun formuna aşağıdaki gibi: 3VW üst, 3VW alt, 5VW sol, 5VW sağ Dolgu (Telefon): 5vh yukarıda, 5vh aşağıda, 3vh sol, 3vh sağ gölge kutusu düğmesi: bkz. Ekran Yatay Konum Gölge Kutusu: 2EM Dikey Konum Gölge Kutusu: 0.4EM Gölge Renk: RGBA (245,104,69.0.29) Şimdiye kadarki sonuçlar masaüstü Tablet Telefon (portre) Telefon (Peyzaj) Son dokunuş, benzersiz bir tasarım seçeneği için alanların genişliğini ayarlar, her alanın genişliğini ayarlayabilirsiniz. Ad ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin: Genişlik:% 50 (masaüstü),% 100 (cep telefonu) Ardından e -posta ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin: Genişlik:% 65 (masaüstü),% 100 (cep telefonu) Daha sonra, mesaj alanı ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin: Genişlik:% 80 (Masaüstü),% 100 (mobil) Tam genişliğe sahip duyarlı bir iletişim formu düğmesi yapmak için tam genişlik düğmesi yapın, ilk önce eklememiz gerekiyor Giriş Kutusu İletişim düğmesine özel CSS’yi takip edin: Genişlik:%97; Ardından sayfa ayarlarını açın ve aşağıdaki özel CSS’yi ekleyin: .et_contact_bottom_container { Şamandıra: yok; } Son Tasarım Şimdi bittikten sonra, duyarlı formumuzun nihai sonucunu görün. Masaüstü ve tablet üzerindeki tarayıcının genişliğini ayarlarken Kontak Formu Ölçeğinin nasıl ve ayrıca cep telefonundaki görünümün yüksekliğini ayarlarken nasıl tasarlanacağına dikkat edin. Masaüstü Tablet Telefon (portre)Telefon (Peyzaj)
Optin e -posta formları için aynı tasarım ayarlarını kullanın, duyarlı bir e -posta optin formu da tasarlamak için aynı VW ve VH uzun ünitesini kullanabilirsiniz. Aşağıda, bu yazıda bulunan Ücretsiz İndir’de yer alan Optin e -posta formu tasarımının bir ekran görüntüsüdür. Masaüstü Tablet Telefon (portre) Telefon (Peyzaj)
