Gutenberg Blog Gönderinize Satır İçi ve Hareketli Divi CTA Düzen Bloğu Nasıl Eklenir

Web sitenizde blog gönderileri oluşturma şeklinizi düzenlerken, büyük olasılıkla gönderinizin bir yerine çekici bir CTA eklemek isteyeceksiniz. Artık Divi'nin yeni Gutenberg yerleşim bloğu entegrasyonuyla, Gutenberg blog gönderinizin herhangi bir yerine Divi tarafından oluşturulmuş yeni bir bloğu kolayca ekleyebilirsiniz. Bu, Divi-s'in yerleşik seçeneklerini kullanarak özel bir Divi CTA oluşturmaya devam ederken, genel blog gönderisi içeriğini Gutenberg ortamında tutmanıza olanak tanır. Her iki dünyanın en iyisi! Bu öğreticide, Gutenberg gönderinize satır içi ve animasyonlu Divi CTA yerleşim bloğunu nasıl ekleyeceğinizi göstereceğiz. Divi CTA düzen bloğunun JSON dosyasını da ücretsiz olarak paylaşacağız!

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

Satır İçi ve Animasyonlu Divi CTA Düzen Bloğu'nu ÜCRETSİZ İndirin

Ellerinizi ücretsiz kahraman bölümlerine 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.

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!

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 Divi CTA Düzen Bloğu'nu blog gönderinize aktarmak için düzeni seçin. Bu kadar!

Yeniden Yaratmaya Başlayalım!

Üçüncü Tema Oluşturucu Paketi Gönderi Şablonunu Kullan

Üçüncü Tema Oluşturucu Paketini İndirin

Sıfırdan yaratmaya başlama zamanı! Her şeyden önce, yeniden oluşturduğumuz tasarım Divi blogunda yayınlanan üçüncü tema oluşturucu paketiyle eşleşiyor. Gönderiye gidin ve bu tema oluşturucu paketinin JSON dosyalarını indirin.

Divi Theme Builder'a gidin

Üçüncü tema oluşturucu paketini indirdikten sonra Divi Tema Oluşturucu'ya gidebilirsiniz.

Gönderi Şablonu Yükle

Sağ üst köşedeki simgeye tıklayarak tema oluşturucu paketinin gönderi şablonunu yükleyin.

Ardından, gönderi şablonunu seçin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın. Tema oluşturucu değişikliklerini de kaydettiğinizden emin olun. Bu noktada tüm gönderilerimize tema oluşturucu paketinin blog gönderisi şablonunu atadık.

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

Bir sonraki adım, Divi CTA düzen bloğunu Gutenberg gönderimize eklemek. Bunu yapmak için mevcut bir gönderiyi açın veya yeni bir tane oluşturun.

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

Gönderinin içine girdikten sonra, yeni bir Divi yerleşim bloğu ekleyebileceksiniz.

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

Ardından, iki seçenek elde edeceksiniz. 'Yeni Düzen Oluştur' seçeneğini seçin.

Bölüm Ayarları

aralık

Divi yerleşim bloğu 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 bazı özel kenar boşlukları 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. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve genişliği ve maksimum genişliği artırın.

• Genişlik: %100
• Maksimum Genişlik: %100

Sütuna Bölücü #1 Ekle

görünürlük

Bir Bölücü Modül ile başlayarak modül ekleme zamanı. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

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

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

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 3px
• Genişlik: %30
• Modül Hizalaması: Sağ
• Yükseklik: 3 piksel

Animasyon

Ve buna göre animasyon ayarlarını değiştirin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Süresi: 2000ms
• Animasyon Gecikmesi: 500ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100

Sütuna Bölücü #2 Ekle

görünürlük

Bir sonraki Bölücü Modülüne. Yine, 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

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

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

boyutlandırma

Daha sonra modülün boyutlandırma ayarlarını değiştirin.

• Bölücü Ağırlığı: 3px
• Yükseklik: 3 piksel

aralık

Bazı özel boşluk değerleri de ekleyin.

• Sol Kenar Boşluğu: %10
• Sağ Marj: -%20

Animasyon

Ve animasyon ayarlarını aşağıdaki gibi değiştirerek modülün ayarlarını tamamlayın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Süresi: 2000ms
• Animasyon Gecikmesi: 500ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100

Sütuna Bölücü #3 Ekle

görünürlük

Bu satırda ihtiyacımız olan bir sonraki ve son Bölücü Modüle geçiyoruz. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Ardından tasarım sekmesine gidin ve çizgi ayarlarını aşağıdaki gibi değiştirin:

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

boyutlandırma

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

• Bölücü Ağırlığı: 3px
• Yükseklik: 3 piksel

aralık

Boşluk ayarları ile birlikte.

• Alt Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: -%20
• Sağ Marj: %10

Animasyon

Ve animasyon ayarlarını değiştirerek modülün ayarlarını tamamlayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Süresi: 2000ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100

2. Satır 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

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %70
• Satır Hizalama: Merkez

Sütuna Metin Modülü #1 Ekle

H2 İçeriği Ekle

Ardından, seçtiğiniz bazı H2 içeriğiyle satırın sütununa ilk Metin Modülünü ekleyin.

H2 Metin Ayarları

Tasarım sekmesine geçin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Metin Rengi: #fc526e
• Başlık 2 Metin Boyutu: 28px

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px

Sınır

Biz de sol kenarlık kullanıyoruz.

• Sol Kenar Genişliği: 2px
• Sol Kenar Rengi: #fc526e

Animasyon

Ve özel bir animasyon ekleyerek modülün ayarlarını tamamlayın.

• Animasyon Stili: Çevir
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 1500ms

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Seçtiğiniz bazı içeriklerle bir öncekinin hemen altına başka bir Metin Modülü ekleyin.

aralık

Modülün tasarım sekmesinde hareket edin ve dolgu değerlerini buna göre değiştirin:

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Sonraki bir üst ve sağ kenarlık ekleyin.

• Üst ve Sağ Kenarlık: 2px
• Üst ve Sağ Kenar Rengi: #fc526e

Animasyon

Ve animasyon ayarlarını aşağıdaki gibi değiştirerek modülün ayarlarını tamamlayın:

• Animasyon Stili: Çevir
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 1700ms

Sütuna Düğme Modülü Ekle

Kopya Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

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

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 13px
• Düğme Metin Rengi: #ffffff
• Gradyan Rengi 1: #ff5b84
• Gradyan Rengi 2: #f94857
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 165deg
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 16px
• Alt Dolgu: 16px

Animasyon

Ve aşağıdaki animasyonu ekleyerek modülün ayarlarını tamamlayın:

• Animasyon Stili: Çevir
• Animasyon Gecikmesi: 1900ms

Klon Satır #1 & Bölümün En Altına Yerleştirin

Birinci ve ikinci satırı tamamladıktan sonra, ilk satırı kopyalayabilir ve kopyayı bölümün altına yerleştirebilirsiniz.

Bölücü Sırasını Değiştir

İlk ve son Bölücü Modüller için yerleri değiştirin.

Bölücü #1 Aralığını Değiştir

Ardından, satırınızdaki ilk Bölücü Modülü açın ve boşluk ayarlarını değiştirin.

• Üst Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: %10
• Sağ Marj: -%20

Bölücü #2 Aralığını Değiştir

İkinci Bölücü Modülün boşluk ayarlarını da değiştirin.

• Sol Kenar Boşluğu: -%20
• Sağ Marj: %10

Bölücü #3 Boyutlandırmayı Değiştir

Ardından üçüncü Bölücü Modülü açın ve boyutlandırma ayarlarında sol modül hizalamasını kullanın.

• Modül Hizalama: Sol

Bölücü #3 Animasyon Gecikmesini Kaldır

Üçüncü Bölücü Modülün animasyon gecikmesini de kaldırın ve hazırsınız! Divi CTA düzen bloğunu tamamladığınızda, değişiklikleri kaydettiğinizden ve gönderinizi güncellediğinizden emin olun.

• Animasyon Gecikmesi: 0ms

Ö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, size Divi'nin yeni Gutenberg entegrasyonundan nasıl yararlanacağınızı ve Gutenberg blog gönderinize satır içi ve animasyonlu bir Divi CTA düzeni bloğu ekleyeceğinizi gösterdik. Bu, ziyaretçiler blog yazısı içeriğinizi okurken tercih ettiğiniz CTA'nızı vurgulamanın harika bir yoludur. Divi CTA düzen bloğunun 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.