Divi ile Tıklamada İletişim Formu Nasıl Oluşturulur

Bu Divi eğitiminde, Divi, bir miktar jQuery kodu ve CSS kodundan başka bir şey kullanmadan bir düğmeyi (bir bindirme olarak) tıkladıktan sonra görünen bir iletişim formunu nasıl oluşturacağınızı göstereceğiz.

Bu, site ziyaretçilerinizin bir düğmeyi tıklayarak taahhüt ettikleri eyleme odaklanmasını sağlamanın harika bir yoludur. Onları farklı bir sayfaya götürmez, ancak bitene kadar bu eyleme kilitler.

Aşağıda, oluşturacağımız şeye hızlıca bir göz atabilir ve ardından eğiticiye atlayabilirsiniz!

Masaüstünde Sonuç

Telefonda ve Tablette Sonuç

Esin

Bu gönderi için ilham kaynağı bir yorum isteğinden geliyor ve B3multimedya'da bulunuyor. Bu işi yapmak için başka bir yöntem kullanıyor olsalar da, tıklamayla iletişim formu oluşturmanın da çarpıcı bir yolu var. Sonuca bir göz atın:

Buton Modülü ile Bölüm Oluştur

Genellikle Divi'nin ön uç görsel oluşturucusunda hemen hemen her şeyin nasıl yapıldığını gösteririz. Ancak bugünün gönderisinde arka uç oluşturucuyu kullanacağım. Kullandığımız kod nedeniyle biraz daha kolay. Bununla birlikte, ön uç düzenleyiciyi bizim kadar seviyorsanız, ön uç "iskelet" görünümünü kullanarak bu öğreticiyi kolayca tamamlayabilirsiniz.

Tamam, hadi bu eğitime girelim!

Youtube Kanalımıza Abone Olun

Yapmamız gereken ilk şey, iletişim formunun açılmasını sağlayacak düğmeyi yerleştirdiğimiz yeni bir bölüm eklemek. Sadece standart bir bölüm ekleyin ve tek sütunlu bir satır seçin. Bunu yaptıktan sonra, ona bir Düğme Modülü ekleyin.

Düğmeye istediğiniz gibi stil verebilirsiniz, ancak düğme URL'sinin '#' ile başlayıp ardından başka bir şey geldiğinden emin olmalısınız. Sadece boş bırakamaz veya yalnızca '#' karakterini kullanamazsınız. '#' ve biraz metin ekleyerek, düğmeye tıkladığınızda sayfa hareket etmeyecektir. Boş bırakırsanız sayfa tıklandığında yenilenecektir. Ve yalnızca '#' kullanırsanız, sayfanın en üstüne gönderilirsiniz.

Yapmamız gereken bir sonraki önemli şey, butona bir CSS sınıfı atamak. Tıkladıktan sonra iletişim formunun açıldığından emin olmak için bu yazının ilerleyen bölümlerinde jQuery kodunda bu CSS sınıfını kullanacağız. Düğmeye atamamız gereken sınıf basitçe 'buton'dur.

Tıklamada Masaüstü İletişim Formu Oluşturun

Bir sonraki yapmamız gereken şey, bu yazının önceki bölümünde oluşturduğumuz düğmeye birisi tıkladığında görünecek olan masaüstü iletişim formunu oluşturmak. Bu gönderide daha sonra, size mobil sürümü nasıl oluşturacağınızı da göstereceğiz.

Bu yöntemi kullanırsanız, temelde istediğiniz herhangi bir tasarımı arka arkaya oluşturabilir ve bir açılır pencere olarak görünmesini sağlayabilirsiniz. Size yalnızca aşağıdaki örneği nasıl oluşturacağınızı göstererek neler başarabileceğinize dair bir fikir vereceğiz:

Yeni Standart Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir standart bölüm ekleyerek başlayın. Yeni eklediğiniz bölümün Gelişmiş sekmesine gidin ve CSS Sınıfı alanına 'pop-up' ekleyin. Aynı sekmeyi aşağı kaydırın ve aşağıdaki CSS kodu satırlarını Özel CSS alt kategorisinin Önce alanına yerleştirin:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Bunu ekleyerek, bölümün tüm sekmeyi kapladığından emin oluyoruz. İstediğiniz arka plan kaplamasını oluşturmak için CSS kodundaki arka plan rengini ayarlayabilirsiniz. Bu durumda, siyah rengi biraz şeffaflıkla kullanıyoruz. Aynı sekmede, aşağıdaki CSS kodu satırını da Ana Öğeye ekleyin:

display: none;

Gelişmiş sekmesinde yapmamız gereken son şey, Görünürlük alt kategorisindeki telefon ve tablet bölümünü devre dışı bırakmaktır.

İki Sütunlu Satır Ekle

İki sütunlu bir satır ekleyerek devam edin ve Tasarım sekmesine gidin. Boyutlandırma alt kategorisindeki satırın genişliğini değiştirerek başlayın. Bu örnekte, 1291 piksellik özel bir genişlik kullandık.

Tasarım sekmesini aşağı kaydırın ve Boşluk alt kategorisindeki her iki sütunun üst, sol ve sağ dolgusu için '30 piksel' kullanın.

Gelişmiş sekmesine giderek bitirin. Ana Öğe içinde, aşağıdaki CSS kod satırlarını ekleyin:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

İlk Metin Modülünü Ekle

Bölüm ve satırdaki tüm değişiklikleri yaptıktan sonra, görünmesini istediğiniz farklı modülleri eklemenin zamanı geldi. Ekleyeceğimiz ilk şey, görünen başlıktır. Satırın ilk sütununa yeni bir Metin Modülü ekleyerek, metni İçerik sekmesine yazarak ve Tasarım sekmesine geçerek başlayın. Tasarım sekmesinde, Metin alt kategorisi için aşağıdaki ayarları kullandık:

• Metin Yönü: Merkez
• Yazı Tipi: Istakoz
• Yazı Tipi Stili: Kalın
• Metin Yazı Tipi Boyutu: 37
• Metin Rengi: #002282
• Metin Satırı Yüksekliği: 1.7em

İkinci Metin Modülü Ekle

Yeni bir Metin Modülü ekleyerek devam edin ve İçerik sekmesinde görünmesini istediğiniz metni yazın. Tasarım sekmesine gidin ve Metin Alt Kategorisine aşağıdaki ayarları uygulayın:

• Metin Yönü: Merkez
• Metin Yazı Tipi: Arial
• Metin Yazı Tipi Boyutu: 13
• Metin Rengi: #002282
• Metin Satırı Yüksekliği: 1.7em

Sosyal Medya Takip Modülü Ekle

Devam edersek ilk sütuna Sosyal Medya Takip Modülünü de ekleyeceğiz. Bu durumda, üç sosyal simge seçtik; Facebook, Twitter ve Instagram. Bu sosyal simgeleri İçerik sekmesine ekledikten sonra, Simge alt kategorisinde Bağlantı Şeklini 'Daire' olarak değiştirin.

Yapmamız gereken son şey, Gelişmiş sekmesinde bu modüle bir sol dolgu eklemek. Ana Öğeye aşağıdaki CSS kodu satırını ekleyin:

padding-left: 40%;

İletişim Formu Modülü Ekle

Daha sonra satırın ikinci sütununa geçebiliriz. Bu sütunda ilk yerleştireceğimiz şey İletişim Formu Modülüdür. Bu örnek için sadece iki alan seçtik; isim ve e-posta. İletişim Formu Modülünü ekledikten sonra, İletişim Formu Modülünün Tasarım sekmesine gidin ve Form Alanı Metni alt kategorisinde aşağıdaki değişiklikleri yapın:

• Form Alanı Yazı Tipi Boyutu: 15
• Form Alanı Metin rengi: #002282
• Form Alanı Çizgi Yüksekliği: 1.7em

Aynı sekmede, Düğme alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Düğme için Özel Stil Kullan: Evet
• Düğme Metin Boyutu: 20
• Düğme Metin Rengi: #FFFFFF
• Düğme Arka Plan Rengi: #0086c4
• Düğme Kenar Genişliği: 2
• Düğme Yarıçapı: 3

Gelişmiş sekmesine geçin ve %5'lik bir üst dolgu ekleyin.

Bulanıklık Modülü Ekle

İkinci sütuna eklememiz gereken başka bir şey de Blurb Module. Bu Modül'e ihtiyacımız olan tek şey, açılır pencerenin sağ üstündeki çıkış simgesi. Simgeler listesinden aşağıdaki simgeyi seçin ve diğer her şeyi boş bırakın.

