Gutenberg Blok Düzenleyicisi Yeniden Ziyaret Edildi

Aşağıdaki makale size yardımcı olacaktır:Gutenberg Blok Düzenleyicisi Yeniden Ziyaret Edildi

Yakında, merak ediyorum, web tasarım şirketleri ve geliştiricileri, bir web sitesindeki her düzen varyasyonu için özel bir şablon kodlamadan maketten canlı sayfaya geçecek mi? Pahalı ve yavaş sayfa oluşturma eklentileri geçmişte mi kalacak?

Bu makalede, WordPress Gutenberg editörüne karmaşık modern web sitesi düzenleri oluşturmak için gereken esnekliği sağlayan bazı özelliklere bakacağız. Ancak buna geçmeden önce, WordPress’in neden bu kadar yerleşik düzenleme kapasitesine ihtiyaç duyduğunu anlamamıza yardımcı olacak.

Neden

Varsayılan olarak WordPress, ters kronolojik sıraya göre düzenlenmiş ve güncel olması amaçlanan makalelerden (yazılar olarak da adlandırılır) oluşan bir blog yayınlayabilir. Varsayılan WordPress ayrıca sayfalar da yayınlar: daha kalıcı nitelikteki ve zamandan ziyade konuya göre tanımlanan ayrı ayrı içerik parçaları. WordPress size blog yazıları ve web sitesi sayfalarının yanı sıra, her ikisini de ek bir yazılım veya kodlama becerisi gerektirmeden yönetebilmeniz için bir arayüz sunar. Bütün bunları yapmak küçük bir başarı değil.

Bu harika. Bunun dışında daha fazlasını istiyoruz. Çoğu zaman daha fazlasına ihtiyaç duyarız. Aslında eşyaların güzel görünmesini sağlamak sadece estetik değildir. Seçici, gösterişli ya da yüksek sahtekarlık yapmıyoruz. Çoğu durumda, bir web sitesinin pazarda rekabet edebilmesi için iyi görünmesi gerekir.

Web tasarımcıları, her şirketin benzersiz bir mesajı olduğunu ve web sitesinin bu mesajı tam olarak ifade edecek şekilde uyarlanması gerektiğini bilir; bu, bir geliştirici tarafından oluşturulan özel bir web tasarım şablonu olmadan neredeyse imkansızdır.

Kısa bir süre önce, WordPress web tasarımınıza paragraflardan ve maddelerden daha fazlasını eklemek istiyorsanız bir programcı tuttunuz. Ya da benim gibi HTML ile ilgili bir kitap aldınız ve kolları sıvadınız.

Kodlama gerektirmeden içeriğin görüntülenmesi üzerinde gelişmiş kontrol sağlamak için oluşturulmuş eklentiler olan Sürükle-Bırak Sayfa Oluşturucularına girin. Bu, CMS ve web sitesi oluşturucu arasındaki seçimi neredeyse ortadan kaldırdı; artık CMS’niz her ikisi olarak da çalışabilir.

Bazıları son derece etkileyici olsa da, bazı dezavantajları da var. Birincisi, paraya mal olma eğilimindedirler. Bazıları destek ve güncellemeleri genişletmek için daha fazla paraya ihtiyaç duyuyor.

Tavsiye Edilen:  Web Sitesinin Yeniden Tasarımının Arkasındaki Bilim

İkincisi, bunlar yerel WordPress kodu değildir ve geliştiricileri tarafından WordPress web sitenizin ömrü boyunca aktif olarak sürdürülmeleri gerekir. Eklenti güncellenemiyorsa, güvenlik nedeniyle bir noktada kaldırılmalıdır. Sayfa oluşturucunuzu kaldırırsanız, içeriğinizin büyük miktarda görünür sayfa oluşturucu koduyla dolu devasa bir biçimlendirilmemiş metin bloğu olarak görüntülenme ihtimali yüksektir.

Üçüncüsü, sayfa oluşturucular, bazen web sitenizi yavaşlatabilecek büyük miktarda komut dosyası ve varlık yükler. Web sitesinin yükleme süresini iyileştirmek sıkıcı bir iş olabilir ve ilk etapta şişkin, yavaş bir web sitesinden kaçınmak çok daha kolaydır.

