Divi'nin Boyutlandırma Seçenekleriyle Sabit İletişim Formu Köşesi Açılır Penceresi Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi'nin boyutlandırma seçeneklerini kullanarak sayfanıza sabit bir iletişim formu köşesi açılır penceresini nasıl ekleyeceğinizi göstereceğiz. Bu yaklaşım, ek bir eklentiye ihtiyaç duymadan ziyaretçileri web sitenizde kaldıkları süre boyunca takip eden bir iletişim formu oluşturmanıza yardımcı olacaktır!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

1. Kiropraktör Düzen Paketi Açılış Sayfasını Yükleyin

Yeni Sayfa Ekle

Yeni bir sayfa oluşturarak başlayın. Sayfayı adlandırıp yayınladıktan sonra Visual Builder'a geçin.

Kiropraktör Düzen Paketi Açılış Sayfasını Yükleyin

Daha sonra Kiropraktör Düzen Paketi açılış sayfasını yükleyin. Bu özel düzeni kullanacak olsak da, tekniğin üzerinde çalıştığınız herhangi bir sayfada çalışmasını sağlayabilirsiniz.

2. Yeniden Yaratmaya Başlayalım!

Sayfanın Altına Yeni Bölüm Ekle

Tıklandığında açılan sabit iletişim formuna tamamen yeni bir bölüm ayıracağız. Bu bölümü sayfanızın en altına ekleyin.

Arka plan rengi

Bölüm ayarlarını açın ve tamamen şeffaf bir arka plan rengi kullanın. Bu gönderide daha sonra, tüm bölümü düzelteceğiz. Saydam bir arka plan rengi kullanmak, bölüm kabının altında görünen her şeyin görünmesini sağlayacaktır.

• Arka Plan Rengi: rgba(255,255,255,0)

boyutlandırma

Tasarım sekmesine geçin ve farklı ekran boyutlarında bölümün genişliğini değiştirin.

• Genişlik: %37 (Masaüstü), %95 (Tablet), %100 (Telefon)
• Bölüm Hizalama: Sağ

aralık

Sonraki varsayılan üst dolguyu kaldırın.

• Üst Dolgu: 0px

CSS Sınıfı

Yeni bölümümüze özel bir CSS sınıfı da vermemiz gerekecek. Gönderinin ilerleyen bölümlerinde, bazı JQuery ve CSS kodları eklemek için bu CSS sınıfını kullanacağız.

• CSS Sınıfı: bölüm-açık

Varsayılan Z İndeksi

Bölümün tüm sayfa içeriğinin üstünde görünmesini sağlamak için görünürlük ayarlarında bölüm z dizinini artıracağız.

• Z İndeksi: 99

Z Endeksinin üzerine gelin

Fareyle üzerine gelindiğinde de aynı z dizini değerini ekleyin.

• Z İndeksi: 99

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

Bulanıklık Modülü Ekle

İçerik Kutularını Boş Bırak

Bu satırda ihtiyacımız olan ilk ve tek modül Blurb Modülü. Başlık ve içerik kutularını boş bıraktığınızdan emin olun.

Simge Seç

Sonraki bir simge seçin.

Arka plan rengi

Tanıtıcı arka plan rengini de değiştirin.

• Arka Plan Rengi: #FFFFFF

Simge Ayarları

Tasarım sekmesine gidin ve aşağıdaki simge ayarlarını uygulayın:

• Simge Rengi: #ff5f24
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 46px (Masaüstü), 30px (Tablet), 25px (Telefon)

boyutlandırma

Daha sonra farklı ekran boyutlarında boyutlandırma ayarlarını değiştirin.

• Genişlik: 140px (Masaüstü), 105px (Tablet), 80px (Telefon)
• Modül Hizalaması: Sağ

aralık

Ayrıca farklı ekran boyutlarına bazı özel üst ve alt dolgu değerleri ekleyeceğiz.

• Üst Dolgu: 50px (Masaüstü), 35px (Tablet), 25px (Telefon)
• Alt Dolgu: 20px (Masaüstü), 10px (Tablet), 0px (Telefon)

