WordPress Gutenberg editörü için 10 yararlı ipucu ve püf noktası

Gutenberg editörü, insanların WordPress kullanma şeklini değiştirdi. Eski klasik editörden daha görsel, blok tabanlı ve esnektir. Ancak, yeni iseniz veya bir süredir kullanıyor olsanız bile, bazı şeyler hala biraz zor olabilir.

İyi haber? İşleri daha hızlı, daha kolay ve daha eğlenceli hale getirebilecek tonlarca yararlı ipucu ve püf noktası var.

Bu yazıda 10 pratik Gutenberg ipucunu paylaşıyoruz. Bunlar, daha iyi içerik oluşturmanıza ve olağan hayal kırıklığı olmadan daha fazlasını yapmanıza yardımcı olacaktır.

WordPress Gutenberg editörünün evrimi

Gutenberg ilk olarak Aralık 2018'de WordPress 5.0'da tanıtıldı. Yıllardır olan klasik editörün yerini aldı . Gutenberg'in arkasındaki ana fikir, kullanıcılara blok tabanlı bir sistem kullanarak içerikleri üzerinde daha fazla kontrol sağlamaktı.

İlk başta, birçok kullanıcı değişimden emin değildi. Arayüz farklı hissettirdi. Biraz alışmak aldı. Ama zamanla Gutenberg çok gelişti. Daha hızlı, daha istikrarlı ve daha esnek hale geldi.

Her WordPress güncellemesiyle Gutenberg yeni özellikler kazandı. Artık tüm sayfa düzenlerini bloklarla oluşturabilirsiniz. Özel blokları yeniden kullanabilirsiniz. Site düzenleyicisini kullanarak (blok temaları için) başlıklar, altbilgiler ve şablonlar bile tasarlayabilirsiniz.

Bugün, Gutenberg sadece bir içerik editörü değil. Tam site düzenleme aracı haline geliyor . Ve her sürümde daha iyi hale geliyor.

WordPress Gutenberg editörü için 10 yararlı ipucu ve püf noktası

Gutenberg, temel içerik bloklarından çok daha fazlasını sunuyor. Birkaç akıllı ipucu öğrendikten sonra, herhangi bir koda dokunmadan daha hızlı çalışabilir ve daha iyi görünümlü sayfalar oluşturabilirsiniz.

İşte Gutenberg deneyiminizi seviyelendirebilecek yararlı hilelerin hızlı bir listesi:

1. Blokları hızlı bir şekilde eklemek için eğik çizgi komutlarını kullanın
2. Herhangi bir bloğu yeniden kullanılabilir bir bloğa dönüştürün
3. İçeriği yeniden düzenlemek için blokları sürükleyin ve bırakın
4. Kolay blok gezinme için liste görünümünü kullanın
5. Grup blokları birlikte hareket ettirmek veya şekillendirmek için
6. Kazara değişiklikleri önlemek için blokları kilitle
7. Zamandan tasarruf etmek için klavye kısayollarını kullanın
8. Hazır düzenler için desenleri kullanın
9. Sayfalar arasında blokları kopyala ve yapıştırın
10. Belirli bloklara özel CSS ekleyin

Şimdi ayrıntılara girelim!

01. Blokları hızlı bir şekilde eklemek için eğik çizgi komutlarını kullanın

Diyelim ki bir blog yazısı yazıyorsunuz ve bir paragraftan hemen sonra bir resim eklemek istiyorsunuz. İmleçinizi aşağı hareket ettirir, Enter tuşuna basın ve sonra… fareye ulaşırsınız, küçük artı simgesini tıklarsınız, blok seçeneklerini kaydırın ve son olarak görüntü bloğunu seçin. Kulağa tanıdık geliyor mu?

Şimdi, daha akıllı hale getirelim.

