WordPress'te Bir Uyarı Çubuğu Nasıl Oluşturulur (2 Kolay Yol)

WordPress sitenize bir uyarı çubuğu eklemek ister misiniz?

Uyarı çubuğu veya bildirim çubuğu, ziyaretçilere önemli güncellemeler, özel teklifler, yeni ürün lansmanları ve daha fazlası hakkında bilgi vermenin harika bir yoludur.

Bu yazıda, 2 kolay çözümle WordPress'te nasıl uyarı çubuğu oluşturulacağını göstereceğiz.

WordPress'te Neden Bir Uyarı Çubuğu Oluşturun?

Bir uyarı çubuğu, ziyaretçilerinizin önemli bir şey hakkında bilgi sahibi olmasını sağlamanın harika bir yoludur. Bu, devam eden bir satış etkinliği, açılış saatlerinizle ilgili bir güncelleme veya hizmetlerinizle ilgili değişiklikler olabilir.

Ziyaretçilere, bir alana bir ücretsiz teklif gibi özel bir fırsat hakkında bilgi vermek için bir uyarı çubuğu da kullanabilirsiniz. Bir çevrimiçi mağaza işletiyorsanız bu harika bir seçenektir.

Bir uyarı çubuğu kullanmak, ana sayfanıza bir duyuru koymaktan daha iyidir. Uyarı çubuğunuz, sitenizin tamamındaki her sayfanın en üstünde belirgin bir şekilde görünebilir.

WordPress'te bir uyarı çubuğu oluşturmak kolaydır. En iyi bildirim çubuğu eklentisini ve HTML ve CSS kodunu kullanan manuel bir yöntemi ele alacağız. Her bir seçeneğe doğrudan atlamak için aşağıdaki bağlantıları tıklamanız yeterlidir:

• Yöntem 1: OptinMonster
• Yöntem 2: Özel HTML ve CSS

Yöntem 1: OptinMonster Kullanarak Uyarı Çubuğu Oluşturma

OptinMonster, piyasadaki en iyi dönüşüm optimizasyon yazılımıdır. Daha fazla web sitesi ziyaretçisini abonelere ve müşterilere dönüştürmenize yardımcı olur.

Güzel ışık kutusu açılır pencereleri, karşılama paspasları, geri sayım sayaçları ve web siteniz için aboneleri ve satışları artırmanıza yardımcı olan diğer dinamik katmanlarla birlikte gelir.

Web siteniz için bir uyarı çubuğu oluşturmak için OptinMonster'ı da kullanabilirsiniz. İşte oluşturacağımız şey:

OptinMonster içinde çok sayıda önceden oluşturulmuş şablon vardır. Bu, dakikalar içinde harika görünen bir uyarı çubuğu oluşturmayı gerçekten kolaylaştırır.

İlk olarak, OptinMonster web sitesini ziyaret etmeniz ve bir hesap için kaydolmanız gerekir.

Ardından, OptinMonster WordPress eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Bu eklenti, WordPress sitenizi OptinMonster yazılımına bağlamanıza izin verir.

Aktivasyon üzerine, şimdi hesabınızı bağlamanız gerekecek. Başlamak için, WordPress kontrol panelinizden OptinMonster »Ayarlar'a gidin .

Ardından, devam edin ve 'Mevcut Bir Hesabı Bağlayın' düğmesini tıklayın.

Şimdi e-posta adresinizi girmenizi isteyen bir açılır pencere göreceksiniz. Sadece e-posta adresinizi seçin ve 'WordPress'e Bağlan' düğmesini tıklayın.

Artık OptinMonster hesabınızı bağlamak için ekrandaki talimatları takip edebilirsiniz.

OptinMonster'ı bağladıktan sonra, WordPress kontrol panelinizde OptinMonster » Kampanyalar'a gitmeniz yeterlidir. Devam edin ve 'İlk Kampanyanızı Oluşturun' düğmesini tıklayın.

