WordPress’te Kenar Boşlukları Nasıl Değiştirilir (Başlangıç Kılavuzu)

WordPress’te kenar boşluklarını değiştirmek, sitenizin tasarımını ve kullanıcı deneyimini 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, web sitesi tasarımlarımızda her zaman bol miktarda kenar boşluğu ve aralık kullanırız. Bunun, kullanıcıların web sayfalarımız ve içeriklerimizle etkileşime geçmesi ü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ında kenar boşluklarını değiştirmek için farklı yöntemler öğreneceksiniz.

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.

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üzen leyici 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.

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.

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. Hatta sıfırdan özel bir WordPress teması oluşturmak için bile kullanabilirsiniz.

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 en iyi WordPress sayfa oluşturucu araçlarından biridir.

Başlangıç noktası olarak kullanabileceğiniz 300’den fazla şablonla birlikte gelir. 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.

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:

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.

WPCode kullanmanın avantajı, WordPress temanızı değiştirirken CSS değişikliklerinizi kaybetmemenizdir.

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:

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.

Ş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.