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’te Blok Yüksekliği ve Genişliği Nasıl Değiştirilir

WordPress varsayılan olarak blokları kullanarak yazılarınız ve sayfalarınız için güzel içerik düzenleri oluşturmanızı kolaylaştırır. Ancak bazen daha iyi görünmeleri için bu blokları yeniden boyutlandırmak isteyebilirsiniz.

İster sayfanızın görünümünü iyileştiriyor ister farklı cihazlarda tutarlılık sağlıyor olun, blok boyutlarını özelleştirmeyi öğrenmek sitenizin estetiğini ve kullanılabilirliğini artırabilir.

WPBeginner’da blok editörünü birkaç yıldır kullanıyoruz ve sitemizin görsel olarak çekici görünmesi için blok boyutlarını ayarlamamız gereken durumlarla karşılaştık. Bu süreçte, blokları kolayca yeniden boyutlandırmak için çeşitli ipuçları ve püf noktaları öğrendik ve bu da tutarlı ve çekici bir tasarım sürdürmemize yardımcı oldu.

Bu makalede, WordPress’te blok yüksekliğini ve genişliğini nasıl kolayca değiştirebileceğinizi göstereceğiz.

How to change block height and width in WordPress

WordPress’te Blok Yüksekliği ve Genişliği Neden Değiştirilir?

Blok düzenleyici, başlıklar, paragraflar, resimler, videolar, ses ve daha fazlası dahil olmak üzere farklı bloklar kullanarak WordPress web sitenize içerik eklemenizi sağlar.

Ancak bazen, görünümünü veya genel içeriğin düzenini iyileştirmek için belirli bir bloğun genişliğini veya yüksekliğini değiştirmek isteyebilirsiniz.

Blok boyutlarının ayarlanması, içeriğinizin duyarlı olmasını ve telefonlar, tabletler ve dizüstü bilgisayarlar dahil olmak üzere tüm cihazlarda düzgün görüntülenmesini de sağlayabilir.

Örneğin, içerik düzenleyicisine bir resim yüklemiş olabilirsiniz, ancak bu resim çok büyüktür ve sayfanın ön uçta çekici görünmemesine neden olur.

Preview of an image

İçerikle daha iyi hizalamak için başlık bloğunun boyutunu da değiştirmek isteyebilirsiniz.

Blokların genişliğini ve yüksekliğini ayarlayarak yazılarınızın ve sayfalarınızın estetik açıdan daha hoş görünmesini sağlayabilirsiniz.

Bununla birlikte, WordPress’te blok yüksekliğini ve genişliğini nasıl kolayca değiştirebileceğinizi görelim. Birkaç farklı yöntemi ele alacağız ve kullanmak istediğinize atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: Blok Ayarlarını Kullanarak Blok Yüksekliğini ve Genişliğini Değiştirin

Bu yöntemde, WordPress’in varsayılan ayarlarını kullanarak bir bloğun yüksekliğini ve genişliğini nasıl değiştireceğinizi göstereceğiz.

Şu anda WordPress tüm bloklar için aynı yeniden boyutlandırma seçeneklerini sunmamaktadır. Ancak blok düzenleyici, farklı blokların yükseklik ve genişliğini yeniden boyutlandırmak için birçok yol sunar.

WordPress’teki Resim bloğu ile başlayalım.

İlk olarak, bloğun üzerindeki araç çubuğunda yer alan ‘Hizala’ düğmesine tıklayarak Görüntü bloğunun hizalamasını değiştirebilirsiniz.

Burada, ‘Geniş Genişlik’ seçeneğini seçmek, bloğu kapsayıcıyla aynı genişlikte yapacaktır. Ya da ‘Tam Genişlik’ hizalama seçeneği, bloğu sayfanın tüm genişliği haline getirecektir.

Use alignment settings to resize an image

Ayrıca sağdaki ‘Blok Ayarları’ paneline gidip ‘Ayarlar’ bölümüne kaydırarak da bir bloğu yeniden boyutlandırabilirsiniz. Buradan, ‘Görüntü Boyutu’ açılır menüsünden bir bloğu yeniden boyutlandırabilirsiniz.

Ayrıca, ‘Görüntü boyutları’ bölümündeki ‘Genişlik’ ve ‘Yükseklik’ kutularına tercih edilen piksel boyutunu yazarak bloğun genişliğini ve yüksekliğini ayarlayabilirsiniz.

Bunun altında, bloğun boyutunu yüzdeye göre de ayarlayabilirsiniz.

Resize an image using block panel settings

Bir Görüntü bloğunu yeniden boyutlandırmanın bir başka yolu da görüntünün üzerine tıklamaktır; bu da dairesel çapalar içeren mavi bir kenarlık ortaya çıkarır.

Ardından, görüntü bloğunun yüksekliğini ve genişliğini değiştirmek için bu bağlantıları sürüklemeniz yeterlidir.

Resize Image block using anchors

İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Yöntem 2: Sütunlar Bloğunu Kullanarak Blok Yüksekliğini ve Genişliğini Değiştirin

