Divi ile Alt Bilgi Gösterimi Nasıl Oluşturulur

Bugünün Divi eğitiminde, muhtemelen kendi web sitenize veya bir müşterinize entegre etmeyi hiç düşünmediğiniz belirli bir etkiye nasıl ulaşacağınızı göstereceğiz. Daha kesin; size bir alt bilgi gösteriminin nasıl oluşturulacağını göstereceğiz. Altbilgi gösterimi, temelde siz sayfanın sonuna gelene kadar bekler ve kaydırma şeklinize göre altbilgiyi gösterir. Sayfayı tamamen kaydırdığınızda, altbilgi orijinal biçiminde gösterilecektir.

Web sitenize bir alt bilgi açıklaması eklemek, web sitenizin alt bilgisine vermek istediğiniz ekstra küçük dokunuşu getirebilir. Ayrıca, web sitenizdeki herhangi bir sayfada gezinirken insanların göreceği son şeydir. Bir alt bilgi açıklamasıyla tam olarak ne demek istediğimizi size göstermek için, sonuca bir göz atalım:

Görüyorsunuz, altbilgiyi ortaya çıkarmanın yanı sıra, web sitemizin ana içeriğine ince bir gölge de ekledik. Bunu yaparak, ana içerik ve alt bilgi arasında bir tür perspektif oluşturduk.

Divi ile Alt Bilgi Gösterimi Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Gerekli CSS Kodunu Ekleyin

Alt bilgi gösterimi sonucunu elde etmek için, her şeyden önce, bazı CSS kodu satırlarına ihtiyacımız olacak. Divi web sitenize CSS kodu eklemenin farklı yolları olduğundan, size bunların üçünü de göstereceğiz. İlk olarak, kodu Tema Seçeneklerine nasıl ekleyeceğinizi göstereceğiz. İkinci olarak, kodu Tema Özelleştirici aracılığıyla ekleyeceğiz. İki yöntemden biri aracılığıyla kod ekleyerek, alt bilgi gösteriminiz hemen tüm web sitesine uygulanacaktır. Öte yandan, kodu özellikle bir sayfaya uygulamak istiyorsanız, bunu da yapabilirsiniz. Üzerinde çalıştığınız sayfaya kodu nasıl ekleyeceğinizi göstererek, bu efekti yalnızca bir sayfa için oluşturabilirsiniz.

Kodumuzda ihtiyaç duyacağımız iki ana şey, ana içerik için z-endeksi ve bir kenar boşluğudur. Altbilginin tam olarak oturduğundan emin olmak için altbilginin yüksekliğini bilmemiz gerekir. Standart olarak, kullanılan altbilginin değeri 53 pikseldir. Ancak yüksekliği ihtiyaçlarınıza göre değiştirmiş olabilirsiniz. Alt bilgi açıklamasını standart olarak nasıl ekleyeceğinizi gösterdikten sonra, onu herhangi bir alt bilgi yüksekliğine nasıl sığdıracağınızı da göstereceğiz.

Tema Seçeneklerinden Gerekli CSS Kodunu Ekleyin

CSS kodunu nasıl ekleyeceğinizi göstereceğimiz ilk yol Divi Tema Seçenekleridir. Bu, web sitenize herhangi bir ek CSS kodu eklemek için en sık kullanılan yöntemdir. Bu alana CSS kodunu ekleyerek, hemen tüm web sitesine uygulanmasını sağlayabilirsiniz.

Kodu eklemek için WordPress Panonuz > Divi > Tema Seçenekleri > bölümüne gidin ve aşağıdaki CSS kodu satırlarını kopyalayın ve sekmenin altındaki Özel CSS alanına yapıştırın:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Kodu ekledikten sonra web sitenize gidin ve altbilginin işini yapmasını izleyin.

Tema Özelleştirici ile Gerekli CSS Kodunu Ekleyin

