Divi Başlığı Nasıl Yapışkan/Sabit Yapılır (Adım Adım Kılavuz)
Yayınlanan: 2020-11-03Divi kullanıyor ve sabit bir başlık oluşturmak istiyor musunuz? Doğru yere geldiniz. Bu kılavuzda, size adım adım Divi başlığını yapışkan hale getirmenin iki farklı yolunu göstereceğiz.
Elementor ile birlikte Divi, oradaki en popüler WordPress temalarından biridir. Yaklaşık 2 milyon site, işletmeleri için özel tasarımlar oluşturmak için bunu kullanıyor. Siz de bir Divi kullanıcısıysanız, sizin için özel bir şeyimiz var. Bu derste, size bazı basit adımlarla nasıl sabit bir Divi başlığı yapacağınızı göstereceğiz.
Divi Başlığını Neden Yapışkan Yapalım?
Divi başlığını yapışkan hale getirmenin ana nedenlerinden biri, kullanıcılar için gezinmeyi kolaylaştırmaktır . Başlık, sitenizin en üstünde bulunur, bu nedenle müşterilerin sitenize geldiklerinde gördükleri ilk şeylerden biridir. Başlık çok önemli bilgiler içerir ve kullanıcıların aradıklarını bulmaları için içeriğinizde gezinmelerine yardımcı olur. Başlığa normalde sitenizin en önemli bölümlerini, ana kategorileri, ürünlerinize giden bağlantıları vb. yerleştirirsiniz.
Varsayılan olarak, kullanıcı sayfayı aşağı kaydırdığında WordPress menüleri görünmez. Böylece, rakiplerinizden bir adım önde olmak için, başlığınızı sabitleyerek, kullanıcıların aşağı kaydırdıklarında bile her zaman kolayca erişebilmelerini sağlayabilirsiniz. Bu, sitenizin gezinmesini iyileştirmenize yardımcı olabilir. Ek olarak, kullanıcılarınıza rehberlik etmenize ve onları gitmelerini istediğiniz yere götürmenize yardımcı olabilir. Bu nedenle, akıllıca kullanırsanız, başlık dönüşüm oranlarını artırmanıza yardımcı olabilir.
Başlığı düzenlemenin ve WordPress menüsüne sosyal medya simgeleri eklemenin yanı sıra, en popüler e-ticaret siteleri, popüler ürün kategorilerini görüntülemek için mega menüler kullanır. Bu şekilde, alışveriş yapanların aradıkları ürünleri kolayca bulmalarını sağlarlar.
Divi teması, sitenizde kullanmak üzere içe aktarabileceğiniz önceden hazırlanmış 600'den fazla şablonla birlikte gelir. Ancak mağazanızı bir sonraki seviyeye taşımak için başka bir şeye ihtiyacınız var. WordPress'te başlığı nasıl düzenleyeceğinizi zaten gördük ve bugün size Divi kullanarak başlığı nasıl yapışkan hale getireceğinizi göstereceğiz.
Avada ve GeneratePress gibi bazı WordPress temaları, tema panelleri aracılığıyla başlığı yapışkan hale getiren araçlarla birlikte gelir. Ancak, aynısını Divi'de yapmak bazı ek özelleştirmeler gerektirir.
Divi Header Nasıl Yapışkan/Sabit Yapılır?
Burada, Divi başlığını düzeltmek için yeni başlayanlara uygun iki yöntem göstereceğiz.
- Divi Builder eklentisi ile
- kodlama yoluyla
Bu bölümde, her bir seçenek için atmanız gereken adımlara bir göz atacağız. Her ikisi de oldukça etkilidir, bu yüzden en çok beğendiğinizi seçin.
1) Divi Builder'ı kullanarak Başlığı yapışkan yapın
Divi teması, entegre bir Oluşturucu ile birlikte gelir. Bu, Divi temasını etkinleştirdiyseniz, herhangi bir ek eklenti yüklemeniz gerekmediği anlamına gelir. Bu gösteri için sitenizde zaten Divi kullandığınızı varsayacağız. Bunu yapmazsanız, devam etmeden önce Divi'yi kurun ve etkinleştirin.
Ardından, Divi'nin sunduğu önceden hazırlanmış birçok şablondan birini içe aktarabilir veya sıfırdan oluşturabilirsiniz. Tasarımınızı oluşturduktan veya seçtikten sonra, WordPress kontrol panelinizde Divi > Tema Oluşturucu'ya gidin.
Burada, siteleriniz için özel şablonlar oluşturabileceksiniz. Herhangi bir şablonda üç ana unsur olacaktır:
- başlık
- Gövde
- altbilgi
Genel Başlığı Düzenleyin
Divi başlığımızı sabit hale getirmek istediğimiz için Global başlığı seçin. Yapışkan hale getirmek için genel başlığı düzenlemeniz gerekir. Bu nedenle, farenizi Global başlığın üzerine getirin ve sol tarafta bir kalem simgesi göreceksiniz. Düzenlemeye başlamak için üzerine tıklayın. Ardından, başlığı düzenlemek için Divi oluşturucu sayfasını göreceksiniz. Buraya metin, görseller, sosyal simgeler, menüler vb. öğeler ekleyebilirsiniz. Farenizi ekranın üst kısmına getirin ve sol taraftaki dişli simgesine tıklayın.
Farklı seçeneklerle yeni bir açılır kutu açılacaktır. Divi temasının en son sürümü, Divi konumları adı verilen bir özellikle birlikte gelir. Başlığı yapışkan hale getirmek için kullanacağımız özellik bu. Gelişmiş sekmesi altında, Konum seçeneğini göreceksiniz. Açın ve açılır menüden Sabit seçeneğini seçin. Ardından, başlığı güncelleyin. Bundan sonra, açılır kutu kaybolacak ve sağ köşedeki Kaydet düğmesine basarak genel değişiklikleri kaydetmeniz gerekecek. Başlığınızı güncelledikten sonra bu oluşturucuyu kapatın. Ardından Divi oluşturucu seçeneklerini kaydedin.
Şimdi, ön ucu kontrol etme zamanı. Web sitenizi yeni bir sekmede açın ve alt bölüme gidin. Aşağıdaki GIF'de görebileceğiniz gibi, başlık sabit kalıyor!
Tek satır kod yazmadan sabit başlık oluşturmuş olursunuz. Başlık öğenizi Divi oluşturucu aracılığıyla her güncellediğinizde, ayarları kaydettiğinizden emin olun. Aksi takdirde, yeni değişiklikleri web sitesinin ön yüzünde göremezsiniz.
2) Divi başlığını kodlayarak sabitleyin
Şimdi Divi başlığını kodlayarak nasıl yapışkan hale getireceğimizi görelim. Bunun için bir miktar CSS kodu kullanacağız. Bir geliştirici değilseniz endişelenmeyin, kullanacağımız kod satırları oldukça basit.
İlk olarak, WordPress kontrol panelinizde Divi > Theme Builder'a gidin ve Başlık bölümünü açın. Ardından, açılır pencereyi açmak için dişli simgesine tıklayın. Gelişmiş bölümünün altında, özel CSS kimliği ve CSS sınıfları ekleme ayarlarını göreceksiniz. Burada, aşağıdakileri kullanın:
- CSS kimliği : ana başlık
- CSS Sınıfı : et-sabit başlık
Ve sonra kaydedin. Bundan sonra, oluşturucuyu kaydedin ve çıkın. Ardından Divi oluşturucu seçeneklerine geri dönün ve değişiklikleri kaydedin.
Yapmanız gereken bir sonraki şey, siteye biraz CSS kodu eklemek. Bunu yapmak için iki seçenek vardır:
- Divi'nin Tema Seçenekleriyle
- WordPress özelleştiriciyi kullanma
Her iki yöntemi de adım adım inceleyelim.
Tema Seçenekleri aracılığıyla başlığı sabitleyin
İlk olarak, Tema Seçenekleri bölümünü kullanarak CSS kodunun nasıl ekleneceğini görelim. WordPress kontrol panelinizde Divi > Tema Seçenekleri > Özel CSS'ye gidin.
Ardından, CSS kodunu aşağıdan kopyalayın.
@media yalnızca ekran ve (min-width: 981px){ #main-header.et-fixed-header { pozisyon: sabit; dolgu-top:30 piksel; } #page-container { üst dolgu:135px; } }
Kod düzenleyiciye yapıştırın ve değişiklikleri kaydedin. Bundan sonra, ayarları kaydedin ve sitenizdeki Divi başlığını yapışkan yaptığınızı doğrulamak için web sitesinin ön ucunu kontrol edin!
NOT : CSS kodundaki dolguyu ayarladığınızdan ve sitenizin boyutunu özelleştirdiğinizden emin olun.
WordPress Özelleştirici ile başlığı yapışkan hale getirin
Divi başlığını yapışkan hale getirmenin bir başka hızlı yolu da WordPress özelleştiricisini kullanmaktır. Özelleştiriciyi açmak için Görünüm > Özelleştir'e gidin ve ardından Ek CSS'yi açın.
Şimdi, bu kodu kopyalayıp yapıştırmanız yeterlidir:
@media yalnızca ekran ve (min-width: 981px){ #main-header.et-fixed-header { pozisyon: sabit; dolgu-top:30 piksel; } #page-container { üst dolgu:135px; } }
NOT : Bu kod demo sitemiz için çalışır ancak CSS kodundaki dolguyu ayarlamanızı ve site boyutunuzu özelleştirmenizi öneririz.
Son olarak, değişiklikleri kaydedin ve işte bu kadar! WordPress özelleştiriciyi kullanarak Divi başlığını düzelttiniz .
Bonus: Divi menünüzde değişiklik yapın
Bu bölümde, Divi sabit menü seçeneklerinizde CSS kodlaması olmadan nasıl değişiklik yapacağınızı öğreneceksiniz. Bunu yapmak için WordPress özelleştiricisine gidin. Başlık ve Gezinme ayarları altında, Sabit Gezinme Ayarları adlı bir özelleştirme seçeneği göreceksiniz.
Açın ve özel özelleştirme seçeneklerini göreceksiniz. Bu ekranda göreceğiniz ana seçenekler şunlardır:
- Logo resmini gizle
- Sabit menü yüksekliği
- Yazı Boyutu
- Menü arka plan rengi
- Menü bağlantı rengi
- Ve diğerleri
Bu şekilde, yapışkan başlığınızda herhangi bir değişiklik yapmanız gerektiğinde, WordPress özelleştiricisine gidip bunları değiştirebilirsiniz. Ve en iyi yanı, her güncellemeyi canlı ön izleme bölümünde görebileceksiniz.
Çözüm
Sonuç olarak, Divi başlığınızı yapışkan hale getirmek sitenizin gezinmesini iyileştirmenize ve potansiyel olarak dönüşüm oranlarınızı artırmanıza yardımcı olacaktır. Bu kılavuzda size bunu yapmanın iki farklı yolunu gösterdik:
- Divi Builder ile
- Kodlayarak
- Divi'nin Tema Seçenekleriyle
- WordPress Özelleştiriciyi Kullanma
Her iki yöntem de oldukça etkilidir, bu nedenle becerilerinize ve ihtiyaçlarınıza en uygun olanı seçin. Hızlı bir şey istiyorsanız Divi Builder'ı kullanabilirsiniz. Bu, Divi başlığını birkaç tıklamayla özelleştirmenize yardımcı olacak olağanüstü bir WordPress eklentisidir. Öte yandan, Tema Seçeneklerini veya WordPress özelleştiricisini kullanarak başlığı yapışkan hale getirmek için biraz CSS kodu da kullanabilirsiniz. Biraz kodlama gerektirse de, bu yöntem oldukça basittir ve Divi Builder'a birkaç satır kod eklemeyi gerektirir.
Son olarak, bu gönderiyi beğendiyseniz, sosyal medyada paylaşın ve daha faydalı eğitimler için blog bölümümüzü inceleyin.
Divi başlığını düzeltmek için başka yöntemler biliyor musunuz? Sizden haber almak istiyoruz, bu yüzden aşağıdaki yorumlarda bize bildirin!