Divi ile Kilitli İçerik Köşesi Açılır Pencereleri Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, size Divi ve Resort Layout Pack ile kilitli içerik köşesi açılır pencerelerinin nasıl oluşturulacağını göstereceğiz. Kilitli bir içerik tercih formu kavramı basittir. İnsanlar e-posta adreslerini girmek zorunda ve bunu yaptıkları anda gizli içerik ortaya çıkacak. Bu gizli içeriği örneğin bir indirim kodu paylaşmak için kullanabilirsiniz. Tüm bunları gerçekleştirmek için Bloom eklentisini kullanacağız ve kilitli içerik optin formu kısa kodunu bir açılır pencere olarak biçimlendireceğimiz bir Metin Modülüne ekleyeceğiz. Metin Modülü, Metin Modülünün bir açılır pencere gibi görünmesini sağlamak için animasyon gecikmeli bir animasyon da içerecektir.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Bloom Eklentisini Yükleyin

Bloom'u İndir

Yapmanız gereken ilk şey Bloom eklentisini indirmek. Zaten bir Elegant Themes üyesiyseniz, eklentiyi üyeler alanına giderek bulabilirsiniz. Orada, sıkıştırılmış dosyayı indirebileceksiniz. Henüz Elegant Themes üyesi değilseniz, önce bir üyelik satın almanız gerekir.

Bloom'u Yükle ve Yükle

Bloom'u indirdikten sonra, Eklentiler > Yeni Ekle'ye gidip sayfanın üst kısmındaki 'Eklenti Yükle'yi tıklayarak WordPress web sitenize yükleyebilirsiniz.

Ardından, sıkıştırılmış dosyayı yükleyin ve 'Şimdi Yükle'yi tıklayın.

Eklentiyi yükledikten sonra da etkinleştirmeyi unutmayın.

Bloom Optin Formunu Ayarlayın

Yeni Kilitli İçerik Formu Ekle

Şimdi bu yazının ilerleyen bölümlerinde Divi tasarımımızda kullanacağımız kilitli içerik formunu oluşturmaya başlayabiliriz! WordPress Dashboard > Bloom > Optin Forms'a gidin ve yeni bir optin formu oluşturun.

'Kilitli İçerik' seçenek türünü seçerek devam edin ve kurulum ayarlarına ilerleyin.

Kurulum Ayarları

Kurulum ayarlarına girdikten sonra, yeni tercih formunuza bir isim vermeniz gerekecektir. Ayrıca, seçtiğiniz bir e-posta sağlayıcısını seçmeniz ve kimlik doğrulama ayrıntılarını girmeniz gerekecektir.

Tasarım Ayarları

Bir sonraki adım, formu tasarlamaktır. Gönderinin ilerleyen bölümlerinde, stillendireceğimiz bir Metin Modülünde optin formu kısa kodunu kullanacağız, bu nedenle optin formunun kendisine çok fazla ayar uygulanmasına ihtiyacımız yok. İsteğe bağlı başlık ve isteğe bağlı mesaj içerik kutularını boş bıraktığınızdan emin olun. Görüntü yönünü de değiştirin.

• Görüntü Yönü: Görüntü Yok

Sayfayı aşağı kaydırın ve optin stilinde ve form kurulumunda bazı ek değişiklikler yapın.

• Arka Plan Rengi: #ffffff
• Form Yönü: Form Altta

Ayrıca form stili ayarlarını da değiştiriyoruz.

• Form Alanı Yönlendirmesi: Yığılmış Form Alanları
• Form Arka Plan Rengi: #f4f4f4
• Düğme Rengi: #ffffff
• Düğme Metin Rengi: Koyu
• Form Kenar Stilini Seçin: İkinci Seçenek

Divi ile Tasarım Oluşturun

Yeni Satır Ekle

Sütun Yapısı

Artık Divi Builder'a geçebiliriz! Devam edin ve Resort Layout Pack'in ana sayfasını kullanarak yeni bir sayfa oluşturun. Düzen yüklendikten sonra, aşağıdaki sütun yapısını kullanarak ikinci bölümün üstüne yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Sonraki boşluk ayarlarına gidin ve satırın üst ve alt dolgusuna '0px' ekleyin. Bu, eklediğimiz yeni satırın kapladığı alanı sınırlayacaktır.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Metin Modülü Ekle

