WordPress Blokları Arasına Boş Alan Ekleme veya Kaldırma (4 Yöntem)

İyi bir boşluk kullanımı, içeriğinizin görünümünü ve hissini büyük ölçüde değiştirebilir. WordPress blokları arasındaki boşluklar çok sıkı veya çok geniş olduğunda, okunabilirliği olumsuz etkileyebilir ve düzeninizin bitmemiş görünmesine neden olabilir.

Birçok WordPress kullanıcısının tekrar tekrar aynı boşluk sorunlarıyla karşılaştığını gördük, bu mantıklı çünkü blok boşluk seçenekleri ilk bakışta her zaman belirgin olmayabilir.

İyi haber şu ki, WordPress kodla uğraşmadan blok boşluğunu ayarlamak için çeşitli yollar sunuyor.

Bu kılavuzda, WordPress blokları arasındaki boşluk sorunlarını gidermek için dört basit yöntemi adım adım açıklayacağız. Bu ipuçları, daha profesyonel görünen ve okuyucuları meşgul tutan içerikler oluşturmanıza yardımcı olacaktır.

WordPress Blokları Arasına Boş Alan Neden Eklenir veya Kaldırılır?

WordPress blok düzenleyicisi içerik oluşturmayı kolaylaştırsa da, varsayılan boşluğun her zaman mükemmel olmadığını görebilirsiniz.

Bloklarınız arasındaki beyaz alanı ayarlamak, sitenizin tasarımını ve kullanıcı deneyimini iyileştirmenin basit bir yoludur.

Blok boşluğunu doğru bir şekilde kontrol etmek size şu konularda yardımcı olur:

• Profesyonel Bir Tasarım Oluşturun: Düzeniniz üzerinde tam kontrole sahip olmak, web siteniz için daha cilalı ve özel bir görünüm oluşturmanıza olanak tanır.
• Ziyaretçi Dikkatini Yönlendirin: İlgili içeriği görsel olarak bir araya getirmek veya farklı bölümleri ayırmak için boşluk kullanın, bu da düzeninizi daha sezgisel hale getirir.
• Okunabilirliği Artırın: Uzun metin bloklarını beyaz boşlukla bölmek, içeriğinizi daha az göz korkutucu ve ziyaretçilerin okumasını kolaylaştırır.

Şimdi, web sitenizde WordPress blokları arasına boşluk ekleme veya kaldırma yöntemlerine bir göz atalım.

Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanın:

Yöntem 1: Blok Düzenleyici ile WordPress Blokları Arasına Boşluk Ekleme

Bloklarınız arasına boşluk eklemenin en kolay yolu Gutenberg blok düzenleyicisini kullanmaktır. Birkaç tıklamayla boşluk eklemenizi sağlayan yerleşik bir boşluk bloğu vardır.

Bunu kullanmak için düzenlemek istediğiniz gönderiyi veya sayfayı açın ve ‘Artı’ blok ekle düğmesine tıklayın.

Ardından, ‘Spacer’ (Ayrıştırıcı) için arama yapın ve bloğu seçin.

Bu, sayfaya otomatik olarak bir boşluk ekleyecektir. 

Bloğu yukarı veya aşağı sürükleyerek daha büyük veya daha küçük yapabilirsiniz.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için ‘Güncelle’ düğmesine tıklamanız yeterlidir.

Eğer bir blok teması kullanıyorsanız, tema şablonlarınızdaki blok boşluğunu ayarlamak için Tam Site Düzenleyicisini de kullanabilirsiniz.

Daha fazla bilgi için WordPress Tam Site Düzenleme'ye yeni başlayanlar için rehberimize göz atın.

Aralara Boşluk Blokları eklemenin yanı sıra, bloklarınızın kenar boşluğunu artırarak diğer bloklarla aralarına daha fazla boşluk koyabilirsiniz. Bu seçenekleri Blok ayarları kenar çubuğunda keşfedebilirsiniz.

Blokların dolgusunu da ayarlayabilirsiniz. Dolgu, bloğun kenarlığı içindeki, kenarlık ile içeriğin kendisi arasındaki boşluktur.

Bunu azaltmak, bloklar arasındaki boşluğu ayarlamaktan farklı olan, blok içindeki boş alanı azaltacaktır.

