Divi ile tıklamada bir iletişim formu nasıl oluşturulur
Bu Divi öğreticisinde, Divi, bazı jQuery kodu ve CSS kodundan başkasını kullanarak düğmeyi (kaplama olarak) tıkladıktan sonra görünen bir iletişim formunun nasıl oluşturulacağını göstereceğiz. Bu, ziyaretçileri, düğmeye tıklayarak yaptıkları eylemlere odaklanmış sitenize tutmanın iyi bir yoludur. Onları farklı bir sayfaya götürmedi, ancak bitene kadar onları harekete geçirdi. Aşağıda ne yapacağımıza bakabilir ve sonra öğreticiye girebilirsiniz! Masaüstündeki sonuçlar
Mobil ve Tablet’te Sonuçlar Bu yazı için ilham ilhamı, yorum talebinden geliyor ve B3Multimedia’da bulunan. Bu çalışmayı yapmak için başka yöntemler kullanmasına rağmen, tıklamada iletişim formları oluşturmak için harika bir yola sahiptirler. Sonuçlara bakın: Bir Düğme Modülü ile bir parça oluşturun Genellikle görsel ön uç Divi üreticisinde neredeyse her şeyi nasıl yapacağımızı gösteririz. Ama bugünkü yazıda bir arka uç üreticisi kullanacağım. Çünkü kullandığımız kod biraz daha kolay. Bu, bizim gibi ön uç editörlerini seviyorsanız, bu öğreticiyi “Framework” ekranını kullanarak kolayca tamamlayabilirsiniz. Tamam, bu öğreticiye girelim! YouTube kanalımıza abone Olmamız gereken ilk şey, iletişim formunun görünmesini sağlayan düğmeyi yerleştirdiğimiz yeni bir bölüm eklemektir. Standart bölümü ekleyin ve bir sütun satırı seçin. Bunu yapmayı bitirdikten sonra düğme modülünü ekleyin.Düğme stilini istediğiniz gibi ayarlayabilirsiniz, ancak düğme URL’sinin ‘#’ ve ardından diğerleri ile başladığından emin olmalısınız. Boş bırakamazsınız veya sadece ‘#’ karakterini kullanamazsınız. ‘#’ Ve bazı metinler ekleyerek, düğmeyi tıkladıktan sonra sayfa hareket etmez. Boş bırakırsanız, tıklandığında sayfa yenilenir. Ve yalnızca ‘#’ kullanıyorsanız, sayfanın üstüne gönderileceksiniz. Yapmamız gereken bir sonraki önemli şey CSS sınıfını düğmeye ayarlamaktır. Bu CSS sınıfını, tıkladıktan sonra iletişim formunun görünmesini sağlamak için JQuery kodunda bu yazıda daha sonra kullanacağız. Düğmeye ayarlamamız gereken sınıf sadece bir ‘düğme’. Yapmamız gereken bir sonraki şeyde bir masaüstü kişi formu oluşturun, bu yazının önceki bölümünde oluşturduğumuz düğmeyi tıkladıktan sonra görünecek bir masaüstü kişi formu oluşturmaktır. Bu yazının ilerleyen saatlerinde size hücresel bir versiyonun nasıl oluşturulacağını da göstereceğiz. Temel olarak istediğiniz tasarımı tek bir satırda yapabilir ve bu yöntemi kullanırsanız semulan olarak görünmesini sağlayabilirsiniz. Size sadece aşağıdaki örneği nasıl yapacağınızı göstererek neler başarabileceğiniz hakkında bir resim vereceğiz: Üzerinde çalıştığınız sayfaya yeni bir standart parça ekleyerek yeni bir standart parça başlatın. Yeni eklediğiniz kısımdan devam eden sekmeyi açın ve CSS sınıf alanına ‘Sembulan’ ekleyin. Aynı sekmeyi aşağı kaydırın ve CSS Kustom alt kategorisinden önce aşağıdaki CSS kod hattını alana yerleştirin: Üst: 0px;
Sol: 0px;
Genişlik:%100;
Yükseklik:%100; Z-index: 999;
İçerik: “”;
Arka plan: RGBA (0.0,0, 0.8);
Konum: Sabit;
Bunu ekleyerek, bölümün tüm sekmeyi karşıladığından emin oluruz. İstediğiniz bir arka plan oluşturmak için CSS kodundaki arka plan rengini ayarlayabilirsiniz. Bu durumda, siyahı biraz şeffaflıkla kullanıyoruz. Aynı sekmede, ana öğeye aşağıdaki CSS kod satırını da ekleyin: Ekran: Yok;
Gelişmiş sekmesinde yapmamız gereken son şey, görünürlük alt kategorisindeki cep telefonu ve tablet üzerindeki parçaları devre dışı bırakmaktır. İki sütun ekleyerek iki sütun ekleyin ve tasarım sekmesini açın. Boyut alt kategorisindeki satırın genişliğini değiştirerek başlayın. Bu örnekte, 1291px özel genişlik kullandık. Tasarım sekmesini aşağı kaydırın ve uzay alt kategorisindeki her iki sütun üst, sol ve sağ dolgu için ’30px’ kullanın. Gelişmiş sekmesini girerek tamamlayın. Ana öğede, aşağıdaki CSS kod satırını ekleyin: Dönüşüm: Translatey (%-50) Translatex (%-50); Konum: Sabit; Üst:%50;
Sol:%50;
Z-endeks: 1000;
Sınır: 2px katı #0c71c3;
Border-Radius: 8px;
İlk metin modülünü ekleyin Bölüm ve satırdaki tüm değişiklikleri yaptıktan sonra, görüntülemek istediğiniz farklı bir modül ekleme zamanı. Ekleyeceğimiz ilk şey görünen başlık. İlk satır sütununa yeni bir metin modülü ekleyerek, metni içerik sekmesine yazın ve Tasarım sekmesine geçin. Tasarım sekmesinde, alt kategori metni için aşağıdaki ayarları kullandık:
Metin Oryantasyonu: Orta Metin yazı tipi: ıstakoz
Yazı tipi stili: kalın
Metin yazı tipi boyutu: 37
Metin rengi: #002282
Metin satırının yüksekliği: 1.7EM İkinci metin modülünü ekleyin. Yeni metin modülünü ekleyerek devam edin ve içerik sekmesine görüntülemek istediğiniz metni yazın. Tasarım sekmesine geçin ve metin alt kategorileri için aşağıdaki ayarların uygulanmasını sağlayın:
Metin Oryantasyonu: Orta
Metin Yazı Tipi: Arial Metin yazı tipi boyutu: 13
Metin rengi: #002282
Hat yüksekliği metni: 1.7em
Bir sonraki sosyal medyayı takip etmek için modülü ekleyin, sosyal medyayı ilk sütuna da takip etmek için modülü ekleyeceğiz. Bu durumda, üç sosyal ikon seçtik; Facebook, Twitter ve Instagram. Bu sosyal simgeyi içerik sekmesine ekledikten sonra, Icon alt kategorisindeki bir ‘daire’ bağlantısının şeklini değiştirin.
Yapmamız gereken son şey, Gelişmiş sekmesindeki bu modüle sol dolgu eklemektir. Ana öğeye aşağıdaki CSS kod satırını ekleyin: Palding-sol:%40;
Kontak formu modülünü ekleyin, sonra satırdan ikinci sütuna gidebiliriz. Bu sütunda, yerleştireceğimiz ilk şey temas formu modülüdür. Bu örnek için sadece iki alan seçtik; isim ve e -posta. Kontak formu modülünü ekledikten sonra, İletişim Modülü Tasarım sekmesini açın ve alanların metin alt kategorisinde aşağıdaki değişiklikleri yapın: Yazı tipi Yazı Tipi Boyut Formu: 15 Renk Metin Alanı Formu: #002282 Yüksek Alan Çizgisi Şekli: 1.7EM
Aynı sekmede, düğmelerin alt kategorisi için aşağıdaki değişiklikleri uygulayın:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 20
Arka Plan Renk Düğmesi: #0086C4
Sınır sınır genişliği: 2
Düğmenin parmakları: 3
Gelişmiş sekmesine geçin ve%5’in üzerinde dolgu ekleyin.
Bir Blurb Modül ekleyin İkinci sütuna eklememiz gereken başka bir şey bulanık modüldür. Bu modül için ihtiyacımız olan tek şey, açılır pencerenin sağ üst kısmındaki simgedir. Simgeler listesinde aşağıdaki simgeleri seçin ve diğer tüm şeylerin boş bırakın. Ardından, Gelişmiş sekmesini açın ve CSS sınıfı olarak ‘Close’ yazın. Aynı sekmede, CSS Kustom alt kategorisinin ana öğelerine aşağıdaki kod satırını ekleyin:
Pozisyon: Mutlak; Üst: -45px; Sağ: -30px; İmleç: işaretçi;
Gradyanın arka planını son fakat en az değil, satıra iyi görünen bazı gradyan arka planları ekleyeceğiz. Ayarları açın ve aşağıdaki değişikliklerin gradyan arka plan seçeneğine uygulanmasını sağlayın:
Birinci gradyan rengi: #ffffff
İkinci gradyan rengi: #0c71c3
Gradyan Türü: Doğrusal Gradyan yönü: 124deg
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Masaüstü sürümü oluşturduktan sonra tıklayın bir tablet ve telefon kişi formu oluşturun, tabletler ve cep telefonları sürümü çok daha hızlı çalışacaktır. Masaüstü sürümü için kullandığımız modüllerin çoğu hücresel sürüm için aynıdır. Cep telefonu üzerindeki sonuç şu gibi görünüyor:
Diğer standart parçaları ekleyerek yeni standart parçayı ekleyin. Bu bölüm, daha önce yaptığımız kısımla aynı ayarlara sahip olmalıdır. CSS sınıfına ‘açılır’ ekleyin ve daha önce alana aşağıdaki CSS kod satırını ekleyin: üst: 0px;
Sol: 0px;
Genişlik:%100; Yükseklik:%100; Z-index: 999;
İçerik: “”;
Arka plan: RGBA (0.0,0, 0.8);
Konum: Sabit;
Ana öğelere aşağıdaki CSS kodu satırını da ekleyin: Ekran: Yok;
Masaüstü sürümü için yaptığımız gibi cep telefonları ve tabletler için devre dışı bırakmak yerine, görünürlük alt kategorisindeki masaüstünde devre dışı bırakacağız: mobil ve tablet açılır pencereler için bir satır bir sütun ekleyin, yalnızca bir sütuna ihtiyacımız var. Bu çizgi için özel genişlik kullanmayacağız. Ancak, masaüstü sürümü için yaptığımız gibi özel dolgu uygulayacağız; Üst, sol ve sağ dolgu sütunları için 30px.
Ayrıca CSS özel alt kategorisindeki ana öğelere aşağıdaki CSS kod satırlarının eklendiğinden emin olmalıyız: Dönüşüm: Translatey (-50) Translatex (%-50);
Konum: Sabit; Üst:%50; Sol:%50; Z-endeks: 1000; Sınır: 2px katı #0c71c3;
Border-Radius: 8px;
Metin modüllerini klonlama, Sosyal Medya ve İletişim Formlarını Takip Edin Yapmamız gereken bir sonraki şey, masaüstü sürümü için kullandığımız ilk metin modülünü ve sosyal medya takip modülü ve iletişim formları ile klonlamaktır. Klonladıktan sonra, yeni yaptığınız yeni kısımdan bir sütun satırına yerleştirin.
Blurb Klon Modülü ve Değiştir CSS Kodunu Gelişmiş sekmenizde, masaüstü sürümü için kullanılan bulanıklık modülünü de klonlayabilirsiniz, ancak CSS kodunda hafif bir değişiklik olması gerekir. Masaüstü için kodu kullanmak yerine, bunun yerine aşağıdakileri kullanın: Pozisyon: Mutlak;
Üst: -15px;
Sağ: -25px;
İmleç: işaretçi; CSS sınıfının ‘Kapalı’ nın bulanık modül için de kullanıldığından emin olun. Gradyanın arka planını hücresel sürüm için satıra uygulayın, gradyan çizgisinin arka planı için farklı ayarlar kullanırız: Birinci gradyan rengi: #ffffff
İkinci gradyan rengi: #0c71c3
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece Başlangıç Pozisyonu:% 40
Son konum:%40 tema seçeneğine jQuery kodu ekleyin Bu öğretici için yapmamız gereken son şey jQuery kodu eklemektir. Kodu tema seçeneği veya üzerinde çalıştığınız sayfaya yerleştirdiğiniz kod modülü aracılığıyla ekleyebilirsiniz. Bu örnek için, yalnızca tema seçeneğine koyacağız. Bunu yapmak için WordPress Dashboard> Divi> Tema Seçenekleri> Entegrasyon> ve web sitenizin başına aşağıdaki jQuery kodunu yapıştırın:
jQuery (işlev ($) {
JQuery (‘. Button’). Tıklayın (function () {
JQuery (‘. Popup’). CSS (‘ekran’, ‘blok’);
});
JQuery (‘. Close’). Click (function () { JQuery (‘. Popup’). CSS (‘ekran’, ‘yok’);
});});
Sonuçlar Gönderiyi izlerseniz, adım adım, masaüstünde aşağıdaki sonuçları elde edebilmeniz gerekir:
Ve işte tabletler ve cep telefonları üzerindeki sonuçlar:
Bu yazıdaki son zihin, tıklamada nasıl bir iletişim formu oluşturacağınızı gösterdik. Ziyaretçilerinizle pürüzsüz ancak etkili bağlantı kurmak için bu yöntemi kullanmak. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun. Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun! Üstün Görüntü La1n / Shutterstock.com
