Divi'de Dikkat Çeken Bir Yapışkan E-posta Seçeneği Nasıl Oluşturulur

Divi'nin yapışkan konum seçenekleri, sayfanızdaki herhangi bir öğeyi yapışkan yapmanıza olanak tanır. Bu, kullanıcı sayfayı aşağı kaydırdıkça belirli aralıklarla sayfadaki öğeleri düzeltmenize olanak tanır, böylece daha uzun süre görünür kalırlar. Ve siz blogcular için, bu önemli formu ön planda tutmak için ince ama etkili bir şekilde gönderi şablonunuza yapışkan bir e-posta seçeneği eklemek çok mantıklı.

Bu eğitimde, size Divi blog yazısı şablonunuza daha fazla dikkat çeken ve umarız daha fazla potansiyel müşteri çeken yapışkan bir e-posta katılımını nasıl ekleyeceğinizi göstereceğiz. Yapışkan e-posta tercihine nasıl açılır pencere efekti ekleyeceğinizi bile göstereceğiz!

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Yapışkan E-posta Optin Gönderi Şablonunu ÜCRETSİZ olarak indirin

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!

Yapışkan E-posta Seçeneği ile Gönderi Şablonunu Sitenize Nasıl Yüklersiniz

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.

Dosyayı yükledikten sonra, Tüm Gönderiler'e atanmış yeni bir vücut alanına sahip yeni bir şablon göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.

Hadi öğreticiye geçelim, olur mu?

Bölüm 1: Hazır Blog Gönderisi Şablonunu İçe Aktarın

Bu eğitim için, bu blog gönderisinden indirebileceğiniz Divi's Business Consultant Layout Pack için blog gönderisi şablonunu kullanacağız.

Zip dosyasını indirdikten sonra, sıkıştırmayı açmanız ve dosyayı Divi Theme Builder'a aktarmanız gerekir.

İşte nasıl yapılacağı…

1. Divi > Tema Oluşturucu'ya gidin.
2. Sağ üstteki taşınabilirlik simgesini tıklayın.
3. Taşınabilirlik açılır penceresindeki içe aktarma sekmesini seçin.
4. İndirdiğiniz dosyadan json dosyasını seçin.
5. İçe Aktar düğmesini tıklayın.

Bölüm 2: Şablona Yapışkan E-posta Seçeneği Ekleme

JSON dosyası içe aktarıldıktan sonra, özel gövde şablonu düzenini düzenlemek için düzenle simgesine tıklayın.

Gönderi şablonu düzeninin altında, yapışkan e-posta katılımımız için kullanacağımız e-posta katılım formunun bulunduğu bölümü bulacaksınız.

Bu örnekte, bir bölüme e-posta katılımının yapışkan konumunu istiyoruz, böylece kullanıcı, yapışkan e-posta katılımının olduğu bölüme gidene kadar e-posta katılımını göremez. Ancak, e-posta katılımı kendi bölümünde olduğundan, e-posta katılımının taşınması için yeterli alan olmayacaktır. Bu nedenle, onu yorum bölümünü içeren yukarıdaki bölüme getirmemiz gerekiyor, böylece e-posta tercihi orijinal yerinde durmadan önce bu bölümün üzerine gelecek.

Yukarıdaki Bölüme Yeni Satır Ekle

Bunu yapmak için, yorumlar modülünü içeren satırın hemen altında yeni bir tek sütunlu satır oluşturun.

Satır Stili Ekle

Ardından yeni satırın ayarlarını açın ve aşağıdaki gibi bir arka plan rengi ekleyin:

• Arka Plan Rengi: #282828

Tasarım sekmesi altında, satırın aşağıdaki boyutunu ve aralığını güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: %100
• Marj: 15vw üst
• Dolgu: 0 piksel üst, 0 piksel alt

E-posta Etkinliğini Yeni Satıra Taşı

