oluşturmak ister misiniz? İletişim formu Divi'de bir düğmeye tıkladıktan sonra görünen?
Bu Divi eğitiminde, size nasıl bir Divi oluşturacağınızı göstereceğiz. İletişim formu Divi, jQuery kodu ve CSS kodundan başka hiçbir şey kullanmadan bir düğmeyi tıkladıktan sonra görünür.
Ayrıca şu kılavuzumuzu okuyun: Divi: "Göster" efektiyle yapışkan bir alt bilgi nasıl oluşturulur
tutmak için harika bir yoldur. ziyaretçi senin web sitesi bir düğmeye tıklayarak taahhüt ettikleri eyleme odaklandılar. Onları farklı bir sayfaya götürmez.
anket
Aşağıda, ne oluşturacağımıza hızlıca göz atabilir, ardından eğiticiye geçebilirsiniz!
PC'de önizleme
Telefonda ve tablette önizleme
Önceden tanımlanmış bir düzen ile yeni bir sayfa oluşturun
Divi kitaplığından önceden tanımlanmış bir düzen kullanarak başlayalım. Bu örnek için iletişim sayfasını kullanacağız. Güzellik Ürünü Düzen Paketi .
sayfanıza yeni bir sayfa ekleyin Site Web ve bir başlık verin, ardından seçeneği seçin 'Divi Builder'ı kullanın'.
Bu örnek için Divi kitaplığından önceden hazırlanmış bir düzen kullanacağız, bu nedenle 'Düzen seçin'.
Düzenin Ana sayfasını bulun ve seçin 'İç Tasarım Şirketi'.
'Düzen seçin' sayfanıza düzeni eklemek için.
Artık eğitimimize devam etmeye hazırız.
Düğme modülüyle bir bölüm oluşturun
Yapmamız gereken ilk şey, butonları yerleştireceğimiz yeni bir bölüm eklemek. İletişim formu göstermek.
Ayrıca bakınız: Divi: Özel bir altbilgi nasıl oluşturulur
Sadece standart bir bölüm ekleyin
Ardından, tek sütunlu bir satır seçin.
Bunu yaptıktan sonra, ona bir Düğme modülü ekleyin.
Düğmeyi istediğiniz gibi özelleştirebilirsiniz, ancak düğme URL'sinin '#' ile başlayıp ardından başka bir şey geldiğinden emin olmanız gerekir. Sadece boş bırakamaz veya sadece '#' karakterini kullanamazsınız. '#' ve metin ekleyerek, düğmeye tıkladığınızda sayfa hareket etmeyecektir. Boş bırakırsanız sayfa tıklandığında yenilenecektir. Ve yalnızca '#' kullanırsanız, sayfanın en üstüne gönderilirsiniz.
Yapmamız gereken bir sonraki önemli şey, butona bir CSS sınıfı atamak. Tıkladıktan sonra iletişim formunun görünmesini sağlamak için bu CSS sınıfını bu makalenin ilerleyen bölümlerinde jQuery kodunda kullanacağız. Düğmeye atamamız gereken sınıf basitçe “button”.
- CSS sınıfı: düğme
PC sürümü iletişim formu oluşturun
Bundan sonra yapmamız gereken şey, bu yazının bir önceki bölümünde oluşturduğumuz butona birisi tıkladığında karşınıza çıkacak olan masaüstü iletişim formunu oluşturmaktır. Bu makalenin ilerleyen kısımlarında size mobil versiyonun nasıl oluşturulacağını da göstereceğiz.
Yeni bir standart bölüm ekle
Üzerinde çalıştığınız sayfaya yeni bir standart bölüm ekleyerek başlayın. Bölüm ayarlarında Gelişmiş sekmesine gidin ve CSS Sınıfı alanına "açılır pencere" ekleyin.
Aynı sekmeyi aşağı kaydırın ve aşağıdaki CSS kodu satırlarını Özel CSS alt kategorisinin Önce alanına yerleştirin:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Bunu ekleyerek bölümün tüm sekmeyi kaplamasını sağlıyoruz. İstediğiniz arka plan kaplamasını oluşturmak için CSS kodundaki arka plan rengini ayarlayabilirsiniz. Bu durumda, biraz şeffaflık ile siyah renk kullanıyoruz. Aynı sekmede, ana öğeye aşağıdaki CSS kodu satırını da ekleyin:
display: none;
Gelişmiş sekmesinde yapmamız gereken son şey, Görünürlük alt kategorisinde telefon ve tablet üzerindeki bölümü devre dışı bırakmaktır.
İki sütuna bir satır ekleyin
İki sütunlu bir satır ekleyerek devam edin ve sekmeye gidin stil.
- Özel Oluk Genişliğini Kullan: EVET
- Maksimum genişlik: 1291 piksel
Sütunların her birinin parametrelerini girin.
İç kenar boşluklarını (Üst, Sol ve Sağ) aşağıdaki gibi değiştirin:
- İç Kenar Boşluğu (Üst, Sol, Sağ): 30 piksel
Gelişmiş sekmesine giderek bitirin. Ana öğeye aşağıdaki CSS kodu satırlarını ekleyin:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
İlk Metin modülünü ekleyin
Bölüm ve satırdaki tüm değişiklikleri yaptıktan sonra, görüntülemek istediğiniz çeşitli modülleri eklemenin zamanı geldi.
Ekleyeceğimiz ilk şey, görünen başlıktır. Satırın ilk sütununa yeni bir Metin modülü ekleyerek başlayın, metni sekmeye yazın içindekiler ve sekmeye geç stil.
Stil sekmesinde, Metin alt kategorisi için aşağıdaki ayarları kullandık:
- Başlık Yazı Tipi: Istakoz
- Yumuşak Işık Başlık: Kalın Metin
- Metin hizalama: Kalın
- Başlık metni rengi: #002282
- Başlık Metni Boyutu: 37px
- Başlık satırı yüksekliği: 1,7 em
İkinci bir Metin modülü ekleyin
Yeni bir Metin modülü ekleyerek devam edin ve İçerik sekmesinde görünmesini istediğiniz metni yazın. Stil sekmesine geçin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:
- Metin hizalama: Orta
- Metin Yazı Tipi: Arial
- Metin Metin Boyutu: 13px
- Metin Rengi Metin: #002282
- Metin satırı yüksekliği: 1,7 em
'Bizi sosyal ağlarda takip edin' modülü ekleyin
Ardından ilk sütuna 'Bizi sosyal medyadan takip edin' modülünü de ekleyeceğiz. Bu durumda üç sosyal medya ikonu seçtik; Facebook, Twitter ve Instagram.
Yapmamız gereken son şey, Advanced sekmesinde bu modüle padding (Sol) eklemek. Ana öğeye aşağıdaki CSS kodu satırını ekleyin:
padding-left: 40%;
İletişim Formu modülü ekleyin
Ardından satırdaki ikinci sütuna geçebiliriz. Bu sütunda ilk yerleştireceğimiz şey İletişim Formu modülüdür.
Bu örnek için sadece iki alan seçtik; isim ve e-posta.
İletişim Formu modülünü ekledikten sonra, İletişim Formu modülünün Stil sekmesine gidin ve Alanlar alt kategorisinde aşağıdaki değişiklikleri yapın:
- Metin Rengi Alanları: #002282
- Metin Boyutu Alanları: #002282
- Alan çizgisi yüksekliği: 1,7 em
Aynı sekmede, Düğme alt kategorisinde aşağıdaki değişiklikleri yapın:
- Düğme için özel stiller kullanın: Evet
- Metin boyutu düğmesi: 20
- Düğme metin rengi: #FFFFFF
- Arka plan düğmesi: #0086c4
Ayrıca bakınız: DIVI'da kayan ve itmeli menü nasıl oluşturulur
- Düğme Kenar Genişliği: 2
- Sınır Yarıçapı düğmesi: 3
Gelişmiş sekmesine geçin ve %5'lik bir marj ekleyin.
Özet modülü ekleyin
İkinci sütuna eklememiz gereken bir diğer şey de Özet modülüdür. Bu modül için ihtiyacımız olan tek şey, açılır pencerenin sağ üst köşesindeki çıkış simgesi. Simge listesinden sonraki simgeyi seçin ve diğer her şeyi boş bırakın.
Ardından Gelişmiş sekmesine gidin ve CSS sınıfı olarak “close” yazın.
Aynı sekmede, özel CSS alt kategorisinin ana öğesine aşağıdaki kod satırlarını ekleyin:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Çizgiye degrade dolgu uygulama
Son olarak, çizgiye güzel bir gradyan arka planı ekleyeceğiz. Ayarları açın ve degrade arka plan seçeneğine aşağıdaki değişiklikleri uygulayın:
- İlk degrade rengi: #FFFFFF
- İkinci degrade rengi: #0c71c3
- Gradyan Türü: Doğrusal
- Gradyan yönü: 124 derece
- Başlangıç pozisyonu: %50
- Nihai konum: %50
Tablet ve telefon için bir iletişim formu oluşturun
Artık PC sürümünü oluşturduğumuza göre, tablet ve telefon sürümü çok daha hızlı çalışacak. PC versiyonu için kullandığımız modüllerin çoğu mobil versiyon ile aynı.
Önceki bölümü çoğalt
PC sürümü için yaptığımız gibi telefon ve tablet için devre dışı bırakmak yerine, modül ayarlarında Görünürlük alt kategorisinde PC sürümünü devre dışı bırakacağız:
Özet modülünün CSS kodunu değiştirin
Masaüstü kodunu kullanmak yerine aşağıdakini kullanın:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Çizgiye degrade dolgu uygulama
Mobil sürüm için, çizginin gradyan arka planı için farklı ayarlar kullanıyoruz:
- İlk degrade rengi: #FFFFFF
- İkinci degrade rengi: #0c71c3
- Gradyan Türü: Doğrusal
- Gradyan yönü: 180 derece
- Başlangıç pozisyonu: %40
- Nihai konum: %40
jQuery kodu ekle
Bu eğitim için yapmamız gereken son şey jQuery kodunu eklemek. Bir Kod modülü ekleyin ve aşağıdaki JQuery kodunu ekleyin:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Sonuç
Mesajı adım adım takip ederseniz, bilgisayarda aşağıdaki sonucu alabilmeniz gerekir:
Ve tabletlerde ve telefonlarda aşağıdaki sonuç:
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu yazıda size tek tıkla iletişim formu oluşturmayı gösterdik. Sizinle iletişim kurmak için bu yöntemi kullanın. ziyaretçi ince ama etkilidir.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