Sınır

Dairesel bir şekil oluşturmak için, kenarlık ayarlarındaki köşelerin her birine yüksek bir değer eklememiz gerekecek. '500px' kullanıyoruz.

Kutu Gölge

Dairesel şeklin görünmesine izin vermek için ince bir kutu gölgesi de ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 80px

Animasyon

Sonraki animasyon ayarlarını açın ve simge animasyonunu kaldırın.

• Simge Animasyonu: Animasyon Yok

CSS Sınıfı

Son olarak, Blurb Module'e bir CSS sınıfı ekleyin. Bu yazının ilerleyen bölümlerinde, tıklama işlevinin çalışması için bu CSS sınıfını kullanacağız.

• CSS Sınıfı: kontak açık

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Aşağıdaki sütun yapısını kullanın:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #FFFFFF

Sınır

Sonraki köşelerin her birine '39px' kenarlık yarıçapı ekleyin.

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek satır ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 80px

İletişim Formu Ekle

Elementler

Bu satırda ihtiyacımız olan tek modül İletişim Formu Modülüdür. Modülü ekledikten sonra, öğe ayarlarında captcha'yı devre dışı bırakın.

• Captcha'yı göster: Hayır

Alanlar

Tasarım sekmesine gidin ve alanlar ayarlarında alanların arka plan rengini değiştirin.

• Alanlar Arka Plan Rengi: rgba(0,126,255,0.13)

Buton

Düğmeyi şekillendirerek devam edin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #FFFFFF
• Düğme Arka Plan Rengi: #ff5f24
• Düğme Kenar Genişliği: 2px
• Düğme Kenar Rengi: rgba(0,0,0,0)
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Karla
• Düğme Yazı Ağırlığı: Kalın
• Düğme Üst Dolgusu: 14px
• Düğme Alt Dolgusu: 14px
• Düğme Sol Dolgu: 20px
• Düğme Sağ Doldurma: 20px

aralık

Ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px
• Sol Dolgu: 40px
• Sağ Dolgu: 40px

Kod Modülü Ekle

JQuery Kodu Ekle

İletişim Formu Modülünü tamamladığınızda, tıklama işlevini çalıştırmanın zamanı geldi! Bölümdeki ikinci satıra bir Kod Modülü ekleyin ve aşağıdaki yazdırma ekranında görebileceğiniz gibi aşağıdaki JQuery kod satırlarını script etiketleri arasına ekleyin :

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Bölüm Ayarlarını Değiştir

Boy uzunluğu

Bölüm ayarlarını açarak devam edin. Farklı ekran boyutları arasında yüksekliği değiştirin.

• Yükseklik: 190 piksel (Masaüstü), 140 piksel (Tablet), 125 piksel (Telefon)

Varsayılan Ana Eleman

Sağ alt köşeye sabitlemek için bölümün yanındaki ana öğeye bazı özel CSS kodları ekleyin.

bottom: 0;
right: 0;
position: fixed;

Ana Elemanın üzerine gelin

Sabit konumu vurgulu ana öğeye de eklediğinizden emin olun.

position: fixed;

Sayfaya Özel CSS Kodu Ekle

Sayfa Ayarlarını Aç

Geçiş efektini tamamlamak için sayfaya biraz CSS kodu da eklememiz gerekecek. Sayfa ayarlarını açın.

Özel CSS Ekle

Gelişmiş sekmesine gidin ve aşağıdaki CSS kod satırlarını ekleyin:

.section-open-active {
height: auto !important;
}

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin boyutlandırma ayarlarını kullanarak sayfalarınıza nasıl sabit bir iletişim formu ekleyeceğinizi gösterdik. Bu yaklaşımı, oluşturduğunuz her türlü web sitesinde çalıştırabilirsiniz. Bu eğitim, devam eden Divi tasarım girişimimizin bir parçasıdır ve her hafta tasarım araç kutunuza fazladan bir şey koymaya çalışıyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir 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 kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.