Divi'de Bir Blog Gönderisi Şablonuna Yapışkan Kenar Çubuğu CTA'ları Nasıl Eklenir

Yapışkan Kenar Çubuğu CTA'ları, zorba veya dikkat dağıtıcı olmadan ziyaretçilerin dikkatini çekmede son derece etkilidir. İşin püf noktası, kenar çubuğuna, kullanıcı sayfayı aşağı kaydırdıkça yazı içeriğinin yanına "yapışan" veya sabit kalan bir veya iki öğe eklemektir. Bu, geleneksel bir kenar çubuğu düzenine ferahlatıcı bir alternatiftir, çünkü gerektiğinde sayfanın yan tarafında önemli CTA'ları sergileme avantajıyla modern bir tam genişlikte (kenar çubuğu olmayan) bir düzen hissi sağlar.

Bu eğitimde, Divi Theme Builder'ı kullanarak bir blog yazısı şablonuna nasıl yapışkan kenar çubuğu CTA'ları ekleyeceğinizi göstereceğiz. Bu düzenin uygulaması çok geniş kapsamlıdır. Hemen hemen her sayfa veya gönderi şablonu için çalışacaktır. Ayrıca, kendinizi CTA'larla sınırlamanız gerekmez; İstediğiniz Divi modülünü/modüllerini eklemeyi seçebilirsiniz.

Başlayalım!

Yapışkan Kenar Çubuğu CTA Şablonunu ÜCRETSİZ olarak indirin

Ellerinizi bu eğitimdeki yapışkan kenar çubuğu cta gönderi şablonuna koymak için önce aşağıdaki düğmeyi kullanarak 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 istenen sonucu göstermek için Divi Builder ile test amacıyla oluşturulmuş en az bir gönderiye ihtiyacınız olacak.

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

Gizlice Bakış

Divi'deki bir blog yazısı şablonuna eklenen yapışkan kenar çubuğu CTA'larına hızlı bir bakış.

Divi'deki Blog Gönderisi Şablonunuza Yapışkan Kenar Çubuğu CTA'ları Nasıl Eklenir

Tema Oluşturucu Şablonunu Ekleme

İlk adım, hazır şablonumuzu sitemize aktarmayı içerir. Divi Theme Builder Pack #1'deki gönderi şablonunu kullanacağız.

Başlamak için Divi > Tema Oluşturucu'ya gidin. Sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın. Taşınabilirlik modunda, içe aktarma sekmesini seçin ve klasörden divi-theme-builder-pack-1-post-template.json dosyasını seçin. Sitenizde şu anda yüklü şablonlarınız varsa, mevcut şablonlarınızı geçersiz kılabilecek seçeneklerin işaretini kaldırdığınızdan emin olun. Ardından içe aktar düğmesini tıklayın.

Blog Gönderisi Şablonunu Oluşturma

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

Kenar Çubuğu CTA'larını Tutmak için Çift Kenar Çubuğu Düzeni Ekleme

Şablon Düzeni Düzenleyicisi'nde, içerik sonrası modülünü içeren satırı bulun ve sütun düzenini beşte üç beşte bir beşte bir (1/5 3/5 1/5) sütun yapısıyla değiştirin. Bu, yapışkan kenar çubuğu CTA'larımız için her iki tarafta iki bölüm sağlarken, gönderi içeriği için ortalanmış sütunu tutmamıza izin verecektir.

Sütun yapısı değiştirildikten sonra, içerik gönderisi modülünü orta sütuna sürükleyin.

Satır Ayarlarını Güncelleme

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

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 2
• Genişlik: %100 (masaüstü), %90 (tablet)
• Maksimum Genişlik: 1500 piksel

Bu bize ikili kenar çubuğu kurulumumuz için ihtiyacımız olan alanı verecektir.

Sütun 1 Ayarlarını Güncelleme

Ardından, sütun 1 için ayarları açın ve sütuna özel bir CSS Sınıfı verin:

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

Sol Sütuna Kenar Çubuğu CTA'sı Ekleme

Şimdi ilk harekete geçirici mesaj için hazırız. En soldaki sütuna bir eylem çağrısı modülü ekleyin.

