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 600.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ı, müdahaleci veya dikkat dağıtıcı olmadan ziyaretçilerin dikkatini çekmede son derece etkilidir. İşin püf noktası, kullanıcı sayfayı kaydırdığında kenar çubuğuna "görünür halde kalabilen" ya da yayın içeriğinin tarafında sabit olan bir ya da iki öğe eklemektir. Bu, harekete geçirme çağrıları yapmanın faydasıyla birlikte, modern tam genişlikte bir düzen (kenar çubuğu olmadan) izlenimi verdiği için geleneksel kenar çubuğu düzenine yenileyici bir alternatiftir. Gerektiğinde sayfanın tarafında önemlidir.

Bu eğitici yazıda, Divi Theme Builder'ı kullanarak bir blog yazısı şablonuna nasıl harekete geçirici çağrı ekleyeceğinizi göstereceğiz. Bu düzenin uygulanması oldukça önemlidir. Bu hemen hemen herhangi bir yayın sayfası veya şablonu için çalışacaktır. Ayrıca, kendinizi CTA'larla sınırlamanız gerekmez; İstediğiniz Divi modüllerini 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ınlama Şablonunuza Sabit Aramalar Nasıl Eklenir

Tema oluşturucu şablonunu ekleme

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

Başlamak için Divi> Tema Oluşturucu'ya gidin. Sayfanın sağ üst kısmındaki taşınabilirlik simgesine tıklayın. Taşınabilirlik modelinde, içe aktarma sekmesini seçin ve klasördeki divi-tema-builder-pack-1-post-template.json dosyasını seçin. Şablonlar sitenize şu anda yüklüyse, geçerli şablonlarınızı geçersiz kılabilecek tüm seçeneklerin işaretini kaldırdığınızdan emin olun. Sonra içe aktar düğmesine tıklayın.

Blog yazısı şablonunu oluşturun

Model ithal edildiğinde, yeni CTA'larımızı model düzenindeki yapışkan kenar çubuğuna eklemeye hazırız. Bunu yapmak için, özel gövde kutusunun düzenle simgesini tıklayın.

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

Model Mizanpaj Düzenleyicisi'nde, içerik yayınlama modülünü içeren satırı bulun ve sütun düzenini beşte beşin üzerinde bir beşinci sütun yapısına değiştirin (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 yayının içeriği için merkezlenmiş tutmamızı sağlayacaktır.

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

Blogunuzu tanıtmaya başlayın

WordPress Blogunuzu pazarlamak için düzinelerce Logo, afiş, web sitesi şablonu ve diğer birçok pazarlama aracını indirin. [Önerilen]

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

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

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

Şimdi ilk harekete geçirme çağrısına hazırız. Sol sütundaki eylem modülüne bir çağrı 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 gidiyor. 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: #
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
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

Doğru sütunda CTA oluşturmak için, yeni oluşturduğumuz sütunu kopyalayıp en sağdaki sütuna yapıştırın. Ardından kopya için ayarları aşağıdaki şekilde güncelleyin:

  • Metin gövdesinin hizalanması: sol
  • Modülün hizalanması: sol

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:

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

Ardından ana elemana şu özel CSS'yi ekleyin:

ofis

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]

kenar boşluğu:% 50

tablet

kenar boşluğu:% 0

Bu bize sağ kolondaki yapışkan CTA için farklı bir başlangıç ​​noktası verecektir, ki bu da çizgi genişliğinin% 50'idir. Kendi blog postanız için bu değeri ihtiyaçlarınıza göre ayarlamaktan çekinmeyin.

Kod modüllü şablona özel CSS ekleme

Kenar çubuğu CTA'larımız için "yapışkan" konumlamamızı almak için özel CSS eklememiz gerekir. Bunu yapmak için, Content Publishing modülünün altında (veya sayfanın herhangi bir yerinde) yeni bir kod modülü oluşturun.

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

<style> @media sadece ekran ve (min. genişlik: 980px) {# container-page {overflow-y: visible ! Önemli; } .sticky-cta {position: yapışkan! önemli; konum: -webkit-yapışkan! önemli; üst: kalk (50vh - 130px)!

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

Ayarları kaydet

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

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]

Ve sonra tema oluşturucu ayarlarını kaydedin

Nihai sonuç

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

CTA taytları

Yapışkan ACT'lerin kaydırmaya bu şekilde yapışması. Daha uzun içerik için nasıl daha iyi sonuç vereceğini görebilirsiniz.

Son düşünceler

Bu yapışkan taraf harekete geçme çağrıları, geleneksel kenar çubuğuna ferahlatıcı bir alternatif. Minimalist tasarıma çok uygundurlar çünkü daha az müdahalecidirler ve post'a bir tıkanıklık hissi vermezler. Ek olarak, CTA'yı sayfanın altına yerleştirerek kademeli olarak görünmesini ve parşömene takılıp kalmasını sağlayarak ziyaretçilerin daha görünür olmasını sağlayabilirsiniz. Ve unutma. Hemen hemen istediğiniz herhangi bir şeyi oluşturmak için CTA'yı herhangi bir Divi modülü veya modül kombinasyonu ile değiştirebilirsiniz. Ayrıca bir tarafta sadece bir CTA tutmayı da seçebilirsiniz. Çok fazla uygulama var gibi görünüyor.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. 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üş
1 hisseleri
hisse1
cıvıltı
Enregistrer