Bu kenar boşluğu ve dolgu denetimlerinin en yaygın olarak Tam Site Düzenleyicisi'ni kullanan blok temalarında bulunduğunu ve klasik temaları kullanırken tüm bloklar için görünür olmayabileceğini unutmayın.

Daha fazla ayrıntı için WordPress'te dolgu ve kenar boşluğu arasındaki fark hakkındaki rehberimize bakabilirsiniz.

Blok düzenleyicisinden en iyi şekilde yararlanmanın daha fazla yolu için bu kılavuzlara da göz atmak isteyebilirsiniz:

• WordPress'te Daha Fazla Bloğunu Doğru Şekilde Kullanma
• WordPress'te Satır Sonu Nasıl Eklenir (Yeni Satır Aralığı)
• WordPress'te İç İçe Bloklar Nasıl Seçilir ve Kullanılır
• WordPress Gönderilerinde Çok Sütunlu İçerik Nasıl Eklenir (HTML Gerekmez)

Yöntem 2: Özel CSS Ekleyerek WordPress Blokları Arasına Boş Alan Ekleme veya Kaldırma

Bloklarınız arasındaki boş alanı hem eklemenin hem de kaldırmanın bir başka yolu da temanıza özel CSS kodu eklemektir.

Daha önce bunu yapmadıysanız, başlamadan önce WordPress sitenize özel CSS eklemenin kolay yolu hakkındaki rehberimize göz atmanızı öneririz.

Ardından, düzenlemek istediğiniz sayfayı veya gönderiyi açın ve ardından boşluk eklemek veya kaldırmak istediğiniz bloğa tıklayın.

Ardından, sağdaki seçenekler panelindeki ‘Blok’ menü öğesine tıklayın.

Bundan sonra, 'Gelişmiş' açılır menüsüne gidin ve tıklayın. Bu, o blok için bir dizi ek seçenek getirir.

‘Ek CSS sınıf(lar)ı’ kutusuna aşağıdaki sınıf adını yazın:

.add-remove-bottom-space

Bu işlem, bloğa özel bir ad verir ve özel CSS ile hedeflemenizi sağlar.

Bundan sonra, değişikliklerinizi kaydetmek için 'Güncelle' düğmesine tıklayın.

Ardından, WordPress tema özelleştiricisini açmak için Görünüm » Özelleştir yolunu izleyin.

Ardından aşağı kaydırın ve 'Ek CSS' menü seçeneğine tıklayın.

Bu, CSS kodu ekleyebileceğiniz bir alan getirir.

Ardından, aşağıdaki kod parçasını kutuya yapıştırın:

.add-remove-bottom-space {
 margin-bottom: 0;
}

Bu kod parçacığı, alt kenar boşluğunu sıfıra ayarlar ve bloktaki boş alanı kaldırır.

Adın önündeki noktayı (.) fark edin. CSS'de nokta, o belirli sınıf adına sahip herhangi bir öğeyi hedeflemek için kullanılır.

Alt kısma boşluk eklemek isterseniz, ‘0’ değerini ‘20px’ gibi bir değere değiştirmeniz yeterlidir.

Değişikliklerinizi yaptıktan sonra, değişikliklerinizi canlı hale getirmek için ‘Yayınla’ düğmesine tıkladığınızdan emin olun. 

Eğer bir blok teması kullanıyorsanız, CSS kodunu nereye ekleyeceğinizi öğrenmek için WordPress'te eksik tema özelleştiricisini düzeltme hakkındaki rehberimizi okuyabilirsiniz.

Bir Eklenti Kullanarak Özel CSS Kodunu Kaydetme

WordPress tema özelleştiricisine özel CSS ekleyerek, yalnızca şu anda kullandığınız tema için kaydedilecektir. Eğer WordPress temasını değiştirirseniz, CSS kodunu yeni temanıza kopyalamanız gerekecektir.

Özel CSS'nizin kullandığınız temadan bağımsız olarak geçerli olmasını istiyorsanız, bir eklenti kullanmanız gerekecektir.

WPCode, PHP, CSS ve daha fazlasını herhangi bir şeyi bozmadan WordPress web sitenize eklemenizi sağlayan en iyi kod parçacığı eklentisidir.

