WordPress Logo Boyutunuzu Nasıl Değiştirirsiniz (Herhangi Bir Temayla Çalışır)


Son zamanlarda okuyucularımızdan biri, WordPress'te logo boyutunuzu değiştirmenin mümkün olup olmadığını sordu?

Web sitenizin logosu markanızın önemli bir parçasıdır. Kullandığınız WordPress temasına bağlı olarak, bazen logo boyutunuzu daha büyük veya daha küçük yapmak için nasıl değiştireceğiniz net değildir.

Bu yazıda size adım adım WordPress logo boyutunu nasıl kolayca değiştirebileceğinizi göstereceğiz.

How to change your WordPress logo size (works with any theme)

WordPress'te Logonun Boyutunu Neden Değiştirmelisiniz?

Logonuzu WordPress'e yüklediğinizde, her zaman doğru boyutta olmayabilir.

Çok küçük bir logo göze çarpmaz. Bununla birlikte, çok büyük bir logo, web sitenizin tasarımını olumsuz yönde etkileyebilir.

Özel bir logo tasarımına yatırım yaptıysanız, logonuzun web sitenizin başlığında doğru boyutta göründüğünden emin olmak istersiniz.

Hâlâ logo tasarım sürecinde olanlar için en iyi ücretsiz logo oluşturucu seçimlerimize bakın.

Bununla birlikte, size WordPress'te logo boyutunu değiştirmek için kullanabileceğiniz birkaç farklı yol göstereceğiz.

Seçtiğiniz yöntem, kullandığınız WordPress temasına ve CSS kodunu düzenleme konusundaki konfor seviyenize bağlı olacaktır.

  • WordPress logo boyutunu WordPress özelleştirici ile değiştirin
  • CSS kodunu düzenleyerek WordPress logo boyutunu değiştirin
  • CSS kodunu düzenlemeden WordPress logo boyutunu değiştirin

Yöntem 1. WordPress Logo Boyutunu WordPress Özelleştirici ile Değiştirin

WordPress'te logo boyutunu değiştirmenin en basit ve en kolay yolu, tema özelleştiriciyi kullanmaktır. Ancak bu yöntem yalnızca WordPress temanız destekliyorsa çalışır.

Divi, Astra, Ultra ve diğerleri gibi birçok popüler temada yerleşik bir logo boyutu değiştirme aracı bulunur.

Logonuzu WordPress'e yüklediğinizde, bu temalar, genişliği ve yüksekliği ayarlamak için kullanabileceğiniz basit bir kaydırıcı ile logoyu ayarlamayı kolaylaştırır.

Not: Logo boyutunuz yalnızca yüklediğiniz resim kadar büyük olacaktır, bu nedenle amacınız onu büyütmekse daha büyük bir logo resmi yüklediğinizden emin olmak istersiniz.

Eğiticinin iyiliği için Divi, Astra ve Ultra temalarında logonuzu nasıl değiştireceğinizi göstereceğiz, ancak yöntem çoğu popüler WordPress temaları için benzerdir. Temanızda bu seçenek yoksa, bu eğitimin 2. veya 3. yöntemini kullanmanız gerekir.

Divi WordPress Temasında WordPress Logo Boyutunu Değiştirin

İlk önce Divi »Tema Özelleştirici'ye gidin ve 'Başlık ve Gezinme' menü seçeneğine tıklayın.

Select Divi theme customizer

Bundan sonra, 'Birincil Menü Çubuğu' açılır seçeneğini tıklayın.

Burada logonuzun boyutunu değiştirebilirsiniz.

Select Divi primary menu bar

İlk olarak, 'Menü Yüksekliği' ayarını yapmanız gerekir. Bu, tüm gezinme menünüzün yüksekliğini kontrol eder ve logonuzu ne kadar büyük yapabileceğinizi belirler.

Bundan sonra, toplam menü yüksekliğinin bir yüzdesi olan 'Logo Maks Yüksekliği' ayarını değiştirebilirsiniz.

Adjust logo height

