Gutenberg Blog Gönderinize Divi Email Optin Nasıl Eklenir

Divi Düzen Bloğu, Divi Builder'ın güçlü tasarım özelliklerini WordPress'in varsayılan blok düzenleyicisine (Gutenberg) getirmenin birçok uygun yolunun kapısını açar. Bu, tanıdık Gutenberg blok arayüzünü kullanarak blog gönderi içeriğinizin büyük bir kısmını yazmanıza ve ardından özel tasarım veya işlevsellik gereken yerlere Divi Düzenleri eklemenize olanak tanır. Bir Divi Düzen Bloğu, Divi Builder'da oluşturabileceğiniz her şeyi içerebilir, ancak bir E-posta Seçeneği kadar basit ve gerekli bir şey eklemek için de harikadır.

Bu eğitimde, Divi Düzen Bloğu kullanarak bir Gutenberg Blog Gönderisine güzel bir Divi E-posta Optinin nasıl ekleneceğini ele alacağız.

Başlayalım!

Gizlice Bakış

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

Ve bu kadar!

Hadi öğreticiye geçelim, olur mu?

Gutenberg Blog Gönderinize Divi E-posta Seçeneği Ekleme

Blog Yazısı Oluşturun veya Düzenleyin

Başlamak için yeni bir blog yazısı oluşturmamız veya mevcut olanı düzenlememiz gerekiyor. Bu örnek için, birkaç Başlık ve Paragraf Bloğu kullanarak yazı başlığına ve gövdesine biraz sahte içerik ekleyelim. Ardından, öne çıkan bir resim ekleyin ve Divi Sayfa Ayarları altındaki Sayfa Düzeni için “Kenar Çubuğu Yok”u seçin.

Satır İçi Divi Düzen Bloğu Ekle

Gönderinin büyük bir kısmını oluşturduktan sonra, tek yapmamız gereken gönderi içeriği alanında istediğimiz herhangi bir yere yeni bir Divi Düzen Bloğu eklemek. Gönderinin içeriğiyle açıkça ilgilenen nitelikli bir olası satış yakalamak için gönderinin sonuna daha yakın bir yere ekleyebiliriz.

Eklemek için, e-posta seçeneğini eklemek istediğiniz alanın üzerine gelin ve ardından yeni bir blok eklemek için mavi artı simgesine tıklayın. Açılır blok listesinde Divi Layout bloğunu seçin.

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

Divi Düzen Bloğu seçildikten sonra, “Yeni Düzen Oluştur” veya “Kütüphaneden Yükle” seçeneğine sahip olacağız. E-posta seçeneğini sıfırdan oluşturmamız gerektiğinden, “Yeni Düzen Oluştur” seçeneğini seçin.

Bölüm Tasarımı

Düzen Bloğu düzenleyicisinin içinde, gönderimize dahil edilecek e-posta seçeneğini tasarlamaya başlayabiliriz. Bu düzenleyicide tasarladığımız her şey gönderinin Divi Düzen Bloğu alanında görüntülenecektir.

Başlamak için, zaten orada bulunan varsayılan bölümün bölüm ayarlarını açın.

Arka Plan Gradyanı

Ardından aşağıdaki gibi bir arka plan gradyanı ekleyin:

• Arka Plan Gradyanı Sol Renk: #ff9945
• Arka Plan Gradyanı Sağ Renk: #f86a4c

Bölücüler

Ardından, tasarım sekmesine ve aşağıdaki gibi bir üst ve alt bölüm ayırıcıya gidin:

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Üst Bölücü Rengi: #f86a4c
• Üst Bölücü Yatay Tekrar: 0.8x

• Alt Bölücü Stili: ekran görüntüsüne bakın
• Alt Bölücü Rengi: #ff9945
• Alt Bölücü Yatay Tekrar: 0.8x
• Alt Bölücü Çevirme: yatay ve dikey

Kenar Boşluğu ve Sınır

Ayırıcılar yerleştirildikten sonra, bölüme yukarıdan ve aşağıdan biraz boşluk bırakın ve ardından aşağıdaki gibi bir kenarlık ve animasyonla bitirin:

• Kenar boşluğu: 20 piksel üst, 20 piksel alt
• Yuvarlatılmış Köşeler: 30px
• Kenar Genişliği: 2px
• Kenar Rengi: #ff9945
• Animasyon Stili: Çevir

Sütun Ekle ve Satır Genişliğini Ayarla

Bölüm tamamlandığında, satıra tek sütunlu bir yapı ekleyin.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

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

E-posta Seçeneğini Oluşturun

E-posta Opsiyon Modülü Ekle

Ardından, satıra bir e-posta tercih modülü ekleyin.

E-posta Opsiyon İçeriği

E-posta tercih içeriği ayarları için aşağıdakileri güncelleyin:

• Başlık: “Her Hafta ÜCRETSİZ İpuçları Alın!”
• Gövde: [varsayılan sahte içeriği koru]
• Mailchimp Listesi: [bir liste ekleyin]
• Tek Ad Alanını Kullan: EVET
• Arka Plan Rengini Kullan: HAYIR

E-posta Opsiyon Tasarımı

Alanlar

Tasarım sekmesine geçin ve aşağıdakileri güncelleyerek e-posta tercih alanlarını tasarlayın:

• Düzen: Gövde Sağda, Form Solda
• Alanlar Arka Plan Rengi: #f86a4c
• Alan Metin Rengi: #ffffff
• Alan Yazı Tipi: IBM Plex Sans
• Alanlar Metin Boyutu: 18px
• Alanlar Harf Aralığı: 2px
• Alanlar Çizgi Yüksekliği: 2em

Başlık

Başlık metni ayarlarını aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: IBM Plex Sans Condensed
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 60px (masaüstü), 30px (telefon)
• Başlık Satırı Yüksekliği: 1,2 em (masaüstü), 1,6 (telefon)

Buton

Düğme için aşağıdakileri güncelleyin:

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Rengi: #ff9945
• Düğme Arka Plan Gradyanı Sol Renk: #ff9945
• Düğme Arka Plan Gradyanı Sağ Renk: #ffffff
• Gradyan Yönü: 90deg
• Bitiş Konumu: %34
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: IBM Plex Sans
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: TT
• Düğme Dolgusu: 15 piksel üst, 15 piksel alt

Dolgu malzemesi

Ve son bir dokunuş için aşağıdaki dolguyu ekleyin:

• Dolgu: %5 sol, %5 sağ

Son sonuç

Divi Layout editöründe mizanpajı tasarlamayı bitirdiğimizde, mizanpajı kaydettiğinizden emin olun. Ardından, canlı bir sayfada e-posta tercihinin bir önizlemesini görebilmek için gönderiyi kaydedin. İşte böyle görünüyor.

Gönderiyi aşağı kaydırırken e-posta seçeneğinin hafif animasyonu.

Son düşünceler

Gutenberg gönderinize bir e-posta seçeneği eklemek Divi Layout Block ile inanılmaz derecede basitleşti. Saniyeler içinde tamamen işlevsel (ve kullanımı kolay) bir e-posta seçeneği eklemekle kalmaz, aynı zamanda Divi Builder'ı özel tasarım, vurgulu efektler ve animasyon eklemek için de kullanabilirsiniz. Bütün bunlar bir eklenti kullanmak zorunda kalmadan!

Yorumlarda sizden haber bekliyorum.

Şerefe!