Divi Boyutu seçeneğine sahip sabit bir kontak formu açılır nasıl yapılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, Divi Boyut seçeneğini kullanarak sayfanıza sabit bir kontak köşesi açılır penceresini nasıl ekleyeceğinizi göstereceğiz. Bu yaklaşım, ek eklentilere ihtiyaç duymadan, web sitenizde yaşarken ziyaretçileri takip eden iletişim formlarını kurmanıza yardımcı olacaktır!
Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Arka plan rengi: RGBA (255,255,255.0) Yapıştırıcı tasarım sekmesine geçer ve çeşitli ekran boyutlarındaki parçaların genişliğini değiştirir. Genişlik:% 37 (masaüstü),% 95 (tablet),% 100 (cep telefonu)
Hizalama Bölümü: Doğru
Bir sonraki varsayılan olarak dolgu mesafesini silin. Üst dolgu: 0px
CSS sınıfımız da özel CSS sınıfının yeni bölümlerimizi vermelidir. Gönderinin ilerleyen saatlerinde, bu CSS sınıfını bazı JQuery ve CSS kodu eklemek için kullanacağız. CSS sınıfı: açık kısım
Varsayılan Z Dizin, Bölümün tüm sayfa içeriğinin üzerinde göründüğünden emin olmak için, görünürlük düzenlemesinde Z bölümü dizinini artıracağız. Dizin Z: 99
Z indexine gidin Z’de aynı z indeks değerini toplayın. Dizin Z: 99
Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek 1 numaralı Sütun Yapısı Ekle: Blurb modülünü ekleyin, bu satırda ihtiyacımız olan ücretsiz ve tek modül boş içerik kutusunun bulanık modül olmasına izin verin. Başlık kutusunu ve boş içeriği bıraktığınızdan emin olun. Simgeyi seçin Bir sonraki simgeyi seçin. Arka plan rengi bulanıklığın arka plan rengini de değiştirir. Arka plan rengi: #ffffff
Simge ayarlarını tasarım sekmesine taşıyın ve aşağıdaki simge ayarlarını uygulayın: Renk simgesi: #ff5f24
Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 46px (masaüstü), 30px (tablet), 25px (telefon)
Yapıştırıcı Boyut ayarlarını sonraki çeşitli ekran boyutlarındaki değiştirin. Genişlik: 140px (masaüstü), 105px (tablet), 80px (cep telefonu)
Modül hizalaması: doğru
Mesafemiz ayrıca çeşitli ekran boyutlarında bazı üst dolgu değerleri ve alt gümrükler ekleyecektir. Üst Pilding: 50 piksel (masaüstü), 35px (tablet), 25px (cep telefonu)
Aşağıda dolgu: 20px (masaüstü), 10px (tablet), 0px (cep telefonu)
Bir daire şekli yapmak için sınırda, sınır ayarındaki her açıya bir yükseklik değeri eklememiz gerekir. ‘500px’ kullanıyoruz. Kutularımız, dairenin şeklinin görünmesini sağlamak için pürüzsüz bir kutu gölgesi ekleyecektir. Bulanık Güç Gölgesi Kutusu: 80px Animasyon bir sonraki animasyon ayarlarını açın ve animasyon simgelerini silin.
Animasyonlu simge: animasyon olmadan Son CSS sınıfı, CSS sınıfını bulanıklık modülüne ekleyin. Bu yazının ilerleyen saatlerinde, bir tıklama çalışma işlevi oluşturmak için bu CSS sınıfını kullanacağız.
CSS Sınıfı: Açık İletişim
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Aşağıdaki sütun yapısını kullanın:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve beyaz arka plan rengini ekleyin.
Kutunun gölgesi ve pürüzsüz bir kutu gölgesi ekleyerek satır ayarını bitirin. Bulanık Güç Gölgesi Kutusu: 80px Bu satırda ihtiyacımız olan tek modül için iletişim formunu ekleyin Kontak formu modülüdür. Bir modül ekledikten sonra, öğe ayarlarında captcha’yı devre dışı bırakın.
Captcha’yı göster: hayır Alan tasarım sekmesine geçer ve alan ayarlarındaki alanın arka plan rengini değiştirir.
Alan Arka Plan Rengi: RGBA (0.126,255.0.13) Düğmeyi düzenleyerek düğmeye devam edin.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 16px
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #FF5F24
Sınır sınır genişliği: 2px
Düğme Sınır Rengi: RGBA (0.0,0,0)
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Karla
Mektup Ağırlığı Düğmesi: Kalın
Dolgu Üst Düğmesi: 14px
Dolgu Alt Düğmesi: 14px
Sol düğme: 20pxtOMBOLT dolgu sağ: 20px
Mesafe ve bazı özel dolgu değerleri ekleyin.
Üst dolgu: 30px
Dolgu Alt: 30 piksel Sol dolgu: 40 piksel
Sağ dolgu: 40 piksel
Kod modülünü ekle JQuery Kodunu girmek için Kişi Formu Modülünü tamamladıktan sonra, işleyen bir tıklama işlevi oluşturma zamanı! Kod modülünü o bölümdeki ikinci satıra ekleyin ve aşağıdaki basılı ekranda görebileceğiniz gibi komut dosyası etiketleri arasında aşağıdaki jQuery kod satırını girin:
jQuery (işlev ($) {
$ (“. Contact-open”). Click (function () { $ (‘. Kesit-open’). Toggleclass (‘bölüm-open-aktif’);
});
});
Yüksek bölüm ayarlarını değiştirin Bölümün ayarlarını açarak devam edin. Çeşitli ekran boyutlarındaki yüksekliği değiştirin.
Yükseklik: 190px (masaüstü), 140px (tablet), 125px (cep telefonu)
Varsayılanın ana öğesi, sağ alt köşede kalmasını sağlamak için parçanın ana öğesine bazı özel CSS kodu ekleyin. Alt: 0; Sağ: 0;
Konum: Sabit; Ana öğeyi yönlendirin, Hover’ın ana öğesine sabit bir konum eklediğinizden emin olun. Konum: Sabit;
Başlangıç efektini tamamlamak için sayfa açma sayfasına özel bir CSS kodu ekleyin, sayfaya da küçük bir CSS kodu eklememiz gerekir. Sayfa ayarlarını açın.
Özel bir CSS ekleyin Gelişmiş sekmesini açın ve aşağıdaki CSS kod satırını ekleyin: .Section-open-aktif { Yükseklik: Otomatik! Önemli; } Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, divi boyut ayarlarını kullanarak sayfanıza nasıl sabit bir iletişim formu ekleyeceğinizi gösterdik.Bu yaklaşım işlevini yaptığınız her tür web sitesinde yapabilirsiniz.Bu öğretici, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bıraktığınızdan emin olun. Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, e -posta bültenimize ve YouTube kanallarımıza abone olduğunuzdan emin olun, böylece her zaman biri olacaksınız Bu ücretsiz içeriğin faydalarını bilen ve alan ilk insanlar.