CSS kodunu Divi web sitenize eklemenin başka bir yolu da Tema Özelleştirici'dir. Kodu Tema Özelleştirici veya Tema Seçenekleri aracılığıyla eklemek aynıdır. Kodu Tema Seçenekleri'nden kaldırdığınızda, Tema Özelleştirici'de de kaldırılır ve bunun tersi de geçerlidir. Tema Özelleştirici aracılığıyla kod eklemenin avantajlarından biri, her şeyin gerçek zamanlı olarak gerçekleştiğini görebilmenizdir. Bu nedenle, kodda yaptığınız ek ayarlamalar, elde edeceğiniz nihai sonucun net bir resmini size hemen verecektir.

Kodu Tema Özelleştiriciye eklemek için WordPress Panonuz > Görünüm > Özelleştir > 'Ek CSS'ye gidin > Ve aşağıdaki CSS kodu satırlarını ekleyin:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Gerekli CSS Kodunu Yalnızca Bir Sayfaya Ekleyin

Altbilgiyi açığa çıkarma CSS kod satırlarını eklemenin son yolu, onu özellikle bir sayfaya eklemektir. Örneğin, daha az etkileşimli içeriğe sahip sayfalara biraz katma değer vermek istiyorsanız bu ilginç olabilir. Bir alt bilgi açıklaması ekleyerek, bir şekilde sayfayı biraz daha etkileşimli hale getireceksiniz ve sosyal medya simgeleri gibi altbilgide sağlanan içeriğe odaklanacaksınız.

CSS kodunu özellikle bir sayfaya eklemek için o sayfayı açın. Bu sayfada Divi Builder'ın sağ üst köşesinde aşağıdaki simgeyi göreceksiniz.

Simgeye tıklayın ve aşağıdaki kod satırlarını Özel CSS alanına yapıştırın:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

Ayarları kaydettikten sonra, özellikle o sayfada alt bilgi gösteriminin göründüğünü göreceksiniz.

Altbilgi Yüksekliğini Değiştir

Şimdi, yukarıda açıkladığımız yöntem, yalnızca sağlanan standart altbilgi için geçerlidir. Başka bir yükseklikle uğraştığınızda, kod işini düzgün yapmayacaktır. Bunu dikkate aldık ve size diğer yükseklikler için altbilgiyi nasıl ortaya çıkaracağınızı göstereceğiz.

Herhangi bir noktada, altbilginize atamak istediğiniz yüksekliği seçebilirsiniz. İki CSS kimliğinin yüksekliğini ayarlamamız gerekiyor: ana altbilgi ve altbilgi alt. Bu iki yerden yükseklik ayarlanarak alt bilgi yerine oturacaktır. Elbette, bunu yaptıktan sonra, ana içeriğinizin kenar boşluğunu da değiştirmeniz gerekir. Örneğin 60 piksel yüksekliğinde bir altbilgi istiyorsanız, aşağıdaki kod satırlarına ihtiyacınız olacak:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

'60px' değerine ihtiyaç duyduğumuz üç yer olduğunu görebilirsiniz. Altbilginize atamak istediğiniz başka bir yükseklik değeriniz varsa, bunu üç yerde de değiştirdiğinizden emin olun; ana içerik, ana altbilgi ve altbilgi alt.

CSS Kutu Gölgesi Ekle

Web sitenize birazcık bakış açısı ve etkileşim eklemek için yapabileceğiniz başka bir şey, ana içeriğe biraz kutu gölgesi eklemektir. Altbilgi zaten bir tür ana içeriğin 'altında' bulunduğunu gösteriyor. Kutu gölgesini eklediğinizde, bunu vurgulayacaksınız. Bir gölgeye sahip olduğunuzda, ana içerik ile alt bilgi arasındaki yanıltıcı yükseklik mesafesi daha büyük görünecektir.

Alt bilgi gösteriminize kutu gölgesi eklemek için aşağıdaki kod satırlarını kullanın:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Bu kadar! Altbilgi açıklamanız şimdi iyi çalışmalıdır.

Son düşünceler

Bugünkü gönderide, web sitenizde nasıl bir alt bilgi ortaya çıkarma efekti oluşturabileceğinizi gösterdik. Efekti oluşturmak için sağlanan özel CSS kodunu kullandığınızdan ve alt bilginizin yüksekliğine uyduğundan emin olun. Bu ek perspektifi vermek istiyorsanız, yukarıdaki adımda gösterildiği gibi ana içeriğe kutu gölgesi eklemenizi öneririz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde 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!

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