Gutenberg Blog Yazıları için Yeniden Kullanılabilir Bir Divi Düzen Bloğu Nasıl Oluşturulur

Yayınlanan: 2020-02-12

Divi Düzen Bloğu, Divi Teması için yararlı bir yükseltme olmaya devam ediyor ve Gutenberg düzenleyicisindeki bir blog gönderisine herhangi bir Divi Düzeni eklememize izin veriyor. Hatta diğer WordPress blokları gibi bir Divi Layout Block'u Gutenberg'de yeniden kullanılabilir bir bloğa dönüştürebiliriz. Bu, bazı yararlı Divi Layout tasarımlarını Gutenberg'de bir yazı yazmanın normal akışına dönüştürmek için kapıyı açar.

Bu eğitimde, Gutenberg blog gönderileri için yeniden kullanılabilir bir Divi Düzen Bloğunun nasıl oluşturulacağını göstereceğiz. Bunu göstermek için, bu gönderi için örnek yeniden kullanılabilir Divi yerleşim bloğumuz için bir bölüm ayırıcı oluşturacağız. Ancak, Divi oluşturucudan hemen hemen her şey için yeniden kullanılabilir bir Divi yerleşim bloğu oluşturmak için bu aynı tekniği kolayca uygulayabiliriz.

Başlayalım.

Gutenberg Blog Gönderisi için Divi Düzen Bloğu Oluşturma

Blog Yazısı Oluşturun veya Düzenleyin

Başlamak için yeni bir blog yazısı oluşturmamız veya mevcut olanı düzenlememiz gerekiyor. Bu örnek için, birkaç Başlık ve Paragraf Bloğu kullanarak yazı başlığına ve gövdesine biraz sahte içerik ekleyelim. Ardından, öne çıkan bir resim ekleyin ve Divi Sayfa Ayarları altındaki Sayfa Düzeni için “Kenar Çubuğu Yok”u seçin.

Gutenberg Divi E-posta Seçeneği

Satır İçi Divi Düzen Bloğu Ekle

Gönderinin büyük bir kısmını oluşturduktan sonra, tek yapmamız gereken gönderi içeriği alanında istediğimiz herhangi bir yere yeni bir Divi Düzen Bloğu eklemek.

Eklemek için, e-posta seçeneğini eklemek istediğimiz alanın üzerine gelin. Ardından yeni bir blok eklemek için mavi artı simgesine tıklayın. Açılır blok listesinde Divi Layout bloğunu seçin.

yeniden kullanılabilir bölme düzeni bloğu

Divi Düzen Bloğu İçinde Yeni Düzen Oluşturun

Divi Düzen Bloğu seçildikten sonra, “Yeni Düzen Oluştur” veya “Kütüphaneden Yükle” seçeneğine sahip olacağız. Örneğimiz için yeni bir bölücü oluşturmamız gerektiğinden, “Yeni Düzen Oluştur” seçeneğini seçin.

yeniden kullanılabilir bölme düzeni bloğu

Divi Düzen Blok Düzenleyicisini Kullanarak Düzen Tasarlayın

Build New Layout butonunu seçtikten sonra, layout blok editörü içerisinde Divi layoutumuzu tasarlayabiliriz.

Bu örnek için, Divi'nin bölüm şekli bölücülerini ve bir degrade arka planını kullanarak özel bir ayırıcı veya bölücü oluşturacağız. Bu, bir Gutenberg gönderisine bölüm bölücüler eklemenin uygun bir yolu için yeniden kullanılabilir bir yerleşim bloğuna dönüştürebileceğimiz kesinlikle bir tasarım öğesidir.

Kesit ayırıcı tasarımı oluşturmak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

  • Degrade Arka Plan Sol Renk: #ddd6f3
  • Degrade Arka Plan Sağ Renk: #faaca8
  • Gradyan Yönü: 90deg
  • Başlangıç ​​Konumu: %30

yeniden kullanılabilir bölme düzeni bloğu

  • Üst Bölücü Stili: ekran görüntüsüne bakın
  • Üst Bölücü Rengi: #ffffff
  • Üst Bölücü Yüksekliği: 50px

yeniden kullanılabilir bölme düzeni bloğu

  • Alt Bölücü Stili: ekran görüntüsüne bakın
  • Alt Bölücü Rengi: #ffffff
  • Alt Bölücü Yüksekliği: 50px
  • Alt Bölücü Çevirme: Yatay

yeniden kullanılabilir bölme düzeni bloğu

  • Yükseklik: 100 piksel
  • Dolgu: 0 piksel üst, 0 piksel alt

yeniden kullanılabilir bölme düzeni bloğu

Tasarım tamamlandıktan sonra Divi yerleşim bloğunu kaydettiğinizden emin olun.

yeniden kullanılabilir bölme düzeni bloğu

Şimdi Divi Düzen Bloğu bölüm ayırıcısı, WordPress yazı düzenleyicisinin içinde görünecektir.

yeniden kullanılabilir bölme düzeni bloğu

Düzen bloğunun Divi düzeninin üstündeki ve altındaki aralığın, arka uçta ön uçtan daha büyük görünebileceğini unutmayın.

Şimdi, bu aynı bölüm ayırıcıyı gelecekteki gönderilere eklemeyi kolaylaştırmak için bu Divi yerleşim bloğunu yeniden kullanılabilir bir yerleşim bloğuna dönüştürmeye hazırız.

Ancak bunu yapmadan önce, WordPress'te yeniden kullanılabilir bir bloğun ne olduğunu bilmek yardımcı olabilir.

Yeniden Kullanılabilir Düzen Bloğu Nedir?

WordPress'in varsayılan Blok Düzenleyicisi'ndeki (Gutenberg) yeniden kullanılabilir bir düzen bloğu, Divi'deki global bir öğeye çok benzer. Blok birden çok kez kullanılabilir, ancak içerik ve görünüm tüm örnekler için tamamen aynı kalır. Ve yeniden kullanılabilir yerleşim bloğunu düzenlediğimizde, değişiklik site genelindeki yerleşim bloğunun tüm örneklerine uygulanır. WordPress'te bir düzen bloğu yeniden kullanılabilir hale getirildiğinde, gönderi yazılırken blok bloklar listesinde mevcut olacaktır. Bu, aynı düzen bloğunu birden çok blog gönderisine birden çok kez eklemeyi gerçekten kolaylaştırır.

Divi Düzen Bloğunu Yeniden Kullanılabilir Düzen Bloğuna Dönüştürme

Divi Düzen Bloğumuzu yeniden kullanılabilir bir blok yapmak için, düzen bloğunun üzerine gelin ve üç nokta simgesine tıklayarak ayarlar menüsünü açın. Ardından listeden “Yeniden Kullanılabilir Bloklara Ekle” seçeneğini seçin.

yeniden kullanılabilir bölme düzeni bloğu

Ardından yeniden kullanılabilir bloğa bir ad verin ve bloğu yeniden kullanılabilir bir blok olarak kaydetmek için kaydet düğmesine tıklayın.

yeniden kullanılabilir bölme düzeni bloğu

Artık blog gönderisinin içine yeni bir blok eklediğimizde, yeni yeniden kullanılabilir düzen bloğumuzu liste içinde (Yeniden Kullanılabilir kategori geçişi altında) bulabiliriz. Yeniden kullanılabilir yerleşim bloğunu basit bir şekilde tıklayın ve gönderiye eklenecektir.

yeniden kullanılabilir bölme düzeni bloğu

Şimdi canlı gönderiye bakarsak, aynı tam bölüm ayırıcının iki örneğini görebiliriz.

yeniden kullanılabilir bölme düzeni bloğu

Yeniden kullanılabilir bloğu gönderi veya site boyunca birden çok kez kullandığımızda, yeniden kullanılabilir yerleşim bloğunun örneklerinden birini düzenleyebiliriz ve bu değişiklikler site genelinde bloğun tüm örneklerine uygulanacaktır.

Yeniden kullanılabilir yerleşim bloğunu düzenlemek için bloğun üzerine gelin ve bloğun sağ üst köşesindeki düzenle düğmesine tıklayın.

yeniden kullanılabilir bölme düzeni bloğu

Ardından yeniden kullanılabilir blok içindeki düzeni seçin (tıklayın) ve beliren üst menüdeki düzenle simgesine tıklayın. Sağ kenar çubuğundaki blok sekmesinin altındaki düzeni düzenle bağlantısını da tıklayabiliriz.

yeniden kullanılabilir bölme düzeni bloğu

Ardından düzenin tasarımını istediğimiz gibi değiştirin. Bu örnek için, degrade arka planı için kullanılan renkleri değiştirebiliriz.

Düzeni kaydettikten sonra, yeniden kullanılabilir düzen bloğunun sağ üst kısmındaki kaydet düğmesine tıkladığınızdan emin olun. Ardından gönderiyi güncelleyin ve canlı sitedeki değişiklikleri görüntüleyin.

yeniden kullanılabilir bölme düzeni bloğu

Yeniden kullanılabilir düzenin tüm örnekleri için tasarım değişikliklerinin güncellendiğini fark edeceksiniz.

yeniden kullanılabilir bölme düzeni bloğu

İpucu: Yeniden Kullanılabilir Düzen Bloğunun Şablon Olarak Kullanılması

Gönderimizde yeniden kullanılabilir düzen bloğunun değiştirilmiş bir sürümünü kullanmak istediğimiz zamanlar vardır. Bu, gönderiye bir başlangıç ​​şablonu olarak yeniden kullanılabilir bir düzen bloğu eklememize olanak tanır, böylece site genelinde yeniden kullanılabilir bloğu etkilemeden düzen bloğunu belirli bir örnek için özelleştirebiliriz.

Yeniden kullanılabilir bir yerleşim bloğunu şablon olarak kullanmak için önce yeniden kullanılabilir bloğu gönderiye ekleyin.

Ardından blok menüsünü açın ve “normal bloğa dönüştür” seçeneğini seçin.

yeniden kullanılabilir bölme düzeni bloğu

Artık bu örnek için belirli bir tasarımın düzenini, diğer yeniden kullanılabilir blokları etkilemeden düzenleyebiliriz.

Son düşünceler

Yeniden kullanılabilir Divi Düzen Blokları oluşturmak, özellikle bölüm ayırıcı gibi Divi tasarım öğeleri için yardımcı olabilir. Bu, yazılarımızda bölücüyü tekrar tekrar kullanmamıza izin verir. Sadece bir gönderi yazma sürecini kolaylaştırmakla kalmaz, aynı zamanda bize site genelinde bloğun tasarımını çok daha kolay güncelleme gücü verir. Bu gönderide, yeniden kullanılabilir bir blok olarak bir bölüm ayırıcının nasıl ekleneceğini gösterdik, ancak bu aynı teknik, sayısız başka nedenlerle sonsuz yeniden kullanılabilir Divi yerleşim blokları oluşturmak için kullanılabilir.

Yeniden kullanılabilir Divi Düzen Bloklarını kendi blog gönderilerinize dahil etmenin faydalı yollarını belirleyebilir misiniz?

Yorumlarda sizden haber bekliyorum.

Şerefe!