Divi Nation Kısa: 3 Süper Basit Divi Başlık Modifikasyonu
Cuma ve burada Divi Nation’ın yeni bölümü anlamına gelen zarif temalar blogunda. Bu hafta Divi Nation kısa ve önceki bölümde vaat edildiği gibi, Divi’yi üç hızlı ipucunu bir araya getirdim. Bu kez, birkaç kod parçasını kullanarak Divi’nin başlığı ve navigasyonu üzerinde bazı basit ve pürüzsüz değişiklikler yaptık. Aşağıdaki bölümde izlemeniz gereken her şeyi bulacaksınız. Zevk almak! Divi Nation Kısa: 3 Süper Basit Divi Başlık Modifikasyonu [PowerPress] Bu Divi Nation bölümünde Divi başlığında hızlı ve yürütülmesi kolay üç değişiklik gösteriyorum. Her divi hızlı ucunu takip etmek için aşağıdaki bölümde ihtiyacınız olan her şeyi bulacaksınız. İpucu kendisi veya yeni bir Divi hızlı ipucu için bir sorunuz varsa, lütfen aşağıdaki yorumlar bölümünde bana yorum bırakın.
YouTube kanalımıza abone olun Tüm abonelik seçenekleri:
Youtube
Facebook
iTunes
RSS aracılığıyla abone olun
Logo görüntüleri yerine divi sitenizin metin başlığını nasıl görüntüleyebilirsiniz
WP-Content> Tema> Divi’ye gidin. Durgun Dosya Header.php. Divi çocuk temanıza yinelenen sürükleyin. Çocuğunuzun temasındaki dosya adının yalnızca “header.php” okunduğundan emin olun. Kaydet ve WP yöneticinize geri dönün. Şimdi, görünüm> editöre gittiğinizde header.php dosyalarını orada bulacaksınız. Adım 2: Header.php dosyasında bir kod satırı değiştirin çocuğunuzun teması. Bu bölümü çok kolay hale getirmek için yapabileceğiniz şey, “Logo” kodunu blog gönderisinden kopyalamaktır, ardından editördeki satırı bulmak için+F komutunu kullanın. İmg src = “<? Php echo esc_attr ($ logo);
Bu kod satırı, logo görüntüsünü sitenizin adıyla değiştirir ve size bazı stil seçenekleri sunar. Dosyadaki kuvveti ayarlayarak yazı tipi, renk, yazı tipi boyutu ve yazı tipi ağırlığı türünü ayarlayabilirsiniz. Birkaç yazı tipi seçeneği istiyorsanız, W3Schools’a bir blog yayınına, açık sans kullandığım gibi diğer birkaç güvenli web yazı tipinin nasıl bir listesini nasıl yapacağınızı gösteren bir bağlantı ekledim. Yazı tipi seçeneği: http://www.w3schools.com/cssref/css_websafe_fonts.asp
İşiniz bittiğinde, yeni oluşturduğunuz düzenleme sonuçlarını başlayıcıya kaydedin.PHP Çocuk temanızı dosyaya koyun ve Sitenizin önündeki sonuçları görün. Gördüğünüz gibi, artık logo görüntüleri yerine sitenizin başlığını görüntülersiniz. Yeterince inanılmaz, değil mi?! Bu, logosu olmayan veya istemeyen herkes için iyi bir küçük numara. İkinci Divi başlık değişikliğimize dönelim. Bir sonraki bölüm için “Slayt-Over” efekti Slayt Menü seçeneğine nasıl eklenir, “Slayt-Over” menü efekti olarak adlandırdığım şeyi elde ederiz. Bu pürüzsüz, bu yüzden değişiklik yapmadan önce, yeni sürgülü menü seçeneğinin oyunculuk gibi görünmesini istediğinizi göstereyim.
Gördüğünüz gibi, Hamburger menü simgesine tıkladığımda, menü sağdan kayar ve tüm sayfa kabı yan tarafa itildi. Yapacağımız değişiklikler, menünün yana itmek yerine sayfa kapsayıcısında kaymasıyla sonuçlanacaktır. Size tekrar “slayt” göstereyim. Tamam, şimdi değişikliklerimizi yapalım ve neler olduğunu görelim. Bunun için CSS görüntülerini kopyalayın. Özel CSS panelinize gidin ve oraya yapıştırın. .et_pb_slide_menu_active #page-container, .et_pb_slide_menu_active #play-header {
Sol: 0! Önemli;}
.et_pb_slide_menu_active #et-top-navigation {
Marj-sağ: 320px;
}
Şimdi Değiştir’i Kaydet’i tıklayın ve yenilemek için ön ucuna dönün ve farkı görün.
Şimdi görebileceğiniz gibi, yan sayfa kabını itmek yerine, menü sayfa kabına kayar, itme yerine üst üste gelir. Bu pürüzsüz, ancak serin bir varyasyon. Tamam, devam et! Divi açılır menü okuna 360 derece animasyonlu bir efekt 360 derece nasıl eklenir Son değişikliklerimiz için, açılır menü okunuz için eğlenceli olan 360 derece dönme animasyon efekti ekleyeceğiz. Bu etki üç klasik divi menü stilinde çalışacaktır: varsayılan, merkez ve orta sırada. Bir kez daha, bu bölüme eşlik eden blog girişinden uygun CSS görüntülerini kopyalamak ve eklemek isteyeceksiniz.
#Top-Menu Li> A: Sonra {
-Webkit-Transition: Tüm 0.4s kolaylık; -Moz-Transition: Tüm 0.4s kolaylıkta;
Geçiş: Tüm 0.4s kolaylık;
}
#Top-Menu Li: Hover> A: Sonra {
-Ms-transform: rotate (360deg);
-Webkit-Transform: Rotate (360deg);
Dönüşüm: döndür (360deg);
}
Kopyaladıktan sonra, Divi> tema seçeneğine dönün ve özel CSS paneline gidin. Oraya yapıştırın ve değişikliği kaydet’i tıklayın. Şimdi, sitenizin ön ucuna döndüğünüzde ve yenilendiğinizde, imleci kaydırma menüsüne yönlendirdiğinizde, ok 360 derece döneceğini göreceksiniz.
Yine, bu, sitenizin küçük bir kısmı için pürüzsüz olan küçük bir etkidir, ancak bunun gibi hoş bir küçük mikro etkileşim, kullanıcı deneyimini geliştirmenin iyi bir yoludur. Kısa ipucu divi Bundan sonra ne görmek istiyorsun? Bu Divi hızlı ipuçları için hepsi bu. Önümüzdeki bölümde tartışmak istediğiniz özel bir şey var mı? Eğer öyleyse, yorumları aşağıda bırakın ve kuyruğa ekleyeceğim!