H3 İçeriği Ekle

Kilitli içerik köşesi açılır penceresini oluşturmak için ihtiyacımız olan tek modül bir Metin Modülüdür. İçerik kutusuna istediğiniz bir H3 başlığı ekleyin.

Kilitli İçerik İsteği Formu Kısa Kodu Ekle

Ardından, Bloom eklentisine geri dönün ve bu öğreticinin önceki bölümünde oluşturduğunuz tercih formunun kısa kodunu kopyalayın.

İnsanlar tercih formunu doldurduktan sonra görünmesini istediğiniz içeriği ekleyin. Aşağıdaki örnekte bir kupon kodu paylaştığımızı fark edebilirsiniz, ancak istediğiniz her türlü bilgiyi paylaşabilirsiniz.

Arka plan rengi

Ardından modülün arka plan ayarlarına gidin ve tamamen beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Tasarım sekmesine gidin ve sonraki metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #0f87ff
• Metin Boyutu: 15px

H3 Metin Ayarları

H3 kopyanız için kullanılan yazı tipini de değiştirin.

• Başlık 3 Yazı Tipi: Gilda Ekranı

aralık

Modüle bir şekil vermek için bazı özel kenar boşlukları ve dolgu değerleri ekleyeceğiz. Ayrıca, ziyaretçilerinizin kullandığı ekran boyutu ne olursa olsun tasarımın eşleşmesini sağlamak için tüm bu değerleri değiştiriyoruz.

• Ü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)
• Alt Dolgu: 5vw, 11vw (Tablet), 13vw (Telefon)
• Sol Dolgu: 6vw (Masaüstü), 11vw (Tablet), 16vw (Telefon)
• Sağ Doldurma: 6vw (Masaüstü), 11vw (Tablet), 16vw (Telefon)

Sınır

Metin Modülünün kenarlık ayarlarına giderek devam edin ve sağ alt köşe hariç her bir köşeye '500vw' ekleyin.

Kutu Gölge

Metin Modülünü açmak için yanına bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 150 piksel
• Gölge Rengi: rgba(0,0,0,0.3)

Animasyon

Son olarak, açılır pencere efektini oluşturmak için sağdan sola giden bir animasyon da ekliyoruz.

• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sol
• Animasyon Süresi: 500ms
• Animasyon Gecikmesi: 1000ms
• Animasyon Yoğunluğu: %16

Klon Satırı

İlk kilitli içerik köşesi açılır penceresini oluşturmayı tamamladığınızda, devam edip tüm satırı klonlayabilirsiniz.

Yinelenen satırı tam buraya yerleştirin:

Bölüm Alt Dolgusunu Kaldır

Satırı yerleştirdiğiniz bölümün alt dolgusunu çıkarın.

• Alt Dolgu: 0px

Metin Modülü Aralığı Ayarlarını Değiştir

Ardından Metin Modülünün ayarlarını açın ve özel kenar boşluğu değerlerini değiştirin.

• Sol Kenar Boşluğu: 0vw
• Sağ Kenar Boşluğu: 65vw (Masaüstü), 37vw (Tablet), 3vw (Telefon)

Metin Modülü Yuvarlatılmış Köşeleri Değiştir

Yuvarlak köşeleri de değiştirdiğinizden emin olun. Sol alt köşe hariç köşelerin her biri için '500vw' kullanıyoruz.

Metin Modülü Animasyon Ayarlarını Değiştirin

Son olarak, animasyon yönünü sağa çevirin ve işiniz bitti!

• Animasyon Yönü: Sağ

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım!

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi, Bloom eklentisi ve Resort Layout Pack ile kilitli içerik köşesi açılır pencerelerinin nasıl oluşturulacağını gösterdik. Formu doldurduktan sonra görünen bir kupon kodu sunarak insanları e-posta listenizin bir parçası olmaya ikna etmek için bu tekniği kullanabilirsiniz. Bu eğitim, devam eden Divi tasarım girişimimizin bir parçasıdır ve her hafta tasarım araç kutunuza fazladan bir şey koymaya çalışıyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!