Divi'de Sayfa Şablonunuzun Herhangi Bir Köşesine Kapatılabilir Bir Harekete Geçirici Mesaj Nasıl Eklenir

Sitenizde kayan bir harekete geçirici mesaja sahip olmak, ziyaretçilerinizin dikkatini çekmenin en az rahatsız edici yollarından biridir. Çoğu zaman CTA'yı görmezden gelirler veya sayfada gezinmeye devam etmek için kapatırlar, ancak bazen onları kazanırsınız. Kaydırmalı bir harekete geçirici mesaj, bir açılış sayfasındaki hemen hemen her şeyi tanıtmak için harika çalışır.

Bu eğitimde, Divi Tema Oluşturucu kullanılarak bir sayfanın herhangi bir köşesine eklenebilen kapatılabilir bir harekete geçirici mesaj tasarlayacağız. Tamamlandığında, bir eklenti kullanmak zorunda kalmadan sayfanın herhangi bir yerinde ürünlerinizi ve özel tekliflerinizi tanıtma olanağına sahip olacaksınız.

Başlayalım!

Gizlice Bakış

Sayfa şablonunun dört köşesine ekleyeceğimiz dört CTA'ya hızlı bir bakış. Tabii ki, dördünü de aynı anda konuşlandırmanız gerekmeyecek. Her birinin “x” simgesine tıklayarak nasıl kapatılabileceğine dikkat edin ve ardından “artı” simgesine tıklayarak CTA'yı tekrar açmayı seçebilirsiniz.

Slide-In Action Divi Sayfa Şablonunu ÜCRETSİZ olarak indirin

Bu öğreticiden Sayfa Şablonu'na el koymak için, önce aşağıdaki düğmeyi kullanarak onu 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.

Ayrıca, sonucu göstermek üzere yeni şablonu o sayfaya atamak için Divi Builder ile test amacıyla oluşturulmuş en az bir sayfaya ihtiyacınız olacaktır.

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

Divi'de sayfa şablonunuzun her köşesi için Kapatılabilir Slayt Harekete Geçirici Mesaj oluşturma

Yeni Şablon Oluşturma

WordPress Kontrol Panelinden Divi > Tema Oluşturucu'ya gidin. Ardından yeni bir şablon oluşturmak için “Yeni Şablon Ekle” kutusunu tıklayın.

Promosyon çubuğunun görüntülenmesini istediğiniz sayfaya/sayfalara şablonu atayın.

Yeni şablonda, “Özel Gövde Ekle” alanını tıklayın ve ardından “Özel Gövde Oluştur” seçeneğini seçin.

Ardından “Sıfırdan Oluştur” seçeneğini seçin.

Gönderi İçeriği Bölümünü Oluşturma

Yazı içeriği bölümü, Divi veya WordPress'te yerleşik olan sayfanın veya yazının gerçek içeriğini görüntülemek için herhangi bir sayfa şablonunun gerekli bir parçasıdır. İlk hareketli harekete geçirici mesajımızı oluşturmadan önce bunu şablonumuza ekleyeceğiz.

Tek Sütunlu Satır Ekle

Başlamak için, normal bölüme tek sütunlu bir satır ekleyin.

Gönderi İçeriği Modülü Ekle

Ardından, satıra bir içerik sonrası modülü ekleyin.

Satır Ayarları

Bundan sonra, satır ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Sol Üst Kaydırmalı Harekete Geçirici Mesajı Oluşturma

Artık içerik gönderi modülümüz yerine oturduğuna göre, sayfa şablonunun sol üst köşesine ilk hareketli harekete geçirici mesajımızı eklemeye hazırız.

Bölüm Ekle

Her yeni harekete geçirici mesaj, tamamen yeni bir bölümle oluşturulacaktır. Bu, harekete geçirici mesajı tasarlamak için gereken herhangi bir düzeni veya modülü eklemenize olanak tanır.

Şablon düzenine yeni bir normal bölüm ekleyin.

Tek Sütunlu Satır Ekle

Ardından bölüme bir sütun satırı verin.

Bölüm Ayarları

Gönderi içeriği bölümünün üzerindeki bölümü sürükleyin (veya taşıyın) ve bölüm ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Gradyanı Sol Renk:
• Arka Plan Gradyanı Sağ Renk:
• Gradyanı Resmin Üzerinde Göster: EVET
• Arka Plan Resmi: [resim ekle]
• Genişlik: 320 piksel
• Kenar boşluğu: 320 piksel sol
• Dolgu: 0 piksel üst, 0 piksel alt
• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 2000ms

