WordPress’te kenar boşluklarını değiştirmek sitenizin tasarımını iyileştirmenin basit bir yoludur. Kenar boşlukları, öğeler arasında boşluk oluşturarak içeriğinizi daha okunabilir ve görsel olarak çekici hale getirir.
Genel bir en iyi uygulama olarak, WordPress sitelerimizi tasarlarken her zaman kenar boşlukları ve aralıklar kullanıyoruz. Bunun, kullanıcıların web sayfalarımız ve içeriklerimizle etkileşim kurması üzerinde olumlu bir etkisi olduğunu fark ettik.
Bu başlangıç kılavuzunda, WordPress’te kenar boşluklarını nasıl ekleyeceğinizi ve ayarlayacağınızı göstereceğiz. WordPress web sitenizin çeşitli alanlarındaki kenar boşluklarını değiştirmek için size farklı yöntemler öğreteceğiz.

WordPress ve Web Tasarımında Marjlar Nedir?
Kenar boşlukları, bir web sayfasının veya bir web sayfası içindeki diğer öğelerin etrafına eklenen boşluktur.
Tipik bir web sayfasını boş bir kağıt parçası olarak düşünün. Kenar boşlukları, kağıdın kenarlarındaki beyaz veya boş alanlardır.

Kenar boşluklarını kullanmanın amacı, bir web sayfası içindeki öğelerin birbirine sıkışmış gibi görünmemesini sağlamaktır.
Benzer şekilde, sayfa düzeni içindeki farklı öğelerin etrafında kenar boşlukları kullanılabilir.
Örneğin, metne çok yakın olmamaları için resimlerin kenar boşluklarını değiştirebilir veya içerik alanınız ile kenar çubuğu arasında boşluk bırakmak için bir kenar boşluğu ekleyebilirsiniz.
Bu makalede pek çok bilgiyi ele alacağız. İstediğiniz bölüme atlamak için aşağıdaki bağlantılara tıklayın.
- What is the Difference Between Margin and Padding?
- Why You May Need to Add or Change Margins in WordPress?
- How to Add Margins in WordPress?
- Adding Margins in WordPress Using the Full Site Editor
- Adding Margins in the Block Editor
- Adding Margins in WordPress Using SeedProd
- Change Margins Using Thrive Architect
- Changing Margins in WordPress Using CSS Code
- Adding and Changing Margins Using Custom CSS in WordPress Theme
- Using Custom CSS to Change Margins in Site Editor
- Adding Margins with CSS in Theme Customizer
- Change Margins with Custom CSS Code Using WPCode
Marjin ve Dolgu Arasındaki Fark Nedir?
Margin ve padding’in her ikisi de web tasarımında beyaz alan eklemek için kullanılır. Ancak, çok farklı şekilde kullanılırlar.
Kenar boşlukları bir öğenin dışına, dolgu ise içine boş alan ekler.

Kenar boşlukları, bir öğenin dışına boşluk eklemek için kullanılır. Bir web sayfasındaki öğeler arasında bol miktarda boşluk olmasını sağlamanıza olanak tanırlar.
Şimdi, kenar boşluklarının ne zaman kullanılacağına ilişkin bazı örneklere göz atalım.
1. Bir makaledeki görüntü ve metin arasındaki boşluğu artırmak için kenar boşlukları ekleme.

2. Başlık ve içerik alanı gibi bölümler arasına boşluk eklemek için kenar boşluklarını ayarlama.

Dolgu ise içerik ile bir kutu veya öğenin kenarları arasına yastık boşluğu eklemek için kullanılır.
İşte ekstra dolgu kullanmak isteyebileceğiniz birkaç örnek.
1. Harekete geçirici mesaj düğmelerinizdeki yastık alanını artırmak için dolguyu ayarlama.

2. Metin Sütununda Dolguyu Artırma

