Gutenberg Gönderinize Bir Özet Kutusu Divi Düzen Bloğu Nasıl Eklenir

Değerli blog gönderileri oluşturmak zaman ve çaba gerektirir. Nişinizde yazacak en iyi konuları bulmanın yanı sıra, okuyucuları meşgul etmek ve aradıkları bilgiyi hızlı bir şekilde bulmalarına izin vermek de önemlidir. Şimdi, bu tür bir kullanıcı deneyimine yaklaşmanın iyi bir yolu, blog yayınınızın sonunda, son düşüncelerden hemen önce görsel bir özet kutusu paylaşmaktır. Divi'nin yeni yerleşim blokları ile artık Divi'nin yerleşik seçenekleriyle zahmetsizce bir özet kutusu oluşturabilirsiniz. Bu öğreticide, süreç boyunca size rehberlik edeceğiz ve düzenin JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Özet Kutusu Divi Düzen Bloğu'nu ÜCRETSİZ İndirin

Ellerinizi ücretsiz kahraman özet kutusu Divi düzeni bloğuna koymak için önce aşağıdaki düğmeyi kullanarak 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.

Düzen Bloğu JSON'u İçe Aktarma

Düzeni Divi Kitaplığına Yükle

Yukarıda indirebildiğiniz JSON dosyasını içe aktarmak için WordPress panonuzun arka ucundaki Divi Kitaplığınıza gidin ve 'İçe Aktar ve Dışa Aktar'ı tıklayın.

Ardından, indirme klasörünüzün içindeki JSON dosyasını seçin ve 'Divi Builder Düzenlerini İçe Aktar'a tıklayın.

Gutenberg Post İçine Yeni Divi Blok Bloğu Ekle

Düzeniniz içe aktarıldıktan sonra Gutenberg postanıza gidebilir ve yeni bir Divi düzen bloğu ekleyebilirsiniz.

Kaydedilen Düzenlerden JSON Dosyasını İçe Aktarın

Ardından, 'Kütüphaneden Yükle'yi tıklayın, 'Kaydedilen Düzenleriniz'e gidin ve özet kutusunu blog gönderinize aktarmak için düzeni seçin. Bu kadar!

Yeniden Yaratmaya Başlayalım!

Altıncı Tema Oluşturucu Paketi Gönderi Şablonunu Kullan

Altıncı Tema Oluşturucu Paketini İndirin

Bu eğitim boyunca yeniden oluşturacağımız özet kutusu, altıncı ücretsiz tema oluşturucu paketinin gönderi şablonuyla mükemmel bir şekilde eşleşir. Blog gönderisine gidin ve tüm paketi indirin.

Divi Theme Builder'a gidin

Ardından Divi Tema Oluşturucu'ya gidin.

Gönderi Şablonu Yükle

Sağ üst köşedeki simgeye tıklayın ve tema oluşturucu paketinin gönderi şablonunu yükleyin. Tüm tema oluşturucu değişikliklerini daha sonra değiştirdiğinizden emin olun.

Mevcut Gutenberg Postasını Açın veya Yenisini Oluşturun

Şimdi, eşleşen gönderi şablonunu ekledikten sonra, özet kutusunu oluşturma zamanı. Gutenberg'i kullanarak yeni bir gönderi açın veya oluşturun.

Özet H2 Başlığı Ekle

Blog gönderisinin sonuna doğru yeni bir H2 başlığı ekleyeceğiz.

Yeni Satır İçi Divi Bloğu Ekle

Ardından, yeni bir Divi yerleşim bloğu ekleyeceğiz.

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

Bloğu ekledikten sonra iki seçeneğiniz olacak. Yeni bir düzen oluşturmayı seçin.

Bölüm Ayarları

Arka plan rengi

Divi yerleşim bloğu düzenleyicisinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve bunun için beyaz bir arka plan kullanın.

• Arka Plan Rengi: #FFFFFF

aralık

