WordPress'te Uyarı Çubuğu Nasıl Oluşturulur (3 Kolay Yöntem)

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

Bir uyarı çubuğu veya bildirim çubuğu, ziyaretçilere önemli güncellemeler, özel teklifler, yeni ürün lansmanları ve daha fazlası hakkında bilgi vermek için harika bir yoldur.

Bu makalede, WordPress'te 3 kolay çözümle bir uyarı çubuğunun nasıl oluşturulacağını göstereceğiz.

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

Bir uyarı çubuğu, ziyaretçilerinize web sitenizdeki önemli bir şey hakkında bilgi vermek için harika bir yoldur. Bu, devam eden bir satış etkinliği, çalışma saatlerinizle ilgili bir güncelleme veya hizmetlerinizdeki değişiklikler olabilir.

Ayrıca, ziyaretçilere özel bir teklif hakkında bilgi vermek için bir uyarı çubuğu kullanabilirsiniz, örneğin bir alana bir bedava teklifi. Eğer çevrimiçi bir mağaza işletiyorsanız bu harika bir seçenektir.

Bir uyarı çubuğu kullanmak, sadece ana sayfanıza bir duyuru koymaktan daha iyidir. Uyarı çubuğunuz, sitenizin her sayfasını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 eklentilerini ve HTML ve CSS kodu kullanarak manuel bir yöntemi inceleyeceğiz. Her seçeneğe doğrudan atlamak için aşağıdaki bağlantılara tıklayın:

• Yöntem 1: OptinMonster Kullanarak Uyarı Çubuğu Oluşturma
• Yöntem 2: Thrive Leads Kullanarak Uyarı Çubuğu Oluşturma
• Yöntem 3: Özel HTML/CSS Kullanarak Manuel Olarak Bir Uyarı Çubuğu Oluşturma
• Bonus: WordPress Sayfalarına Özel Uyarı Mesajları Ekleme

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

OptinMonster, piyasadaki en iyi dönüşüm optimizasyonu ve potansiyel müşteri üretme yazılımıdır. Web sitesi ziyaretçilerinizi daha fazla aboneye ve müşteriye dönüştürmenize yardımcı olur.

OptinMonster, sürükle ve bırak kampanyası oluşturucu sunar. Güzel ışık kutusu açılır pencereleri, karşılama matları, geri sayım zamanlayıcıları ve web sitenizde abone ve satışları artırmanıza yardımcı olan diğer dinamik katmanlarla birlikte gelir.

Web siteniz için bir uyarı çubuğu yapmak için OptinMonster'ı da kullanabilirsiniz. Önceden oluşturulmuş şablonları, dakikalar içinde harika görünen bir uyarı çubuğu oluşturmayı çok kolaylaştırır.

İlk olarak, OptinMonster web sitesini ziyaret etmeniz ve bir hesap için kaydolmanız gerekir. En az Temel plana ihtiyacınız olacak çünkü bu, Kayar Çubuk kampanya türünü içerir.

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

Bu eklenti, WordPress sitenizi OptinMonster yazılımına bağlamanıza olanak tanır.

Etkinleştirdikten sonra karşılama ekranını ve kurulum sihirbazını göreceksiniz. Mevcut Hesabınızı Bağlayın düğmesine tıklayın.

Ardından, WordPress sitenizi OptinMonster'a bağlamanız gereken yeni bir pencere açılacaktır.

İlerlemek için 'WordPress'e Bağlan' düğmesine tıklamanız yeterlidir.

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

Ardından, WordPress kontrol panelinizde OptinMonster » Kampanyalar bölümüne gidin. 'İlk Kampanyanızı Oluşturun' düğmesine tıklayın.

Bu, OptinMonster kampanya oluşturucusunu açacaktır.

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

Ardından, kampanya şablonları seçeneğini göreceksiniz. Kullanmak istediğiniz bir şablon seçin.