WPCode'u biz de kullanıyoruz ve özel kod eklemenin en kolay ve en güvenli yolu olduğunu gördük. Daha fazla bilgi için detaylı WPCode incelememize bakın.

Yapmanız gereken ilk şey ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi nasıl kurulur hakkındaki rehberimize bakın.

Etkinleştirdikten sonra, WordPress yönetici panelinden Kod Parçacıkları » + Parçacık Ekle bölümüne gitmeniz gerekir.

Burada, kod parçacıkları kitaplığındaki 'Özel Kodunuzu Ekle (Yeni Parça)' seçeneğinin üzerine gelin ve 'Parçayı kullan' düğmesine tıklayın.

Kod parçacığınız için bir ad girmeniz ve ardından özel CSS'nizi ‘Kod Önizleme’ kutusuna yapıştırmanız gerekir.

‘Kod Türü’ açılır menüsünden ‘CSS Snippet’ seçtiğinizden emin olun.

Ardından, kod parçacığınızı ‘Aktifleştir’ yapmak için üstteki kaydırıcıya tıklayın ve WordPress web sitenizde çalıştırmak için ‘Kod Parçacığını Kaydet’e basın.

Daha fazla ayrıntı için WordPress sitenize özel CSS eklemenin kolay yolu hakkındaki rehberimize bakabilirsiniz.

Alternatif olarak, Simple Custom CSS eklentisini kullanabilirsiniz. Etkinleştirdikten sonra, Görünüm » Özel CSS yolunu izleyin ve özel CSS kodunuzu ekleyin.

Bitirdiğinizde, değişikliklerinizi kaydetmek için ‘Özel CSS Güncelle’ düğmesine tıklamanız yeterlidir.

Yöntem 3: CSS Hero ile WordPress Blokları Arasına Boş Alan Ekleme veya Kaldırma

WordPress blokları arasına boş alan eklemenin veya kaldırmanın bir diğer yeni başlayan dostu yolu, bir WordPress özel CSS eklentisi kullanmaktır. Bu, herhangi bir CSS kodunu düzenlemeden WordPress blogunuzda görsel değişiklikler yapmanıza olanak tanır.

WordPress sitenizdeki neredeyse her CSS stilini tek satır kod yazmadan düzenlemenizi sağlayan CSS Hero eklentisini kullanmanızı öneririz.

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

Etkinleştirdikten sonra, eklentiyi etkinleştirmek için ‘Ürün Etkinleştirmeye Devam Et’ düğmesine tıklamanız gerekir. Düğmeyi, yüklü eklentiler listenizin hemen üzerinde bulacaksınız.

Bu sizi kullanıcı adınızı ve şifrenizi girmeniz gereken bir ekrana getirir. Ardından, ekrandaki talimatları izleyin ve hesabınız doğrulandıktan sonra kontrol panelinize yönlendirileceksiniz.

Sıradaki, düzenlemek istediğiniz sayfayı veya gönderiyi açmanız, ardından WordPress yönetici araç çubuğunuzun üst kısmındaki ‘CSS Hero’ düğmesine tıklamanız gerekir.

Bu, aynı sayfayı CSS Hero üzerinde çalışırken açacaktır. Eklenti, görsel bir düzenleyici kullanır, bu nedenle değişikliklerinizi gerçek zamanlı olarak yapabileceksiniz.

Sayfanızdaki herhangi bir öğeye tıkladığınızda, özelleştirmeler yapmak için sayfanın sol tarafında bir araç çubuğu görünecektir.

Bloklarınız arasındaki boş alanı kaldırmak veya eklemek için 'Boşluklar' seçeneğine tıklamanız ve ardından 'Alt Kenar Boşluğu' bölümüne kaydırmanız yeterlidir.

Boş alan eklemek veya kaldırmak için kaydırıcıyı yukarı veya aşağı hareket ettirebilirsiniz.

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

Değişiklikleri yaptıktan sonra, değişikliklerinizi canlı hale getirmek için 'Kaydet' düğmesine tıklamanız gerekir. 

Yöntem 4: SeedProd ile WordPress Blokları Arasına Boş Alan Ekleme veya Kaldırma

SeedProd, 1 milyondan fazla web sitesi tarafından kullanılan en iyi sürükle ve bırak sayfa oluşturucudur.