Bölümün tasarım sekmesine gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: -%10 (Masaüstü), %0 (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -%10 (Masaüstü), %0 (Tablet ve Telefon)
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sınır

Biraz sınır yarıçapı da ekleyin.

• Sol Alt: 16px
• Sağ Alt: 16px

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 60px
• Kutu Gölge Yayılma Gücü: 10px
• Gölge Rengi: rgba(0,0,0,0.08)

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın tüm bölüm kapsayıcısının genişliğini almasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki satırın varsayılan üst ve alt dolgusunu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1 Ayarları

Arka plan rengi

Ardından, sütun 1 ayarlarını açın ve bunun için beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #FFFFFF

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 70px
• Alt Dolgu: 70px
• Sol Dolgu: 70px
• Sağ Dolgu: 70px

Kutu Gölge

Farklı bir varsayılan ve vurgulu gölge rengiyle ince bir kutu gölgesi ekleyerek devam edin.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Varsayılan Gölge Rengi: rgba(0,0,0,0)
• Vurgulu Gölge Rengi: rgba(0,0,0,0.15)

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde, sütunu da biraz ölçeklendirmek istiyoruz.

• Sağ: %105
• Alt: %105

Z Endeksinin üzerine gelin

Bir vurgulu z dizini ekleyerek sütun ayarlarını tamamlayın.

• Hover Z Endeksi: 11

Sütuna Metin Modülü #1 Ekle

İçerik Kutusuna Numara Ekle

İlk Metin Modülünden başlayarak modül ekleme zamanı. İçerik kutusuna bir numara ekleyin.

Degrade Arka Plan

Ardından, bir degrade arka planı ekleyin.

• Renk 1: #ff5e92
• Renk 2: #ffd4b6
• Gradyan Yönü: 165deg

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Rengi: #ffffff
• Metin Boyutu: 26px
• Metin Hizalama: Merkez

boyutlandırma

Ardından bir genişlik ve yükseklik atayın.

• Genişlik: 150 piksel
• Yükseklik: 150 piksel

Sınır

Biraz sınır yarıçapı da ekleyin.

• Sol Alt, Sağ Üst ve Sağ Alt: 100px

Ana Eleman CSS

Metni kapsayıcımızda ortalamak için, modülün gelişmiş sekmesindeki ana öğesine birkaç satır CSS kodu eklememiz gerekecek.

display: flex;
align-items: center;
justify-content: center;

Konum

Ve modülü yeniden konumlandırarak modül ayarlarını tamamlayacağız.

• Pozisyon: Mutlak
• Konum: Sol Üst

Sütuna Metin Modülü #2 Ekle

H3 İçeriği Ekle

Sonraki Metin Modülüne geçin. Seçtiğiniz bazı H3 içeriğini ekleyin.

H3 Metin Ayarları

Daha sonra modülün H3 metin boyutunu değiştirin.

• Başlık 3 Metin Boyutu: 23px

aralık

Boşluk ayarlarını da değiştirin.

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 20px

Sütuna Ayırıcı Modül Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat Ayarları

Modülün tasarım sekmesine gidin ve hat ayarlarını aşağıdaki gibi değiştirin:

• Çizgi Rengi: #ff5e92
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

boyutlandırma

Modülün boyutunu da değiştirin.

• Bölücü Ağırlığı: 2px
• Genişlik: 20%

Sütuna Metin Modülü #3 Ekle

İçerik Ekle

Sonraki ve son Metin Modülüne geçin. Seçtiğiniz bazı içeriği ekleyin.

Klon Sütunu

Sütunu ve tüm modüllerini tamamladıktan sonra tüm sütunu klonlayabilirsiniz.

Varsayılan Kutu Gölge Rengini Değiştir

Sütun 2 ayarlarını açın ve varsayılan gölge rengini değiştirin.

• Gölge Rengi: rgba(0,0,0,0.06)

Metin Modülünü Değiştir #1 Gradyan Arka Planı

Sonraki sütun 2'deki ilk Metin Modülünü açın ve degrade arka planını değiştirin.

• Renk 1: #7e5ce6
• Renk 2: #25b8ee

Metin Modülü #1 Kenarlığını Değiştir

Modülün kenarlık ayarlarını da değiştirin.

• Sol Üst, Sol Alt ve Sağ Alt: 100px

Metin Modülü #1 Konumunu Değiştir

Ve modülü gelişmiş sekmesinde yeniden konumlandırın.

• Konum: Sağ Üst

Bölücü Rengini Değiştir

Bölücü Modül ayarlarını açarak devam edin. Çizgi rengini yeni renk paletiyle eşleştirmek için değiştirin.

• Çizgi Rengi: #7e5ce6

Tüm İçeriği Değiştir

Son olarak, 2. sütundaki tüm modül içeriğini değiştirin.

Tüm Bölümü İki Kez Klonla

İlk bölümün tamamını tamamladığınızda, onu iki kez klonlayabilirsiniz.

İlk Yinelenen Bölümün Aralığını Değiştir

İlk yinelenen bölümün ayarlarını açın ve kenar boşluğu değerlerini buna göre değiştirin:

• Sol Kenar Boşluğu: -5% (Masaüstü), %0 (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -5% (Masaüstü), 0% (Tablet ve Telefon)

İkinci Yinelenen Bölümün Aralığını Değiştirin

İkinci kopyayı da açın, tüm kenar boşluğu değerlerini kaldırın ve bunun yerine biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 100 piksel

Tüm İçeriği Değiştir

Son olarak, tüm modül içeriğini değiştirin.

Yeniden Kullanım için Düzeni Divi Kitaplığına Kaydet

Bu özet kutusunu diğer blog gönderilerinde kullanmayı planlıyorsanız, kolayca erişebilmek için Divi Kitaplığınıza kaydettiğinizden emin olun! Bu kadar!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yeni yerleşim bloklarıyla Gutenberg gönderinize nasıl özet kutusu ekleyeceğinizi gösterdik. Özet kutuları, ziyaretçilerinizin aradıkları bilgileri bulmalarına yardımcı olmanın harika ve görsel bir yoludur. Düzenin JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.