Divi'nin Kaydırma Efektleri ile Hareketli Kaydırmalı E-posta Seçenek Kutusu Nasıl Eklenir

E-posta tercih kutunuzu vurgulamanın bir yolunu arıyorsanız, bu gönderiyi seveceksiniz. E-posta tercih kutunuza nasıl hareket ekleyeceğinizi adım adım göstereceğiz. Ziyaretçiler sayfayı aşağı kaydırdıkça hareketli e-posta tercih kutusu görünür ve kaybolur. Bunu yaparak, e-posta tercih kutusunun ziyaretçilerinizin dikkatini çekmesi ve umarız daha yüksek bir dönüşüm oranı ile sonuçlanması olasılığı yüksektir. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım. Bu eğitim, daha büyük ekran boyutlarında en iyi sonucu verir. Daha küçük ekran boyutlarında, mevcut sayfa içeriğiyle çakışmaması için tüm hareketli e-posta tercih kutusunu devre dışı bırakacağız.

Motion Email Optin Box Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz hareketli e-posta seçenek kutusuna 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.

1. Web Freelancer Açılış Sayfası Düzenini Yeni Sayfaya Yükleyin

Bu öğreticiyi yeniden oluşturmak için, önceden hazırlanmış düzenlerinizde bulabileceğiniz Web Serbest Giriş Sayfasını kullanacağız.

Sayfa Taşmalarını Gizle

Düzeni yükledikten sonra, sayfa ayarlarını açın ve gelişmiş sekmesindeki taşmaları gizleyin. Bu, kaydırma işlemi boyunca yatay kaydırma çubuğunun görünmemesini sağlamaya yardımcı olacaktır.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

2. Sol E-posta Seçenek Kutusu Oluşturun

Bölümün Altına Yeni Satır Ekle

Sütun Yapısı

Sayfanın sol tarafında hareketli e-posta tercih kutusunu oluşturma zamanı! Bunu yapmak için, seçtiğiniz bir bölümün altına yeni bir satır ekleyin. Aşağıdaki sütun yapısını kullanın:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın genişliğini değiştirin.

• Genişlik: %17

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

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

Tablette ve Telefonda Gizle

Ardından, gelişmiş sekmesinde tüm satırı daha küçük ekran boyutlarında gizleyin. Bunu yapmamızın nedeni, e-posta tercih kutusunun mevcut sayfa içeriğiyle çakışmasını istemememizdir.

Z İndeksi

Z dizinini artırarak satır ayarlarını tamamlayın.

• Z İndeksi: 2

Sütun Ayarları

Arka plan rengi

Ardından, sütun ayarlarını açın ve seçtiğiniz bir arka plan rengini kullanın.

• Arka Plan Rengi: #0b29fa

aralık

Sonraki dolgu değerlerini değiştirin.

• Üst Dolgu: %20
• Alt Dolgu: 20%
• Sol Dolgu: %9
• Sağ Dolgu: %9

Sütuna Metin Modülü #1 Ekle

H3 İçeriği Ekle

H3 içeriği içeren ilk Metin Modülü ile başlayarak modül ekleme zamanı.

H3 Metin Ayarları

Modülün H3 metin ayarlarını uygun şekilde değiştirin:

• Başlık 3 Yazı Tipi: Lato
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 140%
• Başlık 3 Çizgi Yüksekliği: 1.2em

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğiyle bir öncekinin hemen altına başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Rengi: #ffffff
• Metin Boyutu: %100
• Metin Hizalama: Merkez

aralık

Bazı özel üst ve alt kenar boşlukları da ekleyin.

• Üst Marj: %10
• Alt Marj: %10

Sütuna E-posta Opt Modülü Ekle

İçerik Kutularını Boş Bırak

Bu sütunda ihtiyacımız olan sonraki ve son modül, bir E-posta Optin Modülüdür. Başlık ve gövde içerik kutularını boş bırakın. Bu öğreticinin önceki adımlarında, başlığımızı ve açıklamamızı göstermek için normal Metin Modülleri kullandık.

E-posta Hesabını Bağla

E-posta hesabınızı bağlayarak devam edin.

Alanlar

Biz de tek bir ad alanı kullanıyoruz.

• Tek Ad Alanı Kullan: Evet

Arka Plan Rengini Kaldır

Ardından, arka plan rengini kaldırın.

Düzen

Tasarım sekmesine gidin ve sonraki düzeni değiştirin.

• Düzen: Gövde Üstte, Form Altta

Düğme Ayarları

Düğmeyi şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Arka Plan Rengi: #ff646c
• Düğme Kenar Genişliği: 0px

Kutu Gölge

Ve Email Optin Module'e ince bir kutu gölgesi ekleyerek modül ayarlarını tamamlayın.

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

Satırı Yeniden Konumlandır

Satırın sütunundaki tüm modülleri tamamladıktan sonra, satır ayarlarını bir kez daha açabilir ve tüm satırı aşağıdaki gibi yeniden konumlandırabilirsiniz:

• Pozisyon: Mutlak
• Konum: Sol Üst

Satır Kaydırma Efektleri Ekle

Dikey Hareket

Ardından, satırın kaydırma efektlerine gidin ve biraz dikey hareket ekleyin:

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0 (%55'te)
• Bitiş Ofseti: 11
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Yatay Hareket

Sonra biraz yatay hareket ekleyin.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -7
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: 0
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

İçeri ve Dışarı Soluk

Ayrıca bir solma efekti ekleyerek kaydırma efektlerini tamamlayın.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %100 (%32'den %95'e)
• Bitiş Opaklığı: %0
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

3. E-posta Seçenek Kutusunu Sağa Yerleştirin

Satırı Yeniden Konumlandır

Aynı efekti oluşturmak, ancak bunun yerine sağda, satır ayarlarını açın ve konumu aşağıdaki gibi değiştirin:

• Konum: Sağ Üst

Satır Yatay Hareketini Değiştir

Ardından, kaydırma efektlerine gidin ve yatay harekette başlangıç ​​ofsetini değiştirin ve işiniz bitti!

• Başlangıç ​​Ofseti: 7

Ön izleme

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

Son düşünceler

Bu gönderide, Divi'nin kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, ziyaretçiler sayfayı aşağı kaydırırken dışarı kayan bir hareketli e-posta tercih kutusu oluşturduk. Elde ettiğimiz efekt pürüzsüz ve dikkatleri e-posta tercih kutunuza ince bir şekilde çekmenize olanak tanıyor. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.