Divi Kullanarak Mobil İçin Özel Sabit Başlık Nasıl Eklenir
Yayınlanan: 2017-09-01Mobil cihazlarda sabit bir başlık (veya gezinme) olması, doğru yapıldığında sitenizin kullanılabilirliğini artırabilir. Genel olarak sabit gezinme, gezinmek için standart başlıklardan %22 daha hızlı görünüyor. Bu yüksek hızlı teknoloji dünyasında, bunun yarısı bile olsa önemli bir stat.
Divi ile sitenize sabit bir başlık eklemek birkaç satır CSS ile yapılabilir. Divi, Tema Özelleştirici'yi kullanarak mobil başlıklarınızı özelleştirmenize zaten izin veriyor, ancak şu anda mobil için sabit bir başlık dağıtmak için yerleşik bir ayar yok. Bu eğitimde, mobilde aşağıdakileri içeren özel bir sabit üstbilgiyi nasıl ekleyeceğinizi göstereceğim:
- Masaüstü sürümünüzden farklı (daha mobil uyumlu) bir logo.
- Daha fazla kullanılabilir görüntüleme alanı sağlamak için daha kısa bir başlık.
- Mobil gezinmeyi dağıtmayı kolaylaştırmak için daha büyük tıklanabilir hamburger gezinme simgesi.
- Siteyi görüntülerken başlığı daha da müdahaleci yapan yarı saydam bir arka plan.
İşte başlığın nasıl görüneceğine dair küçük bir bakış.
Kurulum
Bu kurulum, Logonuzu Sabit Bir Başlıkta Değiştirme konusundaki önceki gönderime benzer. Başlamadan önce aşağıdakileri tamamladığınızdan emin olun:
- Divi'nin en son sürümünün kurulu olduğundan emin olun.
- Siteniz için aktif bir birincil menü oluşturun.
- WordPress sitenizin arka ucundan Tema Özelleştirici > Başlık ve Gezinme > Başlık Biçimi'ne gidin ve varsayılan başlık stilinin seçili olduğundan emin olun.
- Logonuzun her ikisi de 200×131 olan iki versiyonunu yapın ve bunları WordPress Medya kitaplığınıza ekleyin. Ana başlık için bir logo ve sabit başlığınız için bir logo kullanılacaktır. Yapabiliyorsanız, logonun sabit başlık versiyonunu daha yatay yapın, böylece daha küçük sabit başlıkta dikey olarak ezilmez. Kullanmakta olduğum ana başlık logomun bir örneği.
İşte benim sabit başlık logomun bir örneği. Dikkat edin, daha az yüksekliğe sahip bir başlığa güzel bir şekilde uyan daha basit ve daha yatay bir logo yapmak için metni kırptım. Zaten herhangi birinin bu metni okuması mümkün değil ve marka hala temsil ediliyor. 
- Menü öğeleriyle birincil menünüzü ayarlayın.
Sabit başlığı gerçekleştirmek için özel CSS ekleyeceğimiz için, Tema Özelleştirici'de standart başlık veya sabit başlık seçeneklerini özelleştirmemize gerek yok. Ancak, örneğimdeki menü ve logo boyutları ayarlarını çoğaltmak istiyorsanız, aşağıdakileri tamamlayın (bu tamamen isteğe bağlıdır):
Tema Özelleştirici'de Başlık ve Gezinme ayarlarına gidin. Birincil Menü Çubuğunu seçin ve aşağıdakileri güncelleyin:
Menü Yüksekliği: 105
Logo Maksimum Yükseklik: 80
Metin Boyutu: 20
Şimdi Header & Navigation'a geri dönün. Sabit Navigasyon Ayarları'nı seçin ve aşağıdakileri güncelleyin:
Sabit Menü Yüksekliği: 60
Metin Boyutu: 20
Bu adımları tamamladıktan sonra başlamaya hazırsınız.
Divi Kullanarak Mobil İçin Özel Sabit Başlık Nasıl Eklenir
Youtube Kanalımıza Abone Olun
Başlarken
Divi Theme Customizer'da Ek CSS bölümü altında özel CSS girerek bu tasarımı uygulayacağız. Yalnızca mobil cihazları hedefleyeceğimiz için, tüm CSS'mizi, stili 980 pikselden daha az tarayıcı genişlikleriyle sınırlayan bir medya sorgusuna saracağız. Devam edin ve Ek CSS kutusuna aşağıdakini girerek başlayın:
@media (max-width: 980px) {
}
CSS Kullanarak Mobil Sabit Başlığınızı Oluşturma
Divi, kullanıcı sayfayı aşağı kaydırdığında zaten "et-fixed-header" adlı bir sınıf eklediğinden, mobil sabit başlığımızı oluşturmak ve biçimlendirmek için bu seçiciyi özel CSS'mizde kullanabiliriz.
Aşağıdaki bu ilk CSS grubu, başlığı sayfanın üst kısmında sabit (veya yapışkan) yapar ve ardından sabit başlığın yüksekliğini 55 piksele ayarlar. Ayrıca yarı saydam bir beyaz arka plan rengi ekler. Aşağıdakileri, Medya Sorgusu parantezleri içindeki Tema Özelleştirici'deki Ek CSS'nize ekleyin.
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
Apple, Uygulamaları için tüm tıklanabilir UI öğelerinin en az 44×44 piksel olmasını önerir, böylece başparmaklarımız ve parmaklarımız bunları kolayca tıklatabilir. Bu, mobil sabit başlıktaki öğeler için iyi bir kılavuz olacaktır. Aşağıdaki CSS, gezinme simgesini 45 piksel yapar.
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Son olarak, logomuzu daha iyi görebilmemiz için sabit başlıkta daha fazla yükseklik ekleyelim. Aşağıdaki CSS'yi girin:
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
Bu kadar! Hepimiz bittik.
Mobil sabit başlığınızı oluşturmak için son CSS koleksiyonu:
@media (max-width: 980px) {
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
}
Ayarlarınızı kaydedin. Artık çalışan bir mobil sabit başlığınız var.
Mobil Sabit Başlığınızda Logonuzun Değiştirilmesi
Mobil sabit başlığınız için farklı bir logo kullanmak istiyorsanız, bunu bazı jQuery ile oldukça kolay bir şekilde yapabilirsiniz. Tek ihtiyacınız olan, kullanacağınız her iki logonun da URL'leri. İlk logo resmi URL'si, siteniz için halihazırda kullanmakta olduğunuz varsayılan Logo olmalıdır. İkinci logo resmi URL'si, mobil sabit başlık için kullanmak istediğiniz logo olmalıdır. Her iki logoyu da medya kitaplığına yüklediğinizden ve URL'leri aldığınızdan emin olun.
Her iki URL'ye de sahip olduğunuzda, WordPress panosuna gidin ve Divi > Tema Seçenekleri > Entegrasyonlar'a gidin. "Blogunuzun başına kod ekleyin" giriş kutusunu bulun ve aşağıdaki jQuery komut dosyasını girin:
<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ((jQuery(window).width() < 981) &&
($header.hasClass('et-fixed-header'))) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>
Şimdi “MASAÜSTÜ LOGO GÖRÜNTÜ URL'SİNİ GİRİN” metnini siteniz için şu anda kullanmakta olduğunuz logonun url'si ile değiştirin.
Ardından “MOBİL LOGO GÖRÜNTÜ URL'SİNİ GİRİN” metnini yalnızca mobil cihazlar için kullanmak istediğiniz logonun url'si ile değiştirin.
Ayarları kaydedin ve sonuçları kontrol edin.
Tarayıcı Desteği
Bu yazıda, sabit üstbilgiyi yalnızca CSS kullanarak, büyük ölçüde "position:fixed" CSS özelliğine dayanarak oluşturdum. Bu CSS özelliği, özellikle iOS Safari ve Android'de mobil tarayıcıların eski sürümleriyle tutarsız olabilir. Ancak bu günlerde “position:fixed”, mobil tarayıcıların daha yeni sürümlerinde (Opera Mini hariç) oldukça iyi destekleniyor.
Dışarıda daha sağlam eklentiler ve JavaScript çözümleri var ama size basit CSS sürümünü vermenin en iyisi olduğunu düşündüm. Bu çözüm sizin için işe yaramazsa, lütfen bu seçenekleri araştırmayı düşünün.
Son düşünceler
Mobil sabit başlıkların kullanılabilirliğe zarar verebileceğini belirtmekte fayda var. Tarayıcınızın üst kısmını her zaman engellemeye devam ettikleri için, dikkatli olmazsanız değerli gayrimenkullerinizi sebepsiz yere israf edebilirsiniz. Unutma, herkesin bu adam gibi bir tableti yok.
Bu nedenle, sabit başlığınızı daha kısa bir yükseklik, farklı bir logo ve daha büyük bir gezinme düğmesi vererek mobil cihazlar için özelleştirmeniz önemlidir. Divi web sitenize birkaç satır CSS ekleyerek, üçüncü taraf bir eklenti kullanmak zorunda kalmadan mobil cihazlarda sabit bir üstbilgiye sahip olabilirsiniz. Bu nedenle, bir sonraki projenize bir tane eklemek mantıklıysa, devam edin. Bu tür bir işlevselliğe sahip olmak, web sitenizin kullanıcı arayüzünü iyileştirebilir.
Yorumlarda sizden haber bekliyorum.
Şerefe!