Divi Altbilginizi Nasıl Sabit Yapabilirsiniz?

Bugünün Divi eğitiminde, web siteniz için normal bir altbilgi yerine nasıl sabit bir altbilgi oluşturacağınızı göstereceğiz. Bir önceki gönderide, ilk başta aynı gibi görünseler de, aslında sabit hale getirmekten farklı olan nasıl yapışkan hale getirileceğini gösterdik. Yapışkan hale getirmek istemiyor, bunun yerine düzeltmek istiyorsanız, bu gönderi size yardımcı olacaktır.

Web sitenize sabitlenmiş bir altbilgi eklemek, müşterilerinizden birinden gelen bir talep veya kendi web siteniz için sahip olduğunuz bir ihtiyaç olabilir. Sabit bir başlık kadar sık ​​kullanılmasa da, uğraştığınız şeylerden biri olabilir. Altbilginizi Divi web sitenizde nasıl yapışkan hale getireceğinizin iki yolunu göstereceğiz. İlki bazı CSS satırlarını kullanmak, ikincisi ise jQuery kodunu kullanmak olacak. Her iki yol da web sitenizdeki altbilginin CSS stil sayfasında değişiklikler yapacaktır.

Burada, kaydırırken sabit altbilginin nasıl göründüğüne dair bir örnek var:

Sabit Altbilgi Ne Zaman Kullanılır?

Web sitenizde sabit bir altbilgiye sahip olmak istemenizin farklı nedenleri vardır. Bu nedenlerden biri, altbilginizin sahip olduğu bilgilerin alaka düzeyi olabilir. Örneğin, sosyal simgelerinizi altbilginize koyabilirsiniz ve web sitenizdeki ziyaretçileri sosyal medya kanallarınızı keşfetmeye teşvik etmek istiyorsunuz. Başka bir neden de, web sitenize verdiği etkiyi beğenmeniz olabilir.

Sabit bir altbilgi kullanıyorsanız, ziyaretçi penceresinin bir bölümünün her zaman alınacağını bilmelisiniz. Bu, sabit bir alt bilgi olmasa görecekleri içeriğin aynısını görmek için daha fazla kaydırma yapmaları gerektiği anlamına gelir. Bu bir zorluk çünkü ziyaretçiler mümkün olduğunca az çaba harcamayı seviyor.

Ancak, alt bilginiz o kadar büyük değilse, alt bilginizde gerçekleştirilen eylemlerin sayısını artırabilir. Aynı anda sabit bir üstbilgi, birincil menü ve altbilgi kullanılmasını önermiyoruz. Üçünün de sabitlenmesiyle, görünen içerik büyük ölçüde azaltılacak ve bu da daha yüksek bir hemen çıkma oranına yol açabilecektir.

Sabit ve Yapışkan Altbilgi Arasındaki Fark

Başlamadan önce, sabit bir altbilgi ile yapışkan bir altbilgi arasındaki farkı açıklayacağız.

Yapışkan bir altbilgi genellikle biraz daha karmaşıktır. Bir sayfanın altbilgiyi ekranın altına itecek kadar içeriği yoksa , sabit bir altbilgi gibi davranması için yapılmıştır. Sayfaların yeterince uzun olduğu durumlarda, altbilgi normal bir altbilgi gibi davranacak ve ekranın değil sayfanın sonuna kadar aşağı itilecektir.

Başlayalım

Youtube Kanalımıza Abone Olun

Sabit altbilgiyi web sitenize nasıl ekleyeceğinizi iki şekilde göstererek hemen başlayacağız; CSS kodu ve jQuery kodu aracılığıyla. Her iki yöntem de işe yarar, ancak hepsi, ihtiyacınız olan web sitesi için hangisini kullanmayı tercih ettiğinize bağlıdır.

CSS ile Sabit Altbilgi Ekle

Sabit bir altbilgi oluşturmanın ilk ve en kolay yolu, bazı CSS satırları eklemektir. Divi Builder ve WordPress ile bu satırları farklı yerlere ekleyebiliriz. Onlara bir göz atalım.