Buradan, bir uyarı çubuğu oluşturmak için Kampanya Türünüz olarak 'Kayan Çubuk'u seçmeniz gerekir.

Ardından, bir dizi kampanya şablonu göreceksiniz. Kullanmak istediğiniz şablonu seçmeniz yeterlidir. Farenizi üzerine getirmeniz ve seçmek için 'Şablonu Kullan' düğmesini tıklamanız yeterlidir.

Uyarı çubuğumuz için 'Promo' şablonunu kullanacağız.

Ardından, şablonunuza bir ad vermeniz istenecektir. Kampanyanızı adlandırdıktan sonra, 'Yapmaya Başla' düğmesini tıklayın.

Şimdi, kampanya düzenleyicisini göreceksiniz. Kampanyanızı burada tasarlayabilirsiniz.

Varsayılan olarak, uyarı çubuğunuzun ekranınızın altında göründüğünü göreceksiniz. Ekranın en üstüne taşımak için sol taraftaki 'Yüzer Ayarlar'ı tıklayın.

Ardından, kayan çubuğu sayfanın en üstüne taşımak için kaydırıcıyı tıklamanız yeterlidir.

Kayan çubuktaki metni değiştirmek için değiştirmek istediğiniz alana tıklayın ve istediğiniz metni yazın.

Ayrıca yazı tipini, metnin boyutunu ve rengini ve daha fazlasını değiştirebilirsiniz.

Geri sayım sayacını değiştirmek için şablondan zamanlayıcıyı seçmeniz ve ardından sol menüden Geri Sayım sekmesine tıklamanız yeterlidir. Ardından devam edin ve istediğiniz bitiş tarihini ve saatini girin.

İsterseniz, zamanlayıcıyı statik bir geri sayım yerine her zaman yeşil kalan bir geri sayım işlevi görecek şekilde de ayarlayabilirsiniz. Sitenize gelen her ziyaretçi için ayrı ayrı her zaman yeşil bir geri sayım ayarlanır.

Devam edin ve uyarı çubuğunuzda istediğiniz kadar değişiklik yapın. Bundan memnun kaldığınızda, ekranınızın üst kısmındaki Kaydet düğmesine tıklamayı unutmayın.

Ardından, uyarı çubuğunuzun sitenizde ne zaman ve nerede görüntüleneceğini seçmek için 'Görüntüleme Kuralları' sekmesine gitmeniz gerekir. Varsayılan kural, uyarı çubuğunuzun ziyaretçi sayfada 5 saniye kaldıktan sonra görüntülenmesi içindir.

Bunu 0 saniye olarak değiştireceğiz, böylece uyarı çubuğu anında belirecektir. Bunu yapmak için, sadece 'saniye' geri sayımını 0 olarak değiştirin.

Ardından, Eylem ayarlarını değiştirmek için 'Sonraki Adım' düğmesini tıklayın. 'Kampanya görünümünü göster' ayarlarını Optin'e bırakabilir ve uyarı çubuğu göründüğünde bir ses efekti çalmak isteyip istemediğinizi seçebilirsiniz.

Değişiklikleri yaptıktan sonra devam edin ve bir kez daha 'Sonraki Adım' düğmesini tıklayın, bir özet göreceksiniz.

Mutlu olduğunuzda, ekranın üst kısmındaki 'Kaydet' düğmesini tıklamanız yeterlidir.

Bundan sonra, en üstteki Yayınla sekmesine gidebilir ve Yayınlama Durumunu 'Yayınla' olarak değiştirebilirsiniz.

Son adım, kampanyayı web sitenizin kendisinde etkinleştirmektir.

Bunu yapmak için kampanya düzenleyiciyi kapatabilir ve ardından OptinMonster » Kampanyalar seçeneğine gidebilirsiniz. Kampanyanızın burada listelendiğini göreceksiniz ve Durumu Beklemede olacaktır.