WordPress zamanla gelişti ve gelişmeye devam edecek. Sayısız diğer iyileştirmelerin yanı sıra yayınlamayı kolaylaştırmak için yeni özellikler eklendi.

Artık WordPress’in Wix, Squarespace ve diğer içerik yönetimi yenilikleriyle rekabet etmesi gerekiyor. Orijinal WordPress düzenleyicisi (TinyMCE) rutin içerik biçimlendirme görevlerini yerine getirebilse de, gereken HTML’nin ötesindeki her şey ya Metin düzenleyiciye ya da sayfa şablonunun kendisine manuel olarak kodlanır.

Gutenberg, önceki düzenleyicideki gelişmiş içerik görüntüleme eksikliğini gideriyor. Henüz tipik bir sayfa oluşturucu eklentisinde bulunan her şeye sahip olmasa da, eklenti ek yükü olmadan hedeflerinize ulaşmanız için zaten yeterli olabilir. Tahmin edebileceğiniz gibi halihazırda pek çok Gutenberg geliştirme eklentisi mevcut.

Eğlenceli Bölüme Geçelim

WordPress, Gutenberg’i ilk sürümünden bu yana özenle güncelliyor. Gutenberg WordPress düzenleyicisinin en son sürümünü kullanmak için, WordPress çekirdek sürümünden daha sık güncellenen bağımsız Gutenberg eklentisini yükleyebilirsiniz. WordPress 5.3, Kasım 2019’da çıkacak ve 6.5 sürümüne kadar editördeki tüm iyileştirmeleri içermesi bekleniyor.

WordPress Gutenberg Eğitimi

Hayal edebileceğiniz her türlü düzeni kodlamaya gerek kalmadan pratik olarak oluşturmamıza olanak tanıyan bazı özellikleri burada bulabilirsiniz.

Yeniden Kullanılabilir Bloklar

Yeniden kullanılabilir herhangi bir şey web sitesi geliştirmede önemli bir kısayoldur. Aynı kod yığınının yeniden kullanılması, ön uçta neredeyse tutarlı bir görünümü garanti eder. Gutenberg ile tekrar ihtiyacınız olacak blokları Yeniden Kullanılabilir Bloklar olarak kolayca saklayabilirsiniz.

Örneğin, daha sonra sayfalara hızlı bir şekilde bırakmak isteyebileceğiniz bir iletişim formunu nasıl saklayacağınız aşağıda açıklanmıştır.

  1. Formu bir bloğa yerleştirme
  2. Yeniden Kullanılabilir Bloklara Ekle’yi seçin
  3. Bir isim ver
  4. Yeniden Kullanılabilir’e erişerek istediğiniz yerde yeniden kullanın.
Tavsiye Edilen:  Pazarlama Karmanızda Etkileşimli Testler Nasıl Kullanılır?

Yeniden kullanılabilir bir blok oluşturmak için aşağıdaki dört adımı izleyin:

Grup Bloğu

Grup blokları, birden fazla içerik türünden oluşan içerik bölümleri oluşturmanıza ve bunları Yeniden Kullanılabilir Bloklar olarak yeniden kullanmanıza olanak tanır. Bu özellik, WordPress’i, akla gelebilecek her türlü içeriği içeren duyarlı sütunların hemen hemen her türlü düzenlemesini görüntüleyebilen sayfa oluşturucu eklentilerinin yetenekleriyle güncel hale getirmenin anahtarıdır.

Bir Grup Bloğu oluşturmak için Düzen Öğelerinden Grup simgesini bulun:

Bir grup bloğu içinde sütunları iç içe yerleştirebilirsiniz. Bir sayfa öğesi veya bölümü oluşturana kadar sütunların içine herhangi bir içerik öğesi ekleyebilirsiniz. Yeni grubu Yeniden Kullanılabilir Blok olarak kaydederseniz, tamamını web sitenizdeki herhangi bir sayfaya veya gönderiye bırakabilirsiniz. Ayrıca, aksi halde ihtiyaç duyacağınız karmaşık CSS’yi eklemeden her şey mobil cihazlarda duyarlı bir şekilde görüntülenecektir.

