Divi ile bir tasarımda hedeflenen bazı iletişim formları yapın
Web sitenizdeki iletişim formunu görüntüleme şekliniz, dönüşüm seviyesini artırmaya kesinlikle yardımcı olabilir. Güzel ve kullanıcı dostu bir iletişim formu oluşturmanın yanı sıra, daha hedefli bir şekilde de yaklaşabilirsiniz. Bu yazıda, ziyaretçilerinizin ilgisini çeken hizmetlere bağlı olarak görünen çeşitli iletişim formlarına sahip bir tasarımın nasıl oluşturulacağını göstereceğiz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Hücresel Hedeflenen iletişim formunun düzenini ücretsiz indirin Ücretsiz, ücretsiz hedef iletişim formunun düzenine koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketine erişin! Düzeni sayfanıza yükledikten sonra, üzerinde çalıştığınız sayfaya CSS kodunu eklemeniz gerekir. CSS kodunu bu öğreticinin sonunda bulabilirsiniz.
YouTube kanalımıza abone olun, yaratıcı olmaya başlayalım! Bölüm #1 ekleyin Yeni veya mevcut bir sayfa açın ve yeni bir normal bölüm ekleyin.
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Metin Modülünü Ekle H2 İçeriği Ekle Metin modülünü, seçtiğiniz bazı H2 içeriğiyle sütuna ekleyin. H2 Metin Ayarları Tasarım sekmesine geçin ve uygun H2 metin ayarlarını değiştirin: Başlık 2 Font Ağırlığı: Ultra Kalın
Başlık 2 yazı tipi stili: büyük harf
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 6VW
Başlık alanı 2 harf: -0.4vw
POS 2 Sıra Yükseklik: 0.8EM
Mesafe Biraz üst ve alt kenar boşlukları da ekleyin. Üst Marj: 2VW
Alt marj: 2VW
Bölüm #2 Arka Plan Gradyan Ekleyin Bir öncekinin hemen altına başka parçaları ekleyin ve aşağıdaki gradyan arka planını (veya gradyan seçiminizin arka planını) uygulayın: Renk 1: #30FFF1
Renk 2: #4635ff
Gradyan yönü: 110deg
Son pozisyon:% 85
Üst bölücü tasarım sekmesine geçer ve üst bölücüyü ekler. Bölme Stili: Listede bulun
Bölme Ayarları: Altını doldurun
Alt bölücü alt bölücüyü de ekleyin. Bölme Stili: Listede bulun
Bölme Ayarları: Altını doldurun
Bir sonraki boyut ayarlarında yapışkan değiştirme yüksekliği. Yüksek: 200px
Mesafe Bir sonraki özel alan ayarlarından bazılarını ekleyin. Sokak tabanı: 30VW (masaüstü), 45VW (tablet), 200vw (telefon) Üst dolgu: 0vw
Dolgu Alt: 0VW
CSS Sınıfı Daha sonra, efektin çalışması için bazı CSS kodu ekleyeceğiz. Buna hazırlanırken, CSS sınıfını bu bölüme ekleyeceğiz.
CSS Sınıfı: İletişim Bölümü Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Taşma Satır ayarlarını açın ve taşmayı gizleyin. Yatay taşma: gizli Dikey taşma: gizli
Geçiş ayrıca geçiş süresini silin.
Geçiş süresi: 0ms Blurb Modülünü Ekle Başlık içerik kutusuna ekleyin. Modül eklemeye başlama süresi! Blurb modülünü ekleyin ve hizmetlerinizden birini temsil eden seçtiğiniz başlığı girin.
Simgeyi seçin Bir sonraki simgeyi seçin. Varsayılan arka plan rengi varsayılan arka plan rengini ekleyerek devam eder. Arka plan rengi: #ffffff Yüzerken arka plan rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: #000000 Varsayılan simge ayarları Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin:
Renk simgesi: #000000 Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 2.5VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Yüzerken simgenin rengini değiştirmek için simge ayarlarına gidin.
Ikon Color: #ffffff
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000
Metin başlığı boyutu: 0.9vw (masaüstü), 1.8vw (tablet), 3VW (telefon)
İmleciyi yönlendirirken başlık metin ayarlarına gidin.
Başlık Metin Rengi: #FFFFFFFFETENT SONRAKİ Çeşitli Ekran Boyutlarında Geniş Değiştirin. Genişlik: 10VW (masaüstü), 17VW (tablet), 30vw (telefon)
Modül hizalaması: merkez Uzaklık ve boşluk ayarlarına bazı özel marj ve dolgu değerleri ekleyin.
Üst Marj: 4VW
Alt marj: 4VW Üst Dolgu: 2VW (masaüstü), 3VW (tablet), 6VW (Telefon)
Aşağıda dolgu: 2VW (masaüstü), 3VW (tablet), 6VW (Telefon)
Sınırımız, sınır ayarlarındaki her köşeye ’50VW’ ekleyerek modülü bir daireye değiştirir.
Kutunun gölgesi kutunun gölgesini de ekler.
Varsayılan dönüşüm ölçeği dönüşüm ayarlarına geçer ve varsayılan dönüşüm ölçeği değerinin%100 olduğundan emin olur. Dönüşüm Ölçeğini Yönlendirin İmleci yönlendirirken bu değerleri değiştirin. Aşağıda:% 120 Doğru:% 120 Kontak formunu ekle Bu satırda ihtiyaç duyduğumuz tam ad ve e -posta tam modülünü oluşturun. İletişim formunu ekledikten sonra, adın ve e -postanın adını açın ve geniş hale getirin.
Tam genişlik yapın: evet
Mesaj alanını silin ve özel sorular için üç giriş alanı ekleyin, bir sonraki özel hizmete uygulanan üç soru ekleyin. Captcha’yı devre dışı bırak Captcha seçeneğini de devre dışı bırakın.
Captcha’yı göster: hayır Alan ayarları Tasarım sekmesine geçin ve uygun alan ayarlarını değiştirin: Dolgu üst alanları: 0.6vw (masaüstü), 0.9vw (tablet), 1.5vw (telefon)
Dolgu Alt Düzlem: 0.6VW (Masaüstü), 0.9VW (Tablet), 1.5VW (Telefon) Alan Metin Boyutu: 0.8VW (masaüstü), 1.6vw (tablet), 2.3vw (telefon)
Sonraki Düğme Değiştir düğmesini ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon) Metin Renk Düğmesi: #FFFFFFFFFEREPT Onda Düğme: #000000
Düğmenin sınır genişliği: 0px
Mektup Ağırlığı Düğmesi: Çok kalın
Yazı tipi stili düğmesi: büyük harf
Mesafe Bazı dolgu değerleri de ekleyin.
Üst Dolgu: 2VW
Dolgu Alt: 2VW
Sol dolgu: 2VW Doğru dolgu: 2VW
Son fakat en az değil, sınır ayarlarına gidin ve her köşeye ’10px’ ekleyin.
İlk satırı bitirdikten üç kez klon satırı, devam edip üç kez klonlayabilirsiniz.
Her yinelenen satır için Blurb ve Icon içeriğini değiştirin Her bir kopya için başlık ve açıklama simgesini değiştirdiğinizden emin olun.
İletişim formunun belirli sorularını değiştirmek için her bir kopya satır için hizmeti özel olarak değiştirin. Ek varsayılan satırların ayarları İlk satır ayarlarını bir kez daha açın, boyut ayarlarını açın ve yüksekliği çeşitli ekran boyutlarındaki değiştirin. Yükseklik: 18VW (masaüstü), 27VW (tablet), 38VW (Telefon) Yükseklik doğrudan imleci, imleci yönlendirirken yüksekliği otomatik olarak döndürür. Yükseklik: Otomatik Sıra boyutu ayarlarını, ilk satır için boyut ayarlarını değiştirdikten sonra bölümdeki tüm satırlara genişletin, ayarları tüm parçalardaki tüm satırlara genişletebilirsiniz.
Sırayı masaüstünün yanına yerleştirin ve tablet son ama son değil, dördüncü sayfa ayarlarını açın, dört satırı yan yana tablet ve masaüstüne yerleştireceğiz. Bunu yapmak için sayfa ayarlarını açın. Özel bir CSS özel bir CSS kutusuna geçin ve aşağıdaki CSS kod satırını ekleyin: @media (min-width: 767px) {
.Contact-bölüm { Ekran: ızgara; Izgara Testi Kolonları:% 25% 25% 25% 25; }
}
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü
Bu yazıdaki son zihin, bir tasarımda hedeflenen iletişim formlarının bir kısmını nasıl oluşturacağınızı gösterdik.Bu, ziyaretçileriniz ve hangi özel hizmetlerle ilgilendikleri hakkında daha fazla bilgi edinmenin iyi bir yoludur.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketine erişin! Düzeni sayfanıza yükledikten sonra, üzerinde çalıştığınız sayfaya CSS kodunu eklemeniz gerekir. CSS kodunu bu öğreticinin sonunda bulabilirsiniz.
YouTube kanalımıza abone olun, yaratıcı olmaya başlayalım! Bölüm #1 ekleyin Yeni veya mevcut bir sayfa açın ve yeni bir normal bölüm ekleyin.
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Metin Modülünü Ekle H2 İçeriği Ekle Metin modülünü, seçtiğiniz bazı H2 içeriğiyle sütuna ekleyin. H2 Metin Ayarları Tasarım sekmesine geçin ve uygun H2 metin ayarlarını değiştirin: Başlık 2 Font Ağırlığı: Ultra Kalın
Başlık 2 yazı tipi stili: büyük harf
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 6VW
Başlık alanı 2 harf: -0.4vw
POS 2 Sıra Yükseklik: 0.8EM
Mesafe Biraz üst ve alt kenar boşlukları da ekleyin. Üst Marj: 2VW
Alt marj: 2VW
Bölüm #2 Arka Plan Gradyan Ekleyin Bir öncekinin hemen altına başka parçaları ekleyin ve aşağıdaki gradyan arka planını (veya gradyan seçiminizin arka planını) uygulayın: Renk 1: #30FFF1
Renk 2: #4635ff
Gradyan yönü: 110deg
Son pozisyon:% 85
Üst bölücü tasarım sekmesine geçer ve üst bölücüyü ekler. Bölme Stili: Listede bulun
Bölme Ayarları: Altını doldurun
Alt bölücü alt bölücüyü de ekleyin. Bölme Stili: Listede bulun
Bölme Ayarları: Altını doldurun
Bir sonraki boyut ayarlarında yapışkan değiştirme yüksekliği. Yüksek: 200px
Mesafe Bir sonraki özel alan ayarlarından bazılarını ekleyin. Sokak tabanı: 30VW (masaüstü), 45VW (tablet), 200vw (telefon) Üst dolgu: 0vw
Dolgu Alt: 0VW
CSS Sınıfı Daha sonra, efektin çalışması için bazı CSS kodu ekleyeceğiz. Buna hazırlanırken, CSS sınıfını bu bölüme ekleyeceğiz.
CSS Sınıfı: İletişim Bölümü Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Taşma Satır ayarlarını açın ve taşmayı gizleyin. Yatay taşma: gizli Dikey taşma: gizli
Geçiş ayrıca geçiş süresini silin.
Geçiş süresi: 0ms Blurb Modülünü Ekle Başlık içerik kutusuna ekleyin. Modül eklemeye başlama süresi! Blurb modülünü ekleyin ve hizmetlerinizden birini temsil eden seçtiğiniz başlığı girin.
Simgeyi seçin Bir sonraki simgeyi seçin. Varsayılan arka plan rengi varsayılan arka plan rengini ekleyerek devam eder. Arka plan rengi: #ffffff Yüzerken arka plan rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: #000000 Varsayılan simge ayarları Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin:
Renk simgesi: #000000 Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 2.5VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Yüzerken simgenin rengini değiştirmek için simge ayarlarına gidin.
Ikon Color: #ffffff
Varsayılan Başlık Metin Ayarları Bir sonraki başlık metin ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:
Ağır yazı tipi başlığı: Ultra Kalın
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000
Metin başlığı boyutu: 0.9vw (masaüstü), 1.8vw (tablet), 3VW (telefon)
İmleciyi yönlendirirken başlık metin ayarlarına gidin.
Başlık Metin Rengi: #FFFFFFFFETENT SONRAKİ Çeşitli Ekran Boyutlarında Geniş Değiştirin. Genişlik: 10VW (masaüstü), 17VW (tablet), 30vw (telefon)
Modül hizalaması: merkez Uzaklık ve boşluk ayarlarına bazı özel marj ve dolgu değerleri ekleyin.
Üst Marj: 4VW
Alt marj: 4VW Üst Dolgu: 2VW (masaüstü), 3VW (tablet), 6VW (Telefon)
Aşağıda dolgu: 2VW (masaüstü), 3VW (tablet), 6VW (Telefon)
Sınırımız, sınır ayarlarındaki her köşeye ’50VW’ ekleyerek modülü bir daireye değiştirir.
Kutunun gölgesi kutunun gölgesini de ekler.
Varsayılan dönüşüm ölçeği dönüşüm ayarlarına geçer ve varsayılan dönüşüm ölçeği değerinin%100 olduğundan emin olur. Dönüşüm Ölçeğini Yönlendirin İmleci yönlendirirken bu değerleri değiştirin. Aşağıda:% 120 Doğru:% 120 Kontak formunu ekle Bu satırda ihtiyaç duyduğumuz tam ad ve e -posta tam modülünü oluşturun. İletişim formunu ekledikten sonra, adın ve e -postanın adını açın ve geniş hale getirin.
Tam genişlik yapın: evet
Mesaj alanını silin ve özel sorular için üç giriş alanı ekleyin, bir sonraki özel hizmete uygulanan üç soru ekleyin. Captcha’yı devre dışı bırak Captcha seçeneğini de devre dışı bırakın.
Captcha’yı göster: hayır Alan ayarları Tasarım sekmesine geçin ve uygun alan ayarlarını değiştirin: Dolgu üst alanları: 0.6vw (masaüstü), 0.9vw (tablet), 1.5vw (telefon)
Dolgu Alt Düzlem: 0.6VW (Masaüstü), 0.9VW (Tablet), 1.5VW (Telefon) Alan Metin Boyutu: 0.8VW (masaüstü), 1.6vw (tablet), 2.3vw (telefon)
Sonraki Düğme Değiştir düğmesini ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon) Metin Renk Düğmesi: #FFFFFFFFFEREPT Onda Düğme: #000000
Düğmenin sınır genişliği: 0px
Mektup Ağırlığı Düğmesi: Çok kalın
Yazı tipi stili düğmesi: büyük harf
Mesafe Bazı dolgu değerleri de ekleyin.
Üst Dolgu: 2VW
Dolgu Alt: 2VW
Sol dolgu: 2VW Doğru dolgu: 2VW
Son fakat en az değil, sınır ayarlarına gidin ve her köşeye ’10px’ ekleyin.
İlk satırı bitirdikten üç kez klon satırı, devam edip üç kez klonlayabilirsiniz.
Her yinelenen satır için Blurb ve Icon içeriğini değiştirin Her bir kopya için başlık ve açıklama simgesini değiştirdiğinizden emin olun.
İletişim formunun belirli sorularını değiştirmek için her bir kopya satır için hizmeti özel olarak değiştirin. Ek varsayılan satırların ayarları İlk satır ayarlarını bir kez daha açın, boyut ayarlarını açın ve yüksekliği çeşitli ekran boyutlarındaki değiştirin. Yükseklik: 18VW (masaüstü), 27VW (tablet), 38VW (Telefon) Yükseklik doğrudan imleci, imleci yönlendirirken yüksekliği otomatik olarak döndürür. Yükseklik: Otomatik Sıra boyutu ayarlarını, ilk satır için boyut ayarlarını değiştirdikten sonra bölümdeki tüm satırlara genişletin, ayarları tüm parçalardaki tüm satırlara genişletebilirsiniz.
Sırayı masaüstünün yanına yerleştirin ve tablet son ama son değil, dördüncü sayfa ayarlarını açın, dört satırı yan yana tablet ve masaüstüne yerleştireceğiz. Bunu yapmak için sayfa ayarlarını açın. Özel bir CSS özel bir CSS kutusuna geçin ve aşağıdaki CSS kod satırını ekleyin: @media (min-width: 767px) {
.Contact-bölüm { Ekran: ızgara; Izgara Testi Kolonları:% 25% 25% 25% 25; }
}
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü
Bu yazıdaki son zihin, bir tasarımda hedeflenen iletişim formlarının bir kısmını nasıl oluşturacağınızı gösterdik.Bu, ziyaretçileriniz ve hangi özel hizmetlerle ilgilendikleri hakkında daha fazla bilgi edinmenin iyi bir yoludur.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
