Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Blokları Arasına Boş Alan Ekleme veya Kaldırma (4 Yol)

WordPress blok editörünü kullanmak ne kadar kolay olsa da, birçok kullanıcı bloklar arasındaki boşluğu kontrol etmekte zorlanıyor. İçeriğiniz çok sıkışık veya yayılmış hissettirdiğinde ve varsayılan boşluk seçenekleri yeterli olmadığında kendinizi hayal kırıklığına uğramış bulabilirsiniz.

Bu sorunla karşılaşan çok sayıda okuyucumuzdan haber aldık. Bu nedenle, sayfa düzenleriniz üzerinde tam kontrole sahip olabilmeniz ve daha gösterişli, profesyonel görünümlü bir web sitesi oluşturabilmeniz için bu sorunu aşmanın bazı etkili yollarını bulduk.

Bu makalede, WordPress blokları arasına nasıl boşluk ekleyeceğinizi veya kaldıracağınızı adım adım göstereceğiz.

How to add or remove blank space between WordPress blocks (4 ways)

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

WordPress, yerleşik WordPress blok düzenleyicisi ile özel sayfalar ve yazılar oluşturmayı kolaylaştırır.

Ancak, belirli blokları eklediğinizde çok fazla veya çok az boşluk olduğunu fark edebilirsiniz. WordPress bloklarınız arasına boşluk ekleyerek veya kaldırarak, tam olarak istediğiniz gibi özel sayfa düzenleri oluşturabilirsiniz.

Bloklar arasındaki boşluğu ayarlayarak ilgili içerikleri bir arada gruplayabilir veya farklı bölümleri ayırabilirsiniz. Bu, ziyaretçilerinizin dikkatini yönlendirmeye yardımcı olur ve hangi öğelerin birbirine bağlı olduğunu netleştirir.

Dahası, uygun aralıklar içeriğin bölünmesine yardımcı olarak ziyaretçilerin bilgilerinizi okumasını ve anlamasını kolaylaştırır.

Sonuç olarak, nihai WordPress web sitesi tasarımınız üzerinde daha fazla kontrole sahip olmak daha iyi bir kullanıcı deneyimi sağlayabilir.

Bununla birlikte, web sitenizdeki WordPress blokları arasına nasıl boşluk ekleyeceğinize veya kaldıracağınıza bir göz atalım. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Video Eğitimi

Subscribe to WPBeginner

Yazılı talimatları tercih ediyorsanız, okumaya devam edin.

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

Bloklarınız arasına boşluk eklemenin en kolay yolu Gutenberg blok düzenleyicisini kullanmaktır. Birkaç tıklama ile 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’ için arama yapın ve bloğu seçin.

Add spacer block to page

Bu, sayfaya otomatik olarak bir ara parça ekleyecektir.

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

Resize spacer block

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

Bir blok teması kullanıyorsanız, tema şablonlarınızdaki blok aralığını ayarlamak için Tam Site Düzenleyicisini de kullanabilirsiniz.

Daha fazla bilgi için WordPress Tam Site Düzenleme başlangıç kılavuzumuza göz atın.

Aralayıcı bloklar eklemenin yanı sıra, diğer bloklarla aralarına daha fazla boşluk koymak için bloklarınızın kenar boşluğunu da artırabilirsiniz. Bu seçenekleri Blok ayarları kenar çubuğunda keşfedebilirsiniz.

Margin preview

Bloğun dolgusunu da ayarlayabilirsiniz. Dolgu ne kadar küçük olursa, bloklar arasında o kadar az boşluk olur ve bazı bloklar varsayılan olarak ek dolguya sahiptir. Yani bunu bloklar arasındaki bir miktar boşluğu kaldırmanın bir yolu olarak düşünebilirsiniz.

Daha fazla ayrıntı için WordPress’te dolgu ve kenar boşluğu hakkındaki kılavuzumuza bakabilirsiniz.

Adjusting a block's padding in the full-site editor

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

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

Bloklarınız arasına boşluk eklemenin ve kaldırmanın bir başka yolu da temanıza özel CSS kodu eklemektir.

Bunu daha önce yapmadıysanız, başlamadan önce WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuza göz atmanızı öneririz.

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

Ardından, sağ taraftaki seçenekler panelinde yer alan ‘Engelle’ menü öğesine tıklayın.

Click block menu option

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

Ardından, ‘Ek CSS sınıfları’ kutusuna aşağıdaki kodu ekleyin:

.add-remove-bottom-space

Bu kod parçacığı, özellikle o blok için yeni bir CSS sınıfı oluşturur.

Add new CSS class

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 ‘e gidin.

Go to WordPress theme customizer

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.

Click additional CSS

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

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

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

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

Add CSS code

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

Bir blok tema kullanıyorsanız, CSS kodunu nereye ekleyeceğinizi öğrenmek için WordPress’te eksik tema özelleştiricisini nasıl düzelteceğinize ilişkin kılavuzumuzu okuyabilirsiniz.

Bir Eklenti Kullanarak Özel CSS Kodunu Kaydetme