Hem dolgu hem de kenar boşlukları web tasarımında yaygın olarak kullanılır.
Boş alanların kullanılması, herhangi bir tasarıma nefes alma alanı ekler, bu da onu daha kullanıcı dostu ve zarif hale getirir.
Daha fazla ayrıntı için WordPress’te dolgu ve kenar boşlukları arasındaki fark hakkındaki eğitimimize bakın.
WordPress’te Neden Kenar Boşlukları Eklemeniz veya Değiştirmeniz Gerekebilir?
Kenar boşlukları web tasarımının çok önemli bir yönüdür. Web sitenizin hoş görünmesini ve kullanımının kolay olmasını sağlarlar.
Kullanıcıların bir tasarımla nasıl etkileşime girdiğini anlamak için tüm web sitelerimizde kapsamlı A/B testleri yapıyoruz. Sonuçlar, kenar boşlukları eklemenin dönüşümler üzerinde büyük bir etkisi olduğunu tekrar tekrar gösteriyor.
Daha temiz, daha düzenli bir tasarım oluşturduğunuzda, kullanıcıların sitede daha uzun süre kalması ve istenen eylemleri tamamlaması daha olasıdır.
WordPress temaları, WordPress web sitenizin tasarım yönünü ele alır. Çoğu, temanızın düzeninde kenar boşlukları kullanarak bol miktarda beyaz alan sağlamak için CSS kurallarını ayarlama konusunda zaten mükemmel bir iş çıkarıyor.

Bununla birlikte, zaman zaman bazı şeyleri ayarlamak için kenar boşlukları eklemeniz gerekebilir.
Örneğin, gezinme menülerinizin etrafındaki kenar boşluğunu beğenmeyebilir veya harekete geçirici mesaj düğmelerinizin etrafına daha fazla kenar boşluğu eklemek isteyebilirsiniz.
Benzer şekilde, bazen eşyaların birbirine çok yakın veya çok uzak olduğunu hissedebilirsiniz.
Bu durumda, WordPress’te kenar boşluklarını kendiniz değiştirmeniz gerekecektir.
WordPress’te Kenar Boşlukları Nasıl Eklenir?
WordPress’te kenar boşlukları eklemenin pek çok yolu vardır.
Kenar boşluğunu nereye eklemek istediğinize ve WordPress temanızda bulunan seçeneklere bağlı olarak, sizin için uygun olan bir yöntem seçmeniz gerekecektir.
Yeni başlayanlar için en kolayı olduğu için WordPress’in varsayılan yerleşik seçenekleriyle başlayalım.
Tam Site Düzenleyicisini Kullanarak WordPress’te Kenar Boşlukları Ekleme
Tam site düzenleyici desteğine sahip blok tabanlı bir tema kullanıyorsanız, WordPress web sitenizin herhangi bir yerinde kenar boşluklarını değiştirmek için yerleşik site düzenleyicisini kullanabilirsiniz.
İlk olarak, site düzenleyicisini başlatmak için Görünüm “ Düzenleyici’ye gitmeniz gerekir.

Site düzenleyicisine girdikten sonra, sol sütundan bir şablon seçmek için tıklayın veya önizleme penceresinde herhangi bir yere tıklayın.
Ardından, kenar boşluklarını değiştirmek istediğiniz alana veya öğeye tıklayın. Sağ sütunda, ‘Stil’ sekmesi altında kenar boşluklarını ayarlama seçeneğini göreceksiniz.

