Sezgisel web sitesinde gezinme gibi iyi bir kullanıcı deneyimini hiçbir şey tanımlayamaz. Örneğin menüler, doğru yapıldığında web sitenizin kullanıcı deneyimini büyük ölçüde artırabilen temel gezinme öğeleri arasındadır. Hatta sitenizde gezinmeye devam edecekleri veya kaçacakları konusunda belirleyici bir faktör olabilirler, bu yüzden onları tasarlarken çok dikkatli olmalısınız.
Özellikle tam ekran menüler, pratik, yaratıcı oldukları ve bazı tasarım denemelerine izin verdikleri için yıllar içinde giderek daha popüler hale geldi. Bu yüzden tam ekran menülerin artıları (ve eksileri) hakkında daha ayrıntılı konuşmaya ve WordPress sitenizde tam ekran bir menüyü nasıl kurabileceğinizi göstermeye karar verdik.
Pek çok WordPress teması, tam ekran bir menü oluşturmanıza izin verse de, kutudan çıkar çıkmaz bu seçenekle gelmeyen pek çok tema da vardır. Bu yüzden herkesin WordPress sitesinde tam ekran bir menü oluşturmasını kolaylıkla sağlayacak çözümler sunmaya özen gösterdik.
Size gösterdiğimiz gibi etrafta kalın:
-
Tam Ekran Menüye Sahip Olmanın Artıları ve Eksileri
-
Eklenti İle Tam Ekran Menü Oluşturma
-
WordPress Temalarında Tam Ekran Menüsü Oluşturma
Tam Ekran Menüye Sahip Olmanın Artıları ve Eksileri
Tam ekran bir menünün tipik özelliği, başlangıçta görünümden gizlenmesi ve genellikle ekranın yan tarafında bir yerde bulunan bir menü açıcı simgesine tıklanarak erişilmesidir. Bu simge, genellikle iki veya üç yatay çizgi (hamburger simgesi olarak da bilinir) veya nokta biçiminde göründüğü için kolayca tanınabilir.
Ve bize göre bu menü simgesi kendi içinde yeterince sezgisel olsa da, bazı kullanıcılar yine de bu tür gezinmeyle karıştırılabilir. Yani, çoğu kişi, ekranın üst kısmında bir yerde anında görünen menü bağlantılarıyla standart web sitesinde gezinme görmeye alışkındır. Bu yüzden tam ekran bir menü (başlangıçta görünümden gizlenmiştir) mevcut tek gezinme türüyse, potansiyel olarak bazı web sitesi ziyaretçilerinin kafasını karıştırabilir.
Bununla birlikte navigasyonunuza biraz yaratıcılık katmak söz konusu olduğunda, tam ekran bir menü hala üstün olmaya devam ediyor. Tam ekran menünün tüm yapısı tüm ekranda görüntülendiğinden, bu size deneme için bolca alan sağlar. Örneğin web sitesi tasarımının geri kalanını bozmadan menünüzü istediğiniz şekilde şekillendirebilirsiniz. Tam ekran bir menüyle, herhangi bir ek öğe eklemek için yeterli alanınız da olur. Örneğin sosyal medya simgeleri, web sitenizin logosu, markanızla ilgili bazı ek bilgiler ve uygun gördüğünüz diğer her şeyi ekleyebilirsiniz.
Genel olarak, tasarımla oynayabilir ve web sitenizin benzersiz bir şekilde öne çıkmasına yardımcı olacak oldukça dikkat çekici bir tam ekran menü oluşturabilirsiniz. Bu gezinme türünün yaratıcı potansiyelini mükemmel şekilde gösteren bazı etkileyici tam ekran menü örnekleri var.
Kısacası, tam ekran bir menü harika çünkü bir bakıma ikili bir rolü var. Tek bir menü açıcı simgesinin arkasına gizlendiğinde, web sitesi tasarımının geri kalanını temiz, basit ve minimalist tutar. Öte yandan, açıldığında sezgisel ve gezinmesi kolay, benzersiz görünümlü bir menü oluşturma olanağı sağlar. Bu yüzden dijital ajanslar, online portföyler, yaratıcı stüdyolar ve farklı etkileşimli vitrin türleri dahil olmak üzere her türlü web sitesi için ideal gezinme türüdür.
Fakat bu menü, online mağazalar gibi bazı web siteleri veya genel olarak sitelerinde çok sayıda sayfa bulunan işletmeler için en iyi çözüm olmayabilir. Bu tür web siteleri genellikle çok sayıda ürün ve/veya hizmet sunar ve çok katmanlı bir gezinme türü gerektirir. Bu durum bir tam ekran menünün bir sitede birden fazla ürünü etkili bir şekilde görüntülemek için kullanılamayacağı anlamına gelmez, fakat bu standart bir uygulama olarak kabul edilmez. Bunun nedeni, bu tür web sitelerinin genellikle bir menüde görüntülenmesi gereken çok sayıda öğeye sahip olmasıdır. Bu yüzden pratik bir gezinme türüne ihtiyacınız varsa ve görselliğe çok önem vermiyorsanız, daha klasik bir menü sizin için daha iyi olabilir.
Tüm bunları söyledikten sonra, WordPress sitenize nasıl tam ekran menü ekleyebileceğinize bir göz atalım. Bunu önce bir eklenti yardımıyla, ardından temalarımızdan birini kullanarak nasıl yapabileceğinizi size göstereceğiz.
Eklenti İle Tam Ekran Menü Oluşturma
Kullanmakta olduğunuz tema tam ekran menü işleviyle birlikte gelmiyorsa endişelenmeyin; bir eklenti kullanarak kolayca bir tema ekleyebilirsiniz. Seçimimiz, birçok seçenekle birlikte gelen ve tam ekran menünüzün kapsamlı bir şekilde özelleştirilmesine izin veren harika bir eklenti olan FullScreen Menu’dür. Eklentinin ücretsiz sürümü, yazı tipleri, animasyonlar, vurgulu efektler ve daha fazlası gibi çeşitli tam ekran tasarım ve görünümle ilgili özellikleri ayarlamanıza olanak tanır. Pro sürümüne yükseltmeyi seçerseniz, bir menü açıcı simgesinin özelleştirilmesine izin veren seçenekler, bir arka plan resmi ekleme, menü metni hizalamasını değiştirme vb. gibi bazı ek özelliklere erişebileceksiniz.
Bir eklenti kullanarak tam ekran menü eklemeye başlamadan önce, Görünüm >> Menüler’i kullanarak bir gezinme menüsü oluşturmayı unutmayın.
Eklentiyi kurup etkinleştirdikten sonra, yönetici panonuzdaki Tam Ekran Menü Seçenekleri düğmesini bulun ve tıklayın.
Bu durum eklentiyi beğeninize göre yapılandırmak için birkaç farklı sekmeye erişebileceğiniz bir seçenekler ekranı açacaktır.
İlk olarak Ayarlar sekmesi size oldukça kullanışlı birkaç seçeneğe erişmenizi sağlar. Burada animasyonlu tam ekran menüyü etkinleştirebilir, menüyü yalnızca yönetici kullanıcılara mı göstermek istediğinizi seçebilir veya yalnızca mobil cihazlarda görünmesini sağlayabilirsiniz. Ayrıca kaydırma sırasında menüyü otomatik olarak gizleyecek veya belirli sayfalarda gizlemeyi seçeceksiniz.
Tasarım/Görünüm sekmesinde, tam ekran menünüzün arka plan, yazı tipi ve animasyon gibi farklı tasarım ve görünüm öğelerini ayarlayabileceksiniz.
Arka plan resmi/Renk bölümü, menü açıldığında ve kapatıldığında rengi değiştirmek için alanlar ve bir arka plan resmi ekleme yeteneği içerir (bu, yalnızca eklentinin pro sürümüne yükseltirseniz kullanılabilir).
Yazı Tipi/Görünüm bölümünde, menü öğelerinizin yanı sıra sosyal simgeler ve menü açıcı/hamburger simgesi için yazı tipi rengini değiştirebileceksiniz.
Ayrıca yazı tipi ailesini, boyutunu (profesyonel bir özelliktir), yazı tipi ağırlığını seçebilecek ve kaydırma ekleyebileceksiniz (bu, ana menünüzün daha yüksek olması gerektiğinde kullanışlıdır).
Son olarak Animasyon ayarları ekranı, animasyon türünüzü (menüyü açtığınızda görünen efekt) seçmenize, tam ekran menü yerine yan yan menüyü etkinleştirmenize, fareyle üzerine gelme efekti seçmenize ve daha pek çok şeye olanak tanır.
Eklentinin pro sürümüne yükseltirseniz, düğme konumunu değiştirme, bir burger düğmesi görüntüsü seçme, menü metni hizalamasını değiştirme ve burger düğmenizi düzeltme gibi birkaç seçeneğiniz daha olacaktır. konumunu özelleştirin).
Menü İçeriği sekmesi daha kullanışlı seçenekler sunar. En önemlisi, burada, tam ekran menünüz olarak görüntülenmesini istediğiniz bir menüyü seçmeniz, yani tam ekran gezinmenize belirli bir menüyü (daha önce Görünüm >> Menüler’de oluşturduğunuz) atamanız gerekir.
Ayrıca herhangi bir ek kısa kod veya HTML ekleyebilecek, bir gizlilik politikası sayfası ekleyebilecek, sosyal simgeler ekleyebilecek ve daha fazlasını yapabileceksiniz.
WooCommerce sekmesi, bir WooCommerce menüsü (özellikle Hesabım, Mağaza, Sepet ve Ödeme menüleri) ve bir WooCommerce sepeti (profesyonel bir özelliktir) eklemenizi sağlar.
Son olarak Verileri Kaldır sekmesi, eklentiyi kaldırmanız durumunda tam ekran menünüzle ilgili verilerinizi kaldıracak seçeneği etkinleştirmenizi sağlar.
Elbette, herhangi bir ayarı saklamak için her sekmenin altındaki Değişiklikleri Kaydet düğmesini kullanarak değişikliklerinizi kaydetmelisiniz.
Tam ekran menü seçeneklerinizi yapılandırma şeklinizden memnun kaldığınızda (ve tam ekran navigasyonunuzda görüntülenecek bir menü seçtiğinizden emin olduktan sonra), devam etmeli ve menünüzün görünümünü kontrol etmelisiniz.
WordPress Temalarında Tam Ekran Menüsü Oluşturma
WordPress siteniz için bir WordPress teması kullanıyorsanız (veya kullanmayı planlıyorsanız), temalarımızın tamamen duyarlı, sezgisel ve kullanıcı dostu bir platform oluşturmanıza izin veren bir dizi kapsamlı seçenekle birlikte geldiğini öğrenmekten mutluluk duyacaksınız. dostu tam ekran menü.
Ayrıca kutudan çıkar çıkmaz yerleşik ve duyarlı bir tam ekran menü içeren tam ekran menülere sahip birçok WordPress teması olduğunu da belirtmeliyiz. Tabii ki, tam ekran menünüzü ve stilinizi daha fazla özelleştirmek isterseniz, bunu kolaylıkla yapabileceksiniz.
Örnek olarak Bridge temasını kullanarak bunu nasıl yapacağınızı size göstereceğiz. Fakat başlamadan önce, bazı belirli seçeneklerin temadan temaya değişebileceğini unutmamalıyız. Yine de, aşağıdaki örnek, temalarımızdan birini kullanıyorsanız neler bekleyebileceğiniz konusunda size iyi bir fikir verecektir.
Video talimatlarını takip etmeyi tercih ederseniz, aynı konudaki videomuzu da inceleyebilirsiniz:
Yönetici panosu alanına girdikten sonra, WordPress Seçenekleri ekranına erişin ve Başlık seçeneğini seçin.
Orada, üzerlerine tıkladığınızda belirli bir bölüme atlamanıza izin verecek düzgün bir dizi bağlantı bulacaksınız. Tam Ekran Menü bölümüne erişmek için, aynı ada sahip bağlantı bağlantısını tıklamanız yeterlidir.
Tam ekran menüyü etkinleştirmenize izin veren seçeneği hemen göreceksiniz. Evet’i tıklamanız yeterlidir.
Daha sonra tam ekran menüyle ilgili yepyeni bir dizi seçenek açılacaktır.
Değişiklikleri Kaydet düğmesine bastıktan sonra, tam ekran menü gezintisine bir menü atamak için Görünüm >> Menüler’e gitmelisiniz.
Orada ayrıca Menü Ayarları bölümünü de göreceksiniz. “Tam Ekran Gezinme” kutusunu işaretleyin ve Menüyü Kaydet düğmesine basın.
Sitenizde yalnızca tam ekran gezinme menüsünün görünmesini istiyorsanız, Konumları Yönet sekmesine gidin ve diğer gezinme türlerini varsayılana ayarlayın (“Bir Menü Seçin”).
Menüyü Kaydet düğmesine bastıktan sonra devam edip ana sayfanızı önizleyebilirsiniz. Artık yalnızca tam ekran menü navigasyonunuzun etkinleştirildiğini göreceksiniz.
Şimdi menünüzle ilgili bazı tasarım seçeneklerini ayarlamak için WordPress Options >> Header’a gidin ve bir kez daha Tam Ekran Menüsüne gidin.
Örneğin Tam Ekran Menü Kaplaması Animasyonu, tam ekran menü kaplaması için bir animasyon türüne karar vermenizi sağlar (Metni Sağa Soluklaştır, Metni Yukarıya Soluklaştır ve Metni Aşağı Ölçeklendir arasından seçim yapabilirsiniz).
Varsayılan tam ekran menü logo resminizi de değiştirebilirsiniz (tam ekran menüsüne tıkladığınızda sol üst köşede bulunan).
Menü Simgesi Stili seçeneği, menü açıcınız için stil seçmenizi sağlar. Varsayılan türü veya Font Awesome ve Font Elegant’tan bir şey seçebilirsiniz.
Bir diğer yararlı seçenek grubu da menünüzün stiliyle ilgili olanlardır (hem birinci hem de ikinci düzey). Buna yazı tipi ailesi, yazı tipi boyutu, satır yüksekliği, yazı tipi stili, ağırlık vb. dahildir.
Son olarak menü için arka plan rengini (ve şeffaflığını) ayarlayabilecek, arka plan resminizi (tek renk yerine arka planınız için bir resim olmasını tercih ediyorsanız) ve kapat düğmenizin rengini seçebileceksiniz.
Başlık Düğmesi Simgelerine tıklayarak, menü açıcı simgesi için seçeneklerinizi önceden tanımlayabileceğiniz alana doğrudan kaydırırsınız. Buna simge rengi, fareyle üzerine gelme rengi ve boyutu dahildir.
Simge boyutuna gelince, iki farklı alan göreceksiniz.
Bir alan, Font Awesome gibi simge ailelerinden birindeki simgeyi kullanıyorsanız geçerli olan özel bir boyut girmenize olanak tanır. Varsayılan simgeyi kullanıyorsanız, diğer (Yan Menü / Tam Ekran Menü Simge Boyutu) alanını kullanmalısınız. Normal, Orta ve Büyük arasından seçim yapabileceksiniz).
Tüm tasarım ayarlarını yapılandırmayı tamamladığınızda devam edebilir ve tam ekran menünüzün nasıl göründüğünü görebilirsiniz.
Bridge’i de kullanıyorsanız, menü açıcıyı menüde görmüyorsanız diye…