Bir Sayfa İçin Özel CSS Üzerinden CSS Kodu Ekleme

CSS kodunu eklemenin ilk yolu, onu özellikle bir sayfaya eklemektir. Web sitenizdeki her sayfa için aynı sabit bir altbilgi yapmak daha iyi olsa da (web sitenizde bu tutarlılığı sağlamak için), özellikle bir sayfaya uygulanmasına izin verebilirsiniz.

CSS kod satırlarını eklemek istediğiniz sayfayı açın ve Divi Builder'ın aşağıdaki düğmesine tıklayın.

Aşağı kaydırın ve Özel CSS alanına aşağıdaki kodu ekleyin:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

Tema Özelleştirici Aracılığıyla CSS Kodu Ekleyin

Kodu eklemenin başka bir yolu da Tema Özelleştirici'dir. Tema Özelleştirici'yi kullanarak, sonuçların web sitenizde gerçek zamanlı olarak gerçekleştiğini izleyeceksiniz. Tema Özelleştirici aracılığıyla eklediğiniz kod, web sitenizdeki tüm sayfalar için geçerlidir.

Web sitenizde Tema Optimize Edici'ye gidin > Ek CSS > Aşağıdaki CSS kod satırlarını yapıştırın:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

Tema Seçeneklerinden CSS Kodu Ekleyin

CSS kodunu web sitenize eklemenin son yolu Tema Seçenekleridir. Tema Seçeneklerinin Özel CSS alanına kodunuzu eklediğinizde, kod tüm web sitesi için de geçerli olacaktır. Bu, Divi web sitenizin tamamına özel CSS kodu eklemenin en sık kullanılan yoludur.

Divi > Tema Seçenekleri > Genel > Aşağı kaydırın ve Özel CSS alanına aşağıdaki kodu ekleyin:

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

jQuery ile Sabit Altbilgi Ekle

Elimizdeki diğer bir olasılık, CSS değişikliklerini bazı jQuery kod satırları aracılığıyla yapmaktır. Sabit bir altbilgi kullandığınızda, genellikle bunun web sitenizdeki tüm sayfalar için geçerli olduğundan emin olmak istersiniz. Bu tür bir tutarlılık, ziyaretçilerinizin kafanız karışmadan web sitenizde gezinmesini kolaylaştırır.

Özellikle Bir Sayfa İçin Kod Modülü Üzerinden jQuery Kodu Ekleme

Sabit altbilginin uygulanmasını istediğiniz sayfayı açın ve sayfanızın üstüne yeni bir standart bölüm ekleyin. Ardından, tam genişlikte bir satır seçin ve buna bir Kod Modülü ekleyin. Kod Modülünü açın ve aşağıdaki jQuery kodunu İçerik Kutusuna yapıştırın:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Belirli bir sayfada Kod Modülü aracılığıyla jQuery kodu eklendiğinde, kod yalnızca o sayfa için geçerli olacaktır. Web sitenizin geri kalanı normal bir altbilgiye sahipken, Kod Modülünü kullandığınız sitenin sabit bir altbilgisi olacaktır.

Tema Seçeneklerinden jQuery Kodu Ekleme

Altbilginizi sabitleyen jQuery kodunu eklemek için son seçenek Tema Seçenekleridir. Kod satırları hemen tüm web sitenize uygulanacak ve web sitenizin ihtiyaç duyduğu tutarlılığı sunacaktır.

Divi > Tema Seçenekleri > Entegrasyon > seçeneğine gidin ve aşağıdaki kod satırlarını web sitenizin <head> bölümüne yapıştırın:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Son düşünceler

Önceki gönderilerden birinde nasıl yapışkan alt bilgi yapılacağını göstermiştik. Bu gönderi, özellikle web siteniz için nasıl sabit bir altbilgi oluşturulacağını ele aldı. Sabit alt bilgi, web sitenizi ziyaret ederken her zaman ziyaretçi ekranının altında kalacaktır. Herhangi bir sorunuz veya öneriniz varsa, iletişime geçebilmemiz için aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Öne Çıkan Görsel: Zeeker2526 / Shutterstock.com