Logonuzu Divi'de Sabit Bir Başlıkta Değiştirme

Logonuzun farklı renk ve boyutlarda farklı versiyonlarını oluşturmak her zaman harika bir fikirdir. Örneğin, farklı arka plan renklerinde harika görünmesi için muhtemelen logonuzun koyu ve açık bir versiyonuna sahip olmalısınız. Ve web sitenizin bu sıkışık alanları için logonun daha küçük (daha az dikey ve daha yatay) bir versiyonuna sahip olmak. Logonuzun farklı bir versiyonunu kullanmak için en iyi yerlerden biri, sabit (veya yapışkan) başlığınızdır.

Çoğu durumda, sabit başlığınızın ana başlığınızdan farklı bir stile ihtiyacı olacaktır. Aynı logoyu kullanırsanız, sabit başlığınızı nasıl şekillendireceğiniz konusunda sınırlısınız. Özel bir logoya sahip olmanın kullanışlı olduğu yer burasıdır. Sabit başlık için özel olarak özelleştirilmiş ayrı bir logo ile istediğiniz gibi şekillendirebilirsiniz. Bu size sitenizin tasarımı üzerinde daha fazla kontrol sağlar.

Bu yazıda size nasıl yapılacağını göstereceğim:

1. Sabit başlığınız etkinken logonuzu farklı bir logoyla değiştirin. (Bu, tek bir CSS satırı ile yapılabilir)
2. Sabit başlığınızdaki logonuzun rengini ters çevirin.
3. Sabit başlıkta logonuzu değiştirirken harika bir geçiş efekti ekleyin.
4. Ortalanmış başlık logonuzu değiştirin ve sabit başlığınızdaki varsayılan (sola hizalı) düzene taşıyın.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde neleri başaracağımıza dair küçük bir bakış.

Basit bir logo anahtarı şöyle görünür.

İşte geçiş efektli logo anahtarı.

İşte ortalanmış başlık stilinden logo değişen konumlar.

Kurulum

Başka bir şey yapmadan önce aşağıdakileri tamamladığınızdan emin olun:

1. Divi'nin en son sürümünü yükleyin.
2. Aktif bir Divi Çocuk Teması uygulayın. Bir çocuk teması kurma konusunda yardıma ihtiyacınız varsa, bu yazıda ele alınmıştır. Ek yardıma ihtiyacınız varsa. Lütfen destek ekibimizle iletişime geçin.
3. 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.

   

4. Menü öğeleriyle birincil menünüzü ayarlayın.

Bu adımları tamamladıktan sonra başlamaya hazırsınız.

Logonuzu Divi'de Sabit Bir Başlıkta Değiştirme

Youtube Kanalımıza Abone Olun

CSS Kullanarak Sabit Başlığınızdaki Logoyu Değiştirme

Özel CSS'mize geçmeden önce, tema özelleştirici içinde menü ayarlarımızı yapalım. 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.

Ardından Tema Özelleştirici'deki Başlık ve Gezinme ayarlarına geri dönün. 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

Geri kalan ayarlarınızı sitenizin tasarımına uyacak şekilde ekleyebilirsiniz. Menü ve logo yüksekliklerinin ihtiyaçlarınıza göre ayarlanması gerekebilir. Ancak, boyutlandırmanın doğru olması için geçiş efekti eklemek istiyorsanız bu ayarları korumanızı öneririm. Her zaman geri gelebilir ve daha sonra değiştirebilirsiniz.

Sabit Başlıkta Logoyu Değiştirmek için CSS Parçacığı Ekle

Sabit başlıkta logo resminizi bir başkasıyla değiştirmenin en basit yollarından biri, "içerik" CSS özelliğini kullanmaktır. CSS'ye aşina iseniz, normalde bu, bir :before veya :after sözde öğesine içerik eklerken kullanılan şeydir. Bu durumda, mevcut logo resmini değiştirmek için yeni içerik (logo resminiz) eklemek için kullanacağız.

Bunu yapmak için Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdaki CSS'yi ekleyin.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Şimdi “YENİ LOGO GÖRÜNTÜSÜ EKLE” yazan metni gerçek logo resminizle değiştirin.

URL'yi almak için WordPress Dashboard'dan medya kitaplığınıza gidin ve eklemek istediğiniz resme tıklayın. Açılan ekranın sağ üst köşesinde URL'yi bulabilirsiniz.

Bu kadar. Bu basit çözüm, logonuzu yalnızca siz sayfada gezinirken sabit başlık etkin olduğunda yenisiyle değiştirecektir. Sayfanın en üstüne geri döndüğünüzde varsayılan logo geri dönecektir.

Logonuzun Rengini Tersine Çevirme

Sabit başlıkta aynı logonun yalnızca koyu veya açık bir versiyonunu eklemek istiyorsanız, bu çözümü beğenebilirsiniz.

Invert CSS özelliğini kullanarak, birkaç satırlık CSS ile logonuzun rengini tersine çevirebilirsiniz. Örneğin, logonuz siyahsa, logo rengini ters çevirmek onu beyaza çevirir. Ve logo beyazsa, siyaha dönecektir. Bu stili logonuza eklemek için Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdaki CSS'yi ekleyin (önceden eklenen CSS'yi sildiğinizden veya yorum yaptığınızdan emin olun):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Sonucu kontrol edin. Bu, beyaz bir versiyona dönüştürülen siyah bir logodur.