WordPress blogunuz için mükemmel logo boyutunu bulana kadar 'Logo Maks Yüksekliği' kaydırıcısını yukarı ve aşağı ayarlayabilirsiniz.

Ekrandan çıkmadan önce değişikliklerinizi kaydetmek için 'Yayınla' düğmesini tıkladığınızdan emin olun.

Astra WordPress Temasında WordPress Logo Boyutunu Değiştirin

Yapmanız gereken ilk şey, Görünüm » Özelleştir'e gitmek ve ardından 'Başlık' menü seçeneğini tıklamaktır.

Astra theme customize

Bundan sonra, 'Site Kimliği' menü seçeneğini tıklayın.

Burada logonuzun boyutunu kolayca ayarlayabilirsiniz.

Click site identity in Astra

Tek yapmanız gereken 'Logo Genişliği' kaydırıcısını sola veya sağa hareket ettirmek.

Kaydırıcıyı hareket ettirdikçe, logo boyutundaki değişiklikleri gerçek zamanlı olarak otomatik olarak görebilirsiniz.

Astra logo width slider

Logonuzun boyutundan memnun kaldığınızda, sayfadan çıkmadan önce 'Yayınla'yı tıkladığınızdan emin olun.

Ultra WordPress Temasında WordPress Logo Boyutunu Değiştirin

Ultra temasında logo boyutunu özelleştirmek için Görünüm » Özelleştir'e gidin ve 'Site Logosu ve Etiket Satırı' gezinme öğesini tıklayın.

Ultra click site logo and tagline

Bundan sonra 'Site Logosu' açılır menüsünü tıklayın.

Ardından, görünen 'Logo Resmi' radyo düğmesini seçin.

Ultra click site logo button

Artık logo resminizin sağındaki kutulara yeni boyutlar girerek logonun boyutunu değiştirebilirsiniz. Resmin orijinal boyutuna göre ölçeklenmesini istiyorsanız, tek bir kutuya yalnızca yeni logo boyutlarını girin.

Soldaki kutu ile genişliği, sağdaki kutu ile yüksekliği değiştirebilirsiniz.

Change logo height and width

Yeni boyutları girdikçe, logonuzun boyutunun gerçek zamanlı olarak değiştiğini göreceksiniz.

Logonuzun boyutunu özelleştirmeyi tamamladığınızda, 'Yayınla' düğmesini tıkladığınızdan emin olun.

Temanız yukarıda vurgulanmıyorsa, WordPress özelleştiriciyi kullanarak logonuzun boyutunu özelleştirme şansınız hala var.

Basitçe Görünüm » Kullandığınız temayı özelleştirin ve logonuz veya başlığınız için hangi özelleştirme seçeneklerinin mevcut olduğunu görün.

Yöntem 2. CSS'yi Düzenleyerek WordPress Logo Boyutunu Değiştirin

WordPress temanız, WordPress tema özelleştirici kullanılarak logo boyutunun değiştirilmesini desteklemiyorsa, özel CSS ekleyerek boyutu değiştirebilirsiniz.

Yapmanız gereken ilk şey, web sitenizin ana sayfasına gitmek.

Ardından, sayfada herhangi bir yere sağ tıklayın ve 'İncele' seçeneğini seçin. Bu, sayfanın tüm kodunu gösteren bir İnceleme menüsü getirecektir.

Right click inspect

Bundan sonra, fare işaretçisine benzeyen 'Bir öğe seç' simgesini tıklamanız gerekir.

Bu, web sitenizin logo öğesini seçmenize ve kodu görüntülemenize olanak tanır.

Click select an element icon

Ardından, CSS sınıfı açılana kadar web sitenizin logosunun üzerine gelin. Aşağıdaki resme benzer görünecektir.

WordPress logonuzun boyutunu özelleştirmek için bu CSS sınıfını kullanacaksınız. Bu nedenle, bunu Not Defteri gibi bir metin düzenleyicide yazın.

Logo CSS class

Artık WordPress yönetici kontrol panelinize geri dönebilir ve Görünüm » Özelleştir seçeneğine gidebilirsiniz. 'Ek CSS' menü seçeneğini tıklamanız gerekiyor.

