Divi ile Satır İçi İletişim Formu Nasıl Oluşturulur
Yayınlanan: 2017-07-14Ana sayfanın kahraman (veya ekranın üst kısmındaki) bölümü birinci sınıf gayrimenkuldür. Ve çoğu emlak geliştiricisi gibi, alanınızı en üst düzeye çıkarmak istiyorsunuz. Bu, bir satır içi iletişim formunun kullanışlı olduğu yerdir. Satır içi form, temel olarak, tüm alanlarının veya denetimlerinin yan yana, satır içi ve sola hizalı kaldığı bir formdur. Bu kompakt düzen, bir ana sayfadaki veya bir açılış sayfasındaki dönüşümleri artırmak için harikadır.
Bugün size Divi's Visual Builder'ı kullanarak web siteniz için nasıl çevrimiçi iletişim formu oluşturacağınızı göstereceğim. Bunu başarmak için gereken iş, aslında form alanlarının hem genişliğini hem de hizalamasını ayarlamakla ilgilidir. Bunu başarmak için, Gelişmiş sekmesine bazı Özel CSS eklemenin yanı sıra iletişim modülünün tasarım özelliklerinden yararlanacağız.
Divi'de yeniyseniz, Gelişmiş sekmesinin sizi bu eğitimle uğraşmaktan alıkoymasına izin vermeyin. Her şeyi basit ve net tutmak için elimden geleni yaptım.
Eğlence.
İşte Satır İçi İletişim Formunun Nasıl Görüneceğine Bir Örnek
Konsept ve İlham
Araba sigortası için alışveriş yapmak veya çevrimiçi olarak yeni bir ev aramak zorunda kaldıysanız, muhtemelen sizin (kullanıcının) topun yuvarlanmasını sağlamak için minimum giriş alanlarıyla özellikle kompakt olan bir satır içi form görmüşsünüzdür. yeni alıntı. Bu yüzden Divi kullanıcıları için benzer bir şey yapacak basit bir çevrimiçi iletişim formu oluşturmak istedim. Bu iletişim formu, bir teklif oluşturmak veya bir ev listesi çıkarmak gibi şeyler yapamayacak olsa da, müşterilerin veya kullanıcıların ulaşması için kolay bir yol sağlamak isteyen işletme sahiplerinin veya blog yazarlarının ihtiyaçlarını karşılar.
Tasarımı Divi ile Uygulamak
Youtube Kanalımıza Abone Olun
Tek bir sütun yapısı satırına sahip bir Normal Bölüm ekleyerek başlıyoruz.
Öğelerimizin geri kalanını beyaz bir arka planda görmek zor olacağından, devam edelim ve Bölüm Ayarlarına gidip aşağıdakileri güncelleyerek arka plan rengini bölümümüze ekleyelim:
İçerik Seçenekleri
Arka Plan Rengi: #006ea5
Ayarları kaydet
Artık İletişim Formu Modülümüzü satıra ekleyebiliriz.
İletişim Formu Ayarlarını aşağıdaki gibi güncelleyin:
İçerik Seçenekleri
Gönder Düğme Metni: “Teklif Al”
E-posta: [Mesajların gönderileceği e-posta adresini girin]
Captcha'yı Görüntüle: HAYIR
Form Arka Plan Rengi: rgba(255,255,255,0)
Tasarım Seçenekleri
Form Alanı Yazı Tipi: Lato
Form Alanı Yazı Tipi Boyutu: 24px
Form Alanı Metin Rengi: #ffffff
Giriş Sınır Yarıçapı: 3px
Kenarlık Kullan: EVET
Kenar Rengi: #ffffff
Kenar Genişliği: 1px
Düğme Metin Boyutu: 24px Masaüstü, 20px Tablet, 20px Akıllı Telefon
Düğme Metin Rengi: #0c71c3
Düğme Arka Plan Rengi: #f4f11f
Düğme Kenar Genişliği: 3px
Düğme Sınır Yarıçapı: 3
Ayarları kaydet
İçerik sekmesine geri dönün ve alan çubuğunun sağındaki çöp kutusu simgesine tıklayarak mesaj alanını silin. Ardından, bireysel alan çubuklarının altında bulunan beyaz artı işaretli gri daire düğmesine tıklayarak yeni bir alan ekleyin. Bu, Telefon alanı olacaktır.
Alan Ayarlarını aşağıdaki gibi güncelleyin:
İçerik Seçenekleri
Alan Kimliği: "Telefon"
Başlık: Telefon
Tasarım Seçenekleri
Tam Genişlik Yap: HAYIR
İzin Verilen Semboller: Yalnızca Sayılar (0-9)
Gelişmiş seçenekler
Ana Öğe kutusuna aşağıdaki Özel CSS'yi girin:
Max-width: 18%; Float: left; Margin-top: -1.5%; Clear: none !important;
Ayarları kaydet
Şimdi İletişim Formu Ayarlarınızın İçerik sekmesine dönün ve az önce oluşturduğunuz Telefon alanını çoğaltın ve Posta Kodu alanına dönüştürün.
Alan Ayarlarını aşağıdaki gibi güncelleyin:
İçerik Seçenekleri
Alan Kimliği: "Zip"
Başlık: Posta Kodu
Gelişmiş seçenekler
Ana Öğe kutusuna aşağıdaki Özel CSS'yi girin:
Max-width: 17%; Margin-top: -1.5%;
Ayarları kaydet
Şimdiye kadar Telefon ve Posta Kodu alanlarımızın genişliğini ve hizalamasını ayarladık. Şimdi aynısını Name ve Email alanları için yapmamız gerekiyor.
Ad alanı ayarlarına gidin ve Gelişmiş Seçenekleri , Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:
Max-width: 20%; Margin-top: -1.5%;
Ayarları kaydet
Ardından, E-posta alanı ayarlarına gidin ve Gelişmiş Seçenekleri , Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:
Max-width: 20%; Margin-top: -1.5%;
Ayarları kaydet
Önemli Not: Alanların her biri için kullanılan özel CSS'nin belirli bir yüzdeye ayarlanmış bir maksimum genişlik özelliğine sahip olduğuna dikkat edin. Bu yüzde, alanlarınızın içerik alanınızın genişliği ile ne kadar geniş olacağını belirler. Örneğin, Divi'nin varsayılan içerik alanı 1080 pikseldir, dolayısıyla ad alanı 1080 pikselin %20'sidir. Satır içi formunuz için daha fazla alan yaratmak isteyip istemediğinizi bilmek önemlidir. Tek yapmanız gereken, maksimum genişlik özelliğinin yüzde değerini gerektiği gibi ayarlamaktır.
Neredeyse bitti. Şimdi tek yapmamız gereken, formu tutan bölümün ve satırın aralığını temizlemek. Tasarım sekmesi altındaki Bölüm Ayarları'na gidin ve aşağıdakileri güncelleyin:
Özel Dolgu: 12px Üst, 14px Alt
Ayarları kaydet
Şimdi Tasarım sekmesi altındaki Satır Ayarları'na gidin ve aşağıdakileri güncelleyin:
Özel Dolgu: 48px Üst, 0px Sağ, 0px Alt, 0px Sol
Ayarları kaydet
Duyarlı hale getirmek
Bu yatay bir form olduğundan, form alanlarının mobil cihazlarda ayarlanması gerekecektir. Bunu düzeltmek için tek gereken özel CSS'nin küçük bir parçası. Gelişmiş sekmesi altındaki Sayfa Ayarları ' na ve Özel CSS kutusunda aşağıdakilere gidin :
@media (max-width: 767px) {
p.et_pb_contact_field {
max-width: 100% !important;
}
}
Formun farklı ekran boyutlarına nasıl yanıt verdiği aşağıda açıklanmıştır.
Üç Alanlı Satır İçi İletişim Formu Oluşturma
Artık dört alanlı bir satır içi form oluşturduğunuza göre, birkaç seçeneği güncelleyerek bunu kolayca üç form alanına dönüştürebilirsiniz. İşte adımlar:
- Yeni oluşturduğunuz satır içi formu düzenleyin veya formu çoğaltın.
- Posta Kodu Alanını Sil (artık yalnızca üç alanınız var)
- Gelişmiş sekmesi altındaki Telefon Alanı (veya üçüncü alan ne olursa olsun) Ayarlarını aşağıdaki Özel CSS ile güncelleyin.
Main Element box:max-width: 25%; float:left; margin-top: -1.5%; clear: none !important;
- Gelişmiş sekmesi altındaki E-posta Alanı (veya ikinci alan ne olursa olsun) Ayarlarını Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:
max-width: 25%; margin-top: -1.5%;
- Gelişmiş sekmesi altındaki Ad Alanı (veya ilk alan ne olursa olsun) Ayarlarını Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:
max-width: 25%; margin-top: -1.5%;
Not: Alanların genişliğini artırmak için alanların her biri için maksimum genişlik özelliğinin artık %25 olduğuna dikkat edin.
İki Alanlı Satır İçi İletişim Formu Oluşturma
Ayrıca birkaç seçeneği güncelleyerek satır içi formunuzu iki alan formuna da dönüştürebilirsiniz. İşte adımlar:
- Yeni oluşturduğunuz satır içi formu düzenleyin veya formu çoğaltın.
- Yalnızca iki alanınız olacak şekilde Posta Kodu Alanını ve Telefon Alanını silin (ad ve e-posta)
- Gelişmiş sekmesi altındaki Ad Alanı (veya ilk alan ne olursa olsun) Ayarlarını Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:
max-width: 37%; margin-top: -1.5%;
- Gelişmiş sekmesi altındaki E-posta Alanı (veya ikinci alan ne olursa olsun) Ayarlarını Ana Öğe kutusunda aşağıdaki Özel CSS ile güncelleyin:
max-width: 37%; margin-top: -1.5%; clear: none !important;
Diğer Alan Türlerini Ekleme
Bu öğretici, temel olarak normal giriş alanı türleri içindir, ancak bunu kolayca farklı bir alan türüyle değiştirebilirsiniz. Örneğin, bir açılır alan türü seçmek istiyorsanız, diğer alanlar için yaptığınız stilin aynısını uygulayabilirsiniz. Ancak, seçenekleri görebilmeniz için söz konusu alana bir arka plan rengi (#006ea5) eklemeniz gerekecektir.
İşte bir açılır alan nasıl görünürdü…
Son düşünceler
Deneyimlerime göre, çevrimiçi iletişim formları işiniz için güçlü bir araç olabilir. Kutudan çıktığı gibi daha sağlam seçeneklere sahip daha gelişmiş eklentiler var, ancak başka bir eklenti sizin için uygun değilse ve daha basit bir çözüm mantıklıysa, bunu deneyin. Umarım beğenirsin.
Yorumlarda sizden haber bekliyorum.