Masaüstü ve Hücresel Menüler Nasıl Eşleştirilir
Masaüstü ve hücreselde iyi bir menü yapmak ister misiniz? Biz sana yardım ederiz. Bu kılavuzda, WordPress web sitenizin masaüstü ve hücresel menüsünü nasıl eşleştireceğinizi göstereceğiz. İnterneti keşfetmek için mobil cihazların kullanımı son yıllarda artmıştır. Bununla birlikte, tüm siteler hücresel kullanıcılara iyi deneyimler sağlamak için tasarlanmamıştır. Zamanın gelişimini takip etmek ve hücresel ziyaretçileri en üst düzeye çıkarmak için, sitenizin hücresel olarak ve masaüstü ekranında duyarlı olduğundan emin olmalısınız. Masaüstü ve hücresel menülerin nasıl eşleşeceğini göstermeden önce, önce aynı tasarıma sahip olmanın neden iyi bir fikir olduğunu görelim.
Masaüstünüzü ve hücresel menülerinizi neden eşleştirmelisiniz? Giderek yaygınlaşan kullanıcılar interneti cep telefonlarından keşfetse de, tüm web siteleri hücresel kullanıcılar için iyi deneyimler sağlamak için tasarlanmamıştır. Sitenizin herhangi bir cihazda gezinmesi kolay olduğundan emin olmak için, her ekranda çekici görünmesini sağlamak için masaüstünü ve hücresel menüyü eşleştirmelisiniz. Şu anda, çoğu web sitesinde masaüstü ekranında iyi görünen bir başlık menüsü vardır. Ancak, aynı şey cep telefonu ekranında olmadı. Birçok web sitesi sahibi hücresel için varsayılan seçenekler kullanır, bu nedenle menü genellikle iyi görünmez.
Bir örneğe bakalım. Web sitenizin masaüstünde 30 piksel yüksekliği ve maksimum logo yüksekliği 100 piksel olduğunu varsayalım.
1. Masaüstüne ve hücresel menüye uyacak şekilde yapmanız gereken ilk şeyi yapılandırın menüyü yapılandırmaktır. Bu çoğu tema için aynı olacak. Burada, menü ve logo yüksekliğini ayarlayacağız. WordPress Gösterge Tablo’nuzda, görünüm açın> Özelleştirin. Başlık ve Navigasyon> Ana Menü çubuğunu açmanız gereken temayı ayarlamaya yönlendirileceksiniz. Ardından, logo görüntüsünü gizlemek ve menünün yüksekliğini ve logonun maksimum yüksekliğini aşağıdaki gibi ayarlamak için kontrol seçeneğini devre dışı bıraktığınızdan ve kaldırdığınızdan emin olun: Menü Yüksekliği: 30
Max Yüksek Logo: 100
Bu, masaüstü ve hücresel için menünün yüksekliğini azaltacak, daha zarif hale getirecek ve hücresel ekranda daha fazla alan oluşturacaktır. Değeri belirledikten sonra yayınlayın. 2. Menüyü CSS ile Düzenle Logo ve menüyü yapılandırdıktan sonra menüyü CSS ile düzenlemeye başlayabilirsiniz. Masaüstüne ve hücresel menülere uyacak şekilde WordPress’e CSS ekleyebilmenin çeşitli yolları vardır. Belirli bir sayfaya veya tüm web sitelerine ekleyebilirsiniz. Tasarımı tutarlı tutmak için menüye tüm web sitelerine CSS değişiklikleri uygulamanızı öneririz. Ancak, gerekirse belirli bir web sayfasına CSS kodunu da girebilirsiniz. Size aşağıdaki iki seçeneği göstereceğiz.
Başlamadan önce, WordPress sitenizin bir yedeklemesini yapmak iyidir. Siteye birkaç satır kod ekleyeceğiz, bu nedenle önceki web sitesi sürümüne dönmek istiyorsanız en son yedeklemelere sahip olmak her zaman yararlıdır. 2.1. CSS kodunu bir sayfaya ekleyin, belirli bir sayfa için masaüstü ve hücresel menüye uyacak şekilde CSS kodunu eklemek için sayfayı WordPress panosundan açın. Ardından, sayfayı Divi Builder ile açın ve sayfanın altındaki seçenek düğmesini tıklayın (3 yatay nokta). Orada sayfa seçeneğini göreceksiniz. Sayfa ayarlarını açmak için Ayarlar simgesini tıklayın, devam eden sekmeyi açın ve CSS Kustom’a basın. Bundan sonra aşağıdaki CSS kodunu ekleyin ve kaydetmek için onay işaretini tıklayın. @Media (maksimum genişlik: 980 piksel) { # kapsayıcılar {
Dolgu Top: 43px! önemli; }
}
@Media (maksimum genişlik: 980 piksel) {
#logo {
Maksimum genişlik:%100! önemli;
Maksimum Yükseklik:%90! önemli;
}
}
@Media (maksimum genişlik: 980 piksel) {
#Ana kafa {
Üst:%4! önemli;
}
}
@Media (maksimum genişlik: 980 piksel) {
# ET-TOP-Navigation {
Dolgu Top: 5 piksel! önemli;
}}
.et_header_style_split. mobil_menu_bar,
.et_header_style_left. mobil_menu_bar {
Rulman: 5 piksel;
} Kod Kaynağı Masaüstü ve hücresel arasındaki sonuçları, Maker’da bulunan önizleme modunu kullanarak karşılaştırabilirsiniz. Ekranınızın sol alt kısmındaki seçeneği göreceksiniz.
2.2. CSS kodunu tüm web sitelerine ekleyin veya CSS kodunu ekleyebilir ve tüm web sitelerine uygulayabilirsiniz. Bu en yaygın tekniktir, çünkü site genelinde tutarlılığı korumanıza ve her sayfada masaüstü ve hücresel menüleri eşleştirmenize yardımcı olacaktır. Bunun için özel CSS’yi iki farklı şekilde ekleyebilirsiniz:
Tema seçeneklerinde ayarlamalar kullanma (Divi kullanıyorsanız)
İki seçeneğe bakalım. BEN. WordPress Gösterge Tablonuzdaki Temaları Ayarlama, Görünümden Aç> Özelleştirici temasını özelleştirin ve açın. Ardından, Ek CSS sekmesini açın. Aşağıdaki CSS kodunu yapıştırın ve yayınlayın.
@Media (maksimum genişlik: 980 piksel) {
# kapsayıcılar {
Dolgu Top: 43px! önemli; }
}
@Media (maksimum genişlik: 980 piksel) {
#logo {
Maksimum genişlik:%100! önemli;
Maksimum Yükseklik:%90! önemli;
}
}
@Media (maksimum genişlik: 980 piksel) {
#Ana kafa {
Üst:%4! önemli;
}
}
@Media (maksimum genişlik: 980 piksel) {
# ET-TOP-Navigation {
Dolgu Top: 5 piksel! önemli;
}}
.et_header_style_split. mobil_menu_bar,
.et_header_style_left. mobil_menu_bar {
Rulman: 5 piksel;
} Kod Kaynağı CSS kodunu koyduktan sonra, sitenizin gereksinimlerini karşılayacak değeri de ayarlayabilirsiniz. Hücresel menü ile logo arasındaki üst dolgunun doğru olana paralel olduğundan emin olun. Doğru değerin ne olduğundan emin değilseniz, yüksek bir değerle başlayın ve sonuçlardan memnun olana kadar azaltın.
Bu yöntemle ilgili iyi olan, masaüstü ve hücresel için sonuçların sonuçlarını tema ayarından görebilmenizdir. Önizleme modu seçeneği ekranınızın sol alt kısmında görünecektir.
İi. Tema seçenekleri veya Divi kullanıyorsanız, tema seçeneklerini kullanarak tüm web sitelerinize CSS kodu ekleyebilirsiniz. Bu daha kolay ve daha hızlı bir yaklaşım olabilir, çünkü kodu eklemek için tema ayarını içermeniz gerekmez. İlk olarak, divi> tema seçeneğini açın ve genel sekmeyi açın. Ardından, sayfanın altına doğru kaydırın ve CSS özelliğini bulacaksınız.
Bir kez daha, ekran görüntülerinde gösterildiği gibi aşağıdaki kodu metin kutusuna ekleyin ve değişiklikleri kaydedin. @Media (maksimum genişlik: 980 piksel) {# container-page {
Dolgu Top: 43px! önemli;
} } @Media (maksimum genişlik: 980 piksel) {
#logo {
Maksimum genişlik:%100! önemli;
Maksimum Yükseklik:%90! önemli;
}
}
@Media (maksimum genişlik: 980 piksel) {
#Ana kafa {
Üst:%4! önemli;
}
}
@Media (maksimum genişlik: 980 piksel) {
# ET-TOP-Navigation {
Dolgu Top: 5 piksel! önemli;
}}
.et_header_style_split. mobil_menu_bar,
.et_header_style_left. mobil_menu_bar {
Rulman: 5 piksel;
} Bunun sadece bir örnek kod olduğunu unutmayın, bu nedenle sitenizin tasarımına uyacak şekilde ayarlamanız gerekebilir. Hücresel menüler için bazı ek ipuçları, web sitenizde masaüstü ve hücresel menülerin kolayca nasıl eşleşeceğini gördük. Ancak mobil menünüzü ayarlamak için yapabileceğiniz daha fazlası var. Bu bölümde, menünüzü en üst düzeye çıkarmak için yapabileceğiniz en yaygın ayarlamalardan bazılarını göstereceğiz. Bu öğretici için divi temasını kullandığımızı unutmayın, bu nedenle kullandığınız temaya bağlı olarak bazı seçenekler biraz farklı olabilir. 1. Hücresel menü nasıl yapılır, mobil menünüzde yapabileceğiniz en iyi değişikliklerden biri olmaya devam ediyor. Bu, gezinmeyi artırabilir ve sitenizdeki kullanıcı deneyimini geliştirebilir. Cep telefonu menüsünü düzeltmek için, tema veya tema seçeneklerine aşağıdaki CSS kodunu ekleyin. @Media (maksimum genişlik: 980 piksel) {
.et_non_fixed_nav.et_transparent_nav # play-header, .et_non_fixed_nav.et_transparent_nav # top-header, .et_fixed_nav # play-header, .et_fixed_nav # top-header {position: still! önemli; }} Divi’de yapışkan bir menünün nasıl oluşturulacağı hakkında daha fazla bilgi için bu kılavuza bakın. 2. Mobil menünüz için mükemmel bir hizalama yapmak için doğru değeri elde etmekte zorluk çekiyorsanız, bu hücresel mod için farklı bir logo ekleyin. Sadece orijinal logoyu değiştirir ve yalnızca mobil cihazlarda daha uygun bir boyutta farklı bir logomuz olur. Hücresel olarak farklı bir logo kullanmak için, önce web sitenize bir logo resmi yükleyin. Medya’yı açın> Yeni ekleyin ve resimlerinizi yükleyin.
Ardından, Kütüphane sekmesini açın ve görüntüyü seçin. Bir resim yüklediyseniz, Medya> Kütüphaneyi açabilirsiniz. Şimdi görüntüyü seçin ve URL dosyasını kopyalayın.
Son olarak, ek CSS altındaki temanın ayarlanmasına aşağıdaki özel CSS ekleyin ve yayınlayın. URL’yi yeni kopyaladıklarınızla değiştirmeyi unutmayın. @Media sadece ekran ve (maksimum genişlik: 981px) {
/ * Mobil logoyu belirli bir resme dönüştürmek * /
#logo {
İçerik: URL (“http://site.com/logo.png”);
} } 3. Hücresel başlıktaki logoyu gizle Masaüstü ve hücresel menüleri eşleştirmede sorun yaşıyorsanız, farklı hale getirmek ve cep telefonundaki logoyu gizlemek isteyebilirsiniz. Bu, birkaç site için iyi bir seçim olabilir, ancak kullanıcıların web sitenizi bir logo olmadan bile tanımlayabilmeleri için başka talimatlar sunduğunuzdan emin olun. Logoyu hücresel menüden gizlemek için, WordPress kontrol panelinizde görünümden açın> Özelleştirme temasını özelleştirin ve açın. Ardından, hücresel stil> hücresel menüye gidin. Logo görüntüsünü gizleme ve yayınlama seçeneğini kontrol edin. Bu o! Logo cep telefonuna gizlenecek. Sonuç Genel olarak, web sitenizin iyi görünmesi ve her türlü cihaz üzerinde çalışması önemlidir. Masaüstü ve hücresel menülerin eşleşmesi, site navigasyonunu artırmanıza ve ziyaretçilere daha iyi bir deneyim sunmanıza olanak tanır. Bu kılavuzda, masaüstünde ve hücreselde aynı menüye sahip olmanız için farklı adımlar gösterdik. Hem bir sayfa hem de tüm web siteleri için CSS ile nasıl yapılandırılacağını ve düzenleneceğini gördük. Ayrıca, hücresel menüleri ayarlamak için bazı ipuçları da verdik. İnternetteki trafiğin neredeyse yarısının hücresel olduğu göz önüne alındığında, bunun siteniz üzerinde büyük bir etkisi olabilir. Divi temaları veya üreticileri hakkında daha fazla bilgi istiyorsanız, bu kılavuzu görebilirsiniz: CSS ile Divi menüsü nasıl ayarlanır
Bir divi başlığı oluştur (yapışkan/düzeltme)
Divi’de altbilgi nasıl gizlenir ve kaldırılır