Yeniden boyutlandırmak istediğiniz blok hizalama düğmeleri veya yeniden boyutlandırma ayarlarıyla birlikte gelmiyorsa, bu yöntem tam size göre.

Bu yöntem için bloğumuzu Columns bloğunun içine yerleştireceğiz. Her sütuna farklı bloklar ekleyebileceğiniz bir konteyner görevi görür. Ardından, sütunların yüksekliğini ve genişliğini ayarlayarak bu blokları yeniden boyutlandırabilirsiniz.

İlk olarak, ekranın sol üst köşesindeki ‘Blok Ekle’ (+) düğmesine tıklayın.

Buradan, Sütunlar bloğunu bulun ve Gutenberg editörüne ekleyin. Ardından, bir varyasyon seçmeniz istenecektir.

Choose the column block

Bundan sonra, sütun düzeni ekranda görüntülenecektir ve artık bir sütunun içindeki ‘Blok Ekle (+)’ düğmesine tıklayarak istediğiniz bloğu ekleyebilirsiniz.

Blok eklendikten sonra, sağ panelde bulunan ‘Sütun Ayarları’nı kullanarak yeniden boyutlandırabilirsiniz.

Add Block using column

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

İki sütunlu bir blok içinde iki paragraf bloğunu yeniden boyutlandırıp hizaladıktan sonra demo web sitemizde içerik bu şekilde görünüyordu.

Column block preview

Yöntem 3: Grup Bloğunu Kullanarak Blok Yüksekliğini ve Genişliğini Değiştirme

Grup bloğunu kullanarak blokların genişliğini ve yüksekliğini de ayarlayabilirsiniz. İstediğiniz blokları gruplandırmanıza ve birlikte şekillendirmenize olanak tanır.

İlk olarak, en üstteki ‘Blok Ekle’ (+) düğmesine tıklamalısınız. Ardından, Grup bloğunu bulun ve içerik düzenleyicisine ekleyin.

Bunu yaptığınızda, Grup bloğu üç farklı düzen seçeneği gösterecektir. Bu eğitim için ‘Grup’ düzenini kullanacağız.

Choose the Group block and select a layout

Bundan sonra, ekranda ‘Blok Ekle’ düğmesi görüntülenecektir. Artık istediğiniz bloğu ekleyebilirsiniz.

Bu eğitimde, bir Başlık bloğu, bir Paragraf bloğu ve bir Görüntü bloğu ekleyip yeniden boyutlandıracağız.

Add a heading block to the Group block

Gruba birden fazla blok eklemek için blok araç çubuğundan ‘Grup Seç’ düğmesine tıklayın.

Grup seçildikten sonra, alttaki ‘Blok Ekle’ düğmesine (+) tıklamanız yeterlidir.

Add multiple blocks in Group

Bunu yaptığınızda, sağdaki blok ayarları kenar çubuğu açılacaktır. Buradan, tüm blokların düzenini, yaslamasını ve yönünü kolayca ayarlayabilirsiniz.

Düzeni değiştirmek farklı blok boyutlarını da değiştirecektir. Sonuçtan memnun kalana kadar bu ayarları yapılandırabilirsiniz.

Configure the block settings of the Group block

İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Demo web sitemizde Grup bloğu bu şekilde görünüyordu.

Group block preview

Yöntem 4: Kapak Bloğunu Kullanarak Blok Yüksekliğini Değiştirme

Kapak bloğunu kullanmak istiyorsanız bu yeniden boyutlandırma yöntemi tam size göre. Bir resim veya videonun üstünde metin ve diğer içerikleri görüntülemenizi sağlar.

İlk olarak, üstteki ‘Blok Ekle’ (+) düğmesine tıklayın ve Kapak bloğunu bulun.

Bunu yaptıktan sonra, sizden bir renk seçmeniz veya WordPress medya kütüphanesinden bir resim yüklemeniz istenecektir. Bu resim veya renk Kapak bloğunun arka planı olarak kullanılacaktır.

Add the Cover block

Ardından, istediğiniz herhangi bir bloğu Kapak bloğunun içine sürükleyip bırakın.

Bundan sonra, sağ sütunda blok ayarlarını açmak için Kapak bloğuna tıklamanız gerekir.

Buradan, pikselleri kullanarak Kapak bloğunun yüksekliğini ayarlayabileceğiniz ‘Boyutlar’ paneline gidin.

Change the Cover block height

Son olarak, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Kapak bloğunun nasıl kullanılacağına ilişkin daha ayrıntılı talimatlar için WordPress blok düzenleyicisinde Kapak Görseli ve Öne Çıkan Görsel hakkındaki başlangıç kılavuzumuza göz atmak isteyebilirsiniz.

Bonus: SeedProd’daki Gelişmiş Blokları Kullanarak Güzel Sayfalar Oluşturun

SeedProd eklentisini kullanarak kolayca güzel ve estetik açıdan hoş sayfalar oluşturabilirsiniz.

