WordPress'te Bloklar Nasıl Yeniden Boyutlandırılır

Resmi olarak WordPress 5.0'da tanıtılan Gutenberg Blok Düzenleyici, kullanıcılara WordPress içeriklerini ve sitelerini tamamen özelleştirme fırsatı verir. Artık TinyMCE Classic Editor gibi bir WYSIWYG aracında oluşturma ihtiyacı ile kısıtlanmayan Gutenberg, yazının veya sayfa içeriğinin her bir öğesi için ayrı bloklar sağlar. Kullanıcılar, her belirli blok için ayarları kontrol ederek, WordPress içeriğini her zamankinden daha kolay bir şekilde tasarlayabilir. Tasarımları öne çıkarmanın en basit yollarından biri de onları varsayılan ayarlarının ötesine taşımaktır. Bu yüzden, kutunun dışında düşünmeye (ve tasarlamaya) başlayabilmeniz için WordPress'te blokların nasıl yeniden boyutlandırılacağına bakacağız.

Blok düzenleyicideki çoğu yeniden boyutlandırma, blokların duyarlı yapısı nedeniyle sitenin içerik alanıyla sınırlıdır. Sayfanızın içerik alanını tam genişliğe ayarladıysanız, o alan içinde çalışıyor olacaksınız. Örneğin, 580px veya 1200px olarak ayarlanmış bir gönderi içeriği alanınız varsa, orada çalışacaksınız. WordPress'te blokları nasıl yeniden boyutlandıracağınızı öğretmek için kullandığımız yöntemlerin tümü, herhangi bir belirli bloğun kapsayıcısının sınırları içinde kalacağınız fikrine dayanmaktadır.

Editörde Bloklar Nasıl Yeniden Boyutlandırılır

Tüm bloklarda olmasa da bazılarında yerleşik yeniden boyutlandırma seçenekleri bulunur. Bunlar, bariz nedenlerle yeniden boyutlandırılması en kolay olanlardır. Ancak bloğa bağlı olarak, yeniden boyutlandırma seçenekleri farklı yerlerde olacaktır.

Örnek 1: Görüntü Bloğu

Bloğun üzerine tıklamak bağlam menüsünü getirecektir ve buradaki yeniden boyutlandırma seçenekleri aslında boşluk seçenekleridir. Bununla birlikte, geniş genişlik ve tam genişlik hizalamaları, görüntü bloğunun boyutunu ya kapsayıcının genişliğine (geniş) ya da tüm sayfanın genişliğine (dolu) değiştirecektir.

Ayrıca sağ kenar çubuğundaki blok ayarlarını kullanarak görüntü bloğunu yeniden boyutlandırabilirsiniz. Uygun şekilde adlandırılan Görüntü Boyutu bölümünde, bloğu yeniden boyutlandırabileceğiniz bir dizi seçenek bulunur.

WordPress, hızlı yeniden boyutlandırma için bir açılır menüye sahiptir ve küçük resim , orta , büyük ve tam boyut arasından ön ayarları seçebilirsiniz . Tam boyutun seçilmesi, temanızın gerçekten tam olarak görüntülenip görüntülenmediği veya içerik alanına sığıp sığmadığı konusunda değişiklik gösterir.

Ayrıca genişlik ve yüksekliği piksel bazında özel olarak ayarlayabilirsiniz. Altında yüzdeye göre ayarlayabilirsiniz. Yüzde, genişlik ve yükseklik alanlarındaki sayısal değeri temel alır . Açılır menüden seçtiğiniz ön ayarlı görüntü boyutu değil.

Son olarak, beyaz, dairesel çapalarla mavi bir kenarlık getirmek için görüntünün üzerine tıklayabilirsiniz. Bloğu yeniden boyutlandırmak için bunları sürükleyebilirsiniz.

Görüntüyü ölçeklendirmek için herhangi bir bağlantı noktasına tıklayıp sürüklemeniz yeterlidir. Bunu yapmak, blok ayarları menüsündeki yükseklik ve genişlik alanlarındaki boyutlandırmayı ayarlayacaktır.

