Global Başlığınıza Açılır İletişim Formu Nasıl Eklenir

Divi'nin tema oluşturucusunu kullanarak web siteniz için özel bir başlık oluşturduğunuzda, kendinizi bir CTA eklemenin ideal yolunu ararken bulacaksınız. Bunu yapmanın bir yolu, bir açılır iletişim formu eklemektir. Bu, başlığınızın genel görünümünü ve hissini temiz tutmanıza yardımcı olurken, kaydırmaya gerek kalmadan iletişim kurma olanağı sağlar. Bu eğitimde, Divi ve bazı JQuery & CSS kodlarını kullanarak nasıl açılır iletişim formu oluşturacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

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

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Divi Theme Builder'a gidin ve Global Header Oluşturmaya Başlayın

Divi Theme Builder'a gidin

WordPress web sitenizin arka ucundaki Divi Theme Builder'a giderek başlayın.

Genel Başlık Oluştur

Özel bir genel başlık oluşturmaya başlamak için 'Global Başlık Ekle'yi tıklayın ve 'Global Başlık Oluştur'u seçin.

2. Başlık Tasarımı Oluşturun

Bölüm Ayarları

Arka plan rengi

Genel başlık şablonuna girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #FFFFFF

aralık

Sonraki bölümün varsayılan üst ve alt dolgusunu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Kutu Gölge

İnce bir kutu gölgesi de uygulayın.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.15)

Yeni 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:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %95
• Maksimum Genişlik: %100

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw

Ana Eleman

Ve satırın ana öğesine tek bir CSS kodu satırı ekleyerek tüm sütun içeriğini hizalayın.

align-items: center;

Sütun 2 Z İndeksi

Ayrıca, duyarlı amaçlar için ikinci sütunun daha yüksek bir z dizini değerine sahip olduğundan emin oluyoruz.

• Z İndeksi: 12

Sütun 1'e Görüntü Modülü Ekle

Logo Yükle

Modül eklemeye başlama zamanı! Sütun 1'deki Görüntü Modülü ile başlayın. Bir logo yükleyin.

hizalama

Daha sonra modülün hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Genişliği de değiştirin.

• Genişlik: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

Sütun 2'ye Menü Modülü Ekle

Seçim Menüsü

İkinci sütunda bir Menü Modülü ekleyeceğiz.

Düzen

Modülün tasarım sekmesine gidin ve yerleşim stilini değiştirin.

• Stil: Merkezli

Menü Metin Ayarları

Daha sonra modülün menü metin ayarlarını değiştirin.

• Menü Yazı Tipi: Sans'ı Aç
• Menü Yazı Tipi Ağırlığı: Yarı Kalın
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Menü Harf Aralığı: 1px

Açılır Menü Metin Ayarları

Ardından, açılır menü satırı rengini değiştirin.

• Açılır Menü Satır Rengi: #007dff

Simgeler

Hamburger menü simgesi rengiyle birlikte.

• Hamburger Menü Simgesi Rengi: #007dff

Metin Modülü 1'i Sütun 3'e ekleyin

Kopya Ekle

Üçüncü modüle! Seçtiğiniz bir kopya ile bir Metin Modülü ekleyin.

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #007dff

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #ffffff
• Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Metin Hizalama: Merkez

boyutlandırma

Daha sonra modülün boyutlandırma ayarlarını değiştirin.

• Genişlik: %33
• Modül Hizalaması: Merkez

aralık

Ardından, bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 0.8vw (Masaüstü), 2vw (Tablet ve Telefon)
• Alt Dolgu: 0.8vw (Masaüstü), 2vw (Tablet ve Telefon)

Sınır

Ve bir miktar sınır yarıçapı ekleyerek modülün ayarlarını tamamlayın.

• Tüm Köşeler: 100 piksel

Metin Modülü 2'yi Sütun 3'e ekleyin

İçerik Kutusuna Sembol Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. İçerik kutusuna şu ok sembolünü ekleyin: '▼'.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #007fff
• Metin Boyutu: 3vw
• Metin Satır Yüksekliği: 0em
• Metin Hizalama: Merkez

Z İndeksi

Modülün z indeksini de artırıyoruz.

• Z İndeksi: 11

Sütun 3'e İletişim Formu Modülü Ekle

Tam Genişlikte Seçim Alanları Ekleyin

Üçüncü sütunda ihtiyacımız olan sonraki ve son modül, İletişim Formu Modülüdür. İhtiyacınız olan tüm tam genişlikli alanları ekleyin.