Siz kenar boşluklarını ayarladıkça, düzenleyici kenar boşluğu alanını vurgulayacaktır.
Ayrıca üst, alt, sağ veya sol tarafa kenar boşlukları eklemeyi de seçebilirsiniz.
👆Not: Kenar boşluğu seçeneği site düzenleyicisindeki tüm bloklar için kullanılamayabilir. Bir öğe için kenar boşluğu seçeneğini göremiyorsanız, aşağıdaki alternatif bir yöntemi deneyin.
Blok Düzenleyicide Kenar Boşlukları Ekleme
Bir blog yazısı veya sayfa üzerinde çalışıyorsanız, blok düzenleyiciyi kullanacaksınız.
WordPress’teki blok düzenleyici, çeşitli bloklar için kenar boşlukları eklemenize ve değiştirmenize olanak tanır.
Kenar boşluklarını eklemek/ayarlamak istediğiniz bloğa tıklamanız yeterlidir. Blok ayarlarının altında, ‘Stil’ sekmesine geçin ve ‘Boyutlar’ veya ‘Kenar Boşlukları’ seçeneğine ilerleyin.

👆Not: Kenar boşluğu seçeneği içerik düzenleyicideki tüm bloklar için mevcut olmayabilir. Bir öğe için kenar boşluğu seçeneğini göremiyorsanız, aşağıdaki alternatif bir yöntemi deneyin.
SeedProd Kullanarak WordPress’te Kenar Boşlukları Ekleme
SeedProd piyasadaki en iyi WordPress sayfa oluşturucu eklentisidir. Web siteniz için kolayca özel sayfalar oluşturmanızı sağlar.
Sıfırdan özel bir WordPress teması oluşturmak için bile kullanabilirsiniz.
İş ortağı markalarımızdan bazıları tüm web sitelerini SeedProd ile tasarladılar ve onu kullanmayı seviyorlar. Daha fazlasını öğrenmek için SeedProd incelememizin tamamına bakın.

SeedProd’un sezgisel sürükle ve bırak sayfa oluşturucusu, editör içindeki herhangi bir öğe için kenar boşluklarını kolayca ayarlamanıza olanak tanır.
Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki eğitimimize bakın.
Ardından, SeedProd ” Açılış Sayfaları ‘ nı ziyaret etmeniz ve ardından ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklamanız gerekir.

Bundan sonra, sayfanız için bir şablon seçmeniz istenecektir.
SeedProd, başlangıç noktası olarak kullanabileceğiniz düzinelerce hazır şablonla birlikte gelir veya boş bir şablonla başlayabilirsiniz.

Şablonunuzu seçmek için tıklayın ve ardından açılış sayfanız için bir ad girin.
Bu, SeedProd’un sayfa oluşturucusunu başlatacaktır.
Sağ tarafta sayfanızın canlı bir önizlemesini göreceksiniz. Ve sol sütunda sayfanıza ekleyebileceğiniz öğeler.

Düzenlemek için sayfadaki herhangi bir öğenin üzerine gelip tıklayabilirsiniz.
Bir öğeye tıkladığınızda onu seçecek ve sol sütunda seçeneklerini göreceksiniz. Buradan ‘Gelişmiş’ sekmesine geçin ve ‘Aralık’ seçeneğine tıklayın.

Seçili öğe için kenar boşluklarını ve dolguyu buradan değiştirebilirsiniz.
Sayfanızı düzenlemeyi bitirdiğinizde, sağ üst köşedeki ‘Kaydet’ ve ‘Yayınla’ düğmelerine tıklamayı unutmayın.

Bundan sonra, değişiklikleri yerinde görmek için web sitenizi ziyaret edebilirsiniz.
Thrive Architect Kullanarak Kenar Boşluklarını Değiştirme
Thrive Architect, WordPress sayfalarını tasarlamak için sürükle ve bırak arayüzünü kullanmanızı sağlayan kullanıcı dostu bir WordPress sayfa oluşturucusudur.
Test sırasında, başlangıç noktası olarak kullanabileceğiniz 300’den fazla şablona sahip olduğunu gördük. Ayrıca, WordPress yazılarınızı ve sayfalarınızı düzenlemek, mevcut WordPress temanızın düzenini ve stilini ödünç almak için de kullanabilirsiniz.
Daha fazla bilgi edinmek için Thrive Architect incelememizin tamamına bakın.

