Divi: Genel bir başlığa iletişim formu nasıl eklenir

eklemek gerekiyor İletişim formu küresel bir başlığa mı?

Sizin için özel bir başlık oluşturduğunuzda Site Web Divi Theme Builder'ı kullanarak kendinizi bir CTA (Harekete Geçirici Mesaj) eklemenin mükemmel yolunu ararken buluyorsunuz. Bunu yapmanın bir yolu, İletişim formu kaydırma 

Bu, içine girme yeteneği sağlarken başlığınızın genel görünümünü temiz tutmanıza yardımcı olacaktır. UAF ile kaydırmak zorunda kalmadan. 

Bu derste size nasıl oluşturulacağını göstereceğiz. İletişim formu Divi ve JQuery ve CSS kodu kullanılarak kaydırılabilir.

Hadi başlayalım!

anket

Bu öğreticiye dalmadan önce, alacağımız sonucun önizlemesine bir göz atalım.

Global bir başlık oluşturma

Tema Oluşturucu'ya gidin

WordPress kontrol panelinizde bulunan Divi menüsünden Tema Oluşturucu'ya gidin ve "Genel bir başlık ekle"yi tıklayın.

'Genel başlık oluştur' seçeneğini seçin.

Bir başlık stili oluşturun

Bölüm ayarları

Arka plan rengi

Şablon düzenleyiciye girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini değiştirin.

• Arkaplan: #FFFFFF

aralık

Ardından, varsayılan Üst ve Alt İç Kenar Boşluklarını bölümden kaldırın.

• İç Kenar Boşluğu Tepe Noktası: 0px
• Alt İç Kenar Boşluğu: 0px

Gölge kutusu

Ayrıca ince bir kutu gölgesi uygulayın.

• Kutu Gölge Mavisi Gücü: 50px
• Altyazı yazı tipi rengi: rgba(0,0,0,0.15)

Yeni satır ekle

Sütunun yapısı

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

boyutlandırma

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
• Sütun aralığı: 1
• Sütun yüksekliklerini uyumlu hale getirin: Evet
• Maksimum genişlik: %95
• Maksimum genişlik: %100

aralık

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

• En yüksek iç marj: 1vw
• Alt iç kenar boşluğu: 1vw

ana unsur

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

align-items: center;

2. sütunun Z alt indisi

Ayrıca, duyarlı tasarım için ikinci sütunun daha yüksek bir z-endeksi değerine sahip olmasını sağlıyoruz.

• Z-endeksi: 12

1. sütuna görüntü modülü ekleyin

Logoyu indir

Modül eklemeye başlamanın zamanı geldi! Sütun 1'de bir Resim modülü ile başlayın. Bir logo yükleyin.

hizalanma

Ardından modülün hizalamasını değiştirin.

• Görüntü Hizalama: Ortalanmış

boyutlandırma

Ayrıca genişliği de değiştirin.

• Maksimum genişlik: 3vw (masaüstü), 5vw (tablet), 7vw (telefon)

Menü modülünü sütun 2'ye ekleyin

Seçim Menüsü

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

hüküm

Modül Stili sekmesine geçin ve yerleşim stilini değiştirin.

• Stiller: Merkezli

Menü metni ayarları

Ardından modül menüsündeki metin ayarlarını değiştirin.

• Yazı Tipi Menüsü: Hiçbirini Aç
• Loş ışık menüsü: yarı kalın
• Menü metin rengi: #000000
• Menü Metin Boyutu: 0,8 vw (masaüstü), 2 vw (tablet), 3 vw (telefon)
• Menü harf aralığı: 1px

Açılır menü metin ayarları

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

• Açılır menü satırı rengi: #007dff

simgeler

Hamburger menü simgesi rengini değiştirin.

• Hamburger menü simgesi rengi: #007dff

Sütun 3'e Metin modülü ekleyin

Mesaj ekle

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

Arka plan rengi

Bir arka plan rengi ekleyin.

• Arka Plan Rengi: #007dff

Metin ayarları

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

• Metin Yazı Tipi: Açık Sans
• Yumuşak Işık Metni: Kalın
• Metin rengi Metin: #ffffff
• Metin Metin boyutu: 0,8 vw (masaüstü), 2 vw (tablet), 3 vw (telefon)
• Metin Hizalama: Ortalanmış

boyutlandırma

Ardından modül boyutlandırma parametrelerini değiştirin.

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

aralık

Ardından, özel Üst ve Alt dolgular ekleyin.

• Üst iç kenar boşluğu: 0,8 vw (masaüstü), 2 vw (tablet ve telefon)
• Dahili Marj Düşük: 0,8 vw (masaüstü), 2 vw (tablet ve telefon)

sınır

Ve kenarlık yarıçapı ekleyerek modül parametrelerini tamamlayın.

• Yuvarlatılmış dikdörtgen: 100 piksel

3. sütuna başka bir Metin modülü ekleyin

İçerik alanına sembol ekleme

Diğer bir metin modülü olan bir sonraki modüle geçelim. İçerik alanına şu ok sembolünü ekleyin: '▼'.

Metin ayarları

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

