Ana İçeriğe Geç

Divi Builder ile bir makale şablonuna yapışkan CTA'lar nasıl eklenir

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]

Yapışkan kenar çubukları, aşırı yüklenmeden veya dikkati dağılmadan ziyaretçilerin dikkatini çekmede son derece etkilidir. İşin püf noktası, kullanıcı sayfayı kaydırırken gönderi içeriğinin kenarına "görünür kalan" veya sabitlenmiş bir veya iki kenar çubuğu öğesi eklemektir. Bu, harekete geçirici mesajlar sunmanın yararı ile modern bir tam genişlikli düzen (kenar çubuğu olmadan) izlenimi verdiği için geleneksel kenar çubuğu düzenine ferahlatıcı bir alternatiftir. gerektiğinde sayfanın yanında önemlidir.

Bu eğiticide, Divi Theme Builder'ı kullanarak bir blog yazısı şablonuna yapışkan eylem çağrılarını nasıl ekleyeceğinizi göstereceğiz. Bu düzenin uygulanması dikkate değerdir. Hemen hemen her sayfa veya herhangi bir yazı şablonu için çalışacaktır. Ayrıca, kendinizi CTA'larla sınırlamanız gerekmez; seçtiğiniz Divi modüllerini eklemeyi seçebilirsiniz.

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

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

İstenen sonucu görüntülemek için test etmek için Divi Builder ile oluşturulmuş en az bir mesaja ihtiyacınız olacak.

Ondan sonra gitmeye hazırsın.

anket

İşte Divi'deki bir blog yazısı şablonuna eklenmiş olan yapışkan ACT'lere hızlı bir bakış.

Divi'deki blog yayını şablonunuza sabit eylem çağrıları nasıl eklenir?

Tema oluşturucu şablonunu ekleme

İlk adım, önceden tanımlanmış şablonumuzu sitemize aktarmaktır. Divi Theme Builder Pack # 1 yayın şablonunu kullanacağız.

Başlamak için Divi> Tema oluşturucu'ya gidin. Sayfanın sağ üst köşesindeki taşınabilirlik simgesine tıklayın. Taşınabilirlik modelinde, içe aktar sekmesini seçin ve klasördeki divi-theme-builder-pack-1-post-template.json dosyasını seçin. Sitenizde halihazırda yüklü olan şablonlar varsa, mevcut şablonlarınızı geçersiz kılabilecek tüm seçeneklerin işaretini kaldırdığınızdan emin olun. Ardından içe aktar düğmesine tıklayın.

Bir divi düzenini içe aktar

Blog yazısı şablonunu oluşturun

Şablon içe aktarıldıktan sonra, yeni CTA'larımızı şablon düzenine yapışkan olarak kenar çubuğuna eklemeye hazırız. Bunu yapmak için, özel gövde alanı için düzenle simgesine tıklayın.

Özel bir divi gövdesi ekleyin

Kenar çubuğu CTA'larını tutmak için çift kenar çubuğu düzeni eklendi

Şablon düzeni düzenleyicisinde, içerik yayınlama modülünü içeren satırı bulun ve sütun düzenini beşte bire beşte üçe beşte bir sütun yapısına (1/5 3/5 1/5 ). Bu, yapışkan CTA'larımız için her iki tarafta iki bölüm sağlarken, sütunu gönderi içeriği için ortalamamıza izin verecektir.

Divi düzeni ekle

Sütun yapısını değiştirdikten sonra, içerik yayınlama modülünü orta sütuna sürükleyin.

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]

Satır parametrelerini güncelle

Çizgi ayarlarını açın ve aşağıdaki tasarım seçeneklerini güncelleyin:

  • Özel bir oluk genişliği kullanın: EVET
  • Oluk genişliği: 2
  • Genişlik:% 100 (masaüstü),% 90 (tablet)
  • Maksimum genişlik: 1500px
Bir düzeltme divi bölümü ekle

Bu, bize çift kenar çubuğu konfigürasyonumuz için gereken alanı sağlayacaktır.

1 sütun ayarlarını güncelle

Sonra 1 sütun ayarlarını açın ve bu sütuna özel bir CSS sınıfı verin:

  • CSS sınıfı: yapışkan-cta
1. sütunu css divi'yi özelleştirin

Sol sütuna bir CTA kenar çubuğu ekleme

Artık ilk harekete geçirici mesaj için hazırız. Sol sütundaki eylem modülüne bir çağrı ekleyin.

Modül eylem çağrısı ekleyin

CTA Kenar Çubuğunu Stilize Et

Ayarları aşağıdaki gibi güncelleyin:

içindekiler
  • Düğme: «Buraya tıklayın»
  • Gövde: "İçeriğiniz buraya gelecek. Bu metni çevrimiçi olarak veya modülün içerik ayarlarında düzenleyin veya silin. "
  • Düğmenin bağlantısının URL’si: #
