Satır içi alanları ve modül tam genişlik alanlarını birleştirmeniz gerekiyor İletişim Formu de Divi ?
Le İletişim formu e-postaları yakalamak ve ziyaretçilerinizi müşterilere dönüştürmek istiyorsanız web sitenize dahil etmeniz gereken önemli bir unsurdur.
Modül İletişim Formu de Divi oluşturmak için kolayca özelleştirilebilir formlar her tür web sitesi için çekici ve büyüleyici kişi kartları. Bu modül, her form alanına uygulanabilen iki görüntüleme seçeneğiyle birlikte gelir: en ligne ou tam genişlik.
Bu eğitimde, sizin için dört benzersiz düzen olanağı sunacağız. İletişim formu Satır içi ve tam genişlikli alanları kullanan Divi.
Başlayalım!
anket
İşte tasarlayacağımız şeyin bir önizlemesi.
İlk düzen
İkinci düzen
Üçüncü düzen
dördüncü düzen
Başlamak için neye ihtiyacınız var?
Başlamadan önce, Divi temasını yükleme ve etkinleştirme ve web sitenizde Divi'nin en son sürümünün bulunduğundan emin olun.
Şimdi başlamaya hazırsınız!
Divi'nin İletişim Formu modülü için satır içi ve tam genişlikte alanlar kullanan 4 örnek düzen
Önceden tanımlanmış düzeni seçin
4 şablonun her biri, Shoe Repair Contact Page düzeninden değiştirilmiştir. Ayakkabı Tamir Düzen Paketi, Divi kitaplığında bulabilirsiniz.
Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından seçeneği seçin Divi Builder'ı kullanın.
Bu örnek için Divi Kitaplığından önceden hazırlanmış bir düzen kullanacağız, bu nedenle Düzenlere Göz Atın.
Ayakkabı Tamiri İletişim Sayfası düzenini bulun ve seçin.
seçmek Bu Düzeni Kullan sayfanıza düzeni eklemek için.
Artık örneklerimizi tasarlamaya hazırız.
İlk düzen
İlk önce modülü içeren satırı taşıyın İletişim Formu yukarıdaki bölüme, Blurb modüllerinin bulunduğu çizginin hemen altına. Daha sonra kalan boş bölümü silebilirsiniz.
Satır ayarlarını açın ve sol ve sağ dolgu ekleyin,
- Dolgu (Sol ve Sağ): %15
Duyarlı seçenekleri seçin ve mobil için dolguyu ayarlayın.
- Dolgu (Sol ve Sağ): %5
Satır içi ve tam genişlikte alanlarla değiştirilmiş iletişim formu düzeni
Bu düzen için ad ve soyad için iki ayrı alan oluşturacağız.
İletişim Formu modülü ayarlarını açın ve Soyadı alanı için Kimlik ve Başlık alanını Ad olarak değiştirin.
Ad alanının altına yeni bir alan ekleyin. Kimlik ve Başlık alanını Ad olarak ayarlayın.
Ad alanı ayarlarında, düzen ayarlarını açın ve Tam Genişliği Yap'ı Hayır olarak ayarlayın.
- Tam Genişlik Yap: HAYIR
Daha sonra ayarlar bölümünde İletişim formu, telefonun konudan önce listelenmesi için konu ve telefonun sırasını değiştirin.
Konu alanı yerleşim ayarlarını açın ve alanı tam genişliğe ayarlayın.
- Tam Genişlik Yap: EVET
İletişim formu tasarımı özelleştirme
Şimdi tasarımı tamamlamak için birkaç ayarı değiştirelim. İletişim Formu modül ayarlarının Tasarım sekmesine gidin.
İlk olarak, düğmenin arka plan rengini değiştirin.
- Düğme Arka Planı: #DBC2B3
Düğmeye bir üst kenar boşluğu ekleyin.
- Düğme Kenar Boşluğu (Üst): 10 piksel
Son olarak, kenarlık ayarlarına gidin ve alanlara yuvarlatılmış köşeler ekleyin.
- Girdiler Yuvarlatılmış Köşeler: 30 piksel
Ayrıca bakınız: Divi: "Tam Genişlik Menüsü" modülüne duyarlı bir logo nasıl eklenir
Örnek 1'in nihai sonucu
İşte masaüstü ve mobil cihazlardaki nihai sonuç.
İkinci örnek
İkinci örneğimiz için, Blurb modüllerini sayfanın sol tarafına taşıyacağız ve iletişim formunu sayfanın sağ tarafına yerleştireceğiz. Blurb modüllerini bir sütuna taşıyın.
Satır düzenini değiştirin.
Çizgi tasarım ayarlarını açın ve kapatın Özel Oluk Genişliğini Kullan.
- Özel Oluk Genişliğini Kullan: HAYIR
Tanıtım ve İletişim Formu modüllerini dikey olarak hizalamak için ana öğenin özel CSS'sine kod ekleyin.
align-items:center;
Şimdi sütunlar arasındaki ince kenarlığı kaldırmamız gerekiyor. Satır ayarlarını açın, ardından sütun ayarlarını açın 1. Tasarım sekmesi altında kenarlık ayarlarına gidin ve kenarlığı kaldırın.
- Sağ Kenar Genişliği: 0px
Ardından, sütun 2 ayarlarını açın ve kenarlığı kaldırmak için adımları tekrarlayın.
- Sağ Kenar Genişliği: 0px
"Bize Ulaşın" metnini ortalanacak şekilde ayarlayın.
İletişim formunu sağ sütuna taşıyın. Kalan boş bölümü silin.
Satır içi ve tam genişlikte alanlarla değiştirilmiş iletişim formu düzeni
Bu düzende ayrıca ad ve soyadı için iki ayrı alan olacaktır. İletişim Formu modülü ayarlarını açın ve Soyadı alanı için Kimlik ve Başlık alanını Ad olarak değiştirin.
Ad alanının altına yeni bir alan ekleyin. Kimlik ve Başlık alanını Ad olarak ayarlayın.
Ad alanı ayarlarında, düzen ayarlarını açın ve Tam Genişliği Yap'ı Hayır olarak ayarlayın.
- Tam Genişlik Yap: HAYIR
Telefon ve konu alanlarının sırasını telefon konudan önce gelecek şekilde değiştirin.
E-posta, Telefon ve Konu için saha ayarlarını açın ve düzeni tam genişliğe ayarlayın.
- Tam Genişlik Yap: EVET
İletişim formu tasarımı özelleştirme
Satır ayarlarını açın, ardından sütun ayarlarını açın 2. Arka plan rengini ayarlayın.
- Arka plan: #DBC2B3
Sütun 2 ayarlarında, Tasarım sekmesine gidin ve dolgu ekleyin.
- Dolgu (Üst, Alt, Sol ve Sağ: 50px
Duyarlı ayarları değiştirmek için mobil simgesini seçin. Mobil cihazlar için dolguyu ayarlayın.
- Dolgu (Üst, Alt, Sol ve Sağ): 30px
Ardından sütuna bir kutu gölgesi ekleyin.
Son olarak, İletişim Formu modülü ayarlarını açın ve alan metin rengini değiştirin.
- Alanlar Metin Rengi: #000000
Örnek 2'in nihai sonucu
İşte ikinci düzenin nihai sonucu.
Üçüncü örnek
Üçüncü düzen için solda iletişim formu ve sağda Blurb modüllerimiz olacak. Blurb modüllerini içeren satırın sütun yapısını değiştirerek başlayalım.
Adres modülünü sağ sütuna taşıyın.
Ardından, "Bize Ulaşın" Metin modülünü sol sütuna taşıyın, ardından kalan boş satırı silin.
İletişim Formu Modülünü "Bize Ulaşın" Metin modülünün altındaki sol sütuna taşıyın. Kalan boş bölümü silin.
Tasarım sekmesi altındaki çizgi ayarlarını açın ve kapatın Özel Oluk Genişliğini Kullan
- Özel Oluk Genişliğini Kullan: HAYIR
Tanıtım ve İletişim Formu modüllerini dikey olarak hizalamak için ana öğenin özel CSS'sine kod ekleyin.
align-items:center;
Satır ayarlarını açın, ardından sütun ayarlarını açın 1. Tasarım sekmesi altında kenarlık ayarlarına gidin ve kenarlığı kaldırın. Sütun 2'den kenarlığı kaldırmak için adımları tekrarlayın.
- Sağ Kenar Genişliği: 0px
İletişim formunun düzenini değiştirme
Üçüncü tasarım için alan genişliklerini olduğu gibi bırakacağız ancak iletişim formu ayarlarından telefon numarası ve konu alanının sıralamasını telefon önde gelecek şekilde değiştirelim.
Örnek 3'in nihai sonucu
İşte üçüncü düzenin nihai sonucu.
Ayrıca Oku: Divi: Fullwidth Header modülü tam ekranda nasıl görüntülenir?
Dördüncü örnek
Dördüncü ve son düzen için, İletişim Formu modülü solda ve Blurb modülleri sağda olacaktır. Yine Blurb modüllerini içeren satırın sütun yapısını değiştirerek başlayacağız.
Adres modülünü sağ sütuna taşıyın.
Ardından, İletişim Formu modülünü sol sütuna taşıyın. Kalan boş bölümü silin.
Tasarım sekmesinde hat ayarlarını açın ve devre dışı bırakın Özel Oluk Genişliğini Kullan.
- Özel Oluk Genişliğini Kullan: HAYIR
Tanıtım ve İletişim Formu modüllerini dikey olarak hizalamak için ana öğenin özel CSS'sine kod ekleyin.
align-items:center;
Satır ayarlarını açın, ardından sütun ayarlarını açın 1. Tasarım sekmesi altında kenarlık ayarlarına gidin ve kenarlığı kaldırın.
- Sağ Kenar Genişliği: 0px
Ardından, sütun 2 ayarlarını açın ve kenarlığı kaldırmak için adımları tekrarlayın.
- Sağ Kenar Genişliği: 0px
"Bize Ulaşın" metni için Metin modülü ayarlarını açın ve metni ortalayın.
- Metin Hizalama: Ortalanmış
Satır içi ve tam genişlikte alanlarla değiştirilmiş iletişim formu düzeni
Bu tasarım için tüm alanlarımız tam genişlikte olacaktır. İletişim Formu modülü ayarlarını açın, ardından her alan için ayarları açın. Tasarım sekmesinde Düzen ve tanımla Tam Genişlik Yap uzeri EVET.
Her tam genişlikte alanı oluşturduktan sonra, form böyle görünmelidir.
Şimdi Soyadı alanı için Kimlik ve Başlık alanını Ad olarak değiştirin.
Ad alanının altına yeni bir alan ekleyin. Kimlik ve Başlık alanını Ad olarak ayarlayın.
Telefon ve konu alanlarının sırasını telefon konudan önce gelecek şekilde değiştirin.
İletişim Formu modül tasarımını özelleştirme
Modül ayarlarında, Tasarım sekmesinde alan metin rengini siyah olarak ayarlayın.
- Alanlar Metin Rengi: #000000
Bölüm ayarlarını açın ve bir arka plan rengi ekleyin.
- Arka plan: #DBC2B3
Son olarak, bir arka plan maskesi ekleyin.
- Arka Plan Maskesi: Kemer
- Maske Dönüşümü: yatay
Arka plan maskesinin mobilde daha iyi çalışması için responsive ayarlarını kullanalım.
- Maske Dönüşümü (Telefon): yatay ve döndürme
Nihai sonuç
İşte dördüncü düzenin nihai sonucu.
Nihai sonuçlar
Tüm örneklerimize bir kez daha göz atalım.
İlk örnek
İkinci örnek
Üçüncü örnek
Dördüncü örnek
DIVI'yı şimdi indirin!!!
Sonuç
Çekici bir iletişim formuna sahip olmak, dönüşümlerinizi artırabilir ve ziyaretçilerinizin sizinle doğrudan bağlantı kurmasını sağlayabilir.
Bu makalede gösterdiğimiz gibi, formunuz için farklı görünümler ve düzenler oluşturmak için satır içi ve tam genişlikte alan seçeneklerini kullanabilirsiniz ve Divi'nin yerleşik tasarım seçenekleri, formun öne çıkmasına yardımcı olmak için benzersiz ve çekici tasarımlar oluşturmanıza olanak tanır.
Umarım bu teknik, gelecekteki projeler için başka bir yararlı tasarım becerisi katacaktır.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