Ardından gelişmiş sekmenin üzerine atlayın ve aşağıdaki CSS Sınıfı ve Z dizinini ekleyin:

• CSS Sınıfı: cta içinde slayt
• Z İndeksi: 999

Ve aşağıdaki özel CSS parçacığını Ana Öğeye ekleyin:

position: fixed;
top: 80px;
left: -320px;

Daha sonra kodlu bölümü hedefleyebilmemiz için CSS Sınıfı gereklidir. Özel CSS, sayfa şablonunun sol üst kısmındaki bölümü sabit (veya yapışkan) bir konuma yerleştirecektir. "Sol: -320 piksel" konumu, tüm bölümü (320 piksel genişliğinde) tarayıcı penceresinin dışına taşımalıdır. Ama onu tekrar görüntüye getirmek için 320 piksellik sol kenar boşluğumuz var. Bunun bu şekilde oluşturulmasının nedeni, “x” simgesine tıkladığımızda marj değerini açıp kapatabilmemizdir. Bu, CTA'nın içeri ve dışarı kaymasına neden olur.

Satır Ayarları

Şimdi satır ayarlarını aşağıdaki gibi güncelleyelim:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Harekete Geçirici Mesaj Modülü Ekle

Satırın içine bir Eylem Çağrısı Modülü ekleyin.

Harekete Geçirici Mesaj Ayarları

Ardından, harekete geçirici mesaj ayarlarını güncelleyin.

İçerik

• Başlık: [seçilen metni girin]
• Düğme: [seçilen metni girin]
• Gövde: [seçilen metni girin]
• Düğme Bağlantı URL'si: [gerçek URL'yi veya # girin]

Ardından, daha önce eklediğimiz bölümün arka planını ortaya çıkarmak için varsayılan arka plan rengini kaldırın.

Tasarım Ayarları (Metin, düğme ve dolgu)

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

• Başlık Yazı Tipi: Lato
• Başlık Yazı Tipi Ağırlığı: Ağır
• Başlık Satırı Yüksekliği: 1.3em
• Gövde Yazı Tipi: Lato
• Gövde Yazı Tipi Ağırlığı: Kalın
• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 15px
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Lato
• Düğme Yazı Tipi Ağırlığı: Ağır
• Düğme Yazı Tipi Stili: TT
• Düğme Dolgusu: 12 piksel üst, 12 piksel alt, 32 piksel sol, 32 piksel sağ
• dolgu: 40 piksel üst, 40 piksel alt, 40 piksel sol, 40 piksel sağ

Blurb Modülü ile Aç ve Kapat Simgesi Ekle

Harekete geçirici mesaj bittikten sonra, hareketli harekete geçirici mesajı açmak ve kapatmak için kullanılan simge düğmesini oluşturmamız gerekiyor. Bunu oluşturmak için, harekete geçirici mesaj modülünün altına bir tanıtım yazısı modülü ekleyin.

Bulanıklık Ayarları

Aşağıdaki tasarım ayarlarını güncelleyin.

İçerik

• varsayılan başlığı ve gövde metnini sil
• Simgeyi Kullan: EVET
• Simge: artı (ekran görüntüsüne bakın)

Tasarım

• Simge Rengi: #000000
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 40px
• Genişlik: 40 piksel
• Yükseklik: 40 piksel
• Yuvarlatılmış Köşeler: %50
• Dönüştür Döndür Z ekseni: 135deg

Gelişmiş Ayarlar

Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:

• CSS Sınıfı: Slide-in_target

Ardından bu özel CSS'yi ana öğeye ekleyin.

position: absolute;
bottom: 0px;
right: -40px;

Blurb Image'a aşağıdaki özel CSS'yi ekleyin.

margin-bottom: 0px;

Sonuç

İşte şimdiye kadarki sonuç.

“X” simgesine tıkladığınızda kapatma ve açma işlevini eklemek için hala bazı kodlar eklememiz gerektiğini unutmayın. Kodu, şablonun dört köşesinin her birinde bir harekete geçirici mesaj oluşturduktan sonra ekleyeceğiz.

Sağ Üstteki Kaydırmalı Harekete Geçirici Mesajı Oluşturma

Oluşturulan ilk hareketli harekete geçirici mesajla, önceden oluşturulmuş bölümü çoğaltarak geri kalan CTA'ları oluşturma sürecini hızlandırabiliriz. Ardından, sağ üst köşe için bir hareketli harekete geçirici mesaj oluşturacağız.