Harekete geçirici mesaj modülünü özelleştirin
Gövde metin tasarımı
  • Gövde Yazı Tipi: Montserrat
  • Yazı tipi ağırlığı: yarı kalın
  • Gövde metni: Doğru hizalama
  • Metnin gövde rengi: # 444444
  • Gövde metin boyutu: 22px (masaüstü), 18px (tablet)
  • Gövde yüksekliği: 1.3em
CTA taytları
Bouton
  • Düğme metni boyutu: 14px
  • Düğme metni rengi: #ffffff
  • Düğme arka plan rengi: # 6148df
  • Düğme kenarlığının genişliği: 0px
  • Düğmenin yarıçapı: 80px
  • Yazı tipi ağırlığı: Kalın
  • Düğme yazı tipi stili: TT
  • Düğmelerin dolgusu: Üstte 12px, altta 12px, solda 22px, sağda 22px
Divi modülü bölümü
Genişlik, hizalama, dolgu ve bordürler
  • Genişlik:% 100
  • Maksimum genişlik: 320px
  • Modülün hizalanması: sağ
  • Dolgu: Solda 10px, sağda 10px
  • Üst kenarlığın genişliği: 10px
  • Üst kenarlığın rengi: #eeeeee
  • Alt kenarlığın genişliği: 10px
  • Alt kenarlığın rengi: #eeeeee

CTA kenar çubuğunu sağ sütuna ekleme

Sağ sütun için CTA oluşturmak için az önce oluşturduğumuz CTA'yı kopyalayın ve en sağdaki sütuna yapıştırın. Ardından kopya için ayarları aşağıdaki gibi güncelleyin:

  • Metin gövdesinin hizalanması: sol
  • Modülün hizalanması: sol
Sağa ct a ekleyin

3 sütun ayarlarını güncelle

Bu CTA için sağ sütunda, CTA kenar çubuğunun sayfanın daha düşük bir noktasında başlangıç ​​konumunu belirlemek için sütuna üst kenar boşluğu katacağız.

3 sütunun parametrelerini açarak başlayın ve 1 sütuna eklediğimiz CSS sınıfını 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]

  • CSS sınıfı: yapışkan-cta

Ardından ana öğeye aşağıdaki özel CSS'yi ekleyin:

ofis

margin-top: 50%

tablet

margin-top: 0%

Divi sütun stilini özelleştirin

Bu bize, satır genişliğinin% 50'si olan sağ sütundaki yapışkan CTA için farklı bir başlangıç ​​noktası verecektir. Bu değeri kendi blog yazınız için gerektiği gibi ayarlamaktan çekinmeyin.

Bir cta divi modülünü çoğaltma

Kod modüllü şablona özel CSS ekleme

Kenar çubuğu CTA'larımız için "yapışkan" konumlandırmamızı elde etmek için, özel CSS eklememiz gerekir. Bunu yapmak için, içerik yayınlama modülü altında (veya sayfanın herhangi bir yerinde) yeni bir kod modülü oluşturun.

Bir divi kod türü modülü ekleyin

Ardından, aşağıdaki CSS'yi kod kutusuna yapıştırın:

<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>

Divi modülü parametre kodu

Bu koddaki üst uzaklık, kaydırma sırasında CTA'yı sayfada dikey olarak ortalanmış olarak konumlandıran bir hesaplamadır. 50vh, tarayıcı penceresinin yüksekliğinin yarısıdır ve 130px, CTA'nın yüksekliğinin yarısıdır. CTA'nız daha yüksek veya daha düşükse, 130 pikseli yukarı veya aşağı ayarlamanız gerekecektir.

Ayarları kaydet

İşiniz bittiğinde, şablonun düzenini kaydedin.

Ç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]

Cta divi modülü parametrelerini kaydedin

Ve sonra tema oluşturucu ayarlarını kaydedin

Tema oluşturucu divi'yi kaydedin

Nihai sonuç

Sonucu görüntülemek için, şablonu kullanarak bir blog makalesini ziyaret edin.

CTA taytları

Ve bu, yapışkan CTA'ların kaydırmada nasıl kalacağıdır. Daha uzun içerik için en iyi şekilde nasıl çalışacağını görebilirsiniz.

Son düşünceler

Bu yapışkan kenar çubuğu harekete geçirici mesajlar, geleneksel kenar çubuğuna ferahlatıcı bir alternatiftir. Minimalist tasarıma uygundurlar çünkü daha az müdahaleci olurlar ve gönderiyi darmadağın hissettirmezler. Ek olarak, CTA'yı sayfada daha aşağıda konumlandırabilirsiniz, böylece yavaş yavaş görünür ve parşömene yapışarak ziyaretçiler için daha görünür hale gelir. Ve unutma. Hemen hemen istediğiniz her şeyi oluşturmak için CTA'yı herhangi bir Divi modülü veya modül kombinasyonu ile değiştirebilirsiniz. Ayrıca bir tarafta yalnızca bir CTA tutmayı da seçebilirsiniz. Görünüşe göre pek çok uygulama var.

Bu makale yorumları 0 içeriyor

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üş
2 hisseleri
hisse2
cıvıltı
Enregistrer