Ana İçeriğe Geç

WordPress üzerinde kayan bir menü nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Hiç bir web sitesine göz attınız ve bir gezinme menüsünün her zaman en üstte göründüğünü fark ettiniz mi?

Prensip olarak, gezinme menüleri sayfa kaydırıldığında kaybolacak şekilde görüntülenir. Her zaman görülebilen gezinme menüleri yüzer ve kullanıcı nasıl aşağı kaydırırsa kaydırsın öyle.Wordpress kayan menü nasıl oluşturulur 1

Bu eğiticide, WordPress blogunuzda kolayca nasıl kayan bir menü oluşturulacağını göstereceğiz.

WordPress'te bir web sitesi veya blog oluşturmadıysanız, sizi danışmanlığa davet ediyoruz. Bir WordPress blog 7 adımlarını nasıl yüklenir sonra, Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için

Eğer bittiyse, bugün bizi endişelendiren şeylere girelim.

1 Yöntemi: Eklenti Kullanarak WordPress'te Yüzen Bir Menü Nasıl Eklenir

Bu yöntem daha kolay ve hızlı. Navigasyon menülerini henüz ayarlamadıysanız, nasıl yapılacağını öğren.

Yapışkan menü wordpress eklentisi

Yapmanız gereken ilk şey eklentiyi kurmak ve etkinleştirmek " Yapışkan Menüsü (veya herhangi bir şey!) Biz ilerleyin ". Bir eklentinin nasıl kurulacağını bilmiyorsanız, öğreticimizi okuyabilir.

Aktivasyondan sonra, ziyaret etmelisiniz " Ayarlar »Yapışkan Menü Bu eklentinin ayarlarını yapılandırmak için.

Yapışkan menü wordpress eklentisi

Öncelikle, yüzdürmek istediğiniz gezinme menüsü için CSS kimliklerini girmeniz gerekir.

Kullanılan CSS'yi bulmak için tarayıcınızın "inceleme" aracını kullanmanız gerekecektir.

Web sitenize gidin ve farenizi navigasyon menüsüne getirin. Bundan sonra sağ tıklayıp "İncele" yi seçmelisin.

Keşfeterek daha ileri gidin Sarı kalemiyle bir WordPress temasını özelleştirmek için nasıl

Bir eğitici wordpress kodunu inceleyin

Bu, tarayıcı ekranınızı böler (varsayılan olarak) ve navigasyon menünüzün kaynak kodunu görebileceksiniz. Buna benzer bir çizgi bulmalısınız:

Bu örnekte, navigasyon menümüzün CSS kimliği " Sitede Gezinme '.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Devam edin ve eklenti ayarlarında aşağıdaki "# site-gezintisi" gibi menünün CSS kimliğini girin.

Eklenti ayarlarındaki bir sonraki seçenek, ekranın üst kısmı ile kayan gezinme menüsü arasındaki boşluğu ayarlamaktır. Menünüz gizlenmesini istemediğiniz bir öğeyle çakışıyorsa bu ayarı kullanabilirsiniz. Aksi takdirde, bu ayarı dikkate almayın.

Bundan sonra, "Check Bar Admin" seçeneğinin hemen yanındaki kutuyu tıklamanız gerekir. Bu, eklentinin giriş yapmış kullanıcılar için eklenen WordPress araç çubuğu için biraz alan eklemesine izin verir.

Ayarlar sayfasındaki sonraki seçenek, bir kullanıcı web sitenizi mobil cihaz gibi daha küçük bir ekran kullanarak ziyaret ediyorsa gezinme menüsünü gizlemenize olanak tanır.

Bu menünün mobil ve tablet cihazlarda nasıl görüntülendiğini test edebilirsiniz. Beğenmediyseniz bu seçeneğe 780px ekleyebilirsiniz.

Çok keşfetmek Mobil WordPress için tepkili bir menü oluşturmak için nasıl

Ayarları kaydet Değişikliklerinizi kaydetmek için.

Artık yüzen gezinti menünüzü çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Yüzen wordpress menüsü

Yöntem 2: Bir gezinme menüsünü manuel olarak ekleme

Bu yöntem, WordPress temanıza özel CSS kodu eklemeyi gerektirir.

Öncelikle ziyaret etmelisiniz " Görünüm> Özelleştir WordPress Özelleştirici'yi başlatmak için.

Ek css wordpress özelleştirici

Tıklayın Ek CSS Sol bölmede, daha sonra bu CSS kodunu ekleyin.

# Site navigasyon {background: #fff; Yükseklik: 60px; Z-endeksi: 170; kenar: 0 otomatik; Çerçeve-alt Katı #dadada 1px; en: 100%; pozisyon: Sabit; En: 0; Sol: 0; Sağ: 0; text-align: center; }

