Ana İçeriğe Geç

Divi'de yeniden kapatılabilir kayan harekete geçirici mesaj ekleme

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Sitenizde bir harekete geçirme ifadesi olması, ziyaretçilerinizin dikkatini çekmenin en az müdahaleci yollarından biridir. Çoğu zaman, sayfayı taramaya devam etmek için CTA'yı yok sayarlar veya kapatırlar, ancak bazen onları kazanacaksınız. Bir slayt eylem çağrısı, bir açılış sayfasındaki hemen hemen her şeyi tanıtmak için harika çalışacaktır.

Bu eğitimde, Divi Theme Builder kullanılarak bir sayfanın herhangi bir köşesine eklenebilecek kapatılabilir bir eylem çağrısı tasarlayacağız. Bir kez yaptıktan sonra, ürünlerinizi ve özel ürünlerinizi sayfanın herhangi bir yerinde bir eklenti kullanmak zorunda kalmadan tanıtabilirsiniz.

Başlayalım!

anket

Sayfa şablonunun dört köşesine ekleyeceğimiz dört eklenmiş CTA'ya hızlı bir bakış. Elbette dördünü de aynı anda dağıtmanız gerekmeyecek. Her birinin "x" simgesine tıklayarak nasıl kapatılabileceğine dikkat edin, ardından "artı" simgesine tıklayarak CTA'yı yeniden etkinleştirmeyi seçebilirsiniz.

Başlamak için neye ihtiyacınız var?

Başlamak için yapmanız gerekenler Divi temasını yüklemek ve etkinleştirmek için . Divi'nin en son sürümüne sahip olduğunuzdan emin olun.

Sonucu görüntülemek üzere bu sayfaya yeni şablonu atamak için Divi Builder ile test amaçlı oluşturulmuş en az bir sayfaya da ihtiyacınız olacaktır.

Divi'de bir sayfa şablonuyla kayan bir harekete geçirici mesajın oluşturulması

Yeni bir modelin oluşturulması

WordPress kontrol panelinden Divi> Tema oluşturucu'ya gidin. Ardından, yeni bir şablon oluşturmak için "Yeni bir şablon ekle" kutusunu tıklayın.

Bir sayfa şablonu oluşturun

Şablonu, tanıtım çubuğunu görüntülemek istediğiniz sayfaya veya sayfalara atayın.

Sayfalara bir sayfa şablonu atayın

Yeni modelde, "Özel gövde ekle" alanını tıklayın ve ardından "Özel gövde oluştur" u seçin.

Özel gövde ekle

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

Yayın içeriği bölümünün oluşturulması

Gönderi içeriği bölümü, sayfanın gerçek içeriğini veya Divi veya WordPress'teki gömülü gönderiyi görüntülemek için herhangi bir sayfa şablonunun gerekli bir parçasıdır. Eklemek için ilk eylem çağrımızı oluşturmadan önce bunu modelimize ekleyeceğiz.

Bir sütuna satır ekleme

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

Tek hat bölümü

Yayınlama içerik modülü ekleme

Ardından satıra bir yayıncılık içerik modülü ekleyin.

Öğe içeriği

Satır Parametreleri

Bundan sonra hat parametrelerini aşağıdaki gibi güncelleyin:

  • Genişlik:% 100
  • Maksimum genişlik:% 100
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Divi hattı yapılandırması

Sol üstte harekete geçirici mesaj oluşturma

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

Bölüm ekle

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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

Yeni bir divi bölümünün seçimi

Bir sütuna satır ekleme

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

Bir divi sütunu seçin

Bölüm ayarları

Yayın 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:

  • Sol renk arka plan gradyanı:
  • Sağ arka plan gradyanı:
  • Gradyanı görüntünün üzerinde görüntüleyin: EVET
  • Arka plan resmi: [resim ekleyin]
  • Genişlik: 320px
  • Kenar boşluğu: 320 piksel kaldı
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
  • Animasyon Stili: Slayt
  • Animasyon yönü: sağ
  • Animasyon gecikmesi: 2000 ms

Ardından gelişmiş sekmeye atlayın ve aşağıdaki CSS sınıfını ve Z dizinini ekleyin:

  • CSS sınıfı: cta'da slayt
  • Z Endeksi: 999

Ve ana öğenin ardından özel CSS pasajını ekleyin:

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

Bölümü daha sonra kodla hedefleyebilmemiz için CSS sınıfına ihtiyaç vardır. Özel CSS, sayfa şablonunun sol üst bölümünü sabit (veya yapışkan) bir konuma yerleştirir. "Sol: -320 piksel" konumu, tüm bölümü (320 piksel genişliğindedir) tarayıcı penceresinin dışına (dolayısıyla görüşümüzün dışına taşımalıdır). Ancak onu tekrar görüntülemek için 320 piksellik sol kenar boşluğuna sahibiz. Bu şekilde yapılandırılmasının nedeni, "x" simgesine tıkladığınızda marj değerini açıp kapatabilmemizdir. Bu, CTA'nın kayarak gözden kaybolmasına neden olur.

Satır Parametreleri

Şimdi, çizgi parametrelerini aşağıdaki gibi güncelleyin:

  • Özel bir oluk genişliği kullanın: EVET
  • Oluk genişliği: 1
  • Genişlik:% 100
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Divi hattı parametresi