Piyasadaki en iyi WordPress sayfa oluşturucusudur. İhtiyaçlarınıza göre özelleştirmesi ve yeniden boyutlandırması çok kolay olan blokları kullanarak açılış sayfaları oluşturmanıza olanak tanır.

Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekecek. Daha fazla ayrıntı için WordPress eklentisi yükleme kılavuzumuzu okuyabilirsiniz.

Not: SeedProd ücretsiz bir sürüm de sunuyor, ancak bu eğitim için premium sürümü kullanacağız.

Etkinleştirmenin ardından, WordPress kontrol panelinizden SeedProd ” Ayarlar sayfasına gitmeli ve lisans anahtarını ‘Lisans Anahtarı’ kutusuna girmelisiniz.

Lisans anahtarını SeedProd web sitesindeki hesap sayfanızda bulabilirsiniz.

Paste license key in field

Ardından, bir açılış sayfası oluşturmaya başlamak için yönetici kenar çubuğundan SeedProd “ Açılış Sayfaları ekranını ziyaret edin.

Buradan, ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklamanız yeterlidir.

Click the Add New Landing Page button

Şimdi ‘Yeni Bir Sayfa Şablonu Seçin’ ekranına yönlendirileceksiniz. SeedProd, aralarından seçim yapabileceğiniz birçok önceden hazırlanmış şablon sunar.

Bir şablon seçtikten sonra, açılış sayfanız için bir ad ve URL sağlamanız istenecektir.

Bu ayrıntıları ekledikten sonra, devam etmek için ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklamanız yeterlidir.

Enter your page details

Bu, SeedProd’un sürükle ve bırak sayfa oluşturucusunu başlatacak ve şimdi sayfanızı düzenlemeye başlayabilirsiniz. Ayrıntılı talimatlar için WordPress ile açılış sayfası oluşturma kılavuzumuza bakın.

Bu eğitimde, bir Görüntü bloğu ve bir Düğme bloğu ekleyip yeniden boyutlandıracağız.

İlk olarak, soldaki blok panelinden Görüntü bloğunu sürüklemeniz ve sayfada istediğiniz yere bırakmanız gerekecektir.

Choose the image block in the SeedProd

Ardından, sol sütunda blok ayarlarını açmak için Görsel bloğuna tıklayın. Buradan, medya kitaplığınızdan bir görsel yükleyebilirsiniz.

Ardından, piksel veya yüzde kullanarak bloğun yüksekliğini ve genişliğini değiştirebilirsiniz.

Change the block size in SeedProd

Ayarlar panelinin üst kısmındaki ‘Gelişmiş’ sekmesine geçerek görüntü boyutunu ve konumunu da ayarlayabilirsiniz.

Ardından, ayarları genişletmek için Aralık paneline tıklamanız yeterlidir.

Visit the Spacing panel by switching to the Advanced tab

Burada, bloğun kenar boşluğunu ve dolgusunu ihtiyaçlarınıza göre ayarlamak için değerler eklemeniz yeterlidir.

Bloğun üst, alt, sol ve sağ alanları için kenar boşluğunu ve dolguyu ayarlayabilirsiniz.

Ajust the margin and padding of the block

Seedprod ile, iki farklı blok arasına biraz boşluk bırakmak için bir Spacer bloğu da ekleyebilirsiniz.

İlk olarak, sol sütundan ‘Spacer’ bloğunu bulmanız ve eklemeniz gerekecektir. Ardından, ayarlarını açmak için üzerine tıklayın.

Add the Spacer block

Şimdi, ‘Yükseklik’ kaydırıcısını kullanarak ara parçanın yüksekliğini kontrol edebilirsiniz.

Ara blok, dağınıklıktan uzak bir web sitesi oluşturmanıza yardımcı olabilir.

Use the height slider to adjust Spacer block

Video, Başlık ve Düğme blokları da dahil olmak üzere diğer blokların genişliğini ve yüksekliğini de aynı şekilde değiştirebilirsiniz.

Sol sütunda Düğme bloğunu bulun ve sayfanıza sürükleyin.

Add the Button block to the website

Ardından, blok ayarlarını açmak için Düğmeye tıklamanız gerekecektir.

Buradan, üst kısımdan ‘Gelişmiş’ sekmesine geçin. ‘Vertical Padding’ kaydırıcısını sürükleyerek bloğun yüksekliğini değiştirebilirsiniz.

Changing height of the button block

Genişliği değiştirmek için sol sütundaki ‘Yatay Dolgu’ kaydırıcısını sürükleyin.

İşiniz bittiğinde, ‘Kaydet’ düğmesine tıklamayı unutmayın.

Change width of the button block

Umarız bu makale WordPress’te blok genişliğini ve yüksekliğini nasıl değiştireceğinizi öğrenmenize yardımcı olmuştur. WordPress blok düzenleyicisine görsel ekleme ve hizalama hakkındaki makalemizi ve en iyi Gutenberg dostu WordPress temaları için en iyi 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

Yorumlar

  1. Tebrikler, bu makaleye ilk yorum yapan kişi olma fırsatını yakaladınız.
    Bir sorunuz veya öneriniz mi var? Lütfen tartışmayı başlatmak için bir yorum bırakın.

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.