Divi Nation Short: 3 Süper Basit Divi Başlık Değişiklikleri

Divi Nation'ın yeni bir bölümü anlamına gelen Cuma günü ve burada Elegant Themes blogunda. Bu hafta Divi Nation Short ve önceki bölümlerde söz verdiğim gibi, üç Divi Hızlı İpucunu bir arada topladım. Bu sefer Divi'nin başlığında ve navigasyonunda birkaç kod parçacığı kullanarak bazı basit, ince değişiklikler yapıyoruz.

Takip etmeniz gereken her şeyi aşağıdaki bölümlerde bulacaksınız. Eğlence!

Divi Nation Short: 3 Süper Basit Divi Başlık Değişiklikleri

[güç basımı]

Divi Nation'ın bu bölümünde size hızlı ve uygulaması kolay üç Divi başlık değişikliği gösteriyorum. Her Divi Hızlı İpucu ile birlikte aşağıdaki bölümlerde ihtiyacınız olan her şeyi bulacaksınız. İpuçları hakkında herhangi bir sorunuz veya yeni Divi Hızlı İpuçları talepleriniz varsa, lütfen aşağıdaki yorumlar bölümünde bana bir yorum bırakın.

Youtube Kanalımıza Abone Olun

Tüm Abonelik Seçenekleri:

• Youtube
• Facebook
• iTunes
• RSS ile abone olun

Logo Resmi Yerine Divi Site Başlığı Metni Nasıl Görüntülenir

İlk olarak, Divi logo resmi yerine sitenizin başlık metnini görüntüleyin. Bu hızlı ipucunun iki adımı var.

Adım 1: Header.php dosyanızın alt temanızda olduğundan emin olun.

Alt temanızda bu dosyanın olup olmadığından emin değilseniz, Görünüm > Düzenleyici'ye gidip Header.php dosyasını arayarak kontrol edebilirsiniz.

Eğer oradaysa, ikinci adıma hazırsınız.

Orada değilse, işte yapacaklarınız:

FTP yoluyla sitenizin dosya ağacına erişin. Gördüğünüz gibi, Transmit adlı bir uygulama kullanıyorum, ancak sadece hosts web ftp'nizi de kullanabilirsiniz. Orada epanelinizde bir bağlantı olmalı.

wp-content > theme > Divi'ye gidin. Header.php dosyasını çoğaltın. Kopyayı Divi Child temanıza sürükleyin. Alt temanızdaki dosya adının basitçe “header.php” olarak okunduğundan emin olun.

Bunu kaydedin ve WP Yöneticinize geri dönün.

Şimdi, Görünüm > Düzenleyici'ye gittiğinizde, orada header.php dosyasını bulmalısınız.

Adım 2: Alt temanızın header.php dosyasındaki tek bir kod satırını değiştirin.

Bu bölümü gerçekten kolaylaştırmak için yapabileceğiniz şey, blog gönderisindeki "logo" kod satırını kopyalamak ve ardından bu satırı düzenleyicide bulmak için +f komutunu kullanmaktır.

img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />

Bulduktan sonra, "ad" kod satırıyla değiştirin.

<span style="font-family: 'Open Sans', Arial, sans-serif !important; color: #505050; font-size: 20px; font-weight: bold;"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>

Bu kod satırı, logo görüntüsünü site adınızla değiştirir ve size birkaç stil seçeneği de sunar. içindeki stilleri ayarlayarak yazı tipi ailesini, rengini, yazı tipi boyutunu ve yazı tipi ağırlığını ayarlayabilirsiniz .

Birkaç yazı tipi seçeneği daha istiyorsanız, blog gönderisine w3schools'a giden bir bağlantı ekledim, bu da Open Sans'ı kullandığım gibi web için güvenli birkaç yazı tipini nasıl listeleyeceğinizi gösterir. Yazı tipi seçenekleri: http://www.w3schools.com/cssref/css_websafe_fonts.asp

İşiniz bittiğinde, alt temanızın header.php dosyasında yaptığınız düzenlemeyi kaydedin ve sitenizin ön ucundaki sonucu kontrol edin.

Gördüğünüz gibi, artık bir logo resmi yerine site başlığınızı gösteriyorsunuz.

Oldukça harika, değil mi? Bu, logosu olmayan veya logosu olmayan herkes için harika bir küçük numara.

İkinci Divi başlık değişikliğimize geçelim.

Divi Slide-In Menü Seçeneğine “Slide-Over” Efekti Nasıl Eklenir

Sırada, “kaydırmalı” menü efekti dediğim şeye sahibiz. Bu inceliklidir, bu yüzden herhangi bir değişiklik yapmadan önce, yeni sürgülü menü seçeneğinin hareket halinde görünmesini istediğinizi göstermeme izin verin.

Gördüğünüz gibi menünün hamburger simgesine tıkladığımda menü sağdan içeri kayıyor ve tüm sayfa kabı yana itiliyor.

Yapacağımız değişiklik, menünün bir kenara itmek yerine sayfa kapsayıcısının üzerinde kaymasına neden olacak.

Size "slayt" ı tekrar göstereyim.

Tamam, şimdi değişikliğimizi yapalım ve ne olacağını görelim.

Bunun için ekteki blog gönderisinden CSS pasajını kopyalayın ve ardından Divi > Tema Seçenekleri'ne gidin. Özel css panelinize ilerleyin ve oraya yapıştırın.

.et_pb_slide_menu_active #page-container, .et_pb_slide_menu_active #main-header { 
left: 0!important;
}
.et_pb_slide_menu_active #et-top-navigation {
margin-right: 320px;
}

Şimdi değişiklikleri kaydet'i tıklayın ve yenilemek ve farkı görmek için ön uca geri dönün.

Şimdi görebileceğiniz gibi, sayfa kabını kenara itmek yerine, menü sayfa kabının üstüne kayar, itmek yerine üst üste biner.

İnce, ama yine de harika bir varyasyon.

Tamam, devam et!

Divi'nin Açılır Menü Oklarına 360 Derece Animasyon Efekti Nasıl Eklenir

Son değişikliğimiz için, açılır menü oklarınıza eğlenceli, küçük bir 360 derece döndürme animasyon efekti ekleyeceğiz. Bu efekt üç klasik Divi menü stilinde çalışır: varsayılan, ortalanmış ve ortalanmış satır içi.

Yine, bu bölüme eşlik eden blog gönderisinden uygun CSS pasajını kopyalayıp yapıştırmak isteyeceksiniz.

#top-menu li > a:after {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#top-menu li:hover > a:after {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

Kopyaladıktan sonra Divi > Tema Seçenekleri'ne geri dönün ve özel css paneline gidin. Oraya yapıştırın ve değişiklikleri kaydet'i tıklayın.

Şimdi, sitenizin ön ucuna geri döndüğünüzde ve yenilediğinizde, aşağı kaydırma menünüzün üzerine geldiğinizde okun 360 derecelik bir dönüş yaptığını fark edeceksiniz.

Yine, bu, sitenizin küçük bir kısmı için küçük bir etkidir, ancak bunun gibi hoş küçük mikro etkileşimler, kullanıcı deneyimini iyileştirmenin harika bir yoludur.

Sırada Hangi Divi Hızlı İpucunu Görmek İstersiniz?

Hepsi bu Divi Hızlı İpuçları turu için. Gelecekteki bir bölümde özellikle anlatmamı istediğiniz bir şey var mı? Eğer öyleyse, aşağıdaki yorumlarda bırakın, ben de sıraya ekleyeceğim!