Bir İzlenim Yaratmak: Bloklarla Bir Post Hero Header Nasıl Oluşturulur

Hatırlayabildiğim kadarıyla, web'deki sanat yönetmenliğine takıntılıyım. Terim genellikle içeriğin kendisi etrafında tek tek sayfalar tasarlama eylemini tanımlamak için kullanılır. Bu, çoğu kullanıcının gönderi yazarken tipik olarak çalışma şeklinin tam tersidir. Şablon veya tasarımın yazılı sözcükle bağlantısı kesildi.

Jason Santa Maria'nın web sitesi muhtemelen bu tür gönderilerin en çok alıntı yapılan vitrinidir. Özellikle Candygram makalelerini incelemenizi tavsiye ederim.

Hikayelerin daha fazla görsel vurgu gerektirdiği zamanlar vardır. İçeriğin tasarımı, tek başına metinle mümkün olmayan bir resim çizebilir. Bazen bunlar ayrıntılı, tam sayfa düzenlerdir. Diğerlerinde, okuyucunun dikkatini çeken görüntülerin ve diğer öğelerin eklenmesidir.

Son zamanlarda Automattic'in Archeo temasını kullanmaktan zevk almamın sebeplerinden biri de bu. Kalıpları, her biri kendi düzenine sahip bir hikayeye sahip dergileri inceleyen erken, ev interneti öncesi anılarını getiriyor.

Yıllar boyunca, post-post tasarım için birkaç sistem geliştirmeyi denedim, ancak her zaman olmalarını istediğim yerin gerisinde kaldılar. Sorunun bir kısmı, on yıl veya daha uzun bir süre sonra sorunlarını hala çözemeyecek olmamı sağlayacak kadar geleceğe yönelik sağlam bir çerçeveye sahip olmamamdı.

WordPress blok düzenleyicisini başlattığında, bu eski fikirler yüzeye sürünmeye başladı. İnsanların hikayelerini görsel olarak anlatmasına izin verebilir ve mizanpajların birkaç yayından sonra bozulmayacağının garantisini verebilir mi?

Bugün, WordPress'in bunu eskisinden daha mümkün kıldığından eminim. Paylaşılan CSS araç setini genişletmek ve tasarım kontrollerini daha fazla bloğa getirmek gibi daha iyi yapabileceği bazı şeyler var. Ancak özünde blok düzenleyici, son kullanıcıların hikayelerini görsel ve metin öğeleri aracılığıyla anlatmasına olanak tanıyan bir tasarım dilidir. Bu, yalnızca 6.0 ve sonraki sürümlerde daha iyi hale gelecektir.

Kullanıcıların görsel olarak daha benzersiz hikayeler oluşturmak için bu araçları nasıl kullanabileceğine dair küçük bir fikir vermek istedim. Bloklarla Bina serisindeki bu giriş, bir başlangıç ​​noktası sağlamak içindir.

Takip edenler için Gotham City hakkında kurgusal bir hikaye için bir başlık/giriş bölümü oluşturacağız:

Tam sayfa bir tasarım değil, ama umarım insanların içerikleriyle daha fazla denemeye başlamasına yardımcı olur. WordPress'in şimdi çalışmak için bir ton sağlam tasarım aracı var.

Aslında bu eğitim için iki farklı modeli bir araya getirdim. Ancak, orijinal için kullanılan yöntemler konusunda rahat hissetmedim:

Özellikle, içeriğin sola ve maksimum genişlikte bir kapta hizalanmasının sorunları vardır. Bununla ilgili en az iki yol var. En çok kullanılan yöntem, içerik için ilk sütunu kullanarak ve ikincisini boş bırakarak bir 50/50 Sütun bloğu eklemektir. Bu, en çok temalar arası uyumluluğa sahiptir, ancak bazı ekran boyutlarında dağınık olabilir.

