Ana İçeriğe Geç

Genel başlığınıza açılır iletişim formu nasıl eklenir?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi'nin tema oluşturucusunu kullanarak web siteniz için özel bir başlık oluşturduğunuzda, kendinizi bir AAL (harekete geçirici mesaj) eklemenin mükemmel yolunu ararken bulacaksınız. Bunu yapmanın bir yolu, açılır bir iletişim formu eklemektir. Bu, başlığınızın genel görünümünü temiz tutmanıza yardımcı olurken, aşağı kaydırmak zorunda kalmadan sizinle iletişime geçme yeteneği sağlar. Bu eğiticide, Divi ve JQuery & CSS kodunu kullanarak nasıl açılır bir iletişim formu oluşturacağınızı göstereceğiz. JSON dosyasını ücretsiz olarak da indirebilirsiniz!

Gidelim.

anket

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Divi açılır menüsü

1. Divi Tema Oluşturucu'ya gidin ve global bir başlık oluşturmaya başlayın

Divi Tema Oluşturucu'ya git

WordPress sitenizin arka ucundaki Divi Tema Oluşturucu'ya giderek başlayın.

Global divi başlığı

Global bir başlık oluşturma

"Genel Üstbilgi Ekle" yi tıklayın ve özel bir genel üstbilgi oluşturmaya başlamak için "Genel Üstbilgi Oluştur" u seçin.

Global divi başlığı oluşturun

2. Başlık tasarımını oluşturun

Bölüm ayarları

Arka plan rengi

Genel başlık şablonunun içine 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
Arka plan ayarı

aralık

Ardından varsayılan üst ve alt dolguyu bölümden çıkarın.

  • Üst dolgu: 0 piksel
  • Alt doldurma: 0px
Dolgu yapılandırması

Gölge kutusu

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

  • Kutu Gölge Bulanıklığı Gücü: 50px
  • Gölge rengi: rgba (0,0,0,0,15)
Divi gölge yapılandırması

Yeni bir satır ekle

Sütun yapısı

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

Bir görünüm seçin

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet
  • Genişlik:% 95
  • Maksimum genişlik:% 100
Divi çizgi boyutunu yapılandırın

aralık

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

  • Üst dolgu: 1vw
  • Alt doldurma: 1vw
Bölüm aralığı yapılandırması

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;

Özel css

Sütun 2 Z Endeksi

Ayrıca, ikinci sütunun reaktif amaçlar için daha yüksek bir z-endeksi değerine sahip olduğundan emin oluruz.

  • Z Endeksi: 12
Sütun parametresi

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

Logoyu indir

Modül eklemeye başlama zamanı! 1. sütunda bir görüntü modülüyle başlayın. Bir logo yükleyin.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Görüntü modülü divi

hizalanma

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

  • Görüntü hizalama: merkez
Hizalama görüntüsü modülü

boyutlandırma

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

  • Genişlik: 3vw (masaüstü), 5vw (tablet), 7vw (telefon)
açılır iletişim formu

Sütun 2'ye menü modülü ekleme

Menüyü seçin

İkinci sütuna bir menü modülü ekleyeceğiz.

Divi menü modülünün kişiselleştirilmesi

hüküm

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

  • Stil: Ortalanmış
Menü modülü stili

Menü metni ayarları

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

  • Menü yazı tipi: Olmadan aç
  • Menü yazı tipi ağırlığı: Yarı kalın
  • Menü metni rengi: # 000000
  • Menü metni boyutu: 0.8vw (masaüstü), 2vw (tablet), 3vw (telefon)
  • Menü harf aralığı: 1 piksel
Divi menü metni

Açılır menü metin ayarları

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

  • Açılır menünün çizgisinin rengi: # 007dff
Divi açılır menüsü

simgeler

Hamburger menü simgesi rengi ile.

  • Hamburger menü simgesi rengi: # 007dff
Menü simgeleri divi

1 metin modülünü 3 sütununa ekleyin

Bir kopya ekle

Üçüncü modüle geçelim! Seçtiğiniz bir kopyayla bir metin modülü ekleyin.

Bize ulaşın divi modülü

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

  • Arka Plan Rengi: # 007dff
Divi arka planı

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
  • Metnin yazı tipi ağırlığı: kalın
  • Metin rengi: #ffffff
  • Metin boyutu: 0.8vw (masaüstü), 2vw (tablet), 3vw (telefon)
  • Metnin hizalanması: orta
Divi yazı tipi rengi

boyutlandırma

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

  • Genişlik:% 33
  • Modülün hizalanması: orta
Bölüm metni divi boyutlandırma

aralık

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

  • Üst dolgu: 0.8vw (masaüstü), 2vw (tablet ve telefon)
  • Alt dolgu: 0.8vw (masa), 2vw (tablet ve telefon)
Metin modülü aralık yapılandırması

Sınır

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Tüm köşeler: 100 piksel
Metin modülü sınır yapılandırması

2 metin modülünü 3 sütununa ekleyin

İçerik alanına sembol ekleme

Başka bir metin modülü olan bir sonraki modüle geçelim. İçerik alanına şu oku ekleyin: "▼".

Divi fleche metin modülü

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 boyutu: 3vw
  • Metin satırının yüksekliği: 0em
  • Metnin hizalanması: orta
Yazı tipi divi metin modülü

Z Endeksi

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

  • Z Endeksi: 11
Divi metin modülü konumu

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

Artık ok içeren metin modülünün hemen altına bir iletişim formu ekleyebilirsiniz. Bu modülün kullanımı oldukça basittir, bu nedenle görünür hale getirmek istediğiniz alanları özelleştirmeniz gerekecektir.

İletişim formu modülü

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

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

Tüm modlar yerine oturduğunda, efekti yaratmanın zamanı geldi. İstenilen sonuca ulaşmanın ilk adımı, 3. sütundaki ayarları açmak ve gelişmiş sekmede duyarlı özel yükseklik eklemektir.

Ofis:

height: 3vw;

tablet:

height: 5vw;

Telefon:

height: 6vw;

Örnek broşür iletişim formu

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

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

  • CSS sınıfı: show-contact
Gösteri iletişim bölümü ekle

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

Ayrıca İletiş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ü
Divi formuna bir sınıf ekleyin

İ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, modülü tıklamadan önce gizlememizi sağlayacaktır.

display: none;

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Stil css modülü divi

JQuery ve CSS koduyla sütun 3'e bir kod modülü ekleyin

Ve tıklama işlevini oluşturmak için bazı JQuery kodlarına ihtiyacımız olacak. Ayrıca özel CSS kodu kullanacağız. Kod ile 2. sütuna 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;}

JavaScript kodu ekleyin

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

ofis

Tasarım örneği

Ne hatırlamak

Bu makalede, özel başlığınıza açılır bir iletişim formunu nasıl ekleyeceğinizi gösterdik. Erken harekete geçmenin harika bir yolu. 

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse4
cıvıltı
Enregistrer