Bu, özel CSS kodu ekleyebileceğiniz bir açılır menü açacaktır.

Select additional CSS

Daha önce bulduğunuz CSS sınıfını eklemeniz ve yeni görüntü boyutlarını belirtmeniz yeterlidir. Aşağıdaki CSS kodunu örnek olarak kullanabilirsiniz.

img.custom-logo {
     max-height: 100px !important;
}

Yukarıdaki img.custom-logo CSS sınıfını, temanızın kullandığı CSS sınıfıyla değiştirmeniz gerekir.

Ayrıca max-height istediğiniz boyuta değiştirebilirsiniz.

WordPress özelleştiricisinin içinde nasıl göründüğü aşağıda açıklanmıştır.

Additional CSS WordPress customizer

Değişikliklerinizi yaptıktan sonra, değişikliklerinizi yayınlamak için 'Yayınla' düğmesini tıklamanız yeterlidir.

Yöntem 3. WordPress Logo Boyutunu CSS'yi Düzenlemeden Değiştirin

Tema dosyalarını düzenlemekte veya özel CSS eklemekte rahat değilseniz, bu yöntem tam size göre.

Bir WordPress stil eklentisi kullanarak, sitenizde bir sürükle ve bırak sayfa oluşturucu kullanmaya benzer görsel değişiklikler yapabilirsiniz.

CSS Hero kullanmanızı öneririz. WordPress sitenizdeki hemen hemen her CSS stilini, tek bir CSS kodu satırı yazmadan düzenlemenize olanak tanıyan bir şekillendirici eklentidir.

Fırsat: WPBeginner okuyucuları, CSS Hero kupon kodumuz aracılığıyla %34 indirim alabilir.

Yapmanız gereken ilk şey eklentiyi kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Aktivasyon üzerine, eklentiyi etkinleştirmek için 'Ürün Aktivasyonuna Geç' düğmesine tıklamanız gerekir. Yüklü eklentiler listenizin hemen üstünde bulunur.

Activate CSS Hero plugin

Bu sizi kullanıcı adınızı ve şifrenizi girebileceğiniz bir ekrana getirecektir. Ekrandaki talimatları uygulamanız yeterlidir; hesabınız doğrulandıktan sonra sitenize yönlendirileceksiniz.

Bundan sonra, WordPress yönetici araç çubuğunuzun üst kısmındaki 'CSS Hero ile Özelleştir' düğmesini tıklayın.

Customize with CSS Hero

Bu, sizi üzerinde çalışan CSS Hero ile web sitenize götürecektir. CSS Hero, WYSIWYG (Ne Görüyorsanız Onu Alırsınız) düzenleyicisi kullanır.

Sayfanızın herhangi bir öğesini tıkladığınızda, özelleştirmeler yapmak için sol tarafta bir araç çubuğu açılır.

CSS Hero preview

Ardından, sayfanın üst kısmındaki WordPress logonuza tıklayın.

Bundan sonra, 'Gelişmiş Donanımları Göster' bağlantısını tıklayın.

Click show advanced props

Bu size daha da fazla CSS özelleştirme seçeneği sunar.

Ardından, 'Ölçüler' kutusunu bulun. Burada 'Max Width' ve 'Max Height' adlı seçenekleri bulacaksınız.

Bunları tercih ettiğiniz görüntü boyutuna değiştirmek istiyorsunuz. Resmin aynı boyutları korumasını istiyorsanız, yalnızca yüksekliği veya genişliği değiştirin.

Define logo width and height

Yaptığınız değişiklikler sayfanızda otomatik olarak görünecektir.

Logonuzun boyutunu değiştirmeyi bitirdikten sonra, değişikliklerinizi canlı hale getirmek için 'Kaydet ve Yayınla'yı tıklamanız gerekir.

Bu makalenin WordPress logo boyutunuzu değiştirmenize yardımcı olacağını umuyoruz. Ayrıca, küçük işletmeler için en iyi canlı sohbet yazılımı için uzman seçimlerimizi ve işletme web siteleri için olması gereken WordPress eklentileri listemizi görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir