Web sitenizde blog gönderileri oluşturma şeklinizi düzene soktuğunuzda Site Web, makalenizin bir yerine ilgi çekici bir CTA eklemek isteyebilirsiniz. Artık Divi'nin yeni Gutenberg Düzen Bloğu entegrasyonuyla, Divi tarafından oluşturulmuş yeni bir bloğu Gutenberg blog yayınınızın herhangi bir yerine kolayca ekleyebilirsiniz. Bu, içindekiler Divi'nin yerleşik seçeneklerini kullanarak özel bir Divi CTA oluşturmaya devam ederken, Gutenberg ortamındaki genel blog yazısı. Her iki dünyanın en iyisi! Bu eğitimde size Gutenberg gönderinize satır içi, animasyonlu Divi CTA düzen bloğunu nasıl ekleyeceğinizi göstereceğiz. Ayrıca Divi CTA yerleşim bloğu JSON dosyasını da ücretsiz olarak paylaşacağız!
Gidelim.
Olası Sonuç
Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.
JSON mizanpaj bloğunu içe aktarma
Düzeni Divi kütüphanesinden indirin
Yukarıda indirebildiğiniz JSON dosyasını içe aktarmak için, WordPress panonuzun arka ucundaki Divi kitaplığınıza gidin ve 'İçe ve Dışa Aktar'ı tıklayın.
Daha sonra indirme klasörünüzdeki JSON dosyasını seçin ve "Divi Builder Düzenlerini İçe Aktar" ı tıklayın.
Gutenberg'in içine yeni bir Divi Bloğu ekleyin
Düzeniniz içe aktarıldıktan sonra Gutenberg mesajınıza erişebilir ve yeni bir Divi düzen bloğu ekleyebilirsiniz.
Kaydedilmiş sunulardan bir JSON dosyası içe aktarma
Ardından "Kitaplıktan yükle" yi tıklayın, "Kaydedilmiş düzenleriniz" e gidin ve Divi CTA yerleşim bloğunu blog yazınıza aktarmak için düzeni seçin. Bu kadar!
Rekreasyona başlayalım!
Üçüncü tema paketi için yayınlama şablonunu kullanma
Üçüncü Tema Oluşturucu Paketini Kullanma
Sıfırdan yaratmaya başlama zamanı! Her şeyden önce, yeniden yarattığımız tasarım, Divi blogunda yayınlanan üçüncü tema oluşturma paketine karşılık geliyor. Makaleye git ve bu tema oluşturma paketi için JSON dosyalarını indirin.
Divi Tema Oluşturucu'ya git
Üçüncü tema oluşturma paketini indirdikten sonra Divi Tema Oluşturucu'ya erişebilirsiniz.
Yayın şablonunu indirin
Sağ üst köşedeki simgeye tıklayarak Tema Oluşturma Paketi gönderi şablonunu indirin.
Ardından gönderi şablonunu seçin ve "Divi Theme Builder şablonlarını içe aktar" ı tıklayın. Tema oluşturucudaki değişiklikleri de kaydettiğinizden emin olun. Bu noktada, tüm yazılarımıza Tema Oluşturma Paketinden blog yazısı şablonunu atadık.
Mevcut bir Gutenberg yayını açın veya yeni bir yayın oluşturun
Bir sonraki adım, Divi CTA düzen bloğunu Gutenberg gönderimize eklemektir. Bunu yapmak için mevcut bir makale açın veya yeni bir tane oluşturun.
Online yeni bir Divi bloğu ekle
Mesajın içine girdikten sonra yeni bir Divi yerleşim bloğu ekleyebilirsiniz.
Divi bloğunun içinde yeni bir düzen oluşturun
O zaman iki seçeneğiniz olacak. "Yeni bir düzen oluştur" seçeneğini seçin.
Bölüm ayarları
aralık
Divi düzen blok düzenleyicisine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve bölüm kabının etrafında boşluk oluşturmak için özel kenar boşluğu değerleri ekleyin.
- Üst kenar boşluğu: 50px
- Alt kenar boşluğu: 50px
- Sol kenar boşluğu:% -10
- Sağ kenar boşluğu:% -10
1 numaralı satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
boyutlandırma
Daha fazla modül eklemeden, çizgi parametrelerini açın ve genişliği ve maksimum genişliği artırın.
- Genişlik:% 100
- Maksimum genişlik:% 100
Sütuna 1 numaralı Ayırıcı ekle
görünürlük
Bir ayırma modülünden başlayarak modüller eklemenin zamanı geldi. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.
- Ayırıcıyı göster: Evet
Hat
Modül tasarımı sekmesine geçin ve satır ayarlarını aşağıdaki gibi değiştirin:
- Çizgi rengi: # fc526e
- Çizgi stili: düz
- Çizgi konumu: yüksek
boyutlandırma
Ayrıca boyutlandırma parametrelerini de değiştirin.
- Bölücü ağırlık: 3px
- Genişlik:% 30
- Modülün hizalanması: sağ
- Yükseklik: 3px
Animasyon
Ve animasyon ayarlarını buna göre değiştirin:
- Animasyon Stili: Slayt
- Animasyon yönü: sol
- Animasyon süresi: 2000 ms
- Animasyon gecikmesi: 500 ms
- Animasyon yoğunluğu:% 100
- Animasyon başlangıç şeffaflığı:% 0
Sütuna 2 numaralı bölücü ekle
görünürlük
Bir sonraki ayırma modülüne geçelim. Yine, "Ayırıcıyı Göster" seçeneğinin açık olduğundan emin olun.
- Ayırıcıyı göster: Evet
Hat
Ardından modül tasarımı sekmesine gidin ve satır ayarlarını aşağıdaki gibi değiştirin:
- Çizgi rengi: # e1e3e8
- Çizgi stili: düz
- Çizgi konumu: yüksek
boyutlandırma
Ardından modül boyutlandırma parametrelerini değiştirin.
- Bölücü ağırlık: 3px
- Yükseklik: 3px
aralık
Ayrıca özel aralık değerleri ekleyin.
- Sol kenar boşluğu:% 10
- Sağ kenar boşluğu:% -20
Animasyon
Ve animasyon ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:
- Animasyon Stili: Slayt
- Animasyon yönü: sol
- Animasyon süresi: 2000 ms
- Animasyon gecikmesi: 500 ms
- Animasyon yoğunluğu:% 100
- Animasyon başlangıç şeffaflığı:% 100
Animasyonunuzu değiştirmek istediğiniz sayıda ayırıcı ekleyebilirsiniz.
Satır # 2 ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:
boyutlandırma
Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Genişlik:% 70
- Çizgi hizalama: merkez
Sütuna # 1 metin modülü ekle
H2 içeriği ekle
Daha sonra satır sütununa ilk metin modülünü ekleyin. içindekiler H2 sizin seçiminiz.
H2 metin ayarları
Tasarım sekmesine geçin ve H2 metin ayarlarını buna göre değiştirin:
- 2. öğenin metin rengi: # fc526e
- Başlık 2 Metin boyutu: 28 piksel
aralık
Ardından özel dolgu değerleri ekleyin.
- Üst dolgu: 50 piksel
- Alt doldurma: 50px
- Sol doldurma: 50px
Sınır
Ayrıca sol kenarlık kullanıyoruz.
- Sol kenarlık genişliği: 2 piksel
- Sol kenarlık rengi: # fc526e
Animasyon
Kişiselleştirilmiş bir animasyon ekleyerek modül parametrelerini tamamlayın.
- Animasyon Stili: Flip
- Animasyon yönü: Merkez
- Animasyon gecikmesi: 1500 ms
Sütuna # 2 metin modülünü ekleyin
İçerik ekle
Öncekinin hemen altına başka bir metin modülü ekleyin. içindekiler De Chore Choix.
aralık
Modülün tasarım sekmesine gidin ve dolgu değerlerini buna göre değiştirin:
- Üst dolgu: 50 piksel
- Alt doldurma: 50px
- Sağ dolgu: 50 piksel
sınır
Ardından bir üst ve sağ kenarlık ekleyin.
- Üst ve sağ kenarlık: 2 piksel
- Üst ve sağ kenarlığın rengi: # fc526e
Animasyon
Ve animasyon ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:
- Animasyon Stili: Flip
- Animasyon yönü: Merkez
- Animasyon gecikmesi: 1700 ms
Sütuna bir düğme modülü ekleme
Bir kopya ekle
Bu satırda ihtiyacımız olan bir sonraki ve son modül bir düğme modülüdür. Seçtiğinizin bir kopyasını ekleyin.
Düğme ayarları
Modül tasarımı sekmesine geçin ve düğme ayarlarını aşağıdaki şekilde değiştirin:
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 13px
- Düğme metni rengi: #ffffff
- Renk gradyanı 1: # ff5b84
- Renk gradyanı 2: # f94857
- Gradyan türü: doğrusal
- Gradyan yönü: 165 derece
- Düğme kenarlığı genişliği: 0 piksel
- Düğme kenarlığı yarıçapı: 0 piksel
- Düğme harf aralığı: 1 piksel
- Düğme yazı tipi: Montserrat
- Düğme yazı tipi ağırlığı: Yarı kalın
- Düğme yazı tipi stili: büyük harf
aralık
Ardından özel üst ve alt dolgu ekleyin.
- Üst dolgu: 16 piksel
- Alt doldurma: 16px
Animasyon
Ve aşağıdaki animasyonu ekleyerek modül parametrelerini tamamlayın:
- Animasyon Stili: Flip
- Animasyon gecikmesi: 1900 ms
1 numaralı satırı klonlayın ve bölümün altına yerleştirin
Birinci ve ikinci satırları bitirdikten sonra, ilk satırı klonlayabilir ve kopyayı bölümün altına yerleştirebilirsiniz.
Ayırıcıların sırasını değiştirin
İlk ve son ayırma modülleri için yerleri değiştirin.
Son düşünceler
Bu makalede, Divi'nin yeni Gutenberg entegrasyonundan nasıl yararlanacağınızı ve Gutenberg blog gönderinize satır içi, animasyonlu bir Divi CTA satış konuşması bloğu nasıl ekleyeceğinizi gösterdik. Bu, Harekete Geçirici Mesajınızı vurgulamanın harika bir yoludur. ziyaretçi blog yayınınızın içeriğini okuyun.