SeedProd'u kendimiz birçok projede kullandık ve bazı iş ortağı markalarımız tüm web sitelerini bu araçla oluşturdular. Ayrıntılar için kapsamlı SeedProd incelememize bakın.

Eklenti, özel 404 sayfaları, satış sayfaları, açılış sayfaları ve çok daha fazlasını oluşturmak için 300'den fazla şablondan oluşan bir kütüphaneye sahiptir.

Hatta kod yazmadan özel bir WordPress teması oluşturmak için bile kullanabilirsiniz.

Sürükle ve bırak oluşturucu ile sitenizin tasarımını tam olarak kontrol edebilir ve herhangi bir web sitesi öğesine kolayca boşluk ekleyip kaldırabilirsiniz.

Daha fazla bilgi edinmek için WordPress'te özel bir sayfanın nasıl oluşturulacağına dair kılavuzumuza bakın.

Sayfanızı özelleştirirken, Boşluk bloğunu kullanarak istediğiniz yere boşluk ekleyebilirsiniz.

Sayfada bloklar arasına daha fazla boşluk eklemek istediğiniz yere sürükleyip bırakmanız yeterlidir.

Ardından, yüksekliğini ayarlamak için kaydırıcıyı kullanabilirsiniz.

Herhangi bir blok arasındaki boşluğu da kontrol edebilirsiniz. Bunu yapmak için, boşluk eklemek veya kaldırmak istediğiniz herhangi bir bloğa tıklamanız yeterlidir.

Bu, soldaki seçenekler panelini getirir. Ardından, 'Gelişmiş' sekmesine tıklayın.

Ardından, 'Boşluk' açılır menüsüne gidin ve tıklayın.

Bu, ‘Kenar Boşluğu’nu kontrol edebileceğiniz bir menü getirir. Boşluk eklemek için alt kenar boşluğu kutusuna bir sayı girmeniz veya mevcut boş alanı kaldırmak için sayıyı silmeniz yeterlidir.

Değişiklikleri yaptıktan sonra ‘Kaydet’ düğmesine tıklayın.

Ardından, değişikliklerinizi canlı hale getirmek için ‘Yayınla’ açılır menüsünü seçin.

Video Eğitim

Yazılı talimatları tercih etmiyorsanız, video eğitimimizi izleyin.

Blok Boşluğu Hakkında Sıkça Sorulan Sorular

WordPress'te bloklar arasına boş alan ekleme veya kaldırma hakkında okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

WordPress'te kenar boşluğu (margin) ve dolgu (padding) arasındaki fark nedir?

Bir bloğu resim çerçevesi gibi düşünün. Dolgu (padding), resim ile çerçevenin kendisi arasındaki boşluktur (kenarlığın içi). Kenar boşluğu (margin), o resim çerçevesi ile yanına asılan diğer çerçeveler arasındaki duvardaki boşluktur (kenarlığın dışı).

WordPress'te sütunlar arasında yatay olarak nasıl boşluk eklerim?

Yukarıdaki yöntemler çoğunlukla dikey boşluk içindir. Yatay boşluğu ayarlamak için yerleşik WordPress Sütunlar bloğunu kullanmalısınız.

Sütunlarınızı ekledikten sonra, ana Sütunlar bloğunu seçebilir ve sağdaki blok ayarlarında, sütunlar arasındaki boşluğu kontrol etmenizi sağlayan bir “Blok Boşluğu” seçeneği bulacaksınız.

WordPress temanızı değiştirirsem CSS değişikliklerimi kaybeder miyim?

Evet, CSS kodunu doğrudan temanızın özelleştiricisine (Görünüm » Özelleştir » Ek CSS altında) eklerseniz, bu kod temaya bağlıdır. Temaları değiştirirseniz, bu kodu tekrar kopyalamanız gerekecektir.

CSS'nizi temadan bağımsız hale getirmek için kod parçacıklarınızı eklemek üzere WPCode kullanmanızı öneririz.

Umarız bu makale, WordPress blokları arasındaki boş alanı nasıl ekleyeceğinizi veya kaldıracağınızı öğrenmenize yardımcı olmuştur. Ayrıca WordPress gönderi revizyonları kılavuzumuza ve en iyi Gutenberg blok eklentileri uzman seçimlerimize de bakmak isteyebilirsiniz.

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