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 How to change block height and width in WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/03/how-to-change-block-height-and-width-in-wordpress-og.png)
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 Preview of an image](https://www.wpbeginner.com/wp-content/uploads/2023/03/preview-of-an-image.jpg)
İç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:
- Method 1: Change the Block Height and Width Using Block Settings
- Method 2: Change the Block Height and Width Using the Columns Block
- Method 3: Change the Block Height and Width Using the Group Block
- Method 4: Change the Block Height Using the Cover Block
- Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd
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 Use alignment settings to resize an image](https://www.wpbeginner.com/wp-content/uploads/2023/04/alignment-settings-to-resize-image.png)
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 Resize an image using block panel settings](https://www.wpbeginner.com/wp-content/uploads/2023/03/resize-image-using-block-settings.jpg)
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 Resize Image block using anchors](https://www.wpbeginner.com/wp-content/uploads/2023/03/resize-image-block.gif)
İş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 Choose the column block](https://www.wpbeginner.com/wp-content/uploads/2023/03/choose-the-column-block-1.png)
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 Add Block using column](https://www.wpbeginner.com/wp-content/uploads/2023/03/add-block-using-column-1.jpg)
İş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 Column block preview](https://www.wpbeginner.com/wp-content/uploads/2023/03/column-block-preview.jpg)
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 Choose the Group block and select a layout](https://www.wpbeginner.com/wp-content/uploads/2023/03/choose-group-block.png)
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 Add a heading block to the Group block](https://www.wpbeginner.com/wp-content/uploads/2023/04/add-blocks-to-group.png)
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 Add multiple blocks in Group](https://www.wpbeginner.com/wp-content/uploads/2023/04/add-multiple-blocks-in-group.png)
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 Configure the block settings of the Group block](https://www.wpbeginner.com/wp-content/uploads/2023/04/block-settings-of-group.jpg)
İş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 Group block preview](https://www.wpbeginner.com/wp-content/uploads/2023/03/group-preview.jpg)
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 Add the Cover block](https://www.wpbeginner.com/wp-content/uploads/2023/03/add-cover-block-1.png)
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 Change the Cover block height](https://www.wpbeginner.com/wp-content/uploads/2023/04/change-cover-height.jpg)
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 Paste license key in field](https://www.wpbeginner.com/wp-content/uploads/2023/09/paste-license-key-in-field.png)
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 Click the Add New Landing Page button](https://www.wpbeginner.com/wp-content/uploads/2018/06/click-add-new-landing-page-button-4.png)
Ş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 Enter your page details](https://www.wpbeginner.com/wp-content/uploads/2023/03/enter-your-page-details.png)
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 Choose the image block in the SeedProd](https://www.wpbeginner.com/wp-content/uploads/2023/03/choose-image-block-in-seedprod.png)
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 Change the block size in SeedProd](https://www.wpbeginner.com/wp-content/uploads/2023/03/chnage-block-size-in-sp.jpg)
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 Visit the Spacing panel by switching to the Advanced tab](https://www.wpbeginner.com/wp-content/uploads/2023/03/go-to-spacing-panel.jpg)
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 Ajust the margin and padding of the block](https://www.wpbeginner.com/wp-content/uploads/2023/03/add-margin-and-padding.jpg)
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 Add the Spacer block](https://www.wpbeginner.com/wp-content/uploads/2023/03/add-spacer-block.jpg)
Ş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 Use the height slider to adjust Spacer block](https://www.wpbeginner.com/wp-content/uploads/2023/03/use-height-slider.jpg)
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 Add the Button block to the website](https://www.wpbeginner.com/wp-content/uploads/2023/03/add-button-block.png)
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 Changing height of the button block](https://www.wpbeginner.com/wp-content/uploads/2023/03/changing-height-1.gif)
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 Change width of the button block](https://www.wpbeginner.com/wp-content/uploads/2023/03/change-width.gif)
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.
Bir sorunuz veya öneriniz mi var? Lütfen tartışmayı başlatmak için bir yorum bırakın.