Kenar Çubuğu CTA'sını Şekillendirme

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

İçerik

• Düğme: “Buraya Tıklayın”
• Gövde: “İçeriğiniz buraya gider. Bu metni satır içi veya modül İçerik ayarlarında düzenleyin veya kaldırın."
• Düğme Bağlantı URL'si: #

Gövde Metin Tasarımı

• Gövde Yazı Tipi: Montserrat
• Gövde Yazı Tipi Ağırlığı: Yarı Kalın
• Gövde Metni Hizalama: sağ
• Gövde Metni Rengi: #444444
• Gövde Metni Boyutu: 22px (masaüstü), 18px (tablet)
• Gövde Çizgisi Yüksekliği: 1.3em

Buton

• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #6148df
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 80px
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: TT
• Düğme Doldurma: 12 piksel üst, 12 piksel alt, 22 piksel sol, 22 piksel sağ

Genişlik, Hizalama, Dolgu ve Kenarlıklar

• Genişlik: %100
• Maksimum Genişlik: 320 piksel
• Modül Hizalama: sağ
• Dolgu: 10 piksel sol, 10 piksel sağ
• Üst Kenar Genişliği: 10px
• Üst Kenar Rengi: #eeeeee
• Alt Kenar Genişliği: 10px
• Alt Kenar Rengi: #eeeeee

Kenar Çubuğu CTA'sını Sağ Sütuna Ekleme

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

• Gövde Metni Hizalama: sol
• Modül Hizalama: sol

Sütun 3 Ayarlarını Güncelle

Sağ sütundaki bu CTA için, sayfanın daha aşağısındaki bir noktada kenar çubuğu CTA'sının başlangıç ​​konumunu oluşturmak için sütuna bir miktar üst kenar boşluğu ekleyeceğiz.

İlk olarak, Sütun 3 için ayarları açın ve Sütun 1'e eklediğimiz CSS Sınıfının aynısını ekleyin:

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

Ardından aşağıdaki Özel CSS'yi Ana Öğeye ekleyin:

masaüstü

margin-top: 50%

Tablet

margin-top: 0%

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

Kod Modülü ile Şablona Özel CSS Ekleme

Kenar çubuğu CTA'larımız için "yapışkan" konumlandırmamızı elde etmek için bazı özel CSS eklememiz gerekiyor. Bunu yapmak için, içerik sonrası 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 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>

Bu koddaki üst ofset, kaydırma sırasında CTA'yı sayfada dikey olarak ortalayan bir hesaplamadır. 50vh, temelde tarayıcı penceresinin yüksekliğinin yarısıdır ve 130 piksel, CTA'nın kabaca yarısı kadardır. Daha yüksek/daha az yüksekliğe sahip bir CTA'nız varsa, 130 pikseli yukarı veya aşağı ayarlamanız gerekir.

Ayarları kaydet

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

Ardından tema oluşturucu ayarlarını kaydedin

Son sonuç

Nihai sonucu görüntülemek için şablonu kullanan bir blog gönderisini ziyaret edin.

Yapışkan kenar çubuğu CTA'ları kaydırmaya bu şekilde yapışacaktır. Bunun daha uzun gönderi içeriği için en iyi nasıl çalıştığını görebilirsiniz.

Ve işte mobil ekranda.

Son düşünceler

Bu yapışkan kenar çubuğu CTA'ları, geleneksel kenar çubuğuna yenileyici bir alternatiftir. Daha az müdahaleci oldukları ve gönderiye dağınık bir his vermedikleri için minimalist tasarım için uygundurlar. Ayrıca, CTA'yı sayfanın daha aşağısına yerleştirebilir, böylece yavaş yavaş görünüp kaydırmada kalarak ziyaretçiler için biraz daha öne çıkmasını sağlayabilirsiniz. Ve unutma. İstediğiniz hemen hemen 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. Çok fazla uygulama var gibi görünüyor.

Umarım bu, ileriye dönük olarak gönderi şablonlarınızda CTA'ları nasıl görüntüleyeceğinizi geliştirmeye yardımcı olur.

Daha fazla ilham almak için yapışkan öğelerle ilgili benzer gönderilerimize göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!