Değerli blog gönderileri oluşturmak zaman ve çaba gerektirir. Nişinizde yazmak için en iyi konuları bulmanın yanı sıra, okuyucuların ilgisini çekmek ve aradıkları bilgileri hızla bulmalarına izin vermek de önemlidir.
Şimdi, bu tür bir kullanıcı deneyimine yaklaşmanın iyi bir yolu, blog gönderinizin 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 eğiticide, size süreç boyunca rehberlik edeceğiz ve ayrıca düzen JSON dosyasını ücretsiz olarak indirebilirsiniz!
Rekreasyona başlayalım!
Altıncı tema paketi için yayın şablonunu kullanma
Altıncı Tema Oluşturucu Paketini İndir
Bu eğitim boyunca yeniden oluşturacağımız özet kutusu, Altıncı Tema Oluşturucu Paketi gönderi şablonuyla mükemmel bir şekilde eşleşiyor ücretsiz. Erişmekblog makalesi ve tüm paketi indirin.
Divi Tema Oluşturucu'ya git
Ardından Divi Tema Oluşturucu'ya gidin.
Yayın şablonunu indirin
Sağ üst köşedeki simgeye tıklayın ve Gönderi şablonunu Tema Oluşturma Paketinden indirin. Daha sonra tema oluşturucudaki değişiklikleri düzenlediğinizden emin olun.
Mevcut bir Gutenberg yayını açın veya yeni bir yayın oluşturun
Şimdi, ilgili gönderi şablonunu ekledikten sonra, özet kutusunu oluşturmanın zamanı geldi. Gutenberg'i kullanarak yeni bir gönderi açın veya oluşturun.
Başlık özeti özetini ekle
Blog gönderisinin sonuna doğru yeni bir H2 başlığı ekleyeceğiz.
Online yeni bir Divi bloğu ekle
Sonra yeni bir Divi düzen bloğu ekleyeceğiz.
Divi bloğunun içinde yeni bir 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 düzen blok 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 tasarımı sekmesine geçin ve özel kenar boşluğu ve dolgu değerleri ekleyin.
- Üst kenar boşluğu: 100px
- Sol kenar boşluğu:% -10 (ofis),% 0 (tablet ve telefon)
- Sağ kenar boşluğu:% -10 (ofis),% 0 (tablet ve telefon)
- Üst dolgu: 0 piksel
- Alt doldurma: 0px
Sınır
Ayrıca kenarlık yarıçapı ekleyin.
- Sol alttaki: 16 piksel
- Sağ alttaki: 16px
Gölge kutusu
Kutunun ince gölgesi ile.
- Kutu Gölge Bulanıklığı Gücü: 60px
- Kutu gölge yayılma kuvveti: 10px
- Gölge rengi: rgba (0,0,0,0,08)
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır eklemeye devam edin:
boyutlandırma
Henüz bir modül eklemeden, satır ayarlarını açın ve satırın, bölüm kabının tüm genişliğini kaplamasına izin verin.
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Sütun yüksekliklerini eşitle: Evet
- Genişlik:% 100
- Maksimum genişlik:% 100
aralık
Ardından, varsayılan üst ve alt dolguyu hattan çıkarın.
- Üst dolgu: 0 piksel
- Alt doldurma: 0px
Sütun 1 ayarları
Arka plan rengi
Ardından sütun 1'deki ayarları açın ve bunun için beyaz bir arka plan rengi kullanın.
- Arka Plan Rengi: #FFFFFF
aralık
Ayrıca özel dolgu değerleri ekleyin.
- Üst dolgu: 70 piksel
- Alt doldurma: 70px
- Sol dolgu: 70 piksel
- Sağ dolgu: 70 piksel
Gölge kutusu
Farklı bir varsayılan ve vurgulu gölge rengine sahip 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)
Fareyle üzerine gelindiğinde dönüşüm ölçeği
Fareyle üzerine gelindiğinde, sütunu da biraz ölçeklemek istiyoruz.
- Sağ: 105%
- Düşük:% 105
Fareyle Üzerine Gelme Z Endeksi
Fareyle üzerine gelme dizini z ekleyerek sütun parametrelerini tamamlayın.
- Fareyle Üzerine Gelme Endeksi Z: 11
Sütuna # 1 metin modülünü ekleyin
İçerik alanına bir sayı ekleyin
İlk metin modülünden başlayarak modül ekleme zamanı geldi. Kutuya bir numara ekleyin içindekiler.
Gradyan arka planı
Ardından bir degrade arka planı ekleyin.
- Renk 1: # ff5e92
- Renk 2: # ffd4b6
- Gradyan yönü: 165 derece
Metin ayarları
Modül 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
- Metnin hizalanması: orta
boyutlandırma
Ardından bir genişlik ve yükseklik atayın.
- Genişlik: 150 piksel
- Yükseklik: 150px
Sınır
Ayrıca kenarlık yarıçapı ekleyin.
- Sol alt, sağ üst ve sağ alt: 100 piksel
CSS ana elemanı
Metni kapsayıcımızda ortalamak için, gelişmiş sekmedeki ana modül öğesine birkaç satır CSS kodu eklememiz gerekecek.
display: flex;align-items: center;justify-content: center;
Pozisyon
Ve modülü yeniden konumlandırarak modül parametrelerini sonlandıracağız.
- Pozisyon: mutlak
- Yer: sol üst
Sütuna # 2 metin modülünü ekleyin
H3 içeriği ekle
Bir sonraki metin modülüne geçelim. Biraz ekle içindekiler H3 sizin seçiminiz.
H3 metin ayarları
Ardından modülün H3 metninin boyutunu değiştirin.
- Başlık 3 Metin Boyutu: 23px
aralık
Ayrıca aralık ayarlarını da değiştirin.
- Üst kenar boşluğu: 100px
- Alt kenar boşluğu: 20px
Sütuna bir ayırma modülü ekleme
görünürlük
İhtiyacımız olan bir sonraki modül bir ayırma modülü. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.
- Ayırıcıyı göster: Evet
Satır Parametreleri
Modül tasarımı sekmesine geçin ve satır ayarlarını aşağıdaki gibi değiştirin:
- Çizgi rengi: # ff5e92
- Çizgi stili: düz
- Çizgi konumu: yüksek
boyutlandırma
Ayrıca modülün boyutlarını değiştirin.
- Bölücü ağırlık: 2px
- Genişlik:% 20
Sütuna # 3 metin modülünü ekleyin
İçerik ekle
Bir sonraki ve son metin modülüne geçelim. Biraz ekle içindekiler De Chore Choix.
Klonlama sütunu
Sütunu ve tüm modüllerini tamamladıktan sonra, tüm sütunu klonlayabilirsiniz.
Varsayılan kutunun gölge rengini değiştirin
2. sütundaki ayarları açın ve varsayılan gölge rengini değiştirin.
- Gölge rengi: rgba (0,0,0,0,06)
N ° 1 metin modülünün gradyan arka planını değiştirme
Sonraki 2 sütundaki ilk metin modülünü açın ve gradyan arka planını değiştirin.
- Renk 1: # 7e5ce6
- Renk 2: # 25b8ee
Metin modülünün kenarlığını değiştirme n ° 1
Ayrıca modül kenarlığı ayarlarını da değiştirin.
- Sol üst, sol alt ve sağ alt: 100 piksel
1 numaralı metin modülünün konumunu değiştirme
Ve modülü gelişmiş sekmede yeniden konumlandırın.
- Yer: sağ üst
Ayırıcının rengini değiştirme
Ayırma modülünün ayarlarını açarak devam edin. Çizginin rengini yeni renk düzenine uyacak şekilde değiştirin.
- Çizgi rengi: # 7e5ce6
Tüm içeriği değiştir
Son olarak, 2. sütundaki modülün tüm içeriğini değiştirin.
Tüm bölümü iki kez klonlayın
İlk bölümü tamamladıktan sonra, iki kez klonlayabilirsiniz.
İlk yinelenen bölümün aralığını değiştirin
İlk yinelenen bölümdeki ayarları açın ve kenar boşluğu değerlerini uygun şekilde değiştirin:
- Sol kenar boşluğu:% -5 (masaüstü bilgisayar),% 0 (tablet ve telefon)
- Sağ kenar boşluğu:% -5 (ofis),% 0 (tablet ve telefon)
İkinci yinelenen bölümün aralığını değiştirin
Ayrıca ikinci kopyayı açın, tüm kenar boşluğu değerlerini silin ve bunun yerine daha düşük bir kenar boşluğu ekleyin.
- Alt kenar boşluğu: 100px
Tüm içeriği değiştir
Son olarak, modülün tüm içeriğini değiştirin.
Düzeni yeniden kullanım için Divi kitaplığına kaydedin
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 !
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
Son düşünceler
Bu yazıda, Divi'nin yeni düzen bloklarıyla Gutenberg gönderinize nasıl özet kutusu ekleyeceğinizi gösterdik. Özet kutuları, size yardımcı olacak harika bir görsel yoldur. ziyaretçi aradıkları bilgiyi bulmak için.
Ayrıca düzen JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum yapmaktan çekinmeyin.
