Yapışkan kenar çubukları, kullanıcıların dikkatini çekmede son derece etkilidir. ziyaretçi müdahaleci veya dikkat dağıtıcı olmadan. İşin püf noktası, kenar çubuğuna "görünür kalacak" veya ekranın yan tarafına sabitlenecek bir veya iki öğe eklemektir. içindekiler Kullanıcı sayfayı kaydırdığında gönderinin. Bu, gerektiğinde sayfanın yan tarafında önemli harekete geçirici mesajlar sunma avantajıyla birlikte, modern tam genişlikte bir düzen (kenar çubuğu olmadan) izlenimi verdiğinden, geleneksel kenar çubuğu düzenine yenileyici bir alternatiftir.
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 > Jeneratör'e gidin temalar. Sayfanın sağ üst kısmındaki taşınabilirlik simgesine 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. Şu anda sitenizde yüklü şablonlarınız varsa, mevcut şablonlarınızın üzerine yazabilecek seçeneklerin işaretini kaldırdığınızdan emin olun. Ardından içe aktar düğmesini tıklayın.
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.
Kenar çubuğu CTA'larını tutmak için çift kenar çubuğu düzeni eklendi
Model Düzeni Düzenleyicisinde Yayınla modülünü içeren satırı bulun. içindekiler ve sütun düzenini beşte bire beşte üçe beşte bir (1/5 3/5 1/5) sütun yapısıyla değiştirin. Bu, sütunu merkezde tutmamıza izin verecektir. içindekiler Yapışkan CTA'larımız için her iki tarafta iki bölüm sağlarken gönderinin.
Sütun yapısını değiştirdikten sonra, içerik yayınlama modülünü orta sütuna sürükleyin.
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
Artık ilk harekete geçirici mesaj için 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 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: #
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
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
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
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 öğeye aşağıdaki özel CSS'yi ekleyin:
ofis
margin-top: 50%
tablet
margin-top: 0%
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.
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.
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 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.
Ve sonra tema oluşturucu ayarlarını kaydedin
Nihai sonuç
Sonucu görüntülemek için, şablonu kullanarak bir blog makalesini ziyaret edin.
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 yan harekete geçirici mesajlar, geleneksel kenar çubuğuna canlandırıcı bir alternatiftir. Minimalist tasarım için iyi çalışırlar çünkü daha az müdahalecidirler ve gönderiyi dağınık hissettirmezler. Ek olarak, CTA'yı sayfada daha aşağı konumlandırarak kademeli olarak görünüp kaydırmaya yapışarak insanlar tarafından daha görünür olmasını sağlayabilirsiniz. ziyaretçi. 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. Bir tarafta yalnızca bir CTA tutmayı da seçebilirsiniz. Birçok uygulama var gibi görünüyor.