İkincisi, bir iç Grup bloğunu sola hizalamak için Kapak bloğunun konumlandırma kontrolüne güvenmektir. Bu, tamamen duyarlı bir düzen için en iyi seçenektir. Bununla birlikte, birkaç blok temasına karşı test edildiğinde çıktısı tutarsızdı.

Sonunda, ilk düzeni bir kenara koydum. Ancak yine de en azından bir göz atmak isteyenlerle paylaşmak istedim.

Yazı Başlığı Kahramanını Oluşturma

Bu model için Gutenberg eklentisinin 12.9 sürümüyle çalıştım. WordPress 5.9 kullanıcılarına sunulan özelliklere bağlı kalmaya çalıştım, ancak eski arayüz, eklentinin daha yeni güncellemelerinden daha yavaş ve daha hantal geliyor.

Ayrıca özel bir blok teması kullandım. Herhangi biri işe yaramalı, ancak "boş" bir şablona veya eşdeğer bir tam genişlikte, açık tuval seçeneğine sahip olmalıdır. Değilse, yerleşik şablon düzenleyiciden bir tane oluşturabilirsiniz. Yalnızca içindeki İçerik Gönderi bloğuna ihtiyaç duyar.

Adım 1: Arka Planı Oluşturma

Kapak bloğu, birçok düzen oluştururken ilk tercihimdir. WordPress'teki en çok yönlü seçeneklerden biridir ve birçok tasarımın önünü açar. Burada başlamam sürpriz değil.

İlk adım, yeni bir Kapak bloğu eklemek ve bunun için bir görüntü seçmektir. Ardından, tam genişliğe ayarlayın ve tam yükseklik seçeneğini açın.

Seçilen görüntüye bağlı olarak, bindirme seçeneğini ona uyacak şekilde özelleştirebilirsiniz. %70 opaklıkla "canlı camgöbeği maviden canlı mora" geçişi seçtim. Görmek için arka plan görüntüsünün yeterince görünmesini istedim ama diğer her şeyi bunaltacak kadar değil.

Adım 2: Ara Parçalar ve Bir Grup

Bu noktada, içeriğin genel düzenini oluşturmaya devam ediyoruz. 1. adımdaki Kapağın içine bir Aralayıcı, Grup ve başka bir Aralayıcı ekleyin.

Her Aralayıcıyı 2rem veya tercih ettiğiniz değere ayarlayın. Bu sadece desenin üstünde ve altında arka plan görüntüsünün biraz daha fazlasını göstermek içindir. Alternatif olarak, aynı efekti elde etmek için dış Kapak bloğundaki dolgu seçeneğini ayarlayabilirsiniz.

Grup bloğu için sadece kenarlık ayarlarını değiştirdim. Genişlik için 3px seçtim, stili düz olarak ayarladım ve renk için beyazı seçtim.

Not: Bu adımdaki Grup bloğu gelecekte gereksiz olacaktır. İdeal olarak, 3. adımdaki Kapağı yapıştırabiliriz. Ancak, henüz özel sınırları desteklemiyor. Özelliği eklemek için açık bir bilet var. WordPress'in yaklaşan 6.0 sürümünde Covers için bunu sunup sunmayacağı belli değil. Şimdilik ekstra bir sarmalayıcı eklemeliyiz.

Adım 3: İç Kapak

2. adımdan Grubun içine yeni bir Kapak bloğu ekleyin. Tam genişlikte hizalamaya ayarlayın ve tam yüksekliği etkinleştirin. Ardından, seçtiğiniz bir arka plan rengi seçin ve opaklığı tasarımınıza uyan bir şeye ayarlayın. Bu katman, metninizin okunabilmesi için yeterince karanlık olmalıdır. Her şeyin nasıl göründüğüne bağlı olarak bunu daha sonra değiştirmeyi tercih edebilirsiniz.

Gutenberg'in en son sürümünü test edenler için bir sonraki adımın sonundaki nota bakın.

4. Adım: İçerik Grubu

Söz veriyorum, bu kalıbın çalışmasını sağlamak için iç içe kapların son katmanı. Bu adım için, 2. adımdaki Kapak içine yeni bir Grup bloğu ekleyin.