Thrive Architect’i yüklemek için öncelikle Thrive Themes web sitesinde hesabınıza giriş yapmanız gerekir.
Buradan Thrive Product Manager eklentisini indirmeniz ve yüklemeniz gerekir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki eğitimimize göz atın.

Etkinleştirmenin ardından Thrive Ürün Yöneticisi sayfasını ziyaret etmeniz gerekir.
WordPress’i Thrive Themes hesabınıza bağlamak için ‘Hesabıma giriş yap’ düğmesine tıklayın.

Bağlandıktan sonra, hesabınızın altında mevcut Thrive Themes ürünlerinin listesini görürsünüz.
Devam edin ve Thrive Architect’in altındaki ‘Ürünü Yükle’ onay kutusuna tıklayın ve ardından en alttaki ‘Seçili ürünleri yükle’ düğmesine tıklayın.

Thrive Product Manager şimdi sizin için Thrive Architect eklentisini yükleyecektir.
Bundan sonra, yeni bir WordPress gönderisi veya sayfası düzenleyebilir ya da oluşturabilir ve ‘Thrive Architect ile Düzenle’ veya ‘Thrive Architect’i Başlat’ düğmesine tıklayabilirsiniz.

Thrive Architect, yeni bir sayfaysa sizden bir şablon seçmenizi isteyecektir.
Tema şablonunuzu kullanarak bir ‘Normal Sayfa’ veya ‘Önceden Oluşturulmuş Açılış Sayfası’ şablonu oluşturabilirsiniz.

‘Önceden oluşturulmuş Açılış Sayfası’ seçeneğini seçerseniz, eklenti size aralarından seçim yapabileceğiniz bir dizi şablon gösterecektir.
Oluşturmak istediğiniz şeye benzeyen birini seçmek için tıklamanız yeterlidir.

İster normal bir sayfa (temanızın stillerini kullanarak) ister bir açılış sayfası olsun, Thrive Architect’in sayfa oluşturucusu aynı özelliklere sahip olacaktır.
Sağ tarafta bir araç çubuğu ve sol tarafta bir ayarlar paneli ile sayfanızın canlı bir önizlemesini göreceksiniz.

Bir öğeyi seçmek için üzerine tıklayabilirsiniz. Veya yeni bir öğe eklemek için araç çubuğundaki [+] ekle düğmesine tıklayın.
Bir öğeyi seçmek ve düzenlemek için tıkladığınızda, ayarları sol sütunda görünecektir.
Buradan, kenar boşluklarını ve dolguyu değiştirmek için ‘Düzen ve Konum’ sekmesine tıklayın.

Kenar boşluğu ve dolgunun görsel bir temsilini göreceksiniz.
Farenizi kenar boşluğunun herhangi bir tarafına götürün ve kenar boşluğunu artırmak veya azaltmak için tutamacı sürükleyin.

Dört kenarın herhangi birindeki kenar boşluklarını değiştirmek için işlemi tekrarlayabilirsiniz.
İşiniz bittiğinde, Çalışmayı Kaydet düğmesine tıklamayı ve ardından Kaydet ve Gönderi Düzenleyiciden Çık seçeneğini seçmeyi unutmayın.

