Divi ile Kilitli İçerik Köşesi açılır penceresi nasıl yapılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, size Divi ve Resort Düzen Paketi ile Kilitli İçerik Köşesi açılır penceresini nasıl yapacağınızı göstereceğiz. Kilitli optin formu kavramı basittir. Kullanıcılar e -posta adreslerini girmelidir ve en kısa sürede gizli içerik açıklanacaktır. Örneğin, indirim kodlarını paylaşmak için bu gizli içeriği kullanabilirsiniz. Tüm bunları gerçekleştirmek için, Bloom eklentisini kullanacağız ve bir açılır pencere olarak şekillendireceğimiz metin modülüne kilitli bir Optin içeriği kısa kodu ekleyeceğiz. Metin modülü ayrıca metin modülünün bir açılır pencereyi görünmesi için animasyonun ertelenmesi ile animasyon içerecektir.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Sayfayı aşağı kaydırın ve stil ve optin formunun düzenlemesinde bazı ek değişiklikler yapın. Arka plan rengi: #ffffff
Oryantasyon Formu: Aşağıdaki Form
Form ayarlarını da değiştiriyoruz. Oryantasyon Alan Formu: Alan Formları Kazık
Renk Arka Plan Formu: #F4F4F4
Düğme rengi: #ffffff
Metin Renk Düğmesi: Karanlık
Şekli şeklinin şeklini seçin: ikinci seçenek
Divi ile bir tasarım yapın Sütun yapımızın yeni bir satırı ekleyin Şimdi Divi Builder’a dönebilir! Lütfen ve Resort Layout Pack ana sayfasını kullanarak yeni bir sayfa oluşturun. Düzen yüklendikten sonra, aşağıdaki sütun yapısını kullanarak ikinci parçanın üstüne yeni bir satır ekleyerek devam edin: herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarında bazı değişiklikler yapın. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Bir sonraki boşluk aralığını açın ve üst ve alt dolguya ‘0px’ ekleyin. Bu, eklediğimiz yeni çizgiler tarafından kullanılan alanı sınırlayacaktır.
Üst dolgu: 0px Aşağıda dolgu: 0px
Metin modülünü ekleyin, H3 içeriğini ekleyin, kilitli bir içerik açılır köşesi yapmak için gereken tek modül metin modülüdür. Seçtiğiniz H3 başlığını içerik kutusuna ekleyin.
İçerik katılımının kısa kodunu daha sonra kilitlenen içeriğe ekleyin, Bloom eklentisine dönün ve kısa kodu bu öğreticinin önceki bölümünde oluşturduğunuz Optin formundan kopyalayın. İnsanlar Optin formunu doldurduktan sonra görüntülemek istediğiniz içeriği ekleyin. Aşağıdaki örnekte, kupon kodunu paylaştığımızı görebilirsiniz, ancak istediğiniz bilgileri paylaşabilirsiniz. Arka plan rengi bir sonraki modülün arka plan ayarlarına gider ve tamamen beyaz bir arka plan rengi ekler. Arka plan rengi: #ffffff Metin Ayarları Tasarım sekmesine geçin ve sonraki metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç Metin Rengi: #0F87FF
Metin Boyutu: 15 piksel
H3 Metin Ayarları H3’ünüzün kopyaları için kullanılan yazı tipini de değiştirin.
Başlık 3 Yazı Tipi: Gilda’yı Görüntüle Mesafe ve modüle şekil vermek için bazı marj ve özel dolgu değerleri ekleyeceğiz. Ayrıca, ziyaretçilerinizin kullandığı ekran boyutuna uygun hale getirmek için tüm bu değerleri de değiştiririz.
Üst Marj: -17VW Sol kenar boşluğu: 65VW (masaüstü), 37VW (tablet), 3VW (telefon)
Sağ kenar boşluğu: 0px
Üst Dolgu: 5VW (masaüstü), 11VW (tablet), 13VW (Telefon)
Dolgu Alt: 5VW, 11VW (Tablet), 13VW (Telefon)
Sol dolgu: 6VW (masaüstü), 11vw (tablet), 16VW (telefon)
Sağ dolgu: 6VW (masaüstü), 11vw (tablet), 16VW (telefon)
Sınır, metin modülünün sınır ayarlarına girerek ve sağ alt köşe hariç her köşeye ‘500VW’ ekleyerek devam edin.
Kutunun gölgesi, metin modülünün görünmesini sağlamak için yanındaki kutunun gölgesini ekleyin. Bulanık Güç Gölgesi Kutusu: 150px Gölge Rengi: RGBA (0.0,0,0,3)
Son animasyon, bir pop -up efekt oluşturmak için sağdan sola hareket eden animasyonlar da ekledik.
Animasyon tekrarlama: bir kez Animasyonlu Yön: Sol
Animasyon Süresi: 500ms
Animasyon gecikmesi: 1000ms
Animasyon yoğunluğu:% 16
İlk kilitli içerik açılır penceresini bitirdikten sonra klon satırı, devam edebilir ve tüm çizgiyi klonlayabilirsiniz.
Yinelenen satırları buraya yerleştirin: Dolgunun tabanını çıkarın Alt yatağı, satırı koyduğunuz parçadan çıkarın. Aşağıda dolgu: 0px Alan modülü boşluk ayarlarını değiştirin, ardından metin modülü ayarlarını açın ve özel marj değerini değiştirin.
Sol kenar boşluğu: 0vw Sağ kenar boşluğu: 65VW (masaüstü), 37VW (tablet), 3VW (telefon)
Metin modülünün yuvarlak açısını değiştirin, yuvarlak açıyı da değiştirdiğinizden emin olun. Sol alt kısım hariç her köşe için ‘500VW’ kullanıyoruz.
Son metin için animasyon ayarlarını değiştirin, ancak en az değil, animasyonun yönünü sağa ve bitişe değiştirin! Animasyon yönü: Doğru Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım!Masaüstü Hücresel
Bu yazıdaki son zihin, size Divi, Bloom eklentisi ve tesis düzen paketi ile kilitli bir içerik köşe açılır penceresini nasıl yapacağınızı gösterdik.Bu tekniği, formu doldurduktan sonra görünen bir kupon kodu sunarak insanları e -posta listenizin bir parçası olmaya ikna etmek için kullanabilirsiniz.Bu öğretici, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