WordPress tema özelleştiricisine özel CSS eklediğinizde, bu yalnızca o anda kullandığınız tema için kaydedilecektir. WordPress temasını değiştirirseniz, CSS kodunu yeni temanıza kopyalamanız gerekecektir.

Özel CSS’nizin hangi temayı kullanıyor olursanız olun uygulanmasını istiyorsanız, bir eklenti kullanmanız gerekir.

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

Yapmanız gereken ilk şey ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress yönetici panosundan Code Snippets ” + Add Snippet bölümüne gitmeniz gerekir.

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

Adding a custom code snippet to WordPress

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’i seçtiğinizden emin olun.

Choose CSS Snippet as the code type

Ardından, snippet’inizi ‘Etkinleştirmek’ için üstteki kaydırıcıya tıkladığınızdan emin olun ve WordPress web sitenizde çalıştırmak için ‘Snippet’i Kaydet’e basın.

Daha fazla ayrıntı için WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuza bakabilirsiniz.

Alternatif olarak, Basit Özel CSS eklentisini kullanabilirsiniz. Etkinleştirdikten sonra, Görünüm ” Özel CSS’ye gidin ve özel CSS kodunuzu ekleyin.

Add code with Simple Custom CSS plugin

İşiniz bittiğinde, değişikliklerinizi kaydetmek için ‘Özel CSS’yi 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şluk eklemenin veya kaldırmanın bir başka acemi dostu yolu da WordPress özel CSS eklentisi kullanmaktır. Bu, herhangi bir CSS kodunu düzenlemeden WordPress blogunuzda görsel değişiklikler yapmanızı sağlar.

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

Büyük Fırsat: WPBeginner okuyucuları CSS Hero kupon kodumuzu kullanarak %40 indirim kazanabilirler.

Yapmanız gereken ilk şey eklentiyi yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki başlangıç kılavuzumuza bakın.

Activate CSS Hero plugin

Etkinleştirmenin ardından, eklentiyi etkinleştirmek için ‘Ürün Etkinleştirmeye Devam Et’ düğmesine tıklamanız gerekir. Düğmeyi doğrudan yüklü eklentiler listenizin ü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 geri yönlendirileceksiniz.

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

Click CSS Hero

Bu, CSS Hero’nun üzerinde çalıştığı aynı sayfayı açacaktır. Eklenti görsel bir editör kullandığından değişikliklerinizi gerçek zamanlı olarak yapabileceksiniz.

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

CSS Hero page customizer

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

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

CSS Hero change bottom margin

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

Değişiklik yapmayı tamamladığınızda, 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

SeedProd, 1 milyondan fazla web sitesi tarafından kullanılan en iyi sürükle ve bırak sayfa oluşturucusudur. Aslında WPBeginner ve diğer markalar için özel sayfalar oluşturmak için kullandığımız şey budur.

SeedProd, ö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. Herhangi bir kod yazmadan özel bir WordPress teması oluşturmak için bile kullanabilirsiniz.

Sürükle ve bırak oluşturucu ile sitenizin tasarımı üzerinde tam kontrole sahip olursunuz ve herhangi bir web sitesi öğesine kolayca boşluk ekleyebilir veya kaldırabilirsiniz.

Daha fazla bilgi edinmek için WordPress’te özel sayfa oluşturma hakkındaki kılavuzumuza bakın.

Sayfanızı özelleştirirken, Ara Parça bloğunu kullanarak istediğiniz yere boşluk ekleyebilirsiniz.

SeedProd spacer block

Bloklar arasında daha fazla boşluk eklemek istediğiniz sayfada herhangi bir yere sürükleyip bırakmanız yeterlidir.

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

Use the slider to adjust the height of the SeedProd Spacer block

Ayrıca 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.

Click advanced tab in SeedProd builder

Ardından, ‘Aralık’ 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şluğu kaldırmak için sayıyı silmeniz yeterlidir.

Change bottom margin

Değişiklik yapmayı tamamladı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.

Save and publish SeedProd page

Umarız bu makale WordPress blokları arasına nasıl boşluk ekleyeceğinizi veya kaldıracağınızı öğrenmenize yardımcı olmuştur. WordPress yazı revizyonları rehberimizi ve en iyi Gutenberg blok eklentileri uzman seçimlerimizi de görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

5 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Kircho Svircho

    I am looking for a way to mass manage all the default space between blocks in wordpress. The default space between paragraphs is too small and I want to know how to “rootly” change the settings and make it broader. No margins, no dimension settings emerge in my theme.

    I want to ask you how to make a space between paragraphs like yours, without inserting spacers between each block, every time. It takes me 10mins per page to do this and its annoying

    • WPBeginner Support

      To have the effect across the entire site, you would want to use CSS and target the paragraphs or use the plugins to simplify the process :)

      Yönetici

  3. Jennifer Gould

    I tried to use this CSS to remove space between paragraph blocks, however nothing is working. I have even copied and pasted the CSS from your page directly, and it’s still not working. Does this method work as well when applying to paragraph blocks instead of image blocks?

    • WPBeginner Support

      It should still work with other blocks, if our recommendations are not helping then your specific theme may have styling that is overriding other styles. If you check with the support for your specific theme they should be able to assist!

      Yönetici

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.