Artık WordPress yazınızı veya sayfanızı kaydetmek için ‘Yayınla’ veya ‘Kaydet’ düğmesine tıklayabilirsiniz.
WordPress’te CSS Kodu Kullanarak Kenar Boşluklarını Değiştirme
Bu yöntem WordPress temanıza CSS kodu eklemenizi gerektirir. Ayrıca çok temel bir HTML ve CSS anlayışına da ihtiyacınız olacak.
Ancak bu yöntem, kenar boşluklarını eklemek veya ayarlamak istediğiniz alanı manuel olarak seçebileceğiniz için size daha fazla esneklik sağlar.
WordPress Temasında Özel CSS Kullanarak Kenar Boşlukları Ekleme ve Değiştirme
WordPress, özel CSS’yi WordPress tema seçeneklerinize kaydetmenize olanak tanır. Ancak, WordPress temanıza bağlı olarak, bunu yapmanın birden fazla yolu vardır.
CSS kullanarak kenar boşlukları eklemeden veya değiştirmeden önce, CSS kodunuzla hangi öğeyi hedeflemeniz gerektiğini bulmanız gerekebilir.
Örneğin, sayfanın gövdesi etrafındaki kenar boşluklarını değiştirmek istiyorsanız, aşağıdaki kodu kullanabilirsiniz:
1 2 3 | body { margin : 50px ; } |
Hangi öğeyi hedefleyeceğinizi bulmanın en kolay yolu tarayıcınızdaki Inspect aracını kullanmaktır.
Web sitenizi yeni bir tarayıcı sekmesinde açın ve fareyi kenar boşluklarını değiştirmek istediğiniz öğenin üzerine getirin. Daha sonra sağ tıklayın ve tarayıcı menüsünden ‘İncele’yi seçin.

Bu, tarayıcı ekranınızı bölecek ve sayfanın arkasındaki HTML kodunu ve CSS’yi göreceksiniz.
Farenizi kodun üzerine getirdiğinizde tarayıcınız koddan etkilenen alanı vurgulayacaktır.

Kodda, özel CSS’nizle hedeflemeniz gereken HTML öğesini veya CSS sınıfını görebilirsiniz.
Hatta nasıl görüneceğini önizlemek için marjlarınızı burada deneyebilirsiniz.

Ancak, bu değişiklikler temanıza kaydedilmez ve tarayıcı sekmesini yeniden yüklediğinizde veya kapattığınızda kaybolur.
Şimdi bu özel CSS’yi WordPress’e kaydetmenin farklı yollarını inceleyelim.
Site Düzenleyicisinde Kenar Boşluklarını Değiştirmek için Özel CSS Kullanma
Tam site düzenleyici desteğine sahip bir blok teması kullanıyorsanız. O zaman, temanıza özel CSS’yi nasıl ekleyebileceğiniz aşağıda açıklanmıştır.
İlk olarak, site editörünü başlatmak için Görünüm ” Editör sayfasına gidin ve ardından ‘Stiller’ paneline geçin.

‘Stiller’ panelinin alt kısmında, ‘Ek CSS’ sekmesine tıklayın.
Bu, özel CSS kodunuzu ekleyebileceğiniz bir metin düzenleyici getirecektir. CSS kodunuz hemen uygulanacak ve değişikliklerin ekranda göründüğünü görebileceksiniz.

Değişikliklerden memnun olduğunuzda, değişikliklerinizi kaydetmek için ‘Kaydet’ düğmesine tıklamayı unutmayın.
Tema Özelleştirici’de CSS ile Kenar Boşlukları Ekleme
Klasik bir tema kullanıyorsanız (site düzenleyici desteği olmayan), Özel CSS’nizi tema özelleştiricisine kaydedebilirsiniz.
Tema özelleştiriciyi başlatmak için Görünüm ” Özelleştir sayfasına gidin.

Özelleştirici, WordPress temanıza bağlı olarak farklı seçenekler gösterecektir.
Genişletmek için Ek CSS sekmesine tıklamanız gerekir.

Sekme kayarak size özel CSS’nizi ekleyebileceğiniz basit bir kutu gösterecektir.
Geçerli bir CSS kuralı eklediğinizde, web sitenizin canlı önizleme bölmesinde uygulandığını görebileceksiniz.

Değişikliklerden memnun olduğunuzda, değişikliklerinizi kaydetmek için ‘Yayınla’ düğmesine tıklayın.
WPCode Kullanarak Özel CSS Kodu ile Kenar Boşluklarını Değiştirme
WordPress’te Özel CSS kodu eklemenin en kolay yolu WPCode eklentisini kullanmaktır.
WordPress web sitenize herhangi bir CSS/HTML/PHP/JavaScript kodunu kırmadan eklemenizi sağlayan en iyi WordPress kod parçacıkları eklentisidir.
Değerlendirmemiz sırasında süper kullanıcı dostu olduğunu gördük. Deneyimlerimiz hakkında daha fazla bilgi edinmek için ayrıntılı WPCode incelememize bakın.