Yinelenen Bölüm

Tel kafes görünüm modunu dağıtın ve ardından sol üst CTA bölümünü çoğaltın.

Bölüm Ayarlarını Güncelle

Ardından yeni bölüm ayarlarını aşağıdaki gibi güncelleyin:

• kenar boşluğu: 320 piksel sağ
• animasyon yönü: sol

Ardından, "sol"u "sağ" ile değiştirerek Ana Öğedeki özel CSS'yi güncelleyin. İşte tam snippet:

position: fixed;
top: 80px;
right: -320px;

Blurb Modül Ayarlarını Güncelle

Ardından, tanıtıcı modül ayarlarını açın ve "sağ"ı "sol" ile değiştirerek ana öğedeki özel CSS snippet'ini güncelleyin. İşte tam snippet:

position: absolute;
bottom: 0px;
left: -40px;

Sonuç

Şimdi sayfa şablonunun sağ üst köşesinde bir harekete geçirici mesaj göreceksiniz.

Sol Alt Kaydırmalı Harekete Geçirici Mesajı Oluşturma

Yinelenen Bölüm

Sayfa şablonunun sol alt köşesinde hareketli bir harekete geçirici mesaj oluşturmak için, sayfa düzeninin üst kısmındaki sol üst CTA bölümünü çoğaltın. Yinelenen bölümü "Sol Alt CTA" olarak etiketleyin ve ardından içerik gönderisi bölümünün altına taşıyın.

Bölüm Ayarlarını Güncelle

Ardından, "top: 80px" öğesini "bottom: 0px" ile değiştirerek ana öğe CSS'yi güncelleyin. İşte son snippet:

position: fixed;
bottom: 0px;
left: -320px;

Blurb Modül Ayarlarını Güncelle

Ardından Blurb Module'ün ana öğesi CSS'sini "bottom: 0px" öğesini "top: 0px" ile değiştirerek güncelleyin. İşte son snippet:

position: absolute;
top: 0px;
right: -40px;

Sonuç

Şimdi canlı sayfadaki sol alt kayar harekete geçirici mesaja bakın.

Sağ Alt Kaydırmalı Harekete Geçirici Mesajı Oluşturma

Yinelenen Bölüm

Sağ alttaki hareketli harekete geçirici mesajı oluşturmak için sağ üstteki CTA bölümünü çoğaltın ve yinelenen bölümü içerik gönderisi bölümünün altına taşıyın.

Bölüm Ayarlarını Güncelle

Bölüm ayarlarını açın ve "top: 80px;" değiştirerek ana öğe CSS'sini güncelleyin. "alt: 0px;" ile. İşte son snippet:

position: absolute;
bottom: 0px;
right: -320px;

Blurb Modül Ayarlarını Güncelle

Ardından, tanıtıcı modül ayarlarını açın ve "bottom: 0px;" öğesini değiştirerek ana öğe CSS'sini güncelleyin. "üst: 0px;" ile. İşte son snippet:

position: absolute;
top: 0px;
right: -40px;

Sonuç

Şimdi, canlı sayfadaki sağ alt kayar harekete geçirici mesaja bakın.

Kod Modülü kullanarak Özel jQuery ve CSS Kod Parçacıkları Ekleme

Son adım için, kaydırmalı CTA'ların her birine açma ve kapama işlevselliğini alabilmemiz için bazı özel jQuery ve CSS eklememiz gerekiyor.

Kod Modülü Ekle

Düzendeki bölümlerden birine bir kod modülü ekleyin.

Kodu Yapıştır

Ardından kod ayarlarını açın ve aşağıdaki kodu kod kutusuna yapıştırın.

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

Son düşünceler

Divi ile, hareketli bir harekete geçirici mesaj oluşturmak hiç de zor değil. Ve bir sayfa şablonuna harekete geçirici mesaj eklemek için tema oluşturucuyu kullanabildiğiniz için, bu CTA'ları hangi sayfaların görüntüleyeceği üzerinde daha fazla kontrole sahip olacaksınız. Kullanıcının CTA kaydırma animasyonunu sayfa yüklendikten biraz sonra (veya daha erken) görmesi için CTA bölümü için animasyon gecikmesini artırmaktan çekinmeyin. Ayrıca, bu CTA'ların dönüşümlerini iyileştirmek ve hangi köşenin en iyi dönüşüme sahip olacağını bulmak için Divi müşteri adaylarını kullanabilir ve bölünmüş testi etkinleştirebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!