Elementor ile WordPress'te üst çubuk nasıl eklenir

Üst çubuk, WordPress'te önemli mesajları, promosyonları ve harekete geçirici mesajı vurgulamak için etkili bir yol sağlar. Kullanıcıların tarama deneyimini engellemeden ziyaretçilerin dikkatini çekmek amacıyla web sayfasının en üstünde konumlandırılmıştır.

İyi tasarlanmış bir üst çubuk, ziyaretçilerin dikkatini anında alabileceği ve haber bültenlerine kaydolma, sınırlı süreli teklifler almak ve yeni içeriği keşfetmek gibi eylemlere yönlendirebileceği için dönüşümleri önemli ölçüde artırabilir. Kullanıcıları rahatsız etmeden kalıcı bir hatırlatma olarak çalışır.

WordPress'e üst çubuklar eklemek Elementor ile çok basittir. Bu makalede, Elementor ile WordPress'te bir üst çubuğun nasıl ekleneceğine dair adım adım bir kılavuzu ele alacağız. Sonuna kadar bizimle kal.

Üst çubuk nedir?

Üst çubuk, ana başlığın üzerindeki bir web sitesinin üstünde görüntülenen dar bir yatay bölümdür. Pop-up veya pankartlardan farklı olarak, iletişim bilgileri, bağlantı açıklamaları, önemli duyurular, promosyon teklifleri ve mesajlar sergilemek için kullanılır. Renkler, yazı tipleri ve markaya özgü düğmeler gibi kapsamlı özelleştirmelerle kullanıcı katılımını artırabilirsiniz.

Üst çubuk her zaman 7/24 bir web sitesinin en üstünde görüntülenmez. Bunun yerine, genellikle kampanya dönemlerinde promosyon amaçları için ortaya çıkar. Kullanım durumlarına bağlı olarak farklı isimlerle tanımlanır. Bunu bir sonraki bölümde tartışacağız. Okumaya devam edin.

Bir web sitesinde ilk bar denir?

Bir dakika önce söylendiği gibi, bir web sitesindeki üst çubuk, amacına ve işlevselliğine göre farklı isimlerle tanımlanır. Aşağıda listelenen üst çubuk için kullanılan bazı yaygın terimlere bir göz atın.

• Duyuru çubuğu - duyuruları, etkinlik bildirimlerini ve önemli güncellemeleri paylaşmak için kullanılır.

• Bildirim Çubuğu- Sınırlı süreli teklifler, sistem bakım haberleri ve acil mesajlar görüntüler.

• Promosyon Bar - Özel promosyonları, özel indirimleri ve satışları artırmak için kampanyaları vurgular.

• Bilgi çubuğu - iletişim numaraları, alışveriş detayları, yerel adresler ve çalışma saatleri sergiler.

• Yapışkan çubuk - kullanıcılar yayınları ve sayfaları kaydırsa bile web sitesinin en üstünde sabit kalır.

• Yüzen çubuk - Göze çarpan bir varlık sağlamak için yayınları ve sayfaları kaydırdığınızda ilerler.

Elementor ile WordPress'te üst çubuk nasıl eklenir

Teorik kısım bitti. Şimdi, bu bölümdeki öğretici bölümünü ele alacağız ve Elementor'u kullanarak WordPress'te bir üst çubuğun nasıl ekleneceğine dair adım adım bir kılavuz açıklayacağız.

Önkoşul: Elementor veya HappyAddons'u yükleyin

Tüm web sitesinde bir üst çubuk oluşturmak için, premium bir özellik olan Elementor Tema Builder'a erişmeniz gerekir. Eklentinin premium sürümünü kullanmak istiyorsanız ve ücretsiz bir seçenek arıyorsanız, HappyAddons eklentisini denemeniz gerekir.

HappyAddons aslında Elementor'da normalde premium olan birçok ücretsiz özelliğe sahip Elementor eklentisine bir eklentidir. Örneğin, HappyAddons'ın Elementor'a oldukça benzeyen bir tema oluşturucusu da var, ancak kullanımı tamamen ücretsiz.

Bu bölümde, öğreticiyi açıklamak için HappyAddons eklentisini kullanacağız. Sitenizdeki aşağıdaki eklentileri yükleyin ve etkinleştirin.

• Element
• Happyaddons

Sitenizde kurulduktan ve etkinleştirildikten sonra, aşağıda açıklanan öğreticiyi takip etmeye başlayın. Aşağıdaki resimde görebileceğiniz gibi WordPress'te nasıl bir üst çubuk oluşturacağınızı göstereceğiz.

Adım 01: HappyAddons Tema Oluşturucusuna Git

HappyAddons> Tema Oluşturucu'ya gidin. Elementor eklentisi gibi, HappyAddons eklentisinin tema oluşturucusu ile bir üstbilgi, altbilgi, blog yazısı şablonu ve arşiv sayfası oluşturabilirsiniz.

Adım 02: Başlık bölümüne git

Üst çubuk web başlığının üstünde görüntülenirken, başlık bölümünden özelleştirmeniz gerekir. Bu nedenle, Elementor seçeneğiyle düzenle ile başlığı açın.

Elementor'da Canvas dışı içerik oluşturmayı öğrenin.

Adım 03: Başlığın üstüne yeni bir kap ekleyin

İmlecinizi başlıkta gezinmek Plus (+) simgesini gösterecektir. Bu simgeyi tıklamak, yukarıdaki başlığa yeni bir kap eklemenize izin verir. Yap.

Adım 04: Üst çubuğu özelleştirin ve içerik ekleyin

Üst çubuğun arka planına zıt bir renk eklemelisiniz. Bunu yapmak için, kapta altı noktalı simgeyi tıklayın> Stil sekmesine gidin> Renk seçeneğini bulun> Bir renk seçin.