Tüm bu tıklama yerine, Enter'a bastıktan hemen sonra bir ileri eğik çizgi ( /) yazın. Yaptığınız anda, bir blok listesi görünür. /image yazın ve tekrar enter tuşuna basın. Tamamlamak. Farenize bile dokunmadan bir görüntü bloğu eklediniz.

Bu numara sadece görüntüler için değil. Deneyin /heading , /quote , /table veya hatta /columns deneyin. Buna alıştıktan sonra, süper şarjlı bir yazma aracına komutlar yazdığınızı hissedeceksiniz.

Hızlı, pürüzsüz ve yazı akışınızı canlı tutar. Artık kırılan odak yok. Sadece giderken yazın ve oluşturun.

02. Herhangi bir bloğu yeniden kullanılabilir bir bloğa dönüştürün

Hiç birden fazla yayın arasında yeniden kullanmak istediğiniz bir harekete geçirici mesaj veya bülten kayıt kutusu yazdınız mı? Her seferinde kopyalamak ideal değildir. Birini değiştirirsiniz, bir başkasını güncellemeyi unutun ve patlama - siteniz aynı şeyin beş farklı versiyonuyla sonuçlanır.

İşte yeniden kullanılabilir blokların kullanışlı olduğu yer.

Diyelim ki mükemmel bir CTA bölümü tasarladınız. Belki bir başlık, kısa bir cümle ve bir düğme. Tüm bu blokları seçin, üç noktalı menüyü (⋮) tıklayın ve “Yeniden Kullanılabilir Bloklara Ekle” yi seçin. “Post altbilgisi CTA” gibi bir isim verin ve kaydet.

Şimdi, yeni bir gönderi yazdığınızda, bu yeniden kullanılabilir bloğu arayın. Tek tıklamaya ekleyin. Ve işte en iyi bölüm - eğer bu bloğu güncelliyorsanız, kullandığınız her yerde değişir.

Artık tutarsızlık yok. Artık boşa harcanan zaman yok.

Kendi özel şablonunuza sahip olmak gibi, ihtiyacınız olduğunda hazır.

03. İçeriği yeniden düzenlemek için blokları sürükle ve bırak

Bazen, içeriğiniz düşündüğünüz gibi akmaz .

Belki bu görüntü metnin üzerinde daha iyi görünür. Belki alıntı sonuna kadar daha güçlü hissediyor. Gutenberg'deki içeriği yeniden düzenlemek, blokları sürüklemek ve bırakmak kadar kolaydır.

İşte böyle çalışıyor.

Herhangi bir bloğun üzerine gelin. Sol tarafta altı noktalı bir sap göreceksiniz. Alın ve bloğu istediğiniz yere sürükleyin. Birden fazla bloktan yapılmış tam bir bölümü taşımak ister misiniz? Önce bunları gruplandırın, ardından tüm grubu bir düzgün hareketle sürükleyin.

Bu, herhangi bir dağınık kodla kesilmeden, yapıştırmadan veya uğraşmadan düzen üzerinde tam kontrol sağlar.

Yapı taşlarıyla çalışmak gibi geliyor. Her şey doğru oturana kadar eşyaları hareket ettirin.

Basit. Görsel. Ani.

04. Kolay blok gezinme için liste görünümünü kullanın

Hiç tonlarca resim, metin, düğme ve belki birkaç sütun içeren uzun bir blog yazısı oluşturdunuz mu? Bir noktada, belirli bir bloğu bulmak için yukarı ve aşağı kaydırmak baş ağrısına dönüşür.

Liste görünümünün günü kaydeddiği yer burasıdır.

Editörün sol üst köşesinde üç istiflenmiş çizgi bulunan küçük simgeyi tıklayın. Bu, yayınınızdaki her bloğu sırayla gösteren bir panel açar. Temiz, yapılandırılmış bir taslak göreceksiniz - sadece içerik bloklarınız için bir içerik tablosu gibi.