Başlık ekle

Bir başlık da kullanın.

Arka plan rengi

Sırada arka plan rengini değiştiriyoruz.

• Arka Plan Rengi: #e7f2ff

Alan Ayarları

Ardından modülün tasarım sekmesine geçin ve alan ayarlarını değiştirin.

• Alanlar Arka Plan Rengi: #ffffff
• Alanlar Metin Rengi: #dddddd
• Alanlar Odak Metni Rengi: #007dff
• Alanlar Üst Doldurma: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alanlar Alt Doldurma: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Fields Yazı Tipi: Açık Sans

• Alanlar Metin Boyutu: 0.7vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #007dff
• Başlık Metin Boyutu: 1vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Başlık Satırı Yüksekliği: 1,6em

Captcha Metin Ayarları

Captcha metin ayarlarıyla birlikte.

• Captcha Yazı Tipi: Açık Sans
• Captcha Metin Rengi: #007dff

Düğme Ayarları

Düğmeyi şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #007dff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: Sans'ı Aç
• Düğme Yazı Ağırlığı: Kalın

• Düğme Üst Kenar Boşluğu: 1vw
• Düğme Üst Dolgusu: 1vw (Masaüstü), 2vw (Tablet ve Telefon)
• Düğme Alt Dolgusu: 1vw (Masaüstü), 2vw (Tablet ve Telefon)
• Düğme Sol Dolgu: 2vw (Masaüstü), 7vw (Tablet ve Telefon)
• Düğme Sağ Doldurma: 2vw (Masaüstü), 7vw (Tablet ve Telefon)

aralık

Ardından, farklı ekran boyutlarında bazı özel dolgu değerleri kullanın.

• Üst Dolgu: 4vw (Masaüstü), 6vw (Tablet ve Telefon)
• Alt Dolgu: 4vw (Masaüstü), 6vw (Tablet ve Telefon)
• Sol Dolgu: 2vw (Masaüstü), 6vw (Tablet ve Telefon)
• Sağ Dolgu: 2vw (Masaüstü), 6vw (Tablet ve Telefon)

Sınır

Sonraki kenarlık ayarlarını değiştirin.

• Tüm Köşeler: 10px

Ana Öğe, Kişi Başlığı ve Captcha CSS

Gelişmiş sekmesine bazı küçük CSS değişiklikleri ekleyerek modülün ayarlarını tamamlayın.

Ana Eleman:

border-radius: 20px;

İletişim Başlığı:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Tıklamada İletişim Formu Oluşturmak için Öğeleri Özelleştirin

Sütun 3 Yükseklik Ekle

Tüm modülleri yerleştirdikten sonra, efekti yaratmanın zamanı geldi. İstenilen sonuca ulaşmak için ilk adım, sütun 3 ayarlarını açmak ve gelişmiş sekmede bazı duyarlı özel yükseklik eklemektir.

Masaüstü:

height: 3vw;

Tablet:

height: 5vw;

Telefon:

height: 6vw;

Düğme ve Ok'a CSS Sınıfı Ekleme

Ardından, aynı CSS sınıfını sütun 3'teki ilk Metin Modüllerinin her ikisine de ekleyeceğiz.

• CSS Sınıfı: iletişim göster

İletişim Formuna CSS Sınıfı Ekle

İletişim Formu Modülü için de özel bir CSS sınıfına ihtiyacımız olacak.

• CSS Sınıfı: iletişim formu modülü

İletişim Formu Modülünü Gizle

İletişim Formu Modülünün ana öğesine fazladan bir satır CSS kodu ekleyerek devam edin. Bu, tıklamadan önce modülü gizlememize izin verecektir.

display: none;

JQuery ve CSS Kodu ile Sütun 3'e Kod Modülü Ekleme

Ve tıklama işlevini oluşturmak için bazı JQuery kodlarına ihtiyacımız olacak. Biz de bazı özel CSS kodları kullanacağız. 2. sütuna kodla birlikte yeni bir Kod Modülü ekleyin. JQuery kodunu komut dosyası etiketleri arasına ve CSS kodunu stil etiketleri arasına yerleştirdiğinizden emin olun.

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !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, özel olarak oluşturulmuş başlığınıza nasıl açılır iletişim formu ekleyeceğinizi gösterdik. Bu, eylemi en başından tetiklemek için harika bir yoldur. JSON dosyasını da ücretsiz paylaştık! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.