Divi kullanarak hücresel için sabit bir başlık özelliği nasıl eklenir
Bir gölgelik (veya navigasyon) olmaya sahip olmak hücresel olarak kalır, doğru yapılırsa sitenizin kullanımını artırabilir. Navigasyon, dinvigasyon için genellikle standart başlıklardan% 22 daha hızlı kalır. Yüksek hızlı teknoloji dünyasında, yarısı olsa bile oldukça büyük bir stat. Ve Divi ile, sitenize sabit bir başlık eklemek birkaç CSS hattı ile yapılabilir. Divi, tema ayarını kullanarak hücresel gölgeliklerinizi ayarlamanıza izin verdi, ancak şu anda hücresel için sabit bir başlık kullanmak için varsayılan ayar yok. Bu öğreticide, aşağıdakileri içeren bir cep telefonuna nasıl sabit bir başlık ekleyeceğinizi göstereceğim:
Masaüstü sürümünüzden farklı logolar (daha hücresel dostu).
Daha fazla kullanılabilir ekran alanına izin vermek için daha kısa başlıklar.
Hamburger navigasyon simgeleri daha büyüktür ve hücresel navigasyonun uygulanmasını kolaylaştırmak için tıklanabilir.
Siteye bakarken başlığı daha da rahatsız edici hale getiren yarı saydam arka plan.
İşte başlığın nasıl olacağına biraz göz atın.
Divi’nin en son sürümünü yüklediğinizden emin olun.
Siteniz için etkin bir ana menü oluşturun.
WordPress sitenizin arka ucundan, özelleştirici temasını> başlık ve navigasyon> başlık biçimini açın ve varsayılan başlık stilini seçtiğinizden emin olun. 200 × 131 ölçümünde logonuzun iki versiyonunu oluşturun ve WordPress Medya Kütüphanenize ekleyin. Ana başlık için bir logo kullanılacak ve bir tanesi kalıcı gölgelikiniz için kullanılacaktır. Mümkünse, başlıkta dikey olarak karartılamayacak şekilde logodan sabitlenen başlık sürümünü daha yatay hale getirin. İşte kullandığım ana başlık logosunun bir örneği. İşte kalıcı başlık logomun bir örneği. Bana dikkat edin, başlıkta daha düşük bir yükseklik ile iyi eşleşen daha basit ve daha yatay bir logo yapmak için metni kesin. Birinin metni okuyabilmesinin bir yolu yoktur ve markanın hala temsil edilmesi. Ana menünüzü menü öğeleri ile ayarlayın. Başlığı tamamlamak için özel bir CSS ekleyeceğimiz için, tema ayarındaki standart başlığı veya kalıcı başlık seçeneğini ayarlamamız gerekmez. Ancak, örneğimdeki menü ve logonun boyutu için ayarları çoğaltmak istiyorsanız, aşağıdakileri tamamlayın (bu tamamen isteğe bağlıdır): Tema ayarındaki başlık ve navigasyon ayarlarını açın. Ana menü çubuğunu seçin ve aşağıdakileri güncelleyin: Menü Yüksekliği: 105 Maks Yükseklik Logosu: 80 Metin Boyutu: 20
Şimdi başlık ve navigasyona geri dönelim. Aşağıdaki sabit gezinme ve güncelleme ayarlarını seçin: Sabit Menü Yüksekliği: 60 Metin Boyutu: 20 Bu adımları bitirdikten sonra, başlamaya hazırsınız. YouTube kanalımıza Divi abone kullanarak hücresel bir özel başlık nasıl eklenir. Yalnızca mobil cihazları hedefleyeceğimiz için, tüm CSS’imizi stili tarayıcının genişliğiyle 980 pikselden daha az sınırlayan medya sorgularına saracağız. Lütfen ek CSS kutusuna aşağıdakileri girerek başlayın: @media (maks-genişlik: 980px) { }
CSS kullanarak hücresel başlığınızı yapmak DIVI, kullanıcılar sayfaları aşağı kaydırdıklarında “ET-Fixed-Header” adlı bir sınıf eklediğinden, başlayıcıyı yapmak ve organize etmek için CSS’mizdeki seçmenleri özellikle hücresimiz olarak kullanabiliriz. Aşağıdaki ilk CSS grubu, üstbilgiyi sayfanın üst kısmında sabit (veya yapışkan) hale getirir ve daha sonra başlığın yüksekliğini 55 piksel kalacak şekilde ayarlar. Ayrıca yarı saydam beyaz arka plan rengi ekler. Medya sorgusu braketlerindeki temanın ayarlanmasında ek CSS’nize aşağıdakileri ekleyin.
/********************************* Mobil sabit başlık stili
****************************
.et_fixed_nav #play-header.et-fixed-header {
Konum: Sabit;
Arka plan: RGBA (255,255,255.0.8); /*Buradaki başlık arka plan rengini değiştir*/
Yükseklik: 55px;
}
.et-Fixed-Header .logo_container {
Yükseklik: 55px;
}
.et-Fixed-Header. Mobile_menu_bar {
Dolgu Alt: 5px;
}
Apple, uygulamaları için tıklanabilecek tüm UI öğelerinin en az 44×44 piksel olmasını önerir, böylece başparmak ve parmaklarımız kolayca tıklayabilir. Bu, başlıktaki elementlerin hücresel kalması için iyi bir rehber olacaktır. Aşağıdaki CSS navigasyon simgesini 45px./******************************************************* ****
Mobil sabit başlık gezinme simgesini daha büyük hale getirin
****************************
.et-Fixed-Header. Mobile_menu_bar: Önce {
yazı tipi boyutu: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
Dolgu Top: 5 piksel;
}
.et_fixed_nav #et-top-navigation {
-Webkit-Transition: Yok;
-Moz-Transition: Yok;
Geçiş: Yok;
}
Son olarak, daha iyi görebilmemiz için sabit bir başlıktaki logomuza daha fazla yükseklik ekleyelim. Aşağıdaki CSS’ye girin: /**************************
Mobil ve mobil sabit başlıktaki logo alanının yüksekliğini artırın
*************************
#logo, .et-fixed-başlık #logo {
Max-Height:%80;
}
İşte burada! Hepimiz bittik. İşte hücresel başlığınızı yapmak için son CSS koleksiyonu:
@Media (Max-Width: 980px) {
/*********************************
Mobil sabit başlık stili
****************************
.et_fixed_nav #play-header.et-fixed-header {
Konum: Sabit;
Arka plan: RGBA (255,255,255.0.8);
Yükseklik: 55px;
}
.et-Fixed-Header .logo_container {
Yükseklik: 55px;
}
.et-Fixed-Header. Mobile_menu_bar {
Dolgu Alt: 5px;
}
/*********************************
Mobil sabit başlık gezinme simgesini daha büyük hale getirin
****************************
.et-Fixed-Header. Mobile_menu_bar: Önce {
yazı tipi boyutu: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
Dolgu Top: 5 piksel;
}
.et_fixed_nav #et-top-navigation {
-Webkit-Transition: Yok;
-Moz-Transition: Yok;
Geçiş: Yok;
}
/***************************
Mobil ve mobil sabit başlıktaki logo alanının yüksekliğini artırın
*************************
#logo, .et-fixed-başlık #logo {
Max-Height:%80;
}
}
Ayarlarınızı kaydedin. Artık işlev gören çalışan bir hücresel başlığınız var.
Logonuzu hücresel başlığınızda değiştirmek, hücresel başlığınız için farklı bir logo kullanmak istiyorsanız, birkaç jQuery ile yeterince kolay yapabilirsiniz. İhtiyacınız olan tek şey, kullanacağınız iki logo için bir URL. İlk logo görüntü URL’si, siteniz için kullandığınız varsayılan logo olmalıdır. İkinci logo görüntü URL’si, başlık için kullanmak istediğiniz logo olmalıdır. Hem logoları medya kütüphanesine yüklediğinizden ve URL’yi alın. Her iki URL’den sonra WordPress kontrol panelini açın ve Divi> Tema Seçeneği> Entegrasyonuna gidin. “Kodu blogunuzun başına ekle” giriş kutusunu bulun ve aşağıdaki jQuery komut dosyasını girin:
Var imageurl = [
‘Masaüstü Logo Görüntü URL’si gir’,‘Mobil Logo Görüntü URL’si gir’,
];
jQuery (pencere) .on (‘kaydırma’, function () {
var $ header = jQuery (‘başlık’);
var $ logo = jQuery (‘#logo’);
if ((jQuery (pencere) .width () <981) &&
($ header.hasclass ('ET-Fixed-Header'))))))) {
Return $ logo.at ('src', imageUrl [1]);
};
Return $ logo.at ('SRC', ImageUrl [0])
});
Şimdi “Masaüstü Logo Görüntü URL’sini girin” metnini siteniz için kullandığınız logo URL’si ile değiştirin.
Ardından, yalnızca mobil cihazlar için kullanmak istediğiniz logo URL’siyle “Mobil Logo Görüntü URL’si gir” metnini değiştirin. Ayarları kaydedin ve sonuçları görün. Bu yazıdaki tarayıcılar, başlığın hala CSS’yi kullanmasını sağlıyorum, CSS özelliğine “Konum: Sabit” özelliğine çok bağlı. Bu CSS özelliği, özellikle iOS Safari ve Android’de daha uzun bir hücresel tarayıcı sürümü ile tutarlı olmayabilir. Ancak bugün “Pozisyon: Sabit” yeni bir mobil tarayıcı sürümünde (Opera Mini hariç) oldukça iyi desteklenmektedir. Orada daha güçlü eklentiler ve diğer JavaScript çözümleri var, ancak en iyisi size basit bir CSS sürümü vermek. Bu çözüm sizin için başarılı değilse lütfen seçeneği araştırmayı düşünün.
Nihai zihnin, gölgelik hücresel olarak kaldığı belirtilmelidir. Tarayıcınızın tepesini istedikleri zaman engellemeye devam ettikleri için, dikkatli değilseniz, belirgin bir nedenden ötürü değerli gayrimenkulden kurtulabilirsiniz. Unutmayın, herkesin bu kişi gibi bir phableti yoktur.