Örnek 2: Olay Bloğu

Olay Bloğu için, yeniden boyutlandırma ayarları yalnızca düzenleyicinin kendi bağlam menüsünde bulunur. (Olay Bloğu, Automattic tarafından yükleyeceğiniz ayrı bir eklentidir ve Gutenberg çekirdek düzenleyicisinin bir parçası değildir.)

Bazı görüntü blok seçenekleri gibi, buradaki yeniden boyutlandırma seçenekleri de teknik olarak aralık seçenekleridir. Ancak iki seçenek Ortaya Hizala ve Geniş Genişlik'tir. Birini kapta ortalanacak veya ekran boyunca tam genişlikte olacak şekilde seçebilirsiniz.

Editörün kendisinde bloğun yüksekliğini ayarlamak biraz zor ama işe yarıyor. Boş blok alanında basitçe enter/dön tuşuna basarsanız, fazladan boş paragraf blokları ekleyerek yüksekliği artırabilirsiniz.

İdeal olmayan bir çözüm. Ancak hızlıdır ve özellikle Olay Bloğu için gerçek bir yükseklik ayarlama seçeneğinin olmaması göz önüne alındığında, bir tutam içinde çalışır.

Örnek 3#: WordPress'te Blokları Yeniden Boyutlandırmak için Sütunları Kullanma

Yeniden boyutlandırmanız gereken blok, ayarlar panelinde veya içerik menüsünde yeniden boyutlandırma seçenekleriyle gelmiyorsa, blok düzenleyicinin sütunlarını kullanmak herhangi bir bloğu yeniden boyutlandırmanın başka bir yoludur. Yeni bir blok eklemek için + düğmelerinden herhangi birine basarak Sütunlar bloğunu arayın.

Sütun bloğu içinde istediğiniz diğer blokları ekleyebilirsiniz. Arama seçeneklerinde blok düzenleyici Kalıplar da görünür. Bunlar, içeriğinizin önceden boyutlandırılmış ve yerleştirilmiş olduğu, içeriğinizin yer tutucunun yerini almasını bekleyen gönderinize veya sayfanıza ekleyebileceğiniz şablonlardır.

En başından itibaren, Sütunlar bloğu, sütunun kendisinin boyutunu seçmenize olanak tanır. Her biri ayrı sütunlar için kullanılan sayfanın farklı yüzdesine sahip 6 farklı yöne bölünmüştür.

Bunlar, kullanabileceğiniz tek yapılandırma değildir. Herhangi bir noktada yeni bir sütun eklemek için bloğun içindeki mavi + düğmesini kullanabilirsiniz. Her bir sütunun, genişliğini yüzdelere göre ayarlayabileceğiniz kendi ayarlar paneli vardır.

Tasarımınız için doğru boyutlandırmayı elde etmek biraz deneme gerektirebilir. Ancak, bittiğinde, ön sayfanızda iyi tasarlanmış ve iyi aralıklı içeriklere sahip olabilirsiniz. Blok düzenleyicide sahip olduğunuz boş sütunların da ön uçta boş görüneceğini unutmayın.

Genişliği, yerleşimi ve farklı sütun sayısını ayarlayarak bloklarınız yeniden boyutlandırılabilir ve hemen hemen her şekilde yerleştirilebilir.

Daha Fazla Boyutlandırma Seçeneğine mi ihtiyacınız var? Daha Gelişmiş Bir Sayfa Oluşturucu düşünün

Blokları yeniden boyutlandırmak için bu yöntemlerden bazılarının sınırlayıcı olabileceğinin farkındayız. Sizin için fazla sınırlayıcı olduklarını düşünüyorsanız, daha gelişmiş bir sayfa oluşturucuya bakmanın zamanı gelmiş olabilir.

Örneğin bizim Divi'miz, her modül (blok) için size şekil, boyut ve boşluk üzerinde Gutenberg'de mümkün olandan çok daha fazla kontrol sağlayan Boyutlandırma ve Dönüştürme seçeneklerine sahiptir. Çoğu gelişmiş sayfa oluşturucu da bunu yapar, bu nedenle Gutenberg'in seçeneklerinin çok sınırlayıcı olduğunu düşünüyorsanız, Divi gibi bir şeye göz atmak bir sonraki adım olabilir.

CSS Kullanarak WordPress'te Blokları Yeniden Boyutlandırma

Her bloğun, Gelişmiş Ayarlar altındaki ayarlar panelinde bir CSS bölümü vardır. Diğer bloğa özgü gelişmiş ayarların yanı sıra, her birinin Ek CSS Sınıf(lar)ı için bir alanı vardır. İster sitenizde mevcut olsun, ister bu blok için özel olarak oluşturmuş olun, bu bireysel bloğa istediğiniz seçicileri atayabilirsiniz.

Normalde, bireysel bloklar için Sınıflar yerine CSS Kimlikleri kullanmanızı öneririz, ancak bu, blok düzenleyici tarafından desteklenmez (en azından varsayılan olarak). Bu nedenle, kimlikler yerine bireysel bloklara ayak uydurmak için yalnızca birden fazla Sınıf kullanmak isteyeceksiniz. Sınıflar gerçekten geniş öğe türleri kategorilerini kapsamayı amaçlarken, kimlikler tek tek öğeler içindir. Bu durumda, kodunuzda her şeyi düz tutmak için net bir adlandırma kuralı kullanmanızı öneririz.

Ne olursa olsun, sınıfı metin alanına girmeniz yeterlidir. Bu alana Sınıf adının önüne nokta/nokta eklemeyin .

Şimdi, Görünüm - Özelleştir'e gitmeli ve en alttaki Ek CSS bölümünü bulmalısınız. Bloğu beğeninize göre yeniden boyutlandırmak için CSS kodunu yazın veya yapıştırın.

Mutlak oldukları için ölçümleri piksel (px) cinsinden kullanmaktan kaçınmanızı öneririz. Tercihen, bloğu ayarlamak için vw (görünüm alanı genişliği) , vh (görünüm alanı yüksekliği) veya % (yüzde) kullanacaksınız. Bunların her biri, cihaza ve/veya etrafındaki diğer içeriğe göre ölçeklenir.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

% ve vw/vh'nin benzer şekilde çalışmasına rağmen farklı olduğunu unutmayın. Hepsi yüzdelerle çalışır, ancak bunlar farklı çapalara göredir.

Yüzde ölçümü, elemanın tutulduğu kap ile ilişkilidir. Bu nedenle, elemanın oturduğu bölüm veya satır ekranın kenarlarına gitmiyorsa, width:100% ayarı bile sınırlara ulaşmayacaktır.

Bununla birlikte, vh/vw kullanmak, sitenin öğelerine değil, cihazın kendisinin görüş alanına göreli olduğu için olacaktır. height:80vh öğesini kullanarak, bir mobil cihazda, masaüstünde veya tablette görüntülenip görüntülenmediğine bakılmaksızın, bu bloğun ekran yüksekliğinin %80'ini kapladığından her zaman emin olabilirsiniz.

Çözüm

WordPress'teki blok düzenleyici, kullanıcılara daha önce kullanılamayan çok sayıda özelleştirme seçeneği sunar (yani editörün içinde). WordPress'te blokların nasıl yeniden boyutlandırılacağını bilmek, blok düzenleyiciyi tam anlamıyla kullanabilmek için çok önemlidir. Ve artık repertuarında tam site düzenleme ile bu, zaman geçtikçe daha faydalı olacak bir beceridir.

WordPress'te blokları yeniden boyutlandırma hakkında paylaşabileceğiniz bazı ipuçları ve püf noktaları nelerdir?

Makale özellikli görsel 3rieart / Shutterstock.com