Satır stili yerleştirildikten sonra, alt bölümdeki e-posta katılımını az önce oluşturduğunuz yeni satıra taşıyın.

Alt kısmı silin (artık buna ihtiyacımız yok).

Yapışkan Konumlu E-posta Etkinliğini Güncelle

Ardından, yeni satırın içinde şimdi e-posta katılımı ayarlarını açın ve çubuk konumu seçeneklerini aşağıdaki gibi güncelleyin:

• Yapışkan Konum: Aşağıya Yapış
• Üst Yapışkan Limit: Bölüm

Bu, e-posta katılımının, üst satırında durmadan önce bölümde gezinirken tarayıcı penceresinin alt kısmında kalmasına neden olur.

E-posta Katılım Stilini Güncelle

Tasarım sekmesi altında, e-posta katılım düzenini aşağıdaki gibi güncelleyin:

• Düzen: Gövde Üstte, Form Altta

Ardından aşağıdaki stili güncelleyin:

• Başlık Metin Boyutu: 32px
• Maksimum Genişlik: 600 piksel
• Modül Hizalaması: Merkez

Ardından animasyon stilini yok olarak ayarlayın.

Sonuç

Bu noktada, başka bir tarayıcı penceresinde bir gönderiyi görüntüleyerek sonucu kontrol edebiliriz.

Yapışkan Konum Stili Ekleme

E-posta katılımı yapışkan konumdayken, modüle yalnızca yapışkan duruma uygulanacak belirli bir stil ekleyebiliriz. Bu, beyaz arka planı biraz daha öne çıkarmak için farklı renk şemaları eklememize olanak tanır.

Yapışkan duruma farklı bir arka plan rengi eklemek için, e-posta katılım ayarlarını açın ve arka plan seçeneğinin yanındaki küçük resim simgesini (yapışkan simge) seçin. Ardından yapışkan sekmeyi tıklayın ve aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi (yapışkan): #282828

Tasarım sekmesi altındaki aşağıdaki seçeneklere yapışkan stil eklemek için aynı işleme devam edin:

• Başlık Metin Rengi (yapışkan): #ffffff
• Gövde Metni Rengi (yapışkan): #ffffff
• Maksimum Genişlik (yapışkan): 500 piksel
• Dolgu (yapışkan): 18 piksel üst, 30 piksel alt, 30 piksel sol, 30 piksel sağ

Sonuç

Şimdi canlı bir gönderide sonucu kontrol edelim.

Yapışkan E-posta Opt-in'e Vurgulu Pop-up Efekti Ekleme

Yapışkan e-posta katılımına bir vurgulu açılır pencere efekti eklemek için, e-posta katılım ayarlarını açın ve çubuk dönüştürme çevirisini aşağıdaki gibi güncelleyin:

• Dönüştürme Y Eksenini Çevir (yapışkan): %85

Bu, e-posta katılımını kendi yüksekliğinin %85'i kadar aşağıya (görünüm alanının dışında) getirecek ve kullanıcının başlığın üzerine gelebilmesi için e-posta seçeneğinin yalnızca yeterli kısmını ortaya çıkaracaktır.

Ardından, dönüşüm çevirme konumunun üzerine gelindiğinde orijinal konumuna geri dönmesi için dönüştürme seçeneğine bir vurgulu durumu ekleyin:

• Y Eksenini Dönüştür (fareyle üzerine gelme): %0

Sonuç

İşte nihai sonuç.

Nihai sonuçlar

Yapışkan başlığımızın oluşturduğumuz üç versiyonu burada.

Son düşünceler

Neyse ki Divi, sitenize yapışkan e-posta tercihleri ​​eklemeyi kolaylaştırıyor. Bu, formunuzu görüntülemenin daha benzersiz yolları için yapışkan öğenizin tasarımını değiştirmek için daha fazla zaman kazandırır. Umarım, bu teknik gelecek blog projelerinde size iyi hizmet eder.

Yorumlarda sizden haber bekliyorum.

Şerefe!