WordPress Block Düzenleyiciye Görüntüler Nasıl Eklenir ve Hizalanır

WordPress Block Düzenleyicisi'nde (Gutenberg) görüntü eklemek ve hizalamak görsel olarak çekici içerik oluşturmak için gereklidir. Uygun görüntü yerleştirme okunabilirliği artırır, kullanıcı deneyimini geliştirir ve SEO ve sayfa performansında önemli bir rol oynar. Bununla birlikte, birçok kullanıcı farklı cihazlarda görüntü hizalaması, konumlandırma sorunları ve yanıt verme konusunda mücadele etmektedir.

Bu kılavuz, WordPress blok düzenleyicisine görüntülerin nasıl ekleneceği ve hizalanacağına dair adım adım bir açıklama sağlar ve tüm ekran boyutlarında doğru görüntülenmelerini sağlar.

WordPress Block Düzenleyicisinde Görüntü Bloklarını Anlama

WordPress, içeriği biçimlendirmek için bloklar kullanır ve görüntü bloğu kullanılarak görüntüler eklenir. Görüntülerin manuel olarak konumlandırıldığı klasik düzenleyicinin aksine, Block Editor, özelleştirmeyi kolaylaştırmak için yerleşik hizalama seçenekleri sunar.

Görüntü bloğu ile:

• Yeni resimler yükleyin veya medya kütüphanesinden mevcut resimleri kullanın.
• Görüntüleri sol, sağ, orta, geniş genişlik veya tam genişlik hizalayın.
• SEO ve erişilebilirlik için ALT metin ekleyin.
• Doğrudan editör içine yeniden boyutlandırın, kırpın veya altyazıları ekleyin.

Bu seçeneklerin nasıl çalıştığını anlamak, içeriği etkili bir şekilde yapılandırmanıza yardımcı olur.

WordPress Block Düzenleyicisine Görüntü Nasıl Eklenir

WordPress'e bir görüntü eklemek basittir. Şu adımları izleyin:

1. Bir resim eklemek istediğiniz bir gönderi veya sayfa açın .
2. “+” (Blok ekle) düğmesini tıklayın ve resim bloğunu seçin.
3. Aşağıdaki seçeneklerden birini seçin:
   • Yükle - Bilgisayarınızdan yeni bir resim ekleyin.
   • Medya Kütüphanesi - WordPress'e zaten yüklenmiş bir resmi seçin.
   • URL'den ekle - Harici bir görüntü bağlantısı kullanın.
4. Eklendikten sonra, görüntüyü yeniden boyutlandırabilir, altyazılar ekleyebilir veya hizalamasını değiştirebilirsiniz.

En iyi sonuçlar için, yavaş yükleme sürelerini önlemek için optimize edilmiş görüntüler kullanın. JPEG ve PNG en yaygın formatlardır, WebP ise daha iyi sıkıştırma ve kalite sağlar.

WordPress Block Düzenleyicisinde Görüntüleri Hizalama

Bir resim ekledikten sonra, hizalamasını içerik düzeninize uyacak şekilde ayarlayabilirsiniz.

Temel Görüntü Hizalama Seçenekleri

WordPress birkaç yerleşik hizalama seçeneği sağlar:

• Sol hizalayın - soldaki görüntüyü etrafına sarılmış metinle yerleştirir.
• Sağ Hizala - Sağdaki görüntüyü etrafına metin sararak konumlandırır.
• Hizalama Merkezi - Görüntüyü metin sarma olmadan merkezler.
• Geniş Genişlik -Görüntüyü içerik genişliğinin ötesine uzatır, ancak tam ekran değildir.
• Tam genişlik - Görüntüyü tüm içerik genişliğini kapsayacak şekilde uzatır.

Bir görüntüyü hizalamak için:

• Resmi tıklayın.
• Üstündeki araç çubuğundan hizalama seçeneğini seçin.
• Düzeni gerektiği gibi ayarlayın.

Hizalama beklendiği gibi çalışmazsa, tema sınırlamaları veya CSS stilini düzeni etkileyebilir.

Daha iyi görüntü yerleştirme için diğer blokları kullanma

Daha gelişmiş düzenler için, görüntüler için tasarlanmış diğer blokları kullanmayı düşünün.

Medya ve Metin Bloğu (metin sarılı resimler için)

Medya ve metin bloğu, hizalama sorunları olmadan metnin yanında görüntüleri görüntülemek için idealdir. Görüntüyü ve metni düzgün tutarken dengeli bir düzen sağlar.

Kullanmak için:

1. Block (“+”) Ekle'yi tıklayın ve Medya ve Metin'i seçin.
2. Bir resim yükleyin veya seçin.
3. Görüntünün yanındaki sağlanan alanda metin girin.
4. Hizalama ve düzen ayarlarını gerektiği gibi ayarlayın.