Yalnızca Gutenberg’i kullanarak metni ⅓ sütunda ve sağdaki ⅔ sütunda bir YouTube videosunu görüntüleyen tam genişlikte bir grup bloğu oluşturdum. WordPress’in yanı sıra ihtiyacım olan tek şey YouTube videosunun URL’siydi, YouTube’dan yerleştirme kodunun tamamını almama gerek yoktu.

Bu Grup Bloğunu oluşturmak için şu adımları izleyin:

1. Düzen Seçeneklerinden Grup Bloğu Ekleyin

2. Sütun Ekle

Birkaç sütun ekleyin ve üçte bir, üçte ikilik bir sütun düzeni seçin. Daha sonra isterseniz sütun genişliği kaydırıcısını kullanarak sütun genişliklerine ince ayar yapabilirsiniz.

3. İçerik Ekleyin

İçerik öğelerini ekleyin: Sol sütunda bir Başlık ve bir paragraf, sağda ise bir YouTube videosu. URL’yi yapıştırdıktan sonra Yerleştir’i tıklayın.

4. Hizalama

Bundan sonra editörünüzde buna benzer bir şey göreceksiniz:

Şimdi dikey ve yatay hizalamaları ve tam genişliği ayarlamaya geçiyoruz. Burası küçük bir pratiğin yardımcı olduğu yerdir. Yakında ihtiyacınız olan öğeleri hızlı bir şekilde seçebileceksiniz, sadece ilk başta sabırlı olun.

Varsayılan olarak sütunların içindeki içerik Üste Hizalanmış’tır. Ancak metnin videonun dikey ortasına hizalanmasını istiyoruz.

5. Sınırlayıcı Çizgiler

Sınırlayıcı çizgileri görebilmeniz için grupta herhangi bir yeri tıklayın. Ardından, Sütunlar grubunun gri sekmesini görene kadar farenizi sınırlayıcıların sol üst köşelerinin üzerine getirin ve gri köşe sekmesine tıklayın.

Tavsiye Edilen:  İçerik Varlıklarınızı Nasıl Yeniden Amaçlandırırsınız?

6. Daha Fazla Hizalama

Sekmeye tıkladıktan sonra dikey hizalamayı nereye ayarlayacağınızı göreceksiniz. Ortayı seçin. Her sütunu ayrı ayrı dikey olarak hizalamak için aynı işlemi kullanabilirsiniz.

Artık istediğimiz hizalamayı görebiliriz:

7. Blok Renkleri

Grup Bloğunun rengini ve genişliğini ayarlama:

En dıştaki sınırlayıcıya (Grup) tıklamak, Grup Bloğunun tamamı için bir arka plan rengi ayarlamanıza olanak tanır. Koyu maviyi veya istediğiniz herhangi bir rengi seçin. Başlık ve metin, arka plana bağlı olarak anında açık veya koyu renge dönüşecektir:

8. Sütun Genişliği

Ardından, Grup sınırlayıcısına tekrar tıklayın ve grubu Tam Genişlikte görüntülenecek şekilde ayarlamak için ortadaki simgeyi seçin:

9. Başlık Hizalaması

Ayrıca sol sütundaki başlığı ve metni Sağa Hizalanmış olarak ayarlamak isteyeceksiniz. Video sağdaki sütunu dolduracağından sağdaki yatay hizalama kritik değildir, ancak gerektiği gibi sola, sağa veya ortaya ayarlayabilirsiniz.

10. Yeniden Kullanılabilir SS’leri kaydedin

Ardından son olarak Bloğunuzu Yeniden Kullanılabilir Blok olarak kaydedin:

11. Kutlayın

Kendiniz için güzel bir şey yapın. Hakediyorsun.

Web Tasarımınızı WIX’a Bırakın!

Zamanınız değerlidir ve web sitesi düzenlemelerinde tahminde bulunmak hem zaman hem de para kaybına neden olabilir. Teksaslı işletmeler, yüksek kaliteli bir web sitesi oluşturmak ve sürdürmek için Houston veya Austin web tasarım şirketlerine güvenebilirler.

WIX, Teksas merkezli işletmelerin markalarını büyütmelerine yardımcı olan yaklaşık 40 yıllık deneyime sahiptir. Ücretsiz danışmanlık randevusu almak için bugün bizimle iletişime geçin ve ihtiyaçlarınızı karşılamaya nasıl yardımcı olabileceğimizi görün!