Divi Alt Bilginizi Nasıl Yapışkan Yapabilirsiniz?

Bu eğitimde, size Divi web sitenizdeki altbilgiyi tam olarak nasıl yapışkan hale getireceğinizi göstereceğiz. Yapışkan bir altbilgi kullanmak, bir müşteri için bir web sitesi tasarlarken aldığınız taleplerden biri veya kendi web sitenizi oluştururken sahip olduğunuz bir ihtiyaç olabilir. Altbilginizi yapışkan hale getirecek iki olasılık göstereceğiz. İlk yol CSS kodu, ikincisi ise jQuery kodudur. Her iki yol da işe yarar, ancak hepsi web siteniz için bu yapışkan etkiyi oluşturmak için hangisini kullanmayı tercih ettiğinize bağlıdır.

Web sitenize yapışkan bir altbilgi eklemek, şu anda Divi oluşturucuda otomatik olarak yapabileceğiniz bir şey değildir. Bu yüzden size çok fazla çaba harcamadan istediğiniz kesin sonuca nasıl ulaşacağınızı göstereceğiz. Yapmanız gereken tek şey bu yazıyı adım adım takip etmek, bazı kod satırlarını kopyalayıp yapıştırıp doğru yere koymak.

Neden Yapışkan Altbilgi Kullanılır?

Yapışkan bir altbilgi genellikle bir ana nedenden dolayı kullanılır; web sitenizde tüm ekranı dolduracak kadar yeterli içeriğe sahip olmayan bir veya birden fazla sayfanız varsa. Tabii ki, bir sayfada yeterli içeriğe sahip olduğunuzdan emin olabilirsiniz, ancak sayfaya katma değer getirmiyorsa; yapmana gerek yok.

Şimdi, tüm ekranı dolduracak kadar içerik olmaması durumunda, içerik sona erdikten hemen sonra sayfanın kayan bir altbilgisi olacaktır. Bu genellikle iyi görünmez ve elde etmek istediğiniz sonuç bu değildir. Neyse ki, kayan altbilgiden kurtulmak için yapışkan bir altbilgiden yararlanabilirsiniz. Yapışkan altbilgi, gereksiz alan yaratmadan altbilginin sayfanın altında kalmasını sağlar. Böylece sayfanın uzunluğu aynı kalacak ve pencerenizin boyutunu her ayarladığınızda, altbilgi kendisini ekrana göre değiştirecektir.

Burada, yapışkan bir altbilgiye sahip olmayan kısa bir sayfanın resmi var:

Ve işte, yapışkan bir altbilgi eklendikten sonra o sayfanın aynı görüntüsü:

Yapışkan ve Sabit Altbilgi Arasındaki Fark

Herkes kendi web sitesinde altbilgi kullanmaya karar vermez, ancak yaptıklarında; stil vermenin birçok yolu var. Her şey web sitenizin yapısının nasıl olduğuna ve bunun yerine Divi oluşturucu ile yapılmış bir 'manuel' ve farklı tarzdaki bir altbilgi eklemek isteyip istemediğinize bağlıdır.

Ancak standart bir altbilgi kullanıyorsanız, onu nasıl biçimlendirmek istediğinizi ve web sitenizde nasıl konumlandırılmasını istediğinizi seçebilirsiniz. Bir altbilginin bir web sitesinde sahip olabileceği üç ana konum, kayan, sabit ve yapışkandır.

Yapışkan ve sabit altbilgiyi birbiriyle karşılaştırırken; ilk bakışta aynı görünebilirler ama değiller. Sabit altbilgi, web sitenizdeki bir sayfada gezinirken her zaman görünürken, yapışkan altbilgi özellikle içeriğin ekranın alt kısmına ulaşacak kadar uzun olmadığı sayfaları işler. İçeriğin yeterince uzun olmadığı bu özel durumda; sabit bir altbilgi gibi davranacak ve sayfanızın en altına takılıp kalacaktır; bu 'sabit altbilgi efektini' yaratmak.

Bununla birlikte, içerik yeterince uzunsa, yapışkan altbilgi her zamanki gibi davranır ve sayfa, altbilgiyi sayfanın altına doğru iterek ekranda sürekli görünmemesini sağlar. Çoğu durumda, bu yöntem, içeriğin görünmesi için pencerede daha fazla alan sağladığından, tüm web sitesinde sabit bir altbilgiye sahip olmaktan daha çok tercih edilir.

Divi Web Sitenizde CSS ile Yapışkan Altbilgi Oluşturun

Daha fazla beklemeden, web siteniz için yapışkan bir altbilgi oluşturmaya başlayalım. Kullanacağımız kod gerçekten basit ama işi hallediyor. İçerik yeterince uzun değilse, sayfanızdaki kayan bir altbilgiden, altbilginin aşağıya itildiği bir sayfaya hızla geçersiniz.

