Divi'de Sayfanız İçin Bir Karşılama Kapısı Nasıl Tasarlanır

Karşılama kapısı, sitenizdeki herhangi bir harekete geçirici mesajın dönüşümlerini artırmanın etkili bir yoludur. Aslında, karşılama kapıları, yüksek dönüşümlü e-posta tercihleri ​​oluşturmak için OptinMonster gibi eklentilerle popüler bir özelliktir. Karşılama kapısının arkasındaki temel fikir, web sayfasının içeriğini tam ekran harekete geçirici mesajla gizlemektir. Bu, kullanıcıyı amaçlanan sayfayı görüntülemeden önce CTA ile etkileşime girmeye zorlar.

Bu eğitimde, eklenti kullanmadan web sayfanıza özel bir karşılama kapısı eklemenin hızlı ve kolay bir yolunu göstereceğiz. Bu, açılış sayfalarındaki CTA'larınızın dönüşümlerini artırmak için kullanışlı olabilir.

Bunu kontrol et!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız karşılama kapısına hızlı bir 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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Hazır Düzen Seçin” seçeneğini seçin.
   
4. Bistro Düzen Paketini seçin ve Kitaplıktan Yükle açılır penceresinden Bistro Açılış Sayfası Düzenini seçin ve düzeni sayfaya aktarmak için “Bu Düzeni Kullan” Düğmesine tıklayın.
   

Bundan sonra, özel karşılama kapısını oluştururken kullanacağınız bir açılış sayfanız olur.

Karşılama Kapısını Oluşturma

Yeni Bölüm Ekle

İlk olarak, yeni bir normal bölüm oluşturun ve onu sayfanın en üstüne sürükleyin. Ardından bölüme bir sütun satırı ekleyin.

Bölümü Tasarla

Bölüme herhangi bir modül/içerik eklemeye başlamadan önce, ileride çalışmak için güzel bir tuvalimiz olması için bazı özel tasarımlar ekleyelim.

Arka plan

Başlamak için, aşağıdaki gibi bir arka plan gradyanı ve resmi ekleyin:

• Arka Plan Gradyanı Sol Renk: rgba(0,17,38,0.7)
• Arka Plan Gradyanı Sağ Renk: #001126
• Başlangıç ​​Konumu: %68
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET
• Arka Plan Resmi: [resim ekle]

Dolgu ve Animasyon

Ardından, tasarım sekmesine geçin ve aşağıdaki dolgu ve animasyon ayarlarını güncelleyin:

• Dolgu (masaüstü): 28vh üst, 28vh alt
• Dolgu (tablet): 18vh üst, 18vh alt
• Dolgu (telefon): 10vh üst, 10vh alt
• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Opaklığı Başlatma: %100;

Karşılama Kapısı Bölümünü Konumlandırın

Artık, kullanıcı "Hayır, teşekkürler" düğmesini tıklayana kadar hoş geldiniz kapısının tarayıcı ekranını doldurması için bölümümüze daha yüksek bir z indeksi ile sabit bir konum vermeye hazırız.

Konumlandırma css'imizi eklemeden önce, aşağıdaki gibi özel bir CSS kimliği ekleyelim:

• CSS kimliği: karşılama kapısı

Bu, kullanıcı "Hayır, Teşekkürler" düğmesini tıkladığında görünümün dışına çıkarmak için bölümü jQuery ile hedeflemek için kullanılacaktır.

Ana öğeye aşağıdaki özel CSS'yi ekleyin:

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Ardından Z İndeksini aşağıdaki gibi güncelleyin:

• Z İndeksi: 11

NOT: Hoş Geldiniz kapısının başlığı da gizlemesini istiyorsanız, “99999” gibi daha yüksek bir Z İndeksi ekleyebilirsiniz.

Karşılama Kapısı İçeriğini Oluşturma

Artık bölümümüz hazır olduğuna göre, karşılama kapısı içeriğini eklemeye başlayalım. Bu hoşgeldin kapısına istediğiniz içeriği ekleyebilirsiniz. Şimdilik iki buton ile basit bir CTA oluşturalım. Soldaki düğme, kullanıcıların tıklamasını istediğiniz düğme olacaktır. Sağdaki buton, Hoş Geldiniz Kapısını kapatacak olan “Hayır, Teşekkürler” butonu olacaktır.

Metin Modülü

Bir sütun satırının içine, aşağıdaki içeriğe sahip yeni bir metin modülü ekleyin:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Metin Tasarımı

Ardından metin tasarımını aşağıdaki gibi güncelleyin:

• Yazı Tipi: Kabin
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 24px (masaüstü), 18px (telefon)
• Metin Hizalama: Merkez
• Başlık 2 Yazı Tipi: Kabin
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 66px (masaüstü), 26px (tablet)

İki Sütun satırı ekle

Butonlarımız için yazının altına iki sütunlu bir satır oluşturalım.

Sol Düğme Ekle

Sol sütuna bir düğme modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

• Düğme Metni: “Yum! Rezervasyon Yapalım”

• Düğme Hizalama: merkez
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #bd8f52
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Ağırlığı: Kalın

Ardından, düğmenin sütunun tüm genişliğine yayılmasını sağlamak için aşağıdaki özel CSS'yi ekleyin:

display: block !important;

Sağa “Hayır Teşekkürler” Düğmesini Ekleyin

“Hayır, Teşekkürler” butonunu oluşturmak için önce soldaki butonu kopyalayın ve sağdaki sütuna yapıştırın.

Ardından içeriği aşağıdaki gibi güncelleyin:

• Düğme Metni: hayır teşekkürler
• Düğme Bağlantı URL'si: # (bu, düğmenin sayfayı yenilememesi için önemlidir)

Ardından düğme tasarımını aşağıdaki gibi güncelleyin:

• Düğme Metin Rengi: #333333
• Düğme Arka Plan Rengi: rgba(255,255,255,0.4)

Ardından, hayır teşekkürler düğmesine aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: teşekkürler

Bu, tıklamayla karşılama kapısını kapatan jQuery'deki seçicimiz olacaktır.

Özel Kodu Ekle

Şimdi, bir kullanıcı "Hayır, Teşekkürler" düğmesini tıkladığında karşılama kapısını kapatan işlevi eklemek için gereken özel kod parçacığını ekleyelim. Bunu yapmak için hayır teşekkürler buton modülünün altına bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod modülü kod kutusuna yapıştırın:

Son bir dokunuş için butonlarımızı içeren satıra maksimum genişlik vererek butonları birbirine yaklaştıralım. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Maksimum Genişlik: 600 piksel

Son sonuç

İşte son tasarımın nasıl göründüğü.

Sayfayı yenilerken hoş geldiniz kapısının nasıl göründüğü de burada.

Ve işte karşılama kapısının mobilde nasıl göründüğü.

Son düşünceler

Umarım bu hoş geldin matı, sayfanıza veya şablonunuza faydalı bir katkı olur. Divi, görsel oluşturucuyu kullanarak karşılama matını tasarlamayı ve konumlandırmayı kolaylaştırır ve işlevselliği tamamlamak için yalnızca küçük bir jQuery parçası yeterlidir. Bu nedenle, bir eklenti kullanmadan sayfanız için hızlı bir karşılama matı arıyorsanız, bu kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!