Harekete geçirici mesaj modülü ekleyin

Satırın içine bir Harekete Geçirici Mesaj modülü ekleyin.

Harekete geçirici mesaj modülü ekle

Harekete geçirici mesaj ayarları

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

içindekiler
  • Başlık: [istediğiniz metni girin]
  • Düğme: [istediğiniz metni girin]
  • Gövde: [istediğiniz metni girin]
  • Düğme bağlantı URL'si: [gerçek URL'yi veya # girin]
Divi modülü teklifini özelleştirin

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.

Arka plan rengini kaldır
Tasarım parametreleri (metin, düğme ve dolgu)

Tasarım sekmesinde 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,3 em
  • Vücut Polisi: Lato
  • Gövde yazı tipi ağırlığı: kalın
  • Düğme için özel stiller kullanın: EVET
  • Düğme metni boyutu: 15px
  • Düğme kenarlığı genişliği: 0 piksel
  • Düğme harf aralığı: 1 piksel
  • Düğme yazı tipi: Lato
  • Düğme yazı tipi ağırlığı: ağır
  • Düğme yazı tipi stili: TT
  • Düğme dolgusu: üstte 12 piksel, altta 12 piksel, solda 32 piksel, sağda 32 piksel
  • dolgu: üstte 40 piksel, altta 40 piksel, solda 40 piksel, sağda 40 piksel

Blurb modülüyle bir aç ve kapat simgesi ekle

Harekete geçirici mesaj tamamlandığında, kayan harekete geçirici mesajı açıp kapatmak için kullanılan simge düğmesini oluşturmamız gerekir. Bunu oluşturmak için, harekete geçirici mesaj modülünün altına bir tanıtım modülü ekleyin.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Divi kabarcık bilgi modülü

Sunum metni ayarları

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

içindekiler
  • varsayılan başlığı ve gövde metnini kaldır
  • Simgeyi kullanın: EVET
  • Simge: daha fazla (ekran görüntüsüne bakın)
Divi simgesi ekle
Gebe kalma
  • Simge Rengi: # 000000
  • Simge yazı tipi boyutunu kullan: EVET
  • Simge yazı tipi boyutu: 40 piksel
  • Genişlik: 40px
  • Yükseklik: 40px
  • Yuvarlatılmış köşeler:% 50
  • Z ekseni dönüşünü dönüştürün: 135 derece
Bir divi simgesini özelleştirme
Gelişmiş ayarlar

Gelişmiş sekmesinin altında, 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 resmine aşağıdaki özel CSS'yi ekleyin.

margin-bottom: 0px;

Stil css modülü divi'yi özelleştirin

Sonuç

İşte şimdiye kadarki sonuç.

Sonuç şimdi elde edildi

"X" simgesini tıkladığınızda kapat ve aç işlevini eklemek için hala bazı kodlar eklememiz gerektiğini unutmayın. Kodu, modelin dört köşesinin her birinde bir harekete geçirme ifadesi oluşturduktan sonra ekleyeceğiz.

Sağ üstte harekete geçirici mesajın oluşturulması

Yerleşik ilk eylem çağrısı ile, önceden oluşturulmuş bölümü kopyalayarak geri kalan CTA'ları oluşturma sürecini hızlandırabiliriz. Ardından, sağ üst köşe için bir slayt harekete geçirici mesaj oluşturacağız.

Bölümü kopyala

Tel kafes görüntüleme modunu dağıtın, ardından sol üstteki CTA bölümünü çoğaltın.

Bölüm ayarlarını güncelleme

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

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

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

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

Divi bölüm hizalamasını değiştirin

Blurb modülünün parametrelerini güncelleme

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

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

Bir divi kodu ekleyin

Sonuç

Artık sayfa şablonunun sağ üst köşesinde slayt olarak bir harekete geçirici mesaj göreceksiniz.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Sağ üstteki kaydırıcı

"Sağ Alt", "Sol Alt" bölümlerinin geri kalanı için aynı işlemleri gerçekleştirin. Aşağıdakine benzer bir sonuca sahip olmak için modüllerin her biri için CSS kodunu da ayarlamanız gerekecektir.

Nihai sonuç divi

Bir kod modülü kullanarak özel jQuery ve CSS parçacıkları ekleme

Son adım için, bazı özel jQuery ve CSS eklememiz gerekiyor, böylece slayt CTA'larının her birini açma ve kapatma işlevini elde edebiliriz.

Kod modülü ekle

Sunumun bölümlerinden birine bir kod modülü ekleyin.

Js divi kodu ekleyin

Kodu yapıştırın

Ardından kod ayarlarını açın ve aşağıdaki kodu kod alanına 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>

Jquery kodu ekle

Son düşünceler

Divi ile bir harekete geçirme ifadesi 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. 

Bu makalede, 1 yorumunu içeren

  1. Harika, bu makale! Tam olarak aradığım şey bu!
    Merci beaucoup.

    Küçük yardımcı soru, bu CTA'nın sayfada gezinirken yalnızca belirli bir yerde otomatik olarak açılması mümkün mü?

    Bonne journée!

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse4
cıvıltı
Enregistrer