Sayfa Ayarlarından CSS Kodu Ekleme (Özellikle Bir Sayfa İçin)

Bazı durumlarda, altbilgiyi yalnızca belirli bir sayfada yapışkan yapmak istersiniz. Gönderinin bu bölümünde, bir sayfanın Özel CSS alanına CSS kodunu ekleyerek bunu tam olarak nasıl yapacağınızı göstereceğiz. Bunu yaparak, CSS kodunun yalnızca web sitenizdeki o sayfa için geçerli olduğundan emin olursunuz. Bu aynı zamanda CSS kodunun yalnızca biri o sayfayı açtığında yükleneceği anlamına gelir. Bu yöntem genellikle, web sitesinde yapışkan altbilgi vermek istediğiniz yalnızca birkaç kısa sayfanın olduğu durumlarda kullanılır.

Yapışkan altbilginin etkin olmasını istediğiniz sayfayı açarak veya uygulanmasını istediğiniz yerde yeni bir sayfa oluşturarak başlayın. Ardından, Divi oluşturucunuzda aşağıdaki simgeye tıklayarak sayfa ayarlarını açın:

Devam ederek, az önce açtığınız penceredeki Özel CSS alanına aşağıdaki kodu ekleyin:

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

Sayfanızı önizlediğiniz andan itibaren, CSS kodu uygulanmalı ve altbilgiyi yapışkan hale getirmelidir.

Tema Özelleştirici Aracılığıyla CSS Kodu Ekleme (Gerçek Zamanlı Görünüm)

Kodu eklemenin başka bir yolu da Tema Özelleştiricidir. CSS kodunu bu şekilde ekliyorsanız, otomatik olarak tüm web sitesine uygulanacaktır. Her sayfaya bu CSS kodu uygulanacaktır. Kodu Tema Özelleştirici aracılığıyla ekleyerek, web sitenizde meydana gelen değişiklikleri de doğrudan görebilirsiniz.

CSS kodunu Tema Özelleştiriciye eklemek için WordPress web sitenizin arka ucundaki 'Tema Özelleştirici'ye tıklayın. Ardından, sayfayı aşağı kaydırın ve Ek CSS seçeneğini açın. Şimdiye kadar kullandığınız tüm özel CSS kodlarının göründüğünü göreceksiniz. Devam edin ve ona aşağıdaki kodu ekleyin:

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

Divi Tema Seçenekleriyle CSS Kodu Ekleme

Son olarak, kodu Divi Tema Seçenekleri aracılığıyla da ekleyebilirsiniz. Bu, tüm web sitesinin koddan faydalanmasını istediğiniz bir web sitesine kod eklemenin en sık kullanılan yoludur.

Divi > Tema Seçenekleri'ne gidin > Sayfayı aşağı kaydırın > Aşağıdaki CSS kodunu Özel CSS kutusuna ekleyin:

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

JQuery ile Divi Web Sitenizde Yapışkan Altbilgi Oluşturun

Kod Modülü Üzerinden jQuery Kodu Ekleme (Özellikle Tek Sayfa İçin)

Divi oluşturucu içindeki Kod Modülünü kullanarak jQuery kodunu ekleyebilirsiniz. Bu, yine, çoğunlukla kısa içerikli çok fazla sayfa olmadığında ve tüm web sitesi için jQuery kodunu yüklemek istemiyorsanız kullanılır.

Üzerinde çalıştığınız sayfaya tam genişlikte satır içeren bir bölüm ekleyin.

Bu tam genişlikli satıra bir kod modülü ekleyerek devam edin ve aşağıdaki kodu buna yapıştırın:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Divi Tema Seçenekleri ile jQuery Kodu Ekleme

JQuery kodunu eklemenin bir başka yolu da Divi Tema Seçenekleridir. Tüm web sitesi için jQuery kodu eklerken, Divi Tema Seçeneklerinde bunu yapabileceğimiz belirli bir yer var; <head&gt; Entegrasyon sekmesinin alanı. Şu anda kodu tam olarak buraya ekleyeceğiz.

WordPress Web Sitenizi açın > Divi'ye gidin > Tema Seçeneklerini Açın > Entegrasyon sekmesine gidin ve web sitenizin <head> bölümüne aşağıdaki jQuery kodunu ekleyin:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Son düşünceler

İçinde çok fazla içerik olmayan bir sayfanız varsa, genellikle yapışkan bir altbilgi eklemek gerekir. Sayfa yapısının daha doğal görünmesi için kayan altbilgiden kurtulmak istiyorsunuz. Blog bölümümüzde gelecek yazılar için herhangi bir yorum veya öneriniz varsa; İletiş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!

Vintagio / Shutterstock.com tarafından Öne Çıkan Görsel