WordPress sitenize bir harekete geçirici mesaj eklemek ve bunu kolayca fark edilebilecek bir yere koymak istiyorsanız, web sitenizin başlık alanı bunu yapmak için mükemmel bir yerdir. Her web sitesi sayfasının en üstünde yer alan başlık, genellikle insanların bir sayfayı açarken gördükleri ilk şeylerden biridir. Bu durum site başlığınız ve başlığınız, ana web sitesi gezintiniz, marka logonuz ve tabii ki CTA düğmeleriniz gibi bazı önemli unsurları eklemek için doğal bir yer haline getirir.
İlk etapta bir düğme eklemenin tüm amacı, ziyaretçilerinizin istenen eylemi gerçekleştirmelerini sağlamak ve onları tıklayarak sitenizdeki (veya sitenizin dışındaki) belirli bir sayfaya yönlendirmektir. Bu yüzden ziyaretçilerinizin dikkatini çekmek ve daha fazla dönüşüm sağlamak için tıklamalarını sağlamak için düğmenizi sayfanızda anında görünür yapmalısınız. Bu durum düğmenin tasarımının, başlık menünüzde görünebilecek diğer standart görünümlü bağlantılardan sıyrılmasına izin vermesi gerektiği anlamına gelir.
Şimdi varsayılan olarak WordPress, başlık alanınıza ayrı ayrı düğmeler ekleme özelliğiyle gelmiyor. Bunun yerine, aynı tasarıma sahip bağlantılarla başlığınıza bir gezinme menüsü ekleyebilirsiniz. Yine de, başlık gezinme menünüzdeki bir menü bağlantısını “dönüştürmenin” ve bir düğme olarak görünmesini sağlamanın bir yolu vardır. Neyse ki, bazı özel CSS kullanıyorsanız bunu yapmak kolaydır. Bu sefer, size WordPress başlık gezinme menünüze nasıl düğme ekleyeceğinizi göstereceğiz. Hemen ardından, Bridge temasını kullanarak bir düğme widget’ını seçtiğiniz herhangi bir başka başlık alanına (navigasyon menünüzün hemen yanına eklemek dışında) nasıl ekleyeceğinizi ve özelleştireceğinizi de göstereceğiz. O yüzden arkanıza yaslanın, rahatlayın ve okumaya devam edin.
Özel CSS Kullanarak WordPress Başlık Menünüze Düğme Ekleme
Menü bağlantınızı bir düğmeye dönüştürmeye başlamak için, Görünüm >> Menüler’e giderek kullanmak istediğiniz menü bağlantısını eklemelisiniz. Daha sonra önceden oluşturulmuş bir gezinme menüsüne bağlantı ekleyin.
Menünüzde zaten bir düğmeye dönüştürmek istediğiniz bir menü öğesi varsa, genişletmek ve düzenlemek için menü öğenizdeki oka basmanız yeterlidir.
Henüz menü öğenizi oluşturmadıysanız, menü öğenizin bir sayfaya, gönderiye veya başka bir gönderiye yönlendirmesine bağlı olarak, onu ekranınızın sol tarafında bulabilirsiniz (Sayfalar, Gönderiler vb. içinde bularak) yazın) ve ardından Menüye Ekle düğmesine tıklayın. Sitenizin dışındaki bir sayfaya bağlantı vermek isterseniz, Özel Bağlantılar açılır menüsünü seçip URL’nizi ve bağlantı metninizi manuel olarak girebilir ve ardından Menüye Ekle’yi tıklayabilirsiniz.
Daha sonra öğenize bir Gezinme Etiketi verdiğinizden emin olun (henüz yapmadıysanız).
Bunu yaptıktan sonra devam etmeli ve Ekran Seçenekleri düğmesine (ekranın üst kısmında bulunur) erişmelisiniz. “CSS Sınıfları” yazan kutunun işaretlendiğinden emin olun. Bu durum bağlantınıza özel bir CSS sınıfı eklemenize ve ardından onu istediğiniz şekilde biçimlendirmenize olanak tanır.
Şimdi menü öğesi ayarlarında yeni CSS sınıfı seçeneğini görebileceksiniz. Menü sınıfınız için bir ad girin (bizimki başlık-menü-düğmesidir, fakat burada istediğiniz herhangi bir benzersiz adı atayabilirsiniz).
Ayarlarınızı kaydetmek için Menüyü Kaydet düğmesine basın.
Daha sonra bazı özel CSS kodlarını kullanarak başlık menüsü düğmenizin görünümünü özelleştirmeniz gerekir. WordPress tema özelleştiricinize erişmek için Görünüm >> Özelleştir’e gidin ve Ek CSS düğmesine basın.
Özel CSS kodunuzu buraya girin ve ardından Yayınla’ya tıklayın. Bununla birlikte bunun tüm değişikliklerinizi anında canlı göstereceğini unutmamalısınız, bu nedenle bu düğmeye yalnızca başlık menüsü düğmenizin görünümünden tamamen memnun kaldıktan sonra bastığınızdan emin olun.
İsterseniz, CSS kodumuzu eklemekten çekinmeyin veya tasarım tercihlerinize uyacak şekilde istediğiniz şekilde değiştirin (kenarlığını ve kenarlık yarıçapını, arka plan ve metin rengini vb. değiştirin):
.header-menu-button {
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active {
color:#fff !important;
}
Yeşil renkli düğmeyi (düzenimize mükemmel şekilde uyan) ve düğme metninin düz beyaz rengini seçtik. Ayrıca düğmemizin kenarları hafifçe yuvarlatılmış olması için 25 piksellik bir kenarlık yarıçapı belirledik. Unutmayın, piksel sayısını ne kadar azaltırsanız kenarlar o kadar keskin olur, piksel sayısını artırmanız ise düğmenizin daha yuvarlak bir şekle sahip olmasını sağlar.
CSS kodunuzu ekleyip Yayınla’ya bastıktan hemen sonra, web sitesi önizlemesinde düğmenizin nasıl görüneceğini görebileceksiniz.
WordPress Temalarını Kullanarak Başlığınıza Düğme Ekleme
WordPress’in kutudan çıkar çıkmaz başlık alanınıza bir düğme ekleme seçeneğiyle gelmediğini en başında belirtmiştik. Bununla birlikte bazı WordPress temaları, WordPress’in işlevselliğini çeşitli şekillerde daha da genişletmeyi amaçlayan birçok ek özellikle birlikte gelir. Örneğin WordPress temaları söz konusu olduğunda, doğrudan başlık alanınıza bir düğme eklemenize ve özelleştirmenize olanak tanıyan WordPress Düğmesi adlı bir pencere öğesi vardır. Bunu Bridge temasını kullanarak nasıl yapacağınızı size göstereceğiz, bu yüzden okumaya devam ettiğinizden emin olun.
Şimdi hemen, Bridge’in (diğer birçok WordPress temasının yanı sıra) sitenize farklı widget’lar eklemek için kullanabileceğiniz çok sayıda özel widget alanı içerdiğinden bahsetmeliyiz. Özellikle web sitesi başlığı söz konusu olduğunda, üst başlık ve alt başlık olmak üzere iki ana alandan oluşur. Daha sonra bu alanlar ayrıca Sol Üst Başlık, Sağ Üst Başlık, Sağ Alt Başlık ve Başlık Alt Orta widget alanına bölünmüştür. Görünüm >> Widget’lar’a giderek bu alanlardan herhangi birine widget ekleyebileceksiniz.
Bridge kullanıyorsanız ve bu alanlardan bazılarını pencere öğesi alanları listenizde görmüyorsanız, başlık alanlarından birinin (genellikle bir Başlık Üstü) kapalı olma olasılığı vardır. WordPress panonuzdaki WordPress Options >> Header’a erişerek bu alanın gösterildiğinden emin olmanız gerekir.
Daha sonra Başlığın Üstü bölümünü bulun ve Üst Başlığın Üst Alanını Göster’i Evet olarak değiştirin.
Burada Arka plan rengi, dolgu, kaydırma sırasında gizleme yeteneği ve diğerleri gibi tercihlerinize göre ayarlayabileceğiniz Başlık Üstü alanınızla ilgili birçok başka seçenek vardır.
Tabii ki, Alt Başlık alanıyla ilgili diğer seçeneklerin yanı sıra kenarlık rengini değiştirme, şeffaflık, ızgarada olacak şekilde ayarlama vb. gibi diğer genel başlık seçenekleri de bulacaksınız.
Ayarlarınızdan memnun kaldığınızda, Değişiklikleri Kaydet düğmesine basın.
Şimdi WordPress Düğmesi parçacığını kullanarak bu pencere öğesi alanlarından birine nasıl düğme ekleyebileceğinizi görelim. Bu düğmeyi istediğiniz herhangi bir Başlık widget alanına ekleyebilirsiniz. Sağ Alt Başlık widget alanına, düğmemizin başlık gezinme menüsünün hemen yanında görünmesini sağlayacak bir düğme eklemeyi göstereceğiz. Bu durum bir siteye düğme eklemek için en yaygın alanlardan biridir ve gezinme menüsünün kendisi en kolay fark edilen web sitesi öğelerinden biri olduğu için oldukça mantıklıdır.
Bunu yapmak için, bir WordPress Düğmesi widget’ı bulun, widget alanınızı seçin (Sağ Alt Başlık) ve Widget Ekle düğmesine basın (veya sağdaki widget alanına sürükleyin).
WordPress Düğmesi widget seçeneklerini kullanarak, düğmenizin boyutunu ayarlayabilecek, düğme metninizi, bağlantınızı ekleyebilecek, renklerini değiştirebilecek (vurgu rengi, arka plan rengi vb.) ve çok daha fazlasını yapabileceksiniz.
Düğme widget seçeneklerinizi ayarlamayı tamamladığınızda Kaydet düğmesine basın ve düğmenizin canlı olarak nasıl göründüğünü görmek için devam edin.
Tabii ki, daha önce de belirttiğimiz gibi, düğmenizi mevcut diğer herhangi bir başlık widget alanına kolayca ekleyebilirsiniz. Örneğin WordPress Düğmesi parçacığımızı Sol Üst Başlık pencere öğesi alanına eklediğimizde (ve özelleştirdiğimizde) düğmemiz şu şekilde görünür (Sağ Üstbilgi alanımız için yaptığımız gibi):
Gördüğünüz gibi butonumuz artık soldaki logonun üzerine yerleştirildi.
Veya Sağ Üst Başlık pencere öğesi alanına eklendiğinde düğmemizin görünümü şöyledir:
Elbette, ilk yöntemde kullandığımız aynı özel CSS seçeneğini temalarımızdan birinde kullanabilirsiniz (menü öğenizi bir düğmeye dönüştürmek için), fakat WordPress Düğmesi widget’ı, stil oluşturmanıza izin verdiği için çok daha basit bir seçenektir. düğmenizi herhangi bir kod kullanmadan istediğiniz şekilde. Üstelik yukarıdaki resim örneklerimizden de görebileceğiniz gibi, başlığınızda istediğiniz yere yerleştirebilirsiniz.
Çözüm Yolu
Bir kayıt formuna, bir satın alma düğmesine veya başka bir CTA türüne bağlantı eklemek isteyip istemediğiniz fark etmeksizin, başlığınız düğmenize dikkat çekmek ve ziyaretçilerinizi harekete geçmeye motive etmek için en iyi yerlerden biridir. Temelde, başlık menünüze bir düğme eklemek kolaydır – tek yapmanız gereken mevcut menü öğenizi ona bazı özel CSS sınıfları atayarak dönüştürmek ve ardından Görünüm >> Özelleştir ekranını kullanarak düğmenize stil vermek. Yine de, temalarımızdan birini kullanıyorsanız (veya kullanmayı planlıyorsanız), emrinizde çok daha fazla özelleştirme seçeneğine sahip olacaksınız ve düğmenizi istediğiniz herhangi bir widget alanına (yalnızca başlığınıza değil) hızlı ve kolay bir şekilde yerleştirebileceksiniz. Menü). Bu yüzden tercih ettiğiniz yöntemi seçin ve üstbilginize kullanıcı deneyimini iyileştirmeye ve dönüşümlerinizi artırmaya yardımcı olacak belirgin bir CTA ekleyebilmeniz için talimatlarımızı dikkatlice izleyin.