Devam edin ve açılır menüden 'Yayınla' olarak değiştirmek için Beklemede durumunu tıklayın.

Şimdi, web sitenizdeki herhangi bir sayfayı ziyaret edin ve kampanyanızı çalışırken göreceksiniz.

Yöntem 2: Özel HTML/CSS Kullanarak El İle Uyarı Çubuğu Oluşturun

Ya OptinMonster'ı kullanmak istemiyorsanız? Bu yöntemde size HTML ve CSS kodunu kullanarak bir bildirim çubuğunun nasıl oluşturulacağını göstereceğiz.

Not: Yeni başlayanlar için bu yöntemi önermiyoruz. WordPress'te yeniyseniz veya sitenize kod eklemekten emin değilseniz, bunun yerine yukarıdaki yöntemi kullanmanızı öneririz.

İlk olarak, uyarı çubuğu için bazı özel CSS kodlarını kopyalayıp yapıştırmanız gerekecek. Kontrol panelinizdeki Görünüm » Özelleştirici sayfasına gidin, ardından alttaki 'Ek CSS' sekmesini tıklayın.

Şimdi devam edin ve bu CSS kodunu kopyalayıp o kutuya yapıştırın:

.alertbar { 
    background-color: #ff0000; 
    color: #FFFFFF; 
    display: block; 
    line-height: 45px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

Bu kodu kopyaladıktan sonra şöyle görünmelidir. CSS kodunuzu kaydetmek için sayfanın üst kısmındaki Yayınla düğmesini tıklamanız yeterlidir.

Ardından, uyarı çubuğu metni için HTML kodunu sitenize eklemeniz gerekir.

Bunu yapmanın en iyi yolu, ücretsiz Insert Headers and Footers eklentisini kurmak ve etkinleştirmektir.

Not: Üst Bilgi ve Alt Bilgi Ekle, WPBeginner'ın kendi eklentilerinden biridir. Web sitesi sayfalarınıza komut dosyaları, HTML kodu ve daha fazlasını eklemeyi gerçekten kolaylaştırmak için oluşturduk.

Eklentiyi etkinleştirdikten sonra, WordPress yöneticinizde Ayarlar »Üstbilgi ve Altbilgi Ekle'ye gidin. Aşağıdaki HTML kodu satırını kopyalayıp 'Gövdedeki Komut Dosyaları' kutusuna yapıştırmanız yeterlidir:

<div class="alertbar">We are currently closed due to Covid-19.</div>

Bu kodun Üstbilgi ve Altbilgi Ekle'nin 'Gövdedeki Komut Dosyaları' kutusunda nasıl görünmesi gerektiği aşağıda açıklanmıştır:

Elbette, uyarı metnini istediğiniz herhangi bir şeyle değiştirebilirsiniz. İşiniz bittiğinde sayfanın altındaki 'Kaydet' düğmesini tıklamayı unutmayın.

Artık uyarı çubuğunu görmek için sitenizi ziyaret edebilirsiniz. Her sayfanın en üstünde şu şekilde görünmelidir:

İpucu: Birkaç WordPress temasında uyarı çubuğunuz menünüzle çakışabilir. Bunu önlemek için çubuğun yüksekliğini 40 piksel veya 30 piksel olarak değiştirebilirsiniz. Metninizin çubukta dikey olarak ortalanması için satır yüksekliğini de buna göre azaltmanız gerekecektir.

Bu makalenin, WordPress'te bir uyarı çubuğu oluşturmayı öğrenmenize yardımcı olduğunu umuyoruz. Sitenizi herhangi bir kod yazmadan daha da özelleştirmenize yardımcı olacak en iyi WordPress sürükle ve bırak sayfa oluşturucularını karşılaştırmamızı ve mağaza satışlarınızı artırmak için en iyi WooCommerce eklentileri listemizi de beğenebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.