Değiştir " # Site Navigasyon Navigasyon menünüzün tanımlayıcısı ile «butonuna tıklayınız. Enregistrer '.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Artık yüzen gezinti menünüzü çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Gezinme menünüz normalde web sitesi başlığından sonra görünüyorsa, bu CSS kodu web sitesi başlığı ve başlığıyla çakışabilir.

Bu, aşağıdaki kodu kullanarak başlık alanınıza bir kenar boşluğu ekleyerek kolayca ayarlanabilir:

.site marka {kenar üstü: 60px; }

Burada eğitimimiz sona eriyor, şimdi web sitenizde yüzen bir menü oluşturabilecek veya ekleyebileceksiniz.

Menüleri yönetmenize izin verecek başka WordPress eklentileri arıyorsanız, işte bu göreve adanmış bazı premium WordPress eklentileri. 

1. Menü Kahraman

Bu eklenti birkaç kişisel adımda kendi kişiselleştirilmiş WordPress menünüzü oluşturmanıza olanak sağlar. Zarif ve profesyonel bir WordPress menüsü kolayca ve sezgisel olarak oluşturmanıza olanak sağlar. Özelliklerle dolu en karmaşık mega menüden, açılır menüyle en basit menüye, WordPress eklentisi HeroMenu her türlü menüyü kurar ve dakikalar içinde çalışır hale getirir.

Hero menu duyarlı wordpress mega menü eklentisi

Diğer özelliklerin yanı sıra özellikleri: PC, tablet ve akıllı telefonlarda mükemmel işlevsellik, kullanımı kolay, özelleştirilebilir içerik, kendi menü stillerinizi eklemek için özel CSS, mega menü tasarımcısı, desteklenen tarayıcılar: Chrome, Firefox, Safari , Opera, IE9 ve daha fazlası.

Indir | gösteri | Web hosting

2. Slick Menu

Slick Menu sadece WordPress için bir menü eklentisi değildir. Sınırsız bir şekilde birden fazla menü düzeyinin yanı sıra zengin içerikli kenar çubukları, çoklu stil seçenekleri ve animasyonlu efektler oluşturmak için kullanılabilir.

Kaygan menü duyarlı wordpress dikey menü

Her menü seviyesi arka plan renkleri, resimler, videolar, özel yazı tipleri ve daha fazlasıyla özelleştirilebilir. Bu eklenti tamamen duyarlıdır ve menü öğeleri için 45'ten fazla animasyona sahiptir.

Indir | gösteri | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu, bilgilerinizi öne çıkaran ve kolayca vurgulayan bir görünüm vermek için web sitenize bir tuval menüsü eklemenizi sağlayan premium bir WordPress eklentisidir. Menülerini oluşturmak için varsayılan WordPress menü işlevini kullanır.

8degree wordpress için menü menü eklentisi duyarlı menü sinek duyarlı

Simgeler, menü sloganları, sözde gruplama başlığı ve uzun bir açıklama gibi varsayılan menü öğelerine ek öğeler ekleyebileceksiniz. Ayrıca uzun tanımınızı kullanıcı dostu bir şekilde kavramanıza yardımcı olacak bir WYSIWYG editörü ile birlikte gelir.Bu editör ile kısa kodları da kullanabilirsiniz.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Indir | gösteri | Web hosting

Diğer önerilen kaynaklar

Blogunuzun menülerini veya web sitenizi oluşturma veya kişiselleştirme konusunda daha ileri gitmek istiyorsanız, aşağıdaki bağlantılara da başvurmanızı öneririz.

Sonuç

Buraya ! Bu eğitim için bu kadar, umarım WordPress blogunuza kayan bir menü eklemenize izin verir. Sizi davet ediyoruz bu makaleyi arkadaşlarınızla sosyal ağlarda paylaşın.

Herhangi bir öneriniz veya yorumunuz varsa, memnuniyetle karşılanacaktır. Ve eğer WordPress’te yeniyseniz, buna bak kaynak.

...  

Bu makale yorumları 7 içeriyor

  1. Bonjour

    Öncelikle, işi mükemmel yapan bu eğitim için teşekkür ederiz!
    Ama interneti ne kadar araştırsam da sorumun cevabını bulamadım:
    Yüzen menü oluşturulduktan sonra (CSS'de veya uzantı ile), bölümlerimin menünün arkasında değil menüden sonra görünmesi için nasıl yapılır?
    Benim durumumda özellikle can sıkıcı çünkü bir giriş sayfası ve menümün öğeleri bu nedenle sayfaların bölümlerine atıfta bulunuyor, her seferinde menümün arkasına çıkıyor ...

    seninle konuşuyor mu

    Merci par avance!

      1. Merhaba; selam

        İndirilen bir temayla (wallstreet) denedim ama talimatlarınızı uygularken hiçbir şey değişmiyor… Neyin eksik olduğunu bilmiyorum…
        Beğeniyorum ve keşke kullanabilseydim ...

        sağol
        Raul

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
5 hisseleri
hisse2
cıvıltı
Enregistrer3