Tek gerekli ayar, blok kenar çubuğu panelinde "Varsayılan düzeni devral" seçeneğini açmaktır. İçeriğe bolca nefes alma alanı sağlamak için “blok aralığı” ayarını 4rem olarak ayarladım, ancak bu temadan temaya değişebilir. Metin ve bağlantı rengi seçenekleri için de beyaz veya başka bir açık renk seçmelisiniz.

Not: Bu, bir kez daha, WordPress 5.9'un bazı sıkıntıları azaltmak için ihtiyaç duyduğumuz araçları sunmaktan çekindiği bir senaryodur. Saydam bir arka plan için 3. adımdaki Kapak bloğu gerekliydi. Ancak WordPress 6.0, kullanıcıların herhangi bir rengin opaklığını ayarlamasına olanak tanır. Gutenberg eklentisi ile test edenler için, bu adımda Grup bloğunu kullanabilir ve üzerine şeffaf bir arka plan koyabilirsiniz.

Adım 5: Akılda Kalan Başlık

Şimdi işin eğlenceli kısmına, asıl içeriğe geliyoruz. WordPress 6.0 ile önceki adımları yarıya indirmenin mümkün olabileceğini unutmayın.

Başlık ve kapsayıcısı arasında fazladan boşluk olmasını isteyerek, 3. adımdan itibaren Grup bloğunun içine 2rem yüksekliğinde bir Boşluk bloğu yerleştirdim. Ondan sonra Post Title bloğunu ekledim ve onu tam genişlikte hizalamaya ayarladım. Unutmayın, bu gönderi için "boş" bir şablon kullanıyoruz, bu yüzden başlığı bir yere eklememiz gerekiyor.

İşlerin zorlaştığı yer burası ve bu özel öğreticiyi tamamen bu yüzden paylaşmaktan neredeyse vazgeçtim. WordPress'teki yazı tipi boyutları yalnızca aktif temanız kadar iyidir. Çekirdek platformun onlar ve bunlarla ilişkili satır yükseklikleri için duyarlı bir kullanımı yoktur ve her tema sunduğu seçeneklerle çılgınca tutarsız olabilir.

Gönderi Başlığı bloğu için tema tarafından sunuluyorsa, en iyi seçenek oldukça büyük bir yazı tipi boyutu seçmektir. Çok yönlü bir tasarım, bir dizi seçenek sunacak ve bunları daha küçük ekranlar için yeniden boyutlandırmayı sağlayacaktır. Mevcut değilse, özel bir yazı tipi boyutu ve satır yüksekliği eklemeniz gerekir. Kurulumumda kullanılan değerler sırasıyla 6rem ve 1 .

Ardından, hangisinin mevcut olduğuna bağlı olarak Görünüm veya Ağırlık seçenekleri için “Siyah” seçeneğini seçin.

6. Adım: Bir Resim Ekleyin

Bu adım için iki seçeneğiniz vardır: Öne Çıkan Görsel Gönder veya Görsel bloğu. İlki, WordPress 5.9'da neredeyse çok fazla ayara sahip değil. Etkin temanız ayrıca bazı özel stilleri birinin kullanımına sunarken diğerinin kullanımına sunmayabilir.

Fotoğrafa bir başlık eklemek istediğim için öncelikle Görüntü bloğunu seçtim. Daha sonra onu tam genişlikte hizalamaya ayarladım ve arka plandan biraz ayırmak için temam tarafından kullanılabilen bir “Kenarlık” stili seçtim.

Adım 7: Sarma

Bu andan itibaren, sadece şeylerle eğlenin. Kurgusal hikayem için bir lede ve başka bir Spacer bloğu ekledim, ancak yazar ve tarihi görüntülemek gibi diğer seçeneklerle uğraşabilirsiniz.

Bu, bir araya gelen bir sürü iş gibi geldi. Ancak, WordPress 6.0 işleri çok daha basit hale getirmelidir.