Ana İçeriğe Geç

Gutenberg makalenize animasyonlu bir blok nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Web sitenizdeki blog gönderilerinizi düzene koyduğunuzda, muhtemelen yayınınıza bir yere ilgi çekici bir CTA eklemek isteyebilirsiniz. Şimdi Divi'nin yeni Gutenberg düzen bloğu entegrasyonuyla, Gutenberg blog yazınızın herhangi bir yerine kolayca yeni bir Divi yerleşik bloğu ekleyebilirsiniz. Bu, Divi'nin yerleşik seçeneklerini kullanarak kişiselleştirilmiş bir Divi CTA oluşturmaya devam ederken, blog gönderisinin genel içeriğini Gutenberg ortamında tutmanıza olanak tanır. Her iki dünyanın en iyisi! Bu eğiticide, Gutenberg gönderinize animasyonlu bir çevrimiçi Divi CTA düzen bloğunu nasıl ekleyeceğinizi göstereceğiz. Divi CTA düzen bloğunun 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.

Divi animasyon sunumu

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.

Divi içe aktarma

Daha sonra indirme klasörünüzdeki JSON dosyasını seçin ve "Divi Builder Düzenlerini İçe Aktar" ı tıklayın.

Json divi 1'i içe aktar

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.

Divi düzeni ekle

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!

Bir divi düzeni yükle

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 teması wordpress paketi

Divi Tema Oluşturucu'ya git

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

Tema oluşturucu divi menüsü

Yayın şablonunu indirin

Sağ üst köşedeki simgeye tıklayarak Tema Oluşturma Paketi gönderi şablonunu indirin.

Divi modül taşınabilirliği

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.

Ekran görüntüsü wordpress.go 2020.02.05 14 58 38

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.

Gutenberg üzerine yayının oluşturulması

Online yeni bir Divi bloğu ekle

Mesajın içine girdikten sonra yeni bir Divi yerleşim bloğu ekleyebilirsiniz.

Divi düzeni ekle

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Yeni bir divi düzeni oluşturun

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
Divi'de bölüm aralığını yapılandırın

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:

Bir divi sütunu seçin

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
Divi çizgi boyutlandırmasını yapılandırın

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
Divi ayırıcı görüntüleme

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
Divi ayırıcı stilini yapılandırma

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
Bölücü divi'yi özelleştirme

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
Animasyon divi ayırıcı modülünü başlatma

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
Yeni bir divi ayırıcısı ekle

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
Yeni divi satırı ekle

boyutlandırma

Ardından modül boyutlandırma parametrelerini değiştirin.

  • Bölücü ağırlık: 3px
  • Yükseklik: 3px
Bölücü bölücü ağırlığı

aralık

Ayrıca özel aralık değerleri ekleyin.

  • Sol kenar boşluğu:% 10
  • Sağ kenar boşluğu:% -20
Divi ayırıcı modül aralığını yapılandırma

Animasyon

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • 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
2. animasyon ayırıcısını özelleştirme

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
Hat 2 boyutlandırma özelleştirme

Sütuna # 1 metin modülü ekle

H2 içeriği ekle

Ardından, istediğiniz H2 içeriğine sahip satır sütununa bir ilk metin modülü ekleyin.

Divi sütununa metin ekleyin

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
Divi metin bölümü

aralık

Ardından özel dolgu değerleri ekleyin.

  • Üst dolgu: 50 piksel
  • Alt doldurma: 50px
  • Sol doldurma: 50px
Divi metin bölümünü özelleştirin

Sınır

Ayrıca sol kenarlık kullanıyoruz.

  • Sol kenarlık genişliği: 2 piksel
  • Sol kenarlık rengi: # fc526e
Bir divi sınırı kullanın

Animasyon

Kişiselleştirilmiş bir animasyon ekleyerek modül parametrelerini tamamlayın.

  • Animasyon Stili: Flip
  • Animasyon yönü: Merkez
  • Animasyon gecikmesi: 1500 ms
Divi modülü metin parametresi

Sütuna # 2 metin modülünü ekleyin

İçerik ekle

Seçtiğiniz içeriğe sahip bir öncekinin hemen altına başka bir metin modülü ekleyin.

Yeni bir divi modülü metni ekleyin

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
Divi metin modülü dolgusunu yapılandırın

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.

Divi düğmesi ekle

Düğme ayarları

Modül tasarımı sekmesine geçin ve düğme ayarlarını aşağıdaki şekilde değiştirin:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • 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
Divi düğmesi gradyan yapılandırması
  • 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
Düğme stili divi'yi özelleştirin

aralık

Ardından özel üst ve alt dolgu ekleyin.

  • Üst dolgu: 16 piksel
  • Alt doldurma: 16px
Divi düğme modülü aralığını yapılandırın

Animasyon

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

  • Animasyon Stili: Flip
  • Animasyon gecikmesi: 1900 ms
Divi CTA mizanpaj bloğu

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 yazınıza çevrimiçi ve animasyonlu bir Divi CTA sunum bloğu ekleyeceğinizi gösterdik. Ziyaretçiler blog yazısı içeriğinizi okurken tercih ettiğiniz Harekete Geçirici Mesajınızı vurgulamanın harika bir yoludur. 

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer