Divi'deki Blog Yazılarınıza Kaydırma Tetiklemeli Bir Pop-up Nasıl Eklenir

Blog gönderilerinize kaydırmayla tetiklenen bir açılır pencere eklemek gerçekten akıllıca bir şey gibi görünüyor. Diğer blogları okurken onları daha önce görmüş olabilirsiniz. Kullanıcı gönderinin belirli bir noktasına (genellikle sonuna) ilerlediğinde, aniden harekete geçirici mesajlar içeren bir kutu belirir. Kaydırmayla tetiklenen bir açılır pencerenin tüm amacı, ziyaretçilere tam olarak sayfada görmelerini istediğiniz anda hedefli bir harekete geçirici mesaj sunmaktır. Kısacası, dönüşümleri artırmak veya nitelikli potansiyel müşteriler kazanmak için harika bir araçtır. Bu nedenle, birçok dönüşüm artırma eklentisi (kendi Bloom'umuz veya Optin Monster gibi) aynı şeyi yapmanıza izin verir.

Bu eğitimde, Divi'deki blog gönderilerinize eklenti olmadan sıfırdan kaydırmayla tetiklenen bir açılır pencereyi nasıl ekleyeceğinizi göstereceğiz. Bunu yapmak için, kategoriye göre ilgili bir gönderi içeren bir açılır pencere ve ayrıca bir e-posta seçeneği içeren bir açılır pencere tasarlamak için Divi Tema Oluşturucu'yu kullanacağız. Kaydırma tetiklemesi, küçük bir jQuery parçacığı kullanılarak gerçekleştirilecektir.

Başlayalım!

Gizlice Bakış

İşte oluşturacağımız kaydırmayla tetiklenen açılır pencerelere hızlı bir bakış.

Aşağıda görüldüğü gibi ilgili bir gönderiyi (kategoriye göre) ortaya çıkarmak için açılır pencerede oluşturacağız.

Ayrıca, burada görüldüğü gibi açılır pencereye nasıl bir e-posta seçeneği ekleyeceğinizi de göstereceğiz.

Kaydırma Tetiklemeli Popup Divi Gönderi Şablonunu ÜCRETSİZ olarak indirin

Ellerinizi bu eğitimden Gönderi Şablonuna 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve Theme Builder Taşınabilirlik seçeneğini kullanarak json dosyalarından birini Divi Theme Builder'a ekleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için Divi Temasını yüklemeniz ve etkinleştirmeniz gerekir. Divi'nin en son sürümüne sahip olduğunuzdan emin olun.

Bu eğitim için o paketteki hazır gönderi şablonunu kullanacağımızdan, Dördüncü Tema Oluşturucu Paketini indirmeniz gerekecek.

Ayrıca, gönderi şablonunun sonuçları göstermesi için test amacıyla oluşturulmuş en az birkaç blog gönderisine ihtiyacınız olacak.

Bundan sonra, gitmeye hazırsınız.

Divi Blog Yazılarınızın Sonunda Kaydırma Tetiklemeli Pop-Up Oluşturma

Dördüncü Tema Oluşturucu Paketinden Blog Gönderisi Şablonunu İçe Aktarma

WordPress panosundan Divi > Tema Oluşturucu'ya gidin. Tema oluşturucuda, sayfanın sağ üst köşesindeki taşınabilirlik simgesini seçin. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin, theme-builder-pack-4-post-template.json dosyasını seçin ve içe aktar düğmesini tıklayın. (Bu içe aktarma dosyası, Dördüncü Tema Oluşturucu Paketi klasörünün içinde olacaktır)

Genel üstbilgi ve altbilgiyi statik düzenler olarak içe aktarma seçeneğini de belirleyebilirsiniz.

Şablon içe aktarıldıktan sonra, özel gövde alanını düzenlemek için simgeye tıklayın.

Bu sizi kaydırmayla tetiklenen açılır pencereleri ekleyeceğimiz gövde şablonu düzeni düzenleyicisine götürecektir.

Kategoriye Göre İlgili Bir Gönderiyle Kaydırma Tetiklemeli Pop-up'ı Tasarlama

Pop-up bir Divi satırı tarafından içerecektir. Bu nedenle, açılır pencere işlevini yerine getirdiğimizde, istediğiniz içeriği oluşturmak için o satırı herhangi bir modülle doldurabilirsiniz. Bu ilk örnek için, kategoriye göre ilgili bir gönderiyi öne çıkaran bir açılır pencere oluşturacağız. Bu şekilde, bir ziyaretçi gönderiyi aşağı kaydırdığında, kendisine bir açılır pencerede ilgili bir gönderi önerilecektir.

İşte nasıl yapılacağı.

Tek Sütunlu Satır Ekle

İlk önce, gönderi şablonu düzeninde gönderi içeriği modülünü içeren satırın hemen altına bir sütun satırı ekleyin.

Satır Ayarları

Modül eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #ffffff
• Oluk Genişliği: 1
• Genişlik: 300 piksel (masaüstü), 200 piksel (telefon)
• Dolgu: 20 piksel üst, 0 piksel alt
• Kutu Gölgesi: ekran görüntüsüne bakın

Metin Modülü Ekle

Satır ayarları özelleştirildikten sonra satıra bir metin modülü ekleyin. Bu, ilgili gönderi açılır penceremizin başlık alanı olacaktır.

İçerik

Gövde içeriğini “İlgili Gönderi” metniyle güncelleyin.

Tasarım

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Heebo
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #f94857
• Metin Hizalama: orta

Blog Modülü Ekle

Metin modülünün altına bir blog modülü ekleyin.

İçerik

Yalnızca bir ilgili gönderiyi öne çıkarmak istediğimizden, gönderi sayısını bir ile sınırlayacağız ve "geçerli kategoriyi" dahil edeceğiz, böylece açılır pencerede gösterilen gönderi, şablonda görüntülenen asıl gönderiyle aynı kategoriyi paylaşacaktır.

Aşağıdakileri güncelleyin:

• Mesaj Sayısı: 1
• Dahil Edilen Kategoriler: Mevcut Kategori

Elementler

Öğeler seçenek grubu altında, yalnızca öne çıkan görseli göstermeyi seçtiğinizden emin olun. Diğer her şeyi gizle.

Tasarım

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Başlık Yazı Tipi: Heebo
• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Metin Boyutu: 16px
• Başlık Satırı Yüksekliği: 1.4em
• Dolgu: %5 üst, %5 sol, %5 sağ

Gelişmiş Satır Ayarları

CSS Sınıfı, Özel CSS ve Z Dizini

Gelişmiş sekmesi altında, satırımıza bir CSS sınıfı, biraz özel CSS vermemiz ve açılır pencerenin sayfadaki diğer içeriğin üzerinde kalması için z dizinini güncellememiz gerekiyor.

Bu adım, ön uçta görsel oluşturucuyu kullanırken satırı görüntüden gizleyecektir. Bu nedenle, bu seçenekleri güncellemeden önce tel kafes görünümünü dağıtmak daha iyi olabilir.

Tel kafes görünümü modundayken, satır ayarlarını yedekleyin ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: satır sonrası

Ardından, Ana Öğeye aşağıdaki özel css'yi ekleyin:

position: fixed;
bottom: 0%;
right: -300px;

Ve Z Endeksini güncelleyin:

• Z İndeksi: 999

Kaydırma Tetik Noktaları Olarak Bölücüler Ekleme

Bu noktada açılır penceremiz kullanıma hazırdır. Şimdi, kaydırma tetik noktalarımızı gönderi şablonunda nereye ekleyeceğimize karar vermemiz gerekiyor, böylece kullanıcı bu noktalara kaydırdığında, açılır pencere gösterilecek veya gizlenecek. Kaydırma tetik noktaları, CSS sınıfına sahip bir öğe tarafından belirlenir. Kaydırma tetik noktasının gönderinin altında olmasını istediğimizden, kaydırma tetik noktası öğemiz olarak CSS sınıfına sahip bir bölücü kullanabiliriz.

Kaydırma Tetik Noktası #1 Ekle

İlk kaydırma tetik noktamızı eklemek için, doğrudan içerik sonrası modülünün altına bir bölücü modül ekleyelim.

Ardından aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: geçiş noktası sonrası

Kolaydı.

Kaydırma Tetik Noktası #2 Ekle

Şimdi ikinci tetikleme noktasını eklemek için (açılır pencereyi sayfanın aşağısına gizleyecek olan), az önce oluşturulan ayırıcı modülünü kopyalayın.

Ardından, açılır pencerenin kapatılmasını (veya gizlenmesini) istediğiniz gönderi şablonunun daha aşağısındaki bir yere yapıştırın. Bu örnek için, ilgili gönderiler blog modülünün hemen altına ve gönderi şablonunun yorumlar bölümünün hemen üstüne ekliyorum.

Kod Modülü ile Özel Kod Ekleme

Bu kaydırmayla tetiklenen açılır pencerenin çalışması için yapılması gereken tek şey küçük bir koddur.

Devam edin ve gönderi şablonuna bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod kutusuna yapıştırın:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Sonuç

Sonucu görmek için blog gönderilerinizden birini ziyaret edin ve sayfayı aşağı kaydırın. Gönderi içeriğinin en altına ulaştığınızda ilgili gönderi açılır penceresini görmelisiniz. Gönderinin ilgili gönderiler bölümünden hemen sonra gizlendiğini görmek için kaydırmaya devam edin.

Kaydırma Tetiklemeli Açılır Pencereye E-posta Seçeneği Ekleme

İlgili gönderi açılır penceresi harika, ancak bunun yerine bir e-postanın açılır pencereyi seçmesini isteyebilirsiniz. Bunu yapmak kolaydır. Aslında, bu şablonda önceden hazırlanmış altbilgi düzeninde önceden tasarlanmış e-posta seçeneğini bile kullanabiliriz.

Altbilgi E-posta Seçeneği Divi Kitaplığına Kaydet

Düzeninizi kaydedin ve tema oluşturucuya çıkın. Ardından, özel altbilgi şablonu düzenini düzenlemek için tıklayın.

E-posta optin modülünü bulun ve divi kitaplığına kaydedin.

Açılır Satıra Kaydedilmiş E-posta Seçeneği Ekle

Şimdi özel gövde şablonu düzenine geri dönün ve kayıtlı e-postayı açılır pencere olarak kullandığınız aynı satıra ekleyin. Unutmayın, o satırın içindeki her şey açılır içerik olarak gösterilecektir.

Metin ve blog modülünü kullanmadığınız için ön uçta görünmelerini engelleyebilirsiniz.

E-posta Seçeneği Ayarları

E-posta kaydı etkinleştirildiğinde ve diğer modüller devre dışı bırakıldığında, e-posta kaydı ayarlarını aşağıdaki şekilde güncelleyin:

• Başlık: “Bu Makaleyi Beğendiniz mi?”
• Gövde: “Bültenimize Katılın!”

Ardından aşağıdaki dolguyu ekleyin:

• Dolgu: %5 alt, 20 piksel sağ

Sonuç

Şimdi canlı bir gönderide sonucu kontrol edin.

Son düşünceler

Kaydırmayla tetiklenen açılır pencereler kesinlikle blogunuz için değerli bir varlık olabilir. Nitelikli müşteri adaylarından yararlanmak için göze batmayan bir yol sağlarlar. Sitenize katılmalarını sağlamak için ilgili bir gönderi açılır penceresi kullanın veya listenizi büyütmeye yardımcı olması için bir e-posta seçeneği kullanın. Ve Divi ile aklınıza gelebilecek hemen hemen her türlü içeriği ekleyebilirsiniz. Ve ziyaretçinin oldukça güçlü olan bu açılır pencereleri ne zaman görmesini istediğinize tam olarak karar verebilirsiniz. Umarım kendi blogunuz veya bir sonraki projeniz için faydalı bulursunuz.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!