Logonuzu başlığa yönlendirmek Divi’de kalır
Logonuzun çeşitli sürümlerini farklı renk ve boyutlarla yapmak her zaman iyi bir fikirdir. Örneğin, farklı arka plan renklerinde iyi görünmesi için logonuzun karanlık ve parlak bir versiyonuna sahip olmanız gerekebilir. Ve web sitenizin dar alanı için daha küçük bir logo versiyonuna (daha az dikey ve daha yatay) sahiptir. Logonuzun farklı bir sürümünü kullanmak için en iyi yerlerden biri sabit bir başlıkta (veya yapışkan). Birçok durumda, gölgelik ana başlığınızdan farklı bir stile ihtiyacınız olacaktır. Aynı logoyu kaydederseniz, başlığınızı nasıl düzenleyeceğinizle sınırlısınız. Burası çok kullanışlı bir özel logoya sahip. Sabit bir başlık için özel olarak ayarlanmış ayrı bir logo ile istediğiniz gibi düzenleyebilirsiniz. Bu size sitenizin tasarımı üzerinde daha büyük bir kontrol sağlar.
Bu yazıda size nasıl olduğunu göstereceğim:
Başlığınız hala etkinken logonuzu başkalarıyla değiştirin. (Bu bir satır CSS ile yapılabilir)
Logonuzun rengini başlığınıza çevirin.
Logonuzu sabit bir başlıkta değiştirirken serin bir geçiş efekti ekleyin.
Orta gölgelik logonuzu kanopinizdeki varsayılan düzene (düz solda) değiştirin ve taşıyın.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide neler başaracağımıza biraz göz atın. Bu basit bir logo anahtarının görünümüdür.
Divi’nin en son sürümünü yükleyin.
Aktif bir divi çocuğunun temasını uygulayın. Bir çocuğun temasını hazırlayarak yardıma ihtiyacınız varsa, bu yazıya dahildir. Ek yardıma ihtiyacınız varsa. Lütfen destek ekibimizle iletişime geçin. 200 × 131 ölçümünün iki sürümünü yapın 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 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. Bu adımları bitirdikten sonra, başlamaya hazırsınız.
Logonuzu başlayıcıya aktarın Divi’de YouTube kanalına abone olarak, özel CSS’imize girmeden önce kullandığınız başlıktaki logoyu değiştiriyoruz, Menü ayarlarımızı tema ayarında ayarlayalım. 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.
Ardından, özelleştirici temasında başlık ve navigasyon ayarlarına dönü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 ve güncellenmiş gezinme ayarlarını seçin: Sabit Menü Yüksekliği: 60 Metin Boyutu: 20
Sitenizin tasarımına uyacak şekilde ayarlarınızın geri kalanını ekleyebilirsiniz. Menünün ve logonun yüksekliğinin ihtiyaçlarınıza göre ayarlanması gerekebilir. Ancak, boyutunun doğru olması için bir geçiş efekti eklemek istiyorsanız bu ayarı kaydetmenizi öneririm. Her zaman geri dönebilir ve daha sonra değiştirebilirsiniz. Başlıktaki logoyu etkinleştirmek için CSS görüntülerini girin Logo görüntüsünüzü diğerine değiştirmenin en basit yollarından biri olmaya devam ediyor. CSS’ye alışkınsanız, bu genellikle sahte öğeye içerik eklerken kullanılır: Önceden veya: Sonra. Bu durumda, geçerli logo görüntüsünü değiştirmek için yeni içerik (logo resminiz) eklemek için kullanacağız. Bunu yapmak için Tema Ayarını Aç> Ek CSS ve aşağıdaki CSS’yi girin. /********************************* Sabit başlık için logoyu değiştirin (hızlı ve kolay yol)
****************************
.et-fixed-başlık #logo {
İçerik: URL (yeni logo görüntüsü url ekleyin);
}
Şimdi “Yeni Logo Resmini Girin” yazan metni gerçek logo resminizle değiştirin. URL’yi almak için medya kitaplığınızı WordPress kontrol panelinden açın ve eklemek istediğiniz resmi tıklayın. URL’yi görünen ekranın sağ üst kısmında bulabilirsiniz.
İşte burada. Bu basit çözüm, logonuzu yeni bir çözümle değiştirecektir, ancak sayfalar boyunca kaydırdığınızda başlık aktif kaldığında. Sayfanın üstüne geri döndüğünüzde varsayılan logo geri döner. Logonuzun rengini tersine çevirin, aynı logonun karanlık veya parlak bir versiyonunu sabit bir başlık üzerine eklemek istiyorsanız, bu çözümü beğenebilirsiniz. Ters CSS özelliğini kullanarak, logonuzun rengini birkaç CSS hattı ile tersine çevirebilirsiniz. Örneğin, logonuz siyahsa, logonun rengini çevirmek beyaza değiştirecektir. Ve eğer logo beyazsa, kararır. Bu stili logonuza eklemek için tema ayarını aç> ek CSS ekleyin ve aşağıdaki CSS’yi ekleyin (daha önce eklenen CSS’yi sildiğinizden veya yorumladığınızdan emin olun):/**************** *********** ************** Sabit başlıkta logo rengini ters çevirin ****************************
.et-fixed-başlık #logo {
-Webkit-Filter: Invert (%100);
Filtre: ters (%100);
}
Sonuçlara bakın. Bu, beyaz bir versiyona dönüşen siyah bir logo.
Geçiş efekti ekleyin Logonuzu başlıktaki değiştirirken, logonuzu sabit bir başlıktaki değiştirmek için neden başka yolları (daha güçlü) tartışacağımı merak ediyor olabilirsiniz. Bunun ana nedeni, sabit bir başlığa “geçiş” yaparken logoya serin bir geçiş efekti ekleyebilmemizdir. Bunu yapmak için, düzenleme için birbirimize ek olarak her iki logo görüntüsüne de ihtiyacımız var.
Yeni logonuzu başlayıcıya ekleyin. FTP istemcileri (FileZilla gibi) kullanarak, divi tema dosyası kökünüzü açın ve header.php dosyasının bir kopyasını oluşturun.
Header.php dosyasının bir kopyasını alt temanızın kök klasörüne yapıştırın. Ardından, istediğiniz metin düzenleyicisini kullanın, header.php dosyasını açın. “Logo_Container” sınıfı ile div’e sarılmış logo görüntülerini depolayan bağlantılar için HTML kodunu bulun. <a href=" “id =” logo “veri-yükseklik-yüzeyde =” ” /> Başlığınızdaki diğer görüntüleri görüntülemek için benzer kod parçaları ekleyeceğiz. Aşağıdaki kodu doğrudan altına kopyalayıp yapıştırın. <a href = "<? php echo esc_url (home_url ('/'));
<div class = "yeni logo görüntü url ekle" alt = "” id = “logo” class = “ikinci-logo” veri-yükseklik-yüzey = “< ? php echo esc_attr (ET_GET_OPtion ('logo_height', '54');
Not Bu, iki farklılıkla orijinal kodun en son kopyasıdır. İlk olarak, eklemeniz gereken yeni bir görüntü URL kaynağı var. İkincisi, “İkinci Logo” adlı bir sınıf.
WordPress kontrol panelinizden medya kitaplığınızı açın ve eklemek istediğiniz yeni logo resmi için bir URL alın.
Ardından header.php dosyanıza dönün. Yeni oluşturduğunuz kod görüntülerini bulun ve “Yeni Logo Görüntü URL’si ekle” yazan metni gerçek görüntü URL ile değiştirin.
Header.php dosyanızı kaydedin. Artık sitenizde yan yana görüntülenecek iki logo var. Muhtemelen bunu böyle bırakmak istemezsiniz, bu yüzden geçiş etkimizi oluşturmak için gereken özel CSS’yi ekleyelim. Logo üstbilgideki logo anahtarladığında, Ayarlama Temasını> Ek CSS’yi açtığınızda ve bu yazının önceki bölümünden (varsa) silin (veya yorum verin) kodunu ekleyin. Ardından aşağıdaki özel CSS’yi ekleyin: @Media All and (min-width: 980px) {/*************************************** ********************************************** ********************************************** ********************************************** **
Birincil ve sabit NAV için logoları gösterin, gizle ve geçiş; Bunun çalışması için header.php dosyasında ikinci logo olmalı **************************** #logo {
Opaklık: 1;
Ekran: miras;
Marj: 0 0 0 0;
-Webkit-Transition: Tüm .4s kolaylık;
-Moz-Transition: Tüm .4s kolaylık;
Geçiş: Tüm .4s kolaylık;
}
#logo.second-logo {
Opaklık: 0;
Marj: 0 0 -200px -130px;
-Webkit-Transition: Tüm .4s kolaylık;
-Moz-Transition: Tüm .4s kolaylık;
Geçiş: Tüm .4s kolaylık;
}
.et-fixed-başlık #logo {
Opaklık: 0;
Marj: -200px 0px 0 0px;
-Webkit-Transition: Tüm .4s kolaylık;
-Moz-Transition: Tüm .4s kolaylık;
Geçiş: Tüm .4s kolaylık;
}
.et-Fixed-Header #logo.second-logo {
Opaklık: 1;
Marj: 0 0 0 -90px! Önemli;
-Webkit-Transition: Tüm .4s kolaylık;
-Moz-Transition: Tüm .4s kolaylık;
Geçiş: Tüm .4s kolaylık;
}
/*********************************
Hides taşma kapağında taşma, böylece logo geçişte dış bölge başlığı göstermez
****************************
#oyun başlığı {
Taşma: gizli;
}
}
Kodun ne yaptığını söylemek için CSS kodu hakkında yorum yaptım. Kısacası, CSS başlığın dışına hareket ettirirken her logonun opaklığını azaltır ve artırır. Böylece, başlığınıza giderken logonuz için oldukça harika bir geçiş efekti var. Merkezi başlık logonuzun konumunu başlığınız için sola değiştirin, başlığınızı görüntülemek için ortalanmış bir başlığın stilini seviyorsanız, başlığınızdaki logonun konumunu kontrol etmek isteyebilirsiniz. Benim için başlığımda varsayılan gölgelik stiline (düz bir sol logo ile) sahip olmayı tercih ederim. Bunun ana nedeni, navigasyonumun üstünde bir logomun olması, sayfayı görmek için kaydırırken başlığı hala yüksek yapma eğilimindedir. Orta logodan sol ve sol logoya geçmek için, tema ayarındaki ek CSS kutusuna aşağıdaki özel CSS’yi ekleyebilirsiniz. Önce logoyu hızlı ve kolay bir şekilde değiştirmek için kodu ekleyin: /************************************** (Hızlı ve kolay yol)
****************************
.et-fixed-başlık #logo {
İçerik: URL (yeni logo görüntüsü URL’yi buraya ekleyin);
}
Logo görüntü URL’nizi eklemeyi unutmayın. Ardından, logonun yerleşimini ayarlamak için aşağıdakileri ekleyin: @media All and (min-width: 980px) {
/*********************************
Sabit başlık etkin olduğunda ortalama başlık stilini varsayılan düzene değiştiren merkezlenmiş logoyu değiştirin
****************************
.et_header_style_cemened başlık#play-header.et-fixed-header .logo_container {
Şamandıra: sol;
Genişlik:%20;
}
.et_header_style_cemened #play-header.et-fixed-header div #et-top-navigation {
Genişlik:%80;
Sağa çık;
Yükseklik: 70px; hat yüksekliği: 70px;
Metin-align: doğru;
}
.et sabit başlık #üst-menu-nav {
Şamandıra: Yok! Önemli;
}
.et_fixed_nav #et-top-navigation {
-Webkit-Transition: Yok! Önemli;
-Moz-Transition: Yok! Önemli;
Geçiş: Yok! Önemli;
}
}
Not: Bu yazıdan önceki CSS’yi çatışacak olandan sildiğinizden emin olun. İşte burada. Sonuçlara bakın.
Kapanışta iyi bir logo ile gurur duymamak zordur. Bu nedenle, gereksinimleri karşılamayan veya daha da kötüsü, logonuzu başlığınıza saklamaktan memnun olmayın. Müşteriniz tarafından değer verilecek düzgün bir geçiş ile özel bir sürüme geçin. Varsayılan olarak gelecek olan Divi, cep telefonuna sabit bir başlık içermez. Ama çok basit bir tane ekleyin. Bir sonraki yazımda, cep telefonunda farklı bir logoya sahip özel bir başlık nasıl ekleyeceğinizi göstereceğim. İşte biraz sızıntı.
Bunu bekleyemem. Yorumlarınızı aşağıya göndermeyi unutmayın. Ayarlar ve çocuğunuzun tema dosyaları ile ilgili sorunlarınız varsa, lütfen destek ekibimizle iletişime geçin. Kızarmış ekmek.