Metin Editör Widget'ı üst çubuk bölümüne ekleyin. Bu, bölüme metin içeriği eklemenizi sağlar.

Sağ kenar çubuğundaki metin düzenleyicisinin altında, üst çubukta gerçek zamanlı olarak görüntülenecek istediğiniz metin içeriğini yazabilirsiniz.

Metin düzenleyicisi bölümünün altındaki aşağıda işaretlenmiş seçenekten, üst çubuğa eklediğiniz metnin rengini ve cesaretini değiştirebilirsiniz.

Kelimeler arasına boşluk ekleyebilir ve belirli kelimelerin altını çizebilirsiniz . Bunu bu öğretici için metnimize yaptık. Bunları aşağıda görebilirsiniz.

HappyAddons, üst çubuğun arka planına parçacık efektleri eklemenizi sağlar. Mutlu parçacık etkisi , küçük, parlayan parçacıkların bir web sayfasında dinamik olarak hareket ettiği ve canlı ve ilgi çekici bir kullanıcı deneyimi yarattığı görsel bir animasyon tekniğidir.

Bunu eklemek için stil> mutlu parçacık efektlerine gidin. Bundan sonra, parçacık arka planını etkinleştirmek için açın .

Ardından, bir parçacık stili, parçacık rengi, opaklık, parçacık sayısı, parçacık boyutu ve hareket hızı seçebilirsiniz. Umarım onları kendin yapabilirsiniz.

Mutlu parçacık özelliğinin nasıl çalıştığını kontrol edebilmeniz için kısa bir klip ekledik. Bu gerçekten üst çubuğu görünmek için çok iyi yapar.

Sınır bölümünü genişletin. İstediğiniz gibi bir sınır genişliği ve bir renk ayarlayabilirsiniz. Ancak, bir sınır eklemenin üst çubuk için önemli olmadığını düşünüyoruz. Böylece bundan kaçınabilirsiniz.

Şimdi, şekil bölücü bölümünü genişletin. Şekil bölücü seçeneği, bölümlerin üstüne veya altına özelleştirilebilir ve dinamik şekiller eklemenizi sağlar.

Ancak, bu seçenek üst çubuk için de önemli değildir. Yani, bundan kaçınmanız daha iyi. Ancak bu özelliği üst çubuğa eklemek istiyorsanız, bunu yapabilirsiniz.

Elementor ile bir infografik web sayfasının nasıl oluşturulacağına dair bir rehber.

Adım 05: Üst çubuk için gelişmiş ayarları yapılandırın

Sonunda, Gelişmiş sekmesine gelin. Marj, dolgu, hizalama, sipariş, pozisyon, yükseklik, hareket efekti, duyarlı ve daha fazlasını özelleştirmek için burada çok sayıda seçenek alacaksınız. Gereken özelleştirmeleri kendiniz yapın.

Adım 06: Üst çubuğu bir cihaz türüne gizle

Üst çubuğu istediğiniz herhangi bir cihazda gizleyebilirsiniz. Örneğin, tablet cihazlarındaki üst çubuğu gizlemek istiyoruz. Bunu yapmak için duyarlı bölümü genişletin. Ardından, üst çubuğu gizlemek istediğiniz cihaz modunun seçeneğini kapatın.

Adım 07: Top Bar Mobile Duyarlı Yapın

Elementor panelinin altbilgisindeki Duyarlı Mod seçeneğini tıklayın . Ardından, mobil portre modunu seçin .

Üst çubuk içeriğinin üç satırda göründüğünü ve masaüstü modunda nasıl gördüğünüzden farklı olarak mükemmel bir şekilde hizalanmadığını görebilirsiniz.

Metnin ekran boyutu için iyi görünmesini sağlamak için, mobil portre modunda kalarak ihtiyacınız olan özelleştirmeleri yapın.

Metinleri merkezi olarak hizaladık. Şimdi daha iyi görünmüyor mu? İstediğiniz şekilde daha fazla özelleştirebilirsiniz.

Adım 08: Değişiklikleri yayınlayın/güncelleyin

Tüm özelleştirmeler yapıldığında, tüm değişiklikleri korumak için Elementor panelinin altındaki yayın/güncelleme düğmesini tıklayın .

Elementor ile WordPress'te bir Lightbox'ın nasıl oluşturulacağını keşfedin.

Adım 09: Web sitesindeki üst çubuğu önizleyin

Şimdi, web sitenizin ön ucuna gelin. Üst çubuğun sitenizin üstünde iyi görüntülendiğini göreceksiniz.

Böylece, Elementor eklentisini ücretsiz olarak kullanarak WordPress'te kolayca bir üst çubuk oluşturabilirsiniz.

Son Düşünceler

Umarım bu öğreticiden keyif almışsınızdır. Ancak üst çubuktan en iyisini almak için dikkatle takip etmeniz gereken birkaç önemli şey var. Web sitenizin markasıyla uyumlu temiz ve görsel olarak çekici bir tasarım sürdürmeye odaklanın. Okunabilirlik için kontrast renkleri seçin, net ve özlü metin kullanın ve mesajı kitlenizle alakalı tutun.

Ayrıca, üst çubuk kullanıcı deneyimini engellemeden tüm cihazlarda işlevsel kalması için mobil duyarlılığa optimize edin. Ziyaretçileri ezebileceği için üst çubuğu çok fazla bilgi ile aşırı yüklemekten kaçının. Animasyonlar veya efektler kullanıyorsanız, profesyonelliği korumak için onları ince tutun.

Hala herhangi bir karışıklık veya sorgu varsa, bunları aşağıdaki yorum kutusundan bize bildirin.