Logonuzu Sabit Başlıkta Değiştirirken Geçiş Efekti Ekleme

Muhtemelen logonuzu sabit bir başlıkta değiştirmenin başka (daha sağlam) bir yolunu neden ele alacağımı merak ediyorsunuzdur. Ana sebep, sabit başlığa “geçiş yaptığında” logoya havalı bir geçiş efekti ekleyebilmemizdir. Bunu yapmak için, stil için yan yana iki logo görüntüsüne ihtiyacımız var.

Header.php Dosyasına Yeni Logonuzu Eklemek

Başlığınıza başka bir logo resmi eklemek için onu header.php dosyasına eklememiz gerekiyor. Bir FTP İstemcisi (FileZilla gibi) kullanarak Divi Tema dosyalarınızın kök dizinine gidin ve header.php dosyasının bir kopyasını alın.

header.php dosyasının kopyasını alt tema klasörünüzün kök dizinine yapıştırın.

Ardından, tercih ettiğiniz metin düzenleyiciyi kullanarak header.php dosyasını açın. “logo_container” sınıfıyla div'e sarılmış logo görüntüsünü tutan bağlantının html kodunu bulun.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<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' ) ); ?>" />
</a>

Başlığınızda başka bir resim görüntülemek için benzer bir kod parçacığı ekleyeceğiz. Aşağıdaki kodu kopyalayıp doğrudan altına yapıştırın.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Bunun, üzerindeki orijinal kodun iki farkla güncellenmiş bir kopyası olduğuna dikkat edin. İlk olarak, eklemeniz gereken yeni bir resim kaynak URL'sine sahiptir. İkincisi, “ikinci logo” adlı bir sınıf.

WordPress kontrol panelinizden medya kitaplığınıza gidin ve eklemek istediğiniz yeni logo görüntüsünün url'sini alın.

Ardından header.php dosyanıza geri dönün. Az önce oluşturduğunuz kod parçacığını bulun ve "BURAYA YENİ LOGO GÖRÜNTÜ URL'SİNİ GİRİN" yazan metni gerçek görsel URL'siyle değiştirin.

Header.php dosyanızı kaydedin.

Artık sitenizde yan yana görüntülenecek iki logonuz var. Muhtemelen böyle bırakmak istemezsiniz, bu yüzden geçiş efektimizi yapmak için gerekli Özel CSS'yi ekleyelim.

Sabit Başlığınızda Logo Açıldığında Soğuk Geçiş Ekleme

Tema Özelleştirici > Ek CSS'ye gidin ve bu yazının önceki bölümündeki (varsa) kodu silin (veya yorumlayın). Ardından aşağıdaki Özel CSS'yi ekleyin:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

Kodun ne yaptığını size bildirmek için CSS kodunu yorumladım. Kısacası, CSS, logoları başlığın dışına taşırken her bir logonun opaklığını azaltıyor ve artırıyor. Böylece, sabit başlığınıza giderken logonuz için oldukça havalı bir geçiş efektine sahip olursunuz.

Sabit Başlığınız İçin Ortalanmış Başlık Logonuzun Konumunu Sola Değiştirme

Başlığınızı görüntülemek için Ortalanmış Başlık Stilini beğendiyseniz, bu logonun sabit başlığınızdaki yerini kontrol etmek isteyebilirsiniz. Benim için, sabit başlığımda varsayılan başlık stiline (logo sola hizalanmış olarak) sahip olmayı tercih ederim. Bunun ana nedeni, navigasyonumun en üstünde logonun bulunması, bir sayfayı görüntülemek için kaydırırken sabit başlığı biraz fazla uzun yapma eğiliminde olmasıdır.

Ortalanmış bir logodan sola hizalı bir logoya geçiş yapmak için Tema Özelleştirici'deki 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:

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

Logo görselinizin URL'sini eklemeyi unutmayın.

Ardından logonun yerleşimini ayarlamak için aşağıdakileri ekleyin:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Not: Bu gönderiden çakışacak önceki CSS'leri çıkardığınızdan emin olun.

Bu kadar. Sonucu kontrol edin.

Kapanışta

İyi bir logodan gurur duymamak elde değil. Bu nedenle, uygun olmayan küçük bir sürümle yetinmeyin veya daha da kötüsü, logonuzu sabit başlığınızda saklamayın. Müşterilerinizin beğeneceği yumuşak bir geçişe sahip özel bir sürüme geçiş yapın.

geliyor

Varsayılan olarak Divi, mobil cihazlarda sabit bir başlık içermez. Ama bir tane eklemek gerçekten çok basit. Bir sonraki yazımda size mobilde farklı logolu özel bir sabit başlık eklemeyi göstereceğim. İşte küçük bir bakış.

Bunu dört gözle bekliyorum.

Yorumlarınızı aşağıya yazmayı unutmayın. Alt tema dosyalarınızı kurma ve düzenlemeyle ilgili herhangi bir sorununuz varsa lütfen destek ekibimizle iletişime geçin.

Şerefe.