Sadece fareyi üzerine getirip seçmek için ‘Şablonu Kullan’ düğmesine tıklamanız yeterlidir. Uyarı çubuğumuz için Kupon Kodu Promosyonu şablonunu kullanacağız.

Ardından, şablonunuza bir ad vermeniz istenecektir. Kampanyanızı adlandırdıktan sonra, ‘Oluşturmaya Başla’ düğmesine tıklamanız yeterlidir.

Şimdi kampanya düzenleyicisini göreceksiniz. Uyarı çubuğunuzu tasarlayabileceğiniz yer burasıdır.

OptinMonster, şablona sürükleyip bırakabileceğiniz farklı bloklar sunar. Örneğin, uyarı çubuğunuza bir resim, metin, düğme ve daha fazlasını ekleyebilirsiniz.

Varsayılan olarak uyarı çubuğunuzun ekranınızın altında göründüğünü göreceksiniz.

Bunu ekranın üstüne taşımak için, sol taraftaki 'Kayar Çubuk Ayarları'na tıklamanız gerekir. Ardından, kayan çubuğu sayfanın üstüne taşımak için kaydırıcıya tıklayın.

Açılır çubuktaki metni değiştirmek için, değiştirmek istediğiniz alana tıklamanız ve istediğiniz metni yazmanız yeterlidir.

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

Geri sayım ayarlarını değiştirmek için zamanlayıcıyı seçmeniz yeterlidir.

Ardından istediğiniz bitiş tarihini ve saatini girin. OptinMonster ayrıca geri sayım türünü seçmenize de olanak tanır. Belirttiğiniz bitiş tarihi ve saati ile standart bir zamanlayıcı göstermek istiyorsanız ‘Statik’ türünü seçebilirsiniz.

Diğer yandan, ‘Dinamik’ bir geri sayım türü vardır. Zamanlayıcı, her kullanıcının sitenizdeki davranışına göre çalışacaktır. Geri sayım, web sitenize gelen her ziyaretçi için ayrı ayrı ayarlanır.

Uyarı çubuğunuzun tasarımıyla mutlu olduğunuzda, 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, ziyaretçi 5 saniye boyunca sayfada kaldıktan sonra uyarı çubuğunuzun görüntülenmesidir.

Uyarı çubuğunun anında görünmesi için bunu 0 saniyeye değiştireceğiz. Bunu yapmak için 'sn' değerini 0 olarak değiştirmeniz yeterlidir.

Bunun yanı sıra, uyarı çubuğunun nereye yerleştirileceğini de seçebilirsiniz. Varsayılan ayarı, yani ‘mevcut URL yolu herhangi bir sayfadır’ seçeneğini kullanabilirsiniz. Bu şekilde, uyarı çubuğunuz WordPress web sitenizin tüm sayfalarında görünecektir.

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

Değişikliklerinizi yaptıktan sonra, ‘Sonraki Adım’ düğmesine tekrar tıklayın.

Burada, görüntüleme kurallarınızın bir özetini göreceksiniz. Uyarı çubuğu kampanyanızda son düzenlemeleri ve değişiklikleri yapabilirsiniz.

Memnun kaldığınızda, ekranın üst kısmındaki ‘Kaydet’ düğmesine tıklamanız yeterlidir.

Bundan sonra, üstteki Yayın sekmesine gidebilir ve Yayın Durumunu 'Yayınla' olarak değiştirebilirsiniz. Bu yapıldıktan sonra, 'Kaydet' düğmesine tıklamanız ve kampanya oluşturucuyu kapatmanız gerekecektir.

Ardından, Kampanya Çıktı Ayarlarını göreceksiniz.

Son adım, kampanyayı kendi web sitenizde etkinleştirmektir. Durumu 'Beklemede'den 'Yayınlandı'ya değiştirmeniz yeterlidir.

İşiniz bittiğinde 'Değişiklikleri Kaydet' düğmesine tıklamayı unutmayın.

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

Yöntem 2: Thrive Leads Kullanarak Uyarı Çubuğu Oluşturma

WordPress web sitenize uyarı çubukları eklemenin bir başka yolu da Thrive Leads kullanmaktır. Thrive Themes paketinin bir parçasıdır ve uyarı çubukları, ışık kutuları, kayan açılır pencereler ve daha fazlası aracılığıyla potansiyel müşteri oluşturmanıza yardımcı olur.

Öncelikle Thrive Themes web sitesini ziyaret etmeniz ve bir hesap için kaydolmanız gerekecektir. Başlamak için 'Şimdi Başla' düğmesine tıklamanız yeterlidir.

Ardından, Thrive Product Manager eklentisini web sitenize kurmanız ve etkinleştirmeniz gerekecektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Thrive Ürün Yöneticisi eklentisini hesap alanınızda bulabilirsiniz.

Eklentiyi yükledikten sonra, WordPress yönetici alanınızdan Ürün Yöneticisi sayfasına gidin.

Buradan, 'Hesabıma giriş yap' düğmesine tıklayın.

Hesabınıza giriş yaptıktan sonra Thrive Themes tarafından sunulan farklı eklentileri ve araçları göreceksiniz.

Sadece Thrive Leads eklentisini seçin ve ardından alttaki ‘Seçili ürünleri yükle’ düğmesine tıklayın.

Thrive Leads kullanıma hazır olduğunda, bir başarı mesajı göreceksiniz.

Ardından ‘Thrive Themes Kontrol Paneline Git’ düğmesine tıklayabilirsiniz.

Ardından, WordPress yönetici panelinden Thrive Dashboard » Thrive Leads bölümüne gitmeniz gerekecektir.

Lider Grupları başlığının yanında, 'Yeni Ekle' düğmesine tıklayın.

Bundan sonra, bir açılır pencere açılacaktır.

Yeni potansiyel müşteri grubunuz için bir ad girebilir ve 'Potansiyel Müşteri Grubu Ekle' düğmesine tıklayabilirsiniz.

Ardından, yeni bir onay formu oluşturmanız gerekecek.

'Yeni Bir Kayıt Formu Türü Ekle' düğmesine tıklayın.

Bundan sonra, Thrive Leads sizden bir form türü seçmenizi isteyecektir.

Web sitenize bir uyarı çubuğu eklemek için ‘Kurdele’ türünü seçebilirsiniz.

Kurdele kayıt formu türünü ekledikten sonra, şimdi bir form eklemeniz gerekecektir.

Kurşun Grupları altındaki ‘Form ekle’ seçeneğine tıklamanız yeterlidir.

Bir sonraki ekranda, mevcut formlarınızdan herhangi birini seçebilirsiniz.

Form oluşturma işleminiz ilk kez olduğu için, ‘Form Oluştur’ düğmesine tıklayın.

Şimdi ekranınızda bir açılır pencere belirdiğini göreceksiniz.

Formunuza bir ad girebilir ve ‘Form Oluştur’ düğmesine tıklayabilirsiniz.

Formunuz, Ribbon potansiyel müşteri grubuna eklenecektir.

Formun tasarımını düzenlemek için, kalem simgesine tıklamanız yeterlidir.

Ardından, Thrive Leads seçebileceğiniz birden çok şablon gösterecektir.

Basitçe bir şablon seçin ve alttaki 'Şablon Seç' düğmesine tıklayın.

Bu, uyarı çubuğunuzu özelleştirebileceğiniz canlı bir önizleme ile görsel oluşturucuyu başlatacaktır.

Örneğin, şablondaki metni seçip ihtiyaçlarınıza göre değiştirebilirsiniz. Veya uyarı çubuğundaki resme tıklayıp değiştirebilirsiniz.

Düzenlemeyi bitirdiğinizde, alttaki ‘İşi Kaydet’ düğmesine tıklayın.

Artık görsel düzenleyiciyi kapatıp form ayarlarına geri dönebilirsiniz. Burada, uyarı çubuğu tetikleyicisini, görüntüleme sıklığını ve konumunu ayarlamak için seçenekler göreceksiniz.

Varsayılan olarak, uyarı çubuğu bir sayfa yüklendiğinde en üstte görünür. Ancak bu ayarları değiştirebilirsiniz.

Örneğin, Tetikleyici seçeneğine tıklarsanız, belirli bir süre sonra, bir kullanıcı belirli bir miktarda aşağı kaydırdığında veya bir kullanıcı sayfanın altına ulaştığında uyarı çubuğunu göstermek gibi daha fazla seçenek göreceksiniz.

Bunun yanı sıra, görüntülenme sıklığını da değiştirebilirsiniz. Varsayılan olarak uyarı çubuğu tüm kullanıcılara sürekli görünecektir.

Ancak, bunu düzenleyebilir ve belirli sayıda gün sonra aynı ziyaretçiye uyarı çubuğunuzu gösterebilirsiniz.

Ardından, WordPress kontrol panelinizden Thrive Leads sayfasına geri dönebilirsiniz.

Bundan sonra, Görüntüleme Ayarlarını açmak için dişli simgesine tıklamanız yeterlidir.

Buradan, uyarı çubuğunun hangi gönderilerde ve sayfalarda görüneceğini seçebilirsiniz.

Örneğin, yalnızca ana sayfada gösterebilir veya tüm gönderileri ve sayfaları seçebilirsiniz. Uyarı mesajınızın gösterilmesinden bazı sayfaları ve gönderileri hariç tutma seçeneği de vardır.

İşiniz bittiğinde, ‘Kaydet ve Kapat’ düğmesine tıklamanız yeterlidir.

Son adım, uyarı çubuğunuzu masaüstü ve mobil cihazlarda görüntülemek için geçiş düğmelerine tıklamaktır.

Bu bittiğinde, uyarı çubuğunuz artık kullanıcı e-posta adreslerini toplamak ve e-posta listenizi oluşturmak için hazırdır.

Bunu nasıl yaptığına bakmak için web sitenizi ziyaret edebilirsiniz.

Daha fazla ayrıntı için eksiksiz Thrive Temaları incelememizi görebilirsiniz.

Yöntem 3: Özel HTML/CSS Kullanarak Manuel Olarak Bir Uyarı Çubuğu Oluşturma

OptinMonster veya Thrive Leads'i kullanmak istemezseniz ne olur? Bu yöntemde, HTML ve CSS kodu kullanarak bir bildirim çubuğunun nasıl oluşturulacağını göstereceğiz.

İlk olarak, uyarı çubuğu için aşağıdaki özel CSS kodunu kopyalamanız gerekecektir:

<pre class="wp-block-syntaxhighlighter-code">
.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;
}
</pre>

Web sitenize CSS kodu eklemenin kolay bir yolu WPCode kullanmaktır. Özel kodu web sitenize eklemenize yardımcı olan WordPress için en iyi kod parçacığı eklentisidir.

Not: WPCode, WPBeginner'ın kendi eklentilerinden biridir. Komut dosyalarını, HTML kodunu ve daha fazlasını web sitesi sayfalarınıza eklemeyi çok kolaylaştırmak için onu oluşturduk. Yerleşik bir kod parçacığı kitaplığı, koşullu mantık, dönüşüm pikselleri ve daha fazlası gibi özelliklerle birlikte gelir.

İlk olarak, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinden Kod Parçacıkları » + Parçacık Ekle bölümüne gitmeniz ve ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğini belirlemeniz gerekir.

Bundan sonra, kod parçacığınız için üstte bir başlık girin ve CSS kodunu Kod Önizleme alanına yapıştırın.

Kod Türünü de 'CSS Kod Parçacığı' seçeneğine değiştirmeniz gerekecektir.

Ardından, Ekleme bölümüne aşağı kaydırabilirsiniz. Kodun nerede çalışacağını buradan seçebilirsiniz.

Uyarı çubuğunun tüm web sitesinde görünmesini istediğimiz için, varsayılan ‘Otomatik Ekle’ yöntemini kullanabilirsiniz. ‘Her Yerde Çalıştır’ ayarını da tutabilirsiniz.

Bu yapıldıktan sonra, üstteki ‘Kod Parçacığını Kaydet’ düğmesine tıklayabilirsiniz.

Kodu etkinleştirmek için geçiş düğmesini açmanız da gerekecektir.

Bundan sonra, WordPress yönetici kontrol panelinizde Kod Parçacıkları » Üst Bilgi ve Alt Bilgi bölümüne gidin.

Şu HTML kodu satırını 'Üstbilgi' kutusuna kopyalayıp yapıştırmanız yeterlidir:

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

Bu kodun WPCode'daki ‘Üstbilgi’ kutusunda nasıl görünmesi gerektiği aşağıdadır:

Uyarı metnini istediğiniz başka bir şeye değiştirebilirsiniz. İşiniz bittiğinde sayfanın üst kısmındaki ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Şimdi, uyarı çubuğunu görmek için WordPress blogunuzu ziyaret edebilirsiniz. Her sayfanın üstünde şu şekilde görünmelidir:

İpucu: Bazı WordPress temalarında, uyarı çubuğunuz menünüzün üzerine gelebilir. Bunu önlemek için çubuğun yüksekliğini 40 piksel veya 30 piksel olarak değiştirebilirsiniz. Metninizin çubukta dikey olarak ortalanmış kalması için satır yüksekliğini de buna göre azaltmanız gerekecektir.

Bonus: WordPress Sayfalarına Özel Uyarı Mesajları Ekleme

Web sitenizin farklı bölümlerine, örneğin ürün sayfalarına, ödeme sayfalarına ve mağaza sayfalarına özel uyarı mesajları eklemek istiyorsanız, SeedProd'u kullanabilirsiniz. Bu, WordPress için en iyi web sitesi oluşturucu ve açılış sayfası oluşturucudur.

Eklenti, kod düzenlemeden özel bir tema ve web sitesi sayfaları oluşturmak için sürükle ve bırak oluşturucu sunar. Ayrıca sitenizin herhangi bir yerine yerleştirebileceğiniz bir Uyarı bloğu sunar.

Bu Uyarı bloğu, müşterilerin stoklarınızın azaldığı, belirli ürünlerin indirime girdiği veya diğer zamana duyarlı uyarılar konusunda müşterileri uyarabilir.

Uyarı bloğunu sayfanıza ekleyebilir ve ardından bir başlık ve açıklama ekleyebilirsiniz. Eklenti ayrıca, tarihleri ve diğer sorgu parametrelerini eklemenize olanak tanıyan dinamik içerik eklemenize de olanak tanır.

Uyarı bloğu için daha fazla özelleştirme seçeneği de bulunmaktadır. Örneğin, hizalamasını değiştirebilir, yazı tipi boyutunu ayarlayabilir ve simgeyi düzenleyebilirsiniz.

SeedProd'u kullanma hakkında daha fazla bilgi edinmek için, WordPress'te özel sayfa oluşturma hakkındaki bu kılavuza bakabilirsiniz.

Umarım bu makale, WordPress'te nasıl bir uyarı çubuğu oluşturacağınızı öğrenmenize yardımcı olmuştur. Sitenizi daha fazla özelleştirmenize yardımcı olacak en iyi WordPress sürükle ve bırak sayfa oluşturucuları ve mağaza satışlarınızı artırmak için en iyi WooCommerce eklentileri rehberimize de göz atmak isteyebilirsiniz.

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