Galeri Bloğu (birden çok resim için)

Bir ızgara biçiminde birden fazla resim eklemeniz gerekiyorsa, ayrı görüntü blokları eklemek yerine galeri bloğunu kullanın.

Kapak bloğu (arka plan resimleri için)

Kapak bloğu, kahraman görüntüleri veya metin kaplamaları olan arka plan afişleri için kullanışlıdır.

Bu bloklar standart görüntü bloğundan daha fazla tasarım esnekliği sağlar.

Mobil ve tabletler için duyarlı görüntü hizalaması

Tüm cihazlarda görüntülerin doğru bir şekilde yeniden boyutlandırılmasını sağlamak, kesintisiz bir kullanıcı deneyimi için çok önemlidir.

Görüntüler nasıl mobil uyumlu hale getirilir:

• Sabit piksel boyutları yerine yüzde tabanlı genişlikler kullanın.
• Görüntülerin farklı ekran boyutları için optimize edildiğinden emin olun.
• Masaüstü, tablet ve mobil görünümlerde görüntülerin nasıl göründüğünü kontrol etmek için WordPress'in duyarlı modunu kullanarak yayınınızı önizleyin.

Görüntüler mobil cihazlarda düzgün bir şekilde hizalanmazsa, aralık ve hizalama sorunlarını düzeltmek için özel CSS gerekebilir.

Image SEO WordPress Block Editor'da En İyi Uygulamalar

Görüntüleri optimize etmek hem arama sıralamasını hem de sayfa hızını geliştirir. Bu en iyi uygulamaları takip edin:

1. Alt Metin Ekle - Erişilebilirliği ve SEO'yu geliştirmek için görüntüleri açıklayın.
2. Sıkıştırılmış görüntüler kullanın - Tinypng veya Imagify gibi araçları kullanarak dosya boyutlarını azaltın.
3. Tembel Yüklemeyi Etkinleştir - Kullanıcılar kaydırılıncaya kadar görüntü yüklemesini geciktirerek performansı artırır.
4. WebP formatını kullanın - JPEG veya PNG'den daha iyi sıkıştırma sağlar.

Bu optimizasyonların uygulanması site hızını ve kullanıcı katılımını artırır.

WordPress'teki Görüntü Hizalama Sorunları Sorun Giderme

Bazen, tema veya eklenti çatışmaları nedeniyle görüntüler düzgün bir şekilde hizalanmaz .

Yaygın Sorunlar ve Düzeltmeler:

• Hizalama çalışmıyor mu? Temanız blok düzenleyicinin hizalama ayarlarını geçersiz kılabilir. CSS düzeltmeleri eklemeyi deneyin.
• Görüntüler mobil cihazlarda yeniden boyutlandırılmıyor mu? Temanızın sabit görüntü boyutlarını kullanıp kullanmadığını kontrol edin ve bunları ayarlayın.
• Metin resimlerin etrafına sarılmıyor mu? Daha iyi kontrol için görüntü bloğu yerine medya ve metin bloğunu kullanın.

Hizalama sorunları devam ederse, daha esnek bir temaya geçmek veya Elementor gibi bir sayfa oluşturucu kullanmak yardımcı olabilir.

Gelişmiş Görüntü Özelleştirme için Eklentiler Ne Zaman Kullanılır

WordPress'in varsayılan seçenekleri çoğu kullanıcı için yeterli olsa da, eklentiler görüntü yerleştirmeyi ve hizalamayı artırabilir.

Görüntü hizalama ve optimizasyon için en iyi WordPress eklentileri:

• Smush - Daha hızlı yükleme için görüntüleri sıkıştırır ve optimize eder.
• Ortam Değiştirme Etkinleştir - Bağlantıları kırmadan görüntüleri değiştirir.
• WP Roket - Daha iyi performans için tembel yükleme ekler.

Eklentiler optimizasyonları otomatikleştirmeye ve gelişmiş görüntü özelleştirme seçenekleri sunmaya yardımcı olur.

Çözüm

Görüntü bloğu ayarlarını, hizalama seçeneklerini ve duyarlı tasarım tekniklerini anladığınızda WordPress blok düzenleyicisine görüntüler eklemek ve hizalamak kolaydır.

Basit düzenler için varsayılan görüntü bloğunu kullanın ve daha yapılandırılmış tasarımlar için medya ve metin, galeri veya kapak bloklarından yararlanın. Hizalama sorunları ortaya çıkarsa, tema ayarlarını kontrol etmek, mobil için görüntüleri optimize etmek ve sorun giderme çatışmalarını sorunsuz bir deneyim sağlayacaktır.

Bu adımları izleyerek, hızlı yükleme sürelerini ve güçlü SEO performansını korurken tüm cihazlarda harika görünen iyi yapılandırılmış, görsel olarak ilgi çekici içerikler oluşturabilirsiniz.