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

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.

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

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

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.

Yayınlama içerik modülü ekleme

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

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

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.

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

Bir sütuna satır ekleme

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

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

Harekete geçirici mesaj modülü ekleyin

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

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]

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 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.

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)

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

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;

Sonuç

İşte şimdiye kadarki sonuç.

"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;

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;

Sonuç

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

"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.

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.

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>

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.