Divi ile bir altbilgi nasıl yapılır
Bugünün Divi öğreticisinde, kendi web sitenize veya müşterinize entegre edilmek için asla düşünemeyeceğiniz belirli efektleri nasıl elde edeceğinizi göstereceğiz.Daha doğru;Size bir altbilgi açıklaması yapmayı nasıl göstereceğiz.Altbilginin açıklanması temel olarak sayfanın sonuna kadar beklemek ve altbilgiyi kaydırma şeklinize göre açığa çıkarır.Tüm sayfayı kaydırdıktan sonra, altbilgi orijinal formunda görüntülenir.Web sitenize altbilgi açıklaması eklemek, web sitenizin altbilgisine vermek istediğiniz biraz ekstra dokunuş verebilirsiniz.Bu aynı zamanda insanların web sitenizdeki herhangi bir sayfaya göz attıklarında göreceği son şeydir.Alt altbilginin açıklanmasıyla tam olarak ne demek istediğimizi göstermek için, sonuçta bakalım:
Açık bir altbilgi yapmanın yanı sıra, web sitemizin ana içeriğine bazı ince gölgeler eklediğimizi görebilirsiniz. Bunu yaparak, ana içerik ve altbilgi arasında bir tür perspektif yaptık. YouTube kanalına abone olarak bir altbilgi nasıl yapılır, altbilginin açıklanmasının sonuçlarını elde etmek için gereken CSS kodunu ekliyoruz, önce birkaç sıra CSS koduna ihtiyacımız var. Divi web sitenize CSS kodu eklemenin çeşitli yolları olduğundan, size üçünü de göstereceğiz. İlk olarak, kodu tema seçeneğine nasıl ekleyeceğinizi göstereceğiz. İkincisi, kodu özelleştirici teması aracılığıyla ekleyeceğiz. İki yöntemden biri aracılığıyla kod ekleyerek, altbilgi açıklamanız yakında tüm web sitelerine uygulanacaktır. Öte yandan, kodu belirli bir sayfa için geçerli kılmak istiyorsanız, bunu da yapabilirsiniz. Kodu üzerinde çalıştığınız sayfaya nasıl ekleyeceğinizi göstererek, bu efekti yalnızca bir sayfa için oluşturabilirsiniz.Kodumuzda ihtiyacımız olan iki ana şey The-Z dizin ve ana içerik için daha düşük marj. Mükemmel bir altbilgi sağlamak için, altbilginin yüksekliğini bilmemiz gerekir. Standart olarak, kullanılan altbilgi 53px değerine sahiptir. Ancak, yüksekliği ihtiyaçlarınıza göre değiştirmiş olabilirsiniz. Standart bir altbilgi açıklamasının nasıl ekleneceğini gösterdikten sonra, size herhangi bir altbilgi yüksekliğine nasıl ayarlayacağınızı da göstereceğiz. Tema seçeneğinden gereken CSS kodunu ekleyin İlk yol, CSS kodunun nasıl ekleneceğini göstermenin DIVI teması seçeneğidir. Bu, web sitenize ek CSS kodu eklemek için en sık kullanılan yöntemdir. Bu alanda CSS kodunu ekleyerek, bunu hemen tüm web sitelerine uygulayacaksınız. Kodu eklemek için WordPress> Divi> Divi> Tema Seçeneklerini> açın ve aşağıdaki CSS kodunu özel CSS alanında kopyalayın. Sekme: #Main-Content {
Marj-Alt: 53px;
Z-index: 2;
}
#Main-footer {
Genişlik:%100;
Konum: Sabit;
Sol: 0;
Alt: 0;
Z -index: -1;
}
Kodu ekledikten sonra, web sitenizi açın ve altbilgi işini yaptığını ortaya çıkarın. CSS kodunu divi web sitenize eklemek için başka bir yolun temasını ayarlayarak gerekli CSS kodunu ekleyin. Özelleştirici teması aracılığıyla kod ekleyin veya tema seçenekleri aynıdır. Tema seçeneğindeki kodu sildikten sonra, kod tema ayarında da silinir ve tersi de geçerlidir. Özelleştirici teması aracılığıyla kod eklemenin avantajlarından biri, gerçek zamanlı olarak gerçekleşen her şeyi görebilmenizdir. Kod üzerinde yaptığınız ek ayarlamalar, alacağınız nihai sonucun net bir resmini hemen verecektir. Kodu ayarlamaya eklemek için WordPress Dashboard> Ekran> Özelleştirme> ‘Ek CSS’> ‘na aşağı kaydırın. ve kod satırını aşağıdaki CSS ekleyin: #Main-Content { Marj-Alt: 53px;
Z-index: 2;
}
#Main-footer {
Genişlik:%100;
Konum: Sabit;
Sol: 0;
Alt: 0;
Z -index: -1;
}
Bir sayfaya gereken CSS kodunu ekleyin Yalnızca CSS kod satırını açıklamak için bir altbilgi eklemenin son yolu, belirli bir sayfaya eklemektir. Örneğin, içeriği daha az etkileşen sayfalara değer katmak istiyorsanız bu ilginç olabilir. Bir altbilgi açıklaması ekleyerek, bir şekilde biraz daha etkileşimli bir sayfa oluşturacaksınız ve altbilgide sağlanan içeriğe sosyal medya simgeleri gibi odaklanacaksınız.
CSS kodunu belirli bir sayfaya eklemek için belirli bir sayfayı açın. Bu sayfadaki Divi Builder’ın sağ üst köşesinde aşağıdaki simgeyi göreceksiniz.
Simgeye tıklayın ve CSS özel alanındaki aşağıdaki kod satırlarını yapıştırın: #Main-Content {Marj-Bottom: 53px;
Z-index: 2;
#Main-footer {
Genişlik:%100;
Konum: Sabit;
Sol: 0;
Alt: 0;
Z -index: -1;
}
Ayarları kaydettikten sonra, altbilginin bu sayfada özellikle göründüğünü göreceksiniz. Altbilgi yüksekliğini şimdi değiştirin, yukarıda açıkladığımız yöntem, yalnızca sağlanan standart altbilgiyi hesaplar. Başka bir yükseklik ile uğraştıktan sonra, kod görevi doğru bir şekilde yapmayacaktır. Bunu düşündük ve size başka bir yükseklik için nasıl açık bir altbilgi yapacağınızı göstereceğiz.
İstediğiniz zaman, altbilginiz için ayarlamak istediğiniz yüksekliği seçebilirsiniz. İki CSS kimliği için yükseklik ayarlamalıyız: ana altbilgi ve alt altbilgi. Bu iki yerdeki yüksekliği ayarlayarak, altbilgi yerine sığacaktır. Tabii ki, bunu bitirdikten sonra, ana içeriğiniz altındaki marjı da değiştirmeniz gerekir. Örneğin, 60 piksel yüksekliğe sahip bir altbilgi istiyorsanız, aşağıdaki kod satırına ihtiyacınız var: #Main-content {
Marj-Alt: 60px; Z-index: 2;
}
#Main-footer {
Yükseklik: 60px;
Genişlik:%100;
Konum: Sabit;
Sol: 0;
Alt: 0;
Z -index: -1;
}
#Footer-Bottom {
Yükseklik: 60px;
}
’60px’ değerine ihtiyacımız olan üç yer olduğunu görebilirsiniz. Altbilginize ayarlamak istediğiniz yüksek bir değeriniz varsa, üç yerde de değiştirdiğinizden emin olun; Ana içerikler, ana altbilgi ve alt altbilgi. CSS kutusunun gölgesini ekleyin Biraz perspektif ve etkileşim eklemek için yapabileceğiniz başka bir şey, web sitenize ana içeriğe bazı gölge kutuları eklemektir. Altbilgi, ‘ana içerik altında’ bulunduğunu göstermiştir. Kutunun gölgesini ekledikten sonra vurgulayacaksınız. Bir gölgeye sahip olarak, ana içerik ve altbilgi arasındaki yüksekliğin yüksekliği daha büyük görünecektir. Kutunun gölgesini altbilgi ekranınıza eklemek için aşağıdaki kod satırını kullanın: #Main-Content {
Marj-Alt: 60px;
Z-index: 2; -Webkit-Box-Shadow: 1px 1px 10px 1px Siyah;
-Moz-Box-Shadow: 1px 1px 10px 1px Siyah;
Box-Shadow: 1px 1px 10px 1px Siyah;
}
#Main-footer {
Yükseklik: 60px;
Genişlik:%100;
Konum: Sabit;
Sol: 0;
Alt: 0;
Z -index: -1;
}
#Footer-Bottom {
Yükseklik: 60px;
}
İşte burada! Altbilgerinizin açıklanması artık düzgün çalışmalıdır. Bugünün gönderisindeki son zihin, web sitenizde nasıl bir altbilgi açıklama efekti oluşturabileceğinizi gösteriyoruz. Bir etki yaratmak ve altbilginizin yüksekliğine uyduğundan emin olmak için sağlanan özel CSS kodunu kullandığınızdan emin olun. Ek bir perspektif sağlamak istiyorsanız, yukarıdaki adımlarda gösterildiği gibi ana içeriğe bir kutunun gölgesi eklemenizi öneririz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
