Divi Layout Block, Divi Builder'ın güçlü tasarım özelliklerini WordPress'in varsayılan blok düzenleyicisiyle (Gutenberg) entegre etmenin birçok kullanışlı yolunun kapısını açar. Bu, çoğu şeyi yazmanıza olanak tanır. içindekiler tanıdık Gutenberg blok arayüzünü kullanarak blog gönderinizi düzenleyin, ardından özel tasarım veya işlevsellik gerektiren yerlere Divi düzenlerini enjekte edin. Divi düzen bloğu, Divi Builder'da oluşturabileceğiniz her şeyi içerebilir, ancak aynı zamanda basit ve temel bir şeyi eklemek için de harikadır. formulaire abonelik.
Bu eğitimde, nasıl ekleneceğini göreceğiz. formulaire Divi düzen bloğunu kullanan bir Gutenberg blog gönderisine abonelik.
Olası Sonuç
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 gönderisinin 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 postanıza aktarmak için düzeni seçin. Bu kadar !
Ve hepsi bu!
Öğreticiye geçelim, tamam mı?
Gutenberg blog yayınınıza Optin e-posta modülü ekleyin
Blog yayını oluşturma veya düzenleme
Başlamak için yeni bir blog yazısı oluşturmamız veya mevcut olanı düzenlememiz gerekiyor. Bu örnek için şunu ekleyelim içindekiler Birkaç başlık ve paragraf bloğu kullanarak makalenin başlığını ve gövdesini taklit edin. Ardından, öne çıkan bir görsel ekleyin ve Divi sayfa ayarları altındaki düzen için "Kenar Çubuğu Yok"u seçin.
Çevrimiçi bir Divi mizanpaj bloğu ekleyin
Gönderinin çoğunu oluşturduktan sonra tek yapmamız gereken, gönderi alanında istediğimiz yere yeni bir Divi düzen bloğu eklemek. içindekiler yayınlanma. Mesajın içeriğiyle açıkça ilgilenen nitelikli bir müşteri adayı yakalamak için bunu mesajın sonuna yakın bir yere ekleyebiliriz.
Eklemek için fareyi seçenek e-postasını eklemek istediğiniz alanın üzerine getirin, ardından yeni bir blok eklemek için mavi artı simgesine tıklayın. Bağlamsal bloklar listesinde Divi Layout bloğunu seçin.
Divi mizanpaj bloğunda yeni bir mizanpaj oluşturma
Divi yerleşim bloğu seçildikten sonra, "Yeni bir düzen oluştur" veya "Kitaplıktan yükle" seçeneklerine 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 düzenleyicide, gönderimize dahil edilecek e-posta tercihini tasarlamaya başlayabiliriz. Bu düzenleyicide tasarladığımız her şey, yazının Divi Layout Block alanında görüntülenecektir.
Başlamak için, oradaki varsayılan bölümün bölüm ayarlarını açın.
Düzen için iki sütunlu bir düzen seçeceğiz.
Ardından E-posta Optin modülünü sütunlardan birine ekleyeceğiz, sütun seçimini size bırakıyorum.
Ardından, bölümün arka planını özelleştireceğiz. Tasarımınızı benzersiz kılmak için her zaman değerleri değiştirebilirsiniz. Ancak aşağıdaki değerleri kullandık:
- Arka plan: # ff6100
- Üst ve Alt Ayırıcı: üstten 13. sayım.
- Bölücü öğe genişliği: 40px (üst ve alt).
Şimdi karşı sütuna metin ekleyeceğiz. Burada teşvik metnini kullanacaksınız. ziyaretçi Abone olmak için.
Daha sonra farklı değişiklikler yapmanız gerekir:
- Yazı tipi metni: Montserrat
- Yazı tipi rengi: #FFF
- Metin Yazı Tipi Altyazı H2: Montserrat
- Metin Altyazı H2 Boyut: 2.5em
- Metin Altyazı H2 Renk: #FFF
Kullanacağınız e-posta sistemini yapılandırmayı unutmayın. Gutenberg'in uyumlu olduğunu bilmelisiniz MailChimp.
Son düşünceler
Gutenberg mesajınıza bir optin e-postası eklemek, Divi düzen bloğu ile inanılmaz derecede kolay hale geldi. Sadece saniyeler içinde tamamen işlevsel (ve kullanımı kolay) bir e-posta seçeneği eklemekle kalmaz, aynı zamanda özel tasarım, vurgulu efektler ve animasyon eklemek için Divi Builder'ı da kullanabilirsiniz. Tüm bunlar bir eklenti kullanmak zorunda kalmadan!
