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 600.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 sitesini ziyaret ettiniz ve bir gezinti menüsünün her zaman en üstte göründüğünü fark ettiniz mi?

Prensip olarak, gezinme menüleri sayfayı kaydırırken kaybolacak şekilde görüntülenir. Her zaman görülebilen gezinme menüleri yüzer ve kullanıcının nasıl kaydırdığı önemli değildir.

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

WordPress'te mürekkep oluşturmayan bir web sitesi veya blog oluşturmadıysanız, sizi danışmaya 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 bizimle ilgili olana 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.

Yapmanız gereken ilk şey, eklentiyi yüklemek 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.

Öncelikle, yüzer istediğiniz şifre CSS navigasyon menüsüne girmek zorundadır.

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

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

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:

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]

<Nav id = "Site Navigation" class = "ana-navigasyon" rol = "navigasyon">

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

Devam edin ve eklenti ayarlarında menünün CSS kimliğini "# site-navigation" olarak girin.

Eklenti ayarlarında bir sonraki seçenek, ekranın üst kısmı ile hareketli navigasyon menüsü arasındaki boşluğu tanımlamaktır. Menünüz gizlemek istemediğiniz bir şeyle çakışıyorsa bu ayarı kullanabilirsiniz. Aksi takdirde, bu ayarı dikkate almayın.

Bundan sonra, "Check Bar Admin" seçeneğinin yanındaki kutuyu tıklamanız gerekir. Bu, eklentinin oturum açan kullanıcılar için eklenen WordPress araç çubuğu için biraz boşluk eklemesini sağlar.

Ayarlar sayfasındaki bir sonraki seçenek, bir kullanıcı web sitenizi mobil cihaz gibi daha küçük bir ekran kullanarak ziyaret ederse gezinti menüsünü gizlemenizi sağlar.

Bu menünün mobil ve tablet cihazlarda nasıl göründüğünü test edebilirsiniz. Eğer beğenmediyseniz, bu seçeneğe 780px ekleyebilirsiniz.

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

«Düğmesine tıklamayı unutmayın 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.

2 Yöntemi: Gezinme Menüsü El İle Ekleme

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

İlk önce, ziyaret etmelisin " Görünüm> Özelleştir WordPress Özelleştirici'yi başlatmak için.

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 '.

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

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]

Navigasyon menünüz normalde web sitesi başlığından sonra görünürse, bu CSS kodu web sitesi başlığı ve başlığı ile ç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; }

İşte eğitmenimizi sonlandırıyor, şimdi web sitenizde bir kayan 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 herhangi bir menü türünü kurar ve dakikalar içinde işlevsel hale getirir.

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. Zengin içerik, çoklu stil seçenekleri ve animasyonlu efektler içeren kenar çubukları yanı sıra sınırsız bir şekilde birden fazla menü seviyesi oluşturmak için kullanılabilir.

Her menü seviyesi arka plan renkleri, resimler, videolar, özel yazı tipleri ve daha fazlası ile özelleştirilebilir. Bu eklenti tamamen duyarlı ve menü öğeleri için daha fazla 45 animasyon var.

Indir | gösteri | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu, bilgilerinizi vurgulayan ve basit bir şekilde gösteren 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ü fonksiyonunu kullanır.

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. [Ücretsiz]

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ç

İşte bu! Hepsi bu ders için, umarım WordPress blogunuza değişken bir menü eklemenizi sağlar. 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

    Her şeyden önce, işi mükemmel yapan bu eğitim için teşekkür ederiz!
    Ama net aradım, sorumun cevabını bulmak imkansız:
    nasıl yapılır, kayan menü oluşturulduktan sonra (CSS'de veya uzantı ile farketmez), böylece bölümlerim menüden sonra değil, menüden sonra görünür mü?
    Bu özellikle benim için zahmetli, çünkü bir web sitesinde ve menümdeki öğeler, menümün her seferinde geri dönen sayfaların bölümlerine atıfta bulunuyor ...

    seninle konuşuyor mu

    Merci par avance!

      1. Merhaba; selam

        İndirilmiş bir tema (wallstreet) ile denedim ama talimatlarınızı takip ederken hiçbir şey hareket etmiyor ... Neyin eksik olduğunu bilmiyorum ...
        Beğendim ve keşke kullanabilseydim ...

        sağol
        Raul

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. 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