WPCode kullanmanın avantajı, WordPress temanızı değiştirirken CSS değişikliklerinizi kaybetmemenizdir.
👆Not: WPCode ‘un kullanabileceğiniz ücretsiz bir sürümü de vardır.
Yapmanız gereken ilk şey WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki eğitimimize bakın.
Etkinleştirmenin ardından Kod Parçacıkları ” + Yeni Ekle sayfasına gidin.
Fareyi kod parçacıkları kitaplığındaki ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin üzerine getirin ve ‘Parçacık kullan’ düğmesine tıklayın.

Ardından, sayfanın üst kısmına özel CSS parçacığınız için bir başlık ekleyin. Bu, kodu tanımlamanıza yardımcı olacak herhangi bir şey olabilir.
Bundan sonra, özel CSS’nizi ‘Kod Önizleme’ kutusuna yazın veya yapıştırın ve açılır menüden ‘CSS Snippet’ seçeneğini seçerek ‘Kod Türü’nü ayarlayın.

Örneğin, tüm web sayfası gövdesi etrafındaki kenar boşluklarını eklemek veya değiştirmek istiyorsanız, aşağıdaki CSS kodunu kullanabilirsiniz:
1 2 3 | body { margin : 50px ; } |
Ardından, ‘Ekleme’ bölümüne gidin ve kodu tüm WordPress sitenizde çalıştırmak için ‘Otomatik Ekleme’ yöntemini seçin.
Kodu yalnızca belirli sayfalarda veya yazılarda çalıştırmak istiyorsanız, ‘Kısa kod’ yöntemini seçebilirsiniz.
👉 İlgili Yazı: WordPress’te Kısa Kod Kullanımı için Temel İpuçları

Şimdi, sayfanın en üstüne geri dönmeniz ve anahtarı ‘Etkin’ olarak değiştirmeniz gerekir.
Son olarak, değişikliklerinizi kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.

Artık özel CSS’nizi çalışırken görmek için web sitenizi ziyaret edebilirsiniz.
Umarız bu makale WordPress’te kenar boşluklarını nasıl ekleyeceğinizi veya değiştireceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress’te resimleri nasıl yan yana koyacağınızı veya WordPress’lerde metin düğmelerinin altını nasıl çizeceğinizi ve yaslayacağınızı öğrenmek 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.
Mrteesurez
Although, I used WPcode before when it was WordPress header and footer.
If I use WPcode to add a particular code. Is changing a theme maybe for troubleshooting or any other things does not lost the code ??
WPBeginner Support
Correct, using the plugin WPCode would mean that even if you change the theme the code would still be active.
Admin
Mrteesurez
Whaooo.
This is good.
WPcode has been useful even before it is rebranded.
Thanks.
Jiří Vaněk
I would like to ask one question about this topic. Is there a simple solution to have different borders for the desktop version and another for the mobile version for responsivity?
WPBeginner Support
You could use WPCode to load the CSS on mobile
Admin
Jiří Vaněk
Sure, so create two snippets and embed one for the desktop version and one for mobile. Okay
Mrteesurez
You can also use Additional CSS on WP customizers. You can just write the css rule there for both Mobile and desktop and set their respective margins using CSS media query.
Jodie Osborn
Thanks for sharing all the different options. I needed the reminder that I’ll lose my custom CSS when I change my theme! Given I have WPCode, I’ll copy my code to a central place before I deactivate the theme.
WPBeginner Support
Glad we could share a way to keep the code
Admin
Konrad
Exploring various methods, especially with SeedProd and Thrive Architect, provides a tailored approach to design. Loving your beginners guides