• Metin Yazı Tipi: Açık Sans
• Metin Rengi: #007fff
• Metin Metin boyutu: 3vw
• Metin satırı yüksekliği: 0em
• Metin Hizalama: Ortalanmış

Z-endeksi

Modülün z-endeksini de artıralım.

• Z-endeksi: 11

3. sütuna İletişim Formu modülünü ekleyin

İstediğiniz tam genişlikte alanları ekleyin

Üçüncü sütunda ihtiyacımız olan sonraki ve son modül bir iletişim formu modülüdür. İhtiyacınız olan tüm genişlikteki alanları ekleyin.

Başlık ekleyin

Ayrıca bir başlık kullanın.

Arka plan rengi

Ardından, arka plan rengini değiştirelim.

• Arka plan rengi: #e7f2ff

Saha ayarları

Modülün Style sekmesine gidelim ve alan ayarlarını değiştirelim.

• Arka Plan Rengi alanları: #ffffff
• Alan metni rengi: #dddddd
• Odak metin rengi: #007dff
• Vertex Dolgu Alanları: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
• Alt Doldurma Alanları: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
• Yazı Tipi Alanları: Hiçbirini Aç

• Alanlar Metin boyutu: 0,7 vw (masaüstü), 1,8 vw (tablet), 3 vw (telefon)

Başlık metni ayarları

Başlık metni ayarlarını düzenleyin.

• Üçüncü Başlık Ekle: H3
• Yumuşak Işık Başlık: Kalın Metin
• Metin hizalama: ortalanmış
• Başlık metni rengi: #007dff
• Başlık Metin boyutu: 1 vw (masaüstü), 2,5 vw (tablet), 3,5 vw (telefon)
• Başlık satırı yüksekliği: 1,6 em

Captcha metin ayarları

Captcha metin ayarlarıyla.

• Font Captcha: Açık Sans
• Captcha metin rengi: #007dff

Düğme ayarları

Düğmeyi özelleştirerek devam edin.

• Düğme için özel stiller kullanın: Evet
• Düğme Metin Boyutu: 0,8 vw (masaüstü), 2 vw (tablet), 3 vw (telefon)
• Düğme metin rengi: #ffffff
• Artalan Düğmesi: #007dff
• Kenarlık genişliği düğmesi: 0 piksel
• Düğme Sınır Yarıçapı: 100 piksel

• Yazı Tipi Düğmesi: Hiçbirini Aç
• Yumuşak Işık düğmesi: Kalın metin

• Düğme Marjı: 1vw
• Üst Doldurma Düğmesi: 1vw (masaüstü), 2vw (tablet ve telefon)
• Alt Doldurma Düğmesi: 1vw (masaüstü), 2vw (tablet ve telefon)
• Sol Pad Düğmesi: 2vw (masaüstü), 7vw (tablet ve telefon)
• Sağ Pad Düğmesi: 2vw (masaüstü), 7vw (tablet ve telefon)

aralık

Farklı ekran boyutlarında özel dolgu değerleri kullanın.

• En yüksek dahili boşluk payı: 4vw (masaüstü), 6vw (tablet ve telefon)
• Alt İç Kenar Boşluğu: 4vw (masaüstü), 6vw (tablet ve telefon)
• Sol iç kenar boşluğu: 2vw (masaüstü), 6vw (tablet ve telefon)
• Sağ iç kenar boşluğu: 2vw (masaüstü), 6vw (tablet ve telefon)

sınır

Ardından kenarlık ayarlarını değiştirin.

• Girdi Yuvarlatılmış Dikdörtgen: 10px

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

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

Ana unsur:

01	border-radius: 20px;

Başlığı UAF ile :

01	margin-bottom: 1vw;

Captcha:

01	margin-top: 1.5vw;

Tek tıklamayla bir iletişim formu oluşturmak için öğeleri özelleştirin

Sütun 3'ün yüksekliğini ekleyin

Tüm modülleri yerleştirdikten sonra, efekti yaratmanın zamanı geldi. İstenilen sonucu elde etmenin ilk adımı, 3 sütun ayarını açmak ve gelişmiş sekmesinde özel bir duyarlı yükseklik eklemektir.

Sıra :

01	height: 3vw;

tablet:

01	height: 5vw;

Telefon etmek:

01	height: 6vw;

Düğmeye ve oka bir CSS sınıfı ekleme

Ardından, sütun 3'teki ilk iki metin modülüne aynı CSS sınıfını ekleyeceğiz.

• CSS sınıfı: göster-UAF ile

İletişim formuna bir CSS sınıfı ekleme

Ayrıca iletişim formu modülü için ö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 ek bir CSS kodu satırı ekleyerek devam edin. Bu, tıklamadan önce modülü gizlememize izin verecektir.

01	display: none;

JQuery ve CSS koduyla 3. sütuna kod modülü ekleyin

Ve tıklama işlevini oluşturmak için JQuery koduna ihtiyacımız olacak. Ayrıca özel CSS kodu kullanacağız. 2. sütuna kodla birlikte yeni bir kod modülü ekleyin. JQuery kodunu script 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;

}

anket

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

Sonuç

Bu makalede, özel başlığınıza nasıl açılır iletişim formu ekleyeceğinizi gösterdik.

Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.