Devam ederek, Gelişmiş sekmesine gidin ve CSS sınıfı olarak 'kapat' yazın. Aynı sekmede, Özel CSS alt kategorisinin Ana Öğesine aşağıdaki kod satırlarını ekleyin:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Satıra Degrade Arka Planı Uygula

Son olarak, satıra hoş görünümlü bir degrade arka planı ekleyeceğiz. Ayarları açın ve degrade arka plan seçeneğine aşağıdaki değişiklikleri uygulayın:

• Birinci Degrade Renk: #FFFFFF
• İkinci Degrade Renk: #0c71c3
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 124deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Tıklamada Tablet & Telefon İletişim Formu Oluşturun

Artık masaüstü sürümünü oluşturduğumuza göre, tablet ve telefon sürümü çok daha hızlı çalışacak. Masaüstü sürümü için kullandığımız modüllerin çoğu, mobil sürüm için aynıdır. Mobildeki nihai sonuç şöyle görünür:

Yeni Standart Bölüm Ekle

Başka bir standart bölüm ekleyerek başlayın. Bu bölüm, daha önce oluşturduğumuz bölümle aynı ayarlara sahip olmalıdır. CSS sınıfına 'pop-up' ekleyin ve Önce alanına aşağıdaki CSS kodu satırlarını ekleyin:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Ana Öğeye aşağıdaki CSS kodu satırını da ekleyin:

display: none;

Masaüstü sürümü için yaptığımız gibi telefon ve tablet için devre dışı bırakmak yerine, Görünürlük alt kategorisinde masaüstünde devre dışı bırakacağız:

Tek Sütunlu Satır Ekle

Telefon ve tablet açılır penceresi için yalnızca bir sütuna ihtiyacımız olacak. Bu satır için özel genişlik kullanmayacağız. Ancak, masaüstü sürümü için yaptığımız gibi özel dolguyu uygulayacağız; Sütunun üst, sol ve sağ dolgusu için 30 piksel.

Ayrıca, Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki CSS kodu satırlarının eklendiğinden emin olmamız gerekir:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Klon Metni, Sosyal Medya Takip ve İletişim Formu Modülü

Bir sonraki yapmamız gereken şey, Masaüstü sürümü için kullandığımız ilk Metin Modülünü Sosyal Medya Takip ve İletişim Formu Modülü ile birlikte klonlamak. Bunları klonladıktan sonra, az önce oluşturduğunuz yeni bölümün tek sütunlu satırına yerleştirin.

Bulanıklık Modülünü Klonla ve Gelişmiş Sekmesinde CSS Kodunu Değiştir

Masaüstü sürümü için kullanılan Blurb Modülünü de kopyalayabilirsiniz, ancak CSS kodunda küçük bir değişiklik olması gerekir. Masaüstü için kodu kullanmak yerine aşağıdakini kullanın:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Blurb Module için de 'close' CSS sınıfının kullanıldığından emin olun.

Satıra Degrade Arka Planı Uygula

Mobil sürüm için, satırın gradyan arka planı için farklı ayarlar kullanıyoruz:

• Birinci Degrade Renk: #FFFFFF
• İkinci Degrade Renk: #0c71c3
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

Tema Seçeneklerine jQuery Kodu Ekle

Bu eğitim için yapmamız gereken son şey jQuery kodunu eklemek. Kodu, Tema Seçenekleri veya üzerinde çalıştığınız sayfaya yerleştirdiğiniz bir Kod Modülü aracılığıyla ekleyebilirsiniz. Bu örnek için, onu Tema Seçeneklerine koyacağız.

Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri > Entegrasyon > ve aşağıdaki jQuery kod satırlarını web sitenizin başlığına yapıştırın:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Sonuç

Gönderiyi adım adım takip ederseniz, masaüstünde aşağıdaki sonucu elde edebilmelisiniz:

Ve tabletlerde ve telefonlarda aşağıdaki sonuç:

Son düşünceler

Bu gönderide, tıkladığınızda nasıl iletişim formu oluşturacağınızı gösterdik. Ziyaretçilerinizle iletişim kurmak için bu yöntemi kullanmak, ince ancak etkilidir. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

La1n / Shutterstock.com tarafından Öne Çıkan Görsel