Gutenberg Gönderilerine Divi Tarzı Görüntüler Eklemek İçin Yeniden Kullanılabilir Görüntü Düzeni Blokları Nasıl Oluşturulur

Divi'nin Düzen Bloğu, Gutenberg blog gönderilerine Divi tarzı görüntüler eklemek için yeniden kullanılabilir bir görüntü düzeni bloğu olarak kullanılabilir. Bu, Divi'nin (güzel görüntüler oluşturmak için) güçlü tasarım seçeneklerini ve işlevselliğini, Gutenberg ile yazı yazma (ve blok ekleme) rahatlığıyla birleştirir.

Bu eğitimde, birkaç çarpıcı görüntü düzeni tasarlamak için Divi Düzen Bloğunun nasıl kullanılacağını göstereceğiz. Sonra bu yerleşimleri Gutenberg'de yeniden kullanılabilir bloklar olarak ekleyeceğiz. Bu teknikle, görüntülerimize hemen hemen her Divi tasarım özelliğini (arka planlar, ışık kutusu, filtreler, animasyonlar, kaydırma efektleri ve çok daha fazlası) ekleyebileceğiz. Sonra bu muhteşem tasarımı, Gutenberg ile oluşturulacak gelecekteki gönderilere resim eklemek için uygun bir resim şablonu olarak kullanabiliriz.

Başlayalım!

Gizlice Bakış

Yeniden Kullanılabilir Görüntü Düzeni Bloklarını ÜCRETSİZ olarak indirin

Bu eğitimdeki yerleşim bloklarına el koymak için önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bu Düzen Bloklarını Sitenize Aktarmak için İndirme Nasıl Kullanılır?

Bu yeniden kullanılabilir Divi Görüntü Düzeni Bloklarını sitenize aktarmak için önce indirme dosyasını açmanız gerekir. Orada sitenize aktarmanız gereken üç JSON dosyasını bulacaksınız.

Varsayılan düzenleyiciyi (Gutenberg) kullanarak bir gönderiyi düzenlemeye gidin. Sayfanın sağ üst köşesindeki "Diğer Araçlar ve Seçenekler" menüsünü açın ve "Tüm Yeniden Kullanılabilir Blokları Yönet" seçeneğini seçin.

Ardından JSON'dan İçe Aktar düğmesini tıklayın. İndirme klasöründen JSON dosyalarından birini seçin ve içe aktar düğmesine tıklayın.

Üç JSON dosyasını da içe aktarmak için bu işlemi tekrarlayın.

Tamamlandığında, Gutenberg'e yeni bir blok ekleyin. İçe aktarılan Yeniden Kullanılabilir yerleşim bloklarını Yeniden Kullanılabilir seçenek geçişi altında bulabileceğiz. Gönderinize eklemek istediğinizi tıklamanız yeterlidir.

Bu kadar!

Hadi öğreticiye geçelim, olur mu?

Başlamak için Neye İhtiyacımız Var

Başlamak için aşağıdakileri yapmamız gerekecek:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir gönderi oluşturun ve bazı sahte içerik (başlık, başlıklar, paragraflar, öne çıkan resim vb.) eklemek için varsayılan düzenleyiciyi (Gutenberg) kullanın. Temel olarak Divi tarzı görüntü düzeni bloklarını oluşturmak için bir test gönderisine ihtiyacımız var.

Bundan sonra, başlamaya hazırız.

Bölüm 1: Başlıklı Yeniden Kullanılabilir Divi Düzen Bloğu ile Tam Genişlikli Görüntü Oluşturma

Divi Düzen Bloğu Ekle

Başlamak için gönderinize bir Divi Düzen Bloğu ekleyin.

Ardından "Yeni Düzen Oluştur" u tıklayın.

Divi Görüntü Düzenini Tasarlama

Mizanpaj Bloğu Düzenleyicisi'nde, tek sütunlu bir satır ekleyerek mizanpajı tasarlamaya başlayın.

Görüntü Modülü

Satıra bir görüntü modülü ekleyin.

Ardından ayarları aşağıdaki gibi güncelleyin:

• Lightbox'ta aç: EVET

Bu, resmimizin tıklandığında bir ışık kutusunda gösterilmesini sağlayacaktır.

• Görüntü Bindirme: AÇIK
• Yer Paylaşımı Simge Rengi: #ffffff
• Vurgulu Yer Paylaşımı Rengi: rgba(120,47,130,0.57)

Resmimizin etrafında biraz boşluk oluşturmak için satır ayarlarını aşağıdaki gibi güncelleyin:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %90
• Maksimum Genişlik: 90%
• Dolgu: %5 üst, %5 alt

Bu bize görüntünün çevresinde %5 boşluk bırakacaktır. Bu aynı zamanda bölüme ekleyeceğimiz arka plan gradyanını gösterecek olan alan olacaktır.

Bölüm ayarlarını açın ve tasarımı aşağıdaki gibi bir arka plan gradyanı ile güncelleyin:

• Degrade Arka Plan Sol Renk: #782f82
• Degrade Arka Plan Sağ Renk: #fe756b
• Gradyan Yönü: 90deg

Resmin blog gönderisi içerik kabının biraz ötesine geçmesini sağlamak için bölüme aşağıdaki gibi özel bir genişlik verebiliriz:

• Genişlik: %110
• Maksimum Genişlik: %100
• Marj: -5% kaldı
• Dolgu: 0 piksel üst, 0 piksel alt

Son olarak, aşağıdaki gibi bir iç kutu gölgesi ekleyerek bölüme yaratıcı bir dokunuş katın:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Yatay Konumu: 5vw
• Kutu Gölge Dikey Konumu: 5vw
• Gölge Rengi: rgba(255,255,255,0.7)

Resim yazısı olmadan bir resim düzenine sahip olmak istiyorsak, burada durabiliriz, ancak resim düzenine bir resim yazısı eklemek için resmin altına bir metin modülü ekleyin.

Ardından, başlık metni olarak hizmet etmek için biraz dolgu içeriği ekleyin.

Ardından aşağıdaki metin ayarlarını güncelleyin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Metin Rengi: #ffffff
• Genişlik: %80
• Modül Hizalama: sağ
• Marj: %5 üst

Bittiğinde, düzeni Ctrl + S ile kaydettiğinizden emin olun veya alttaki ayarlar çubuğunu açın ve “Kaydet ve Çık” ı tıklayın.

Yeniden Kullanılabilir Bloklara Görüntü Düzeni Ekleme

Düzeni yeniden kullanılabilir bloklara eklemek için bloğun üzerindeki "Daha Fazla Seçenek" menüsünü tıklayın ve "Yeniden Kullanılabilir Bloklara Ekle"yi seçin.

Yeniden kullanılabilir bloğa bir ad verin ve “Kaydet”e tıklayın.

Şimdi yeniden kullanılabilir bloklara altyazı düzenine sahip tam genişlikte görüntü eklendi ve bir gönderi oluştururken blok listesinden erişilebilir olacak.

Değişiklikleri kaydetmek için gönderiyi güncellemeyi/kaydetmeyi unutmayın.

Bölüm 2: Resim Yazısı Yeniden Kullanılabilir Divi Düzen Bloğu ile Sol Görüntünün Oluşturulması

Şimdi yeniden kullanılabilir bloklara resim yazısı düzenine sahip tam genişlikte resim eklendi, bu bloğu resim yazısı düzenine sahip sol resmimizi oluşturmak için kullanabiliriz.

Yeniden Kullanılabilir Bloğu Normal Bloğuna Dönüştür

Başlamak için, tam genişlikte görüntü düzenini içeren yeniden kullanılabilir bloğun üstündeki "Daha Fazla Seçenek" menüsünü açın. Ardından “Normal Bloka Dönüştür” seçeneğini seçin.

Endişelenmeyin, bu az önce oluşturduğumuz yerleşim bloğunu yeniden kullanılabilir bloklardan kaldırmaz (bunun için bir seçenek var). Bu, bloğu tek bir örnek için düzenleyebilmemiz ve kullanabilmemiz için yeniden kullanılabilir bloğu normal bir blok haline getirecektir.

Düzeni Güncelle

Blok normal olduğunda, bloğun üzerindeki Düzeni Düzenle düğmesini tıklayın.

Düzen düzenleyicide, bölüm ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin:

• Genişlik: otomatik
• Maksimum Genişlik: 500 piksel

Düzen düzenleyicide yapmamız gereken tek şey bu. Düzeni kaydettiğinizden ve çıktığınızdan emin olun.

Blok seçiliyken, ana ayarlar kenar çubuğunu açın ve blok ayarlarını göstermek için blok sekmesini seçin. Gelişmiş geçişin altına aşağıdaki sınıfı ekleyin:

• Ek CSS Sınıfı: alignleft

Bu sınıf WordPress'e özgüdür ve bloğu sola kaydırır, bu da resmimizi yazımızın içindeki içeriğin soluna kaydırır.

Sınıf eklendikten sonra, bloğun “Daha Fazla Seçenek” menüsünü açın ve “Yeniden Kullanılabilir Bloklara Ekle” ye tıklayın.

Yeniden Kullanılabilir bloğa bir ad verin (örn. “Altyazılı Sol Resim”) ve kaydet'i tıklayın.

Şimdi Altyazılı Sol Görüntü düzeni bloğu, kolay erişim için yeniden kullanılabilir bloklar listesine eklendi.

Bölüm 3: “Altyazılı Doğru Görüntü” Oluşturma Yeniden Kullanılabilir Divi Düzen Bloğu

Şimdiye kadar, resim yazısı yerleşim bloğuna sahip tam genişlikte bir resmimiz ve resim yazısı yerleşim bloğuna sahip bir sol resmimiz var. Artık resim yazısı düzeni bloğu ile doğru resmi ekleyebiliriz.

Yeniden Kullanılabilir Bloğu Normal Bloğuna Dönüştür

Bunu yapmak için, soldaki resimde yeniden kullanılabilir blok başlıklı “Daha Fazla Seçenek” menüsünü açın. Ardından “Normal Bloka Dönüştür” seçeneğini seçin.

Düzeni Güncelle

Blok normal bir yerleşim bloğu olduğunda, düzeni düzenlemek için tıklayın.

Ardından bölüm ayarlarını açın ve sol kenar boşluğunu çıkarın.

Düzen düzenleyiciyi kaydedin ve çıkın.

Ardından bloğun ek CSS sınıfını aşağıdakilerle güncelleyin:

• Ek CSS Sınıfı: hizalama

Sınıf eklendikten sonra yerleşim bloğunu Yeniden Kullanılabilir Bloklara ekleyin.

Ve Yeniden Kullanılabilir Bloğuna bir ad verin (örn. “Altyazılı Doğru Resim”) ve kaydedin.

Şimdi yeni bir blok eklemek için gönderideki bir bloğun altındaki mavi artı simgelerinden birine tıklayın. Ardından, engelleme listesi açılır penceresinde Yeniden Kullanılabilir geçişini açın. Artık kullanıma hazır üç yeniden kullanılabilir görüntü düzeni bloğumuz var.

Bölüm 4: Bir Gönderide Yeniden Kullanılabilir Görüntü Düzeni Bloklarını Kullanma.

Görüntü Düzeni Bloklarımızı oluşturmuş olmamıza rağmen, bunlar (bizim amaçlarımız için) yalnızca bir gönderiye görüntü ekleme sürecini hızlı bir şekilde başlatmak için bir şablon olarak bulunurlar. Bu nedenle, bu yerleşim bloklarını kullanarak bir gönderiye gerçek bir görsel eklemek istediğimizde, görseli ve başlığı yerleşime eklemeden önce onu normal bir bloğa dönüştürmemiz gerekecek.

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

Adım 1: Yeniden Kullanılabilir Düzen Bloğu ekleyin

Gönderiye Yeniden Kullanılabilir Divi Görüntü Düzeni Bloklarından birini ekleyin.

Adım 2: Normal Bir Bloğuna Dönüştürün

“Diğer Seçenekler” menüsünü açın ve “Normal Bloka Dönüştür” seçeneğini seçin.

3. Adım: Mizanpaj Bloğu'nu yeni bir Resim ve Altyazı ile düzenleyin

Blok normal olduğunda, düzeni düzenlemek için tıklayın.

Düzeni seçtiğiniz bir resimle güncelleyin.

Ardından, metin modülü içindeki altyazı metnini güncelleyin.

4. Adım: Düzen Bloğu'nu kaydedin

Bitirdikten sonra, düzen düzenleyiciyi kaydedin ve çıkın.

Gönderiye diğer iki resim düzenini eklemek için aynı işleme devam edin.

Son sonuç

Son düşünceler

Divi yerleşim bloğunu kullanmaya alıştığımızda, blogumuz için ne kadar değerli olabileceği aşikar hale geliyor. Bu yazıda, bir Gutenberg blog gönderisine Divi tarzı oldukça havalı resimler eklemek için mizanpaj bloğunun nasıl kullanılacağını ele aldık. İşin püf noktası, düzenleri önce yeniden kullanılabilir bir blok olarak kaydetmektir. Ardından, bir blog gönderisine resim eklemeye hazır olduğumuzda, resmimizi ve başlığımızı ekleyebilmemiz için yeniden kullanılabilir bloğu kolayca normal bir bloğa dönüştürebiliriz.

Umarım bu, blog resimlerinizi tamamen yeni bir düzeye taşımak için biraz ilham verecektir.

Yorumlarda sizden haber bekliyorum.

Şerefe!