Doğrudan atlamak için listeden herhangi bir bloğu tıklayabilirsiniz. Ayrıca blokları doğrudan liste görünümünden sürükleyip bırakabilirsiniz. Bir grubun veya sütunun içinde bir blok seçmeniz mi gerekiyor? Liste View anında bulmanızı sağlar, artık avlanmaz.

Özellikle karmaşık düzenler veya iç içe bloklarla çalışırken kullanışlıdır.

05. Grup blokları birlikte hareket ettirmek veya şekillendirmek için

Bunu hayal edin, bir başlık, paragraf, bir düğme ve belki bir arka plan rengi olan bir bölüm oluşturdunuz. Harika görünüyor. Ama şimdi her şeyi sayfadaki başka bir yere taşımak istiyorsunuz. Her seferinde bir blok mu? Hayır. Çok yavaş.

Sadece onları gruplandırın.

Birlikte tutmak istediğiniz tüm blokları seçin. Ardından üç noktalı menüyü tıklayın ve “Grup” u seçin. Şimdi bu bloklar tek bir kabın içine sarılıyor.

Onları bir birim olarak taşıyabilirsiniz. Gruba bir arka plan ekleyin. Dolgu ayarlayın. Hizalamayı değiştirin. Hatta bölümü tek bir tıklamayla çoğaltın.

Gruplar karmaşık düzenleri basitleştirir. Ayrıca, özellikle açılış sayfaları veya özel bölümler üzerinde çalışırken işleri düzenli tutarlar.

06. Kazanla değişiklikleri önlemek için blokları kilitle

Tasarımınızı istediğiniz gibi aldınız. Her şey mükemmel bir şekilde sıralandı. Ama sonra, düzenleme yaparken, yanlışlıkla bir bloğu silersiniz veya bir şeyi yerinden kaydırırsınız. Can sıkıcı, değil mi?

İşte düzeltme: bloklarınızı kilitleyin .

Herhangi bir bloğu tıklayın, ayarları açın (üç noktalı menü) ve “Kilitle” yi seçin. Hareketi önleyebilir, çıkarmayı önleyebilir veya her ikisini birden. Bu şekilde, sizin de dahil olmak üzere hiç kimse, önce kilidini açmadan karıştıramaz.

Yeniden kullanılabilir düzenler ve paylaşılan sayfalarla çalışırken veya sadece kendi sıkı çalışmanızı korumak istiyorsanız çok kullanışlıdır.

07. Zamandan tasarruf etmek için klavye kısayollarını kullanın

İşleri tıklamak, ancak klavye kısayolları? Bu bir sonraki seviye verimlilik.

Farenizi birkaç saniyede bir hareket ettirmek yerine, birkaç hızlı kombinasyon öğrenin ve içeriğinizden uçacaksınız. Örneğin:

• Ctrl + Shift + D (Mac'te CMD): Bir bloğu kopyalayın
• Ctrl + Alt + T: Yukarıdaki bir blok ekleyin
• Ctrl + Alt + Y: Aşağıda bir blok ekleyin
• Vites + Alt + Z: Bir bloğu kaldırın
• / (ileri eğik çizgi): Blok ekleyicisini anında açın

Daha fazlası var, ancak özellikle düzenli olarak uzun mesajlar veya sayfalar inşa ederseniz, sadece birkaçı bile dakikalar tasarruf edebilir.

Gizli hile kodlarını bilmek gibi. Ve parmaklarınız onları hatırladıktan sonra, onlarsız nasıl çalıştığınızı merak edeceksiniz.

08. Hazır düzenler için desenleri kullanın

Sıfırdan bir sayfa tasarlamak ezici hissedebilir. Ne istediğini biliyorsun, ama Block By Block'a gitmek zaman alıyor. Desenler burada devreye giriyor.

Desenler önceden tasarlanmış blok düzenleridir. WordPress varsayılan olarak bir grup içerir - kahraman bölümleri, referanslar, CTA'lar ve daha fazlası. Sadece birini seçin ve sayfanıza bırakın. Tamamlamak.

Yeni bir blok eklemek için artı simgesini tıklayın. Ardından Desenler sekmesine geçin. Metin, resimler, sütunlar, başlıklar gibi kategoriler bulacaksınız - adlandırıyorsunuz. Birini seçin ve tüm düzen anında görünür.

Metni düzenleyebilir, resimleri değiştirebilir ve stilleri değiştirebilirsiniz. Ama yapı zaten orada.

Bir tasarımcının size bir başlangıç ​​kitine sahip olması gibi. Harika görünümlü bölümler. Stres yok. Boş sayfa kaygısı yok.

09. Blokları Kopyala ve Yapıştırma Sayfaları

Bir sayfada güzel bir şey mi inşa ettiniz ve aynı şeyi diğerinde mi istiyorsunuz? Sıfırdan başlama. Blokları kopyalayıp yapıştırın .

Düşündüğünüzden daha kolay.

Bloğu (veya blok grubunu) tıklayın, ardından CTRL + C'ye (veya Mac'te CMD + C ) basın. Diğer sayfanıza veya yayınınıza gidin. Gitmesini istediğiniz yere tıklayın ve Ctrl + V'ye basın. Boom - her şey öyle, tıpkı böyle.

Tüm biçimlendirme, stiller, düğmeler, görüntüler - her şey gelir.

Ve evet, tarayıcı sekmeleri arasında bile çalışır. Böylece iki gönderi yan yana açabilir ve içeriği saniyeler içinde aralarında taşıyabilirsiniz.

10. Belirli bloklara özel CSS ekleyin

Bazen, yerleşik stiller sadece kesmez. Daha benzersiz bir şey istiyorsun. Burası özel CSS devreye giriyor.

Gutenberg, ayrı bloklara özel CSS uygulamanızı sağlar, böylece içeriğinizin belirli bölümlerini tüm sayfayı etkilemeden öne çıkarabilirsiniz.

İşte nasıl yapılacağı:

• Özelleştirmek istediğiniz bloğu seçin.
• Sağdaki blok ayarlarında gelişmiş bölümü bulun.
• Ek CSS sınıfı (ES) altında, özel bir sınıf adı ekleyin (örneğin, my-custom-style ).
• Ardından, temanızdaki WordPress özelleştiricinize veya özel bir CSS bölümüne gidin ve bu sınıfı kullanarak stiller ekleyin ( .my-custom-style { color: red; } .

Bu şekilde, küresel stillerle uğraşmıyorsunuz, sadece o blok için uyarıyorsunuz.

İçeriğinizin geri kalanını etkilemeden belirli bir düğme, başlık veya bölümün farklı bir görünüme sahip olmasını istediğinizde mükemmeldir.

Çözüm

Bu ipuçları ve püf noktaları ile WordPress Gutenberg editörüne hakim olma yolunuzdasınız. Gutenberg, iş akışınızı eğim komutlarıyla hızla kolayca eklemeye kadar, özel stiller eklemeye kadar içerik oluşturucular için bir ton esneklik sunar.

Unutmayın, anahtar stiliniz için en iyi çalışan araçları denemek ve bulmaktır. Basit yayınlar veya karmaşık düzenler oluşturun, bu özellikler zaman kazanmanıza, organize olmanıza ve sitenize kişisel bir dokunuş eklemenize yardımcı olacaktır.

Gutenberg'i Elementor ile karşılaştırmak istiyorsanız, kimin öncülük ettiğini bilmek için Elementor vs Gutenberg'deki blog yayınımızı kontrol edebilirsiniz.

Bu blog gönderisiyle ilgili geri bildirimlerinizi paylaşmak ister misiniz? Lütfen aşağıdaki yorum kutusunu kullanarak yapın. Geri bildiriminizi bilmek isteriz. Dikkatli ol!