Sizin için özel bir başlık oluşturduğunuzda Site Web, Divi'nin tema oluşturucusunu kullanarak, kendinizi bir AAL (harekete geçirici mesaj) eklemenin mükemmel yolunu ararken bulacaksınız. Bunu yapmanın bir yolu, İletişim formu kaydırma Bu, giriş yeteneği sağlarken başlığınızın genel görünümünü temiz tutmanıza yardımcı olacaktır. UAF ile aşağı kaydırmak zorunda kalmadan sizinle. Bu eğitimde, size nasıl oluşturulacağını göstereceğiz. İletişim formu Divi ve JQuery & CSS kodunu kullanarak açılır. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!
Gidelim.
anket
Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.
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 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.
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
aralık
Ardından varsayılan üst ve alt dolguyu bölümden çıkarın.
- Üst dolgu: 0 piksel
- Alt doldurma: 0px
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)
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:
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
aralık
Ardından özel üst ve alt dolgu ekleyin.
- Üst dolgu: 1vw
- Alt doldurma: 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 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
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.
hizalanma
Ardından modülün hizalamasını değiştirin.
- Görüntü hizalama: merkez
boyutlandırma
Ayrıca genişliği de değiştirin.
- Genişlik: 3vw (masaüstü), 5vw (tablet), 7vw (telefon)
Sütun 2'ye menü modülü ekleme
Menüyü seçin
İkinci sütuna bir menü modülü ekleyeceğiz.
hüküm
Modül tasarımı sekmesine geçin ve yerleşim stilini değiştirin.
- Stil: Ortalanmış
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
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
simgeler
Hamburger menü simgesi rengi ile.
- Hamburger menü simgesi rengi: # 007dff
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.
Arka plan rengi
Ardından 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
- Metnin yazı tipi ağırlığı: kalın
- Metin rengi: #ffffff
- Metin boyutu: 0.8vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Metnin hizalanması: orta
boyutlandırma
Ardından modül boyutlandırma parametrelerini değiştirin.
- Genişlik:% 33
- Modülün hizalanması: orta
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)
Sınır
Ve kenarlık yarıçapı ekleyerek modül parametrelerini tamamlayın.
- Tüm köşeler: 100 piksel
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: "▼".
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
Z Endeksi
Modülün z indeksini de artırıyoruz.
- Z Endeksi: 11
İletişim formu modülünü 3. sütuna ekleyin
Artık bir ekleyebilirsiniz İletişim formu oku içeren metin modülünün hemen altındadır. Bu modülün kullanımı oldukça basittir, dolayısıyla hangi alanları görünür kılmak istediğinizi özelleştirmeniz gerekecektir.
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;
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ı: göster-UAF ile
İ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ı: UAF ile-form-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, modülü tıklamadan önce gizlememizi sağlayacaktır.
display: none;
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;}
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
ofis
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.
