Sayfayı Aşağı Kaydırırken Yapışkan Bir CTA Menüsü Nasıl Oluşturulur

Geleneksel olarak, sayfa yüklendiği anda sayfanın üstünde (veya altında) yapışkan menüler görünür. Ancak, kullanıcı sayfayı aşağı kaydırırken yapışkan bir CTA menüsü oluşturmak, bu önemli CTA'ları her zaman tıklanabilir tutmanın yaratıcı ve etkili bir yolu olabilir. Bazı yönlerden, her iki dünyanın da en iyisidir. CTA'nın asıl yerleşimini orijinal tasarımda tutmasını sağlar. Ayrıca, kullanıcıların aşina olduğu yapışkan bir menü yapısında görünen CTA'nın (düğme) küçültülmüş bir sürümünü tutar.

Bu eğitimde, Divi'de sayfayı aşağı kaydırırken nasıl yapışkan bir CTA menüsü oluşturacağınızı göstereceğiz. Bu, ziyaretçileri harekete geçmeye ikna etmek için sezgisel, ancak benzersiz bir yol ekleyerek masaüstü ve mobil kullanıcılar için harika çalışacak.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma 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.

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!

https://youtu.be/kpjbG8frPTQ

Youtube Kanalımıza Abone Olun

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

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. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Bir Sayfada Gezinirken Yapışkan Bir CTA Menüsü Nasıl Oluşturulur

CTA #1 Oluşturma

İlk CTA'mızı oluşturmaya başlamak için, kullanıcı kaydırdıkça sayfanın üstüne ve altına yapışacak özel bir CTA düğmesi olan bir tanıtıcı modül kullanacağız.

Başlamak için normal bölümde yeni bir tek sütunlu satır oluşturun.

Bulanıklık Ekle

Satırın sütununun içine bir tanıtım yazısı modülü ekleyin.

Tanımlayıcı ayarlarını açın ve varsayılan simge yerine istediğiniz bir resmi ekleyin. Cryptocurrency Layout Pack'ten bir resim kullanıyorum.

Tasarım sekmesi altında, metin stillerini aşağıdaki gibi güncelleyin:

• Başlık Başlık Düzeyi: H2
• Başlık Yazı Tipi: Titillium Web
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 36px (masaüstü), 28px (telefon)
• Başlık Satırı Yüksekliği: 1.5em
• Gövde Çizgisi Yüksekliği: 2em

CTA Düğmesi için Satır Ekle

Az önce oluşturduğumuz tanıtım yazısının bulunduğu satırın altına yeni bir tek sütunlu satır ekleyin.

Yapışkan düğmelerin işlevlerinin doğru şekilde sıralanması için satır ayarlarının doğru olması önemlidir.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: 1400 piksel (masaüstü), %100 (tablet)

Eylem Düğmesi Ekle

Yeni satırın içine bir eylem çağrısı modülü ekleyin. Aşağıdaki güncelleme:

• Başlık ve gövde metninden kurtulabilmemiz için sadece bu modül içindeki düğme öğesine ihtiyacımız olacak.
• Düzeni tasarlarken düğmenin görünür olması için bir düğme Bağlantı URL'si ('#' şimdilik yeterli olacaktır) eklediğinizden emin olun. Bunu daha sonra her zaman güncelleyebilirsiniz.
• “Arka Plan Rengini Kullan” seçeneğini devre dışı bırakın.

(NOT: Beyaz bir arka plan üzerinde beyaz düğmeyi henüz göremeyeceksiniz, ancak bu bir sonraki adımda değişecektir)

Tasarım sekmesi altında aşağıdaki düğme stillerini güncelleyin:

• Düğme Metin Boyutu: 14 piksel (masaüstü), 11 piksel (telefon)
• Düğme Metin Rengi: #1b1f50
• Düğme Arka Plan Rengi: #09d5fe
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Titillium Web
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: TT
• Düğme Dolgusu: 1em üst, 1em alt

Tasarımı aşağıdaki gibi güncellemeye devam edin:

• Genişlik: %33,33
• Modül Hizalaması: merkez
• Dolgu: 0 piksel üst, 0 piksel alt

Düğmenin %33,33 genişliği, yapışkan konumdayken düğmenin tarayıcı penceresinin tam olarak 1/3'ünü kaplamasını sağlar. Bunu diğer iki düğmeyle (her biri aynı %33.33 genişliğe sahip) birleştirmek, tam bir CTA menü çubuğu düğmeleri verecektir.

Gelişmiş Sekmesi altında, aşağıdaki özel CSS snippet'ini Promosyon Açıklamasına ekleyin (ihtiyacımız olmayan gereksiz boşluklara sahiptir):

display:none;

Ardından, Promosyon Düğmesine başka bir snippet ekleyin:

display:block;

Düğmeyi Yapışkan Yapmak

Düğmeyi yapışkan hale getirmek için, düğmeyi ve tarayıcı penceresinin üst ve alt kısmına yapıştırmak için yapışkan konum seçeneğini kullanacağız. Ayrıca varsayılan Divi sabit başlığı için bir ofset ekleyeceğiz.

Aşağıdakileri güncelleyin:

• Yapışkan Konum: Yukarıya ve Aşağıya Yapış
• Yapışkan Üst Ofset: 54px (masaüstü), 0px (tablet)
• Çevredeki Yapışkan Elemanlardan Ofset: HAYIR

Yapışkan konumumuz yerindeyken, artık yapışkan durumda düğmenin stilini hedefleyebiliriz. Bu durumda, daha sonra ek yapışkan düğmelere yer açmak için düğmeyi sola taşımak istiyoruz.

Yapışkan durumda aşağıdaki dönüştürme stilini güncelleyin:

• Dönüştür X eksenini çevir (yapışkan): -%100

Bu, düğmeyi sayfanın üstüne veya altına yapıştığında düğmenin tam genişliğine (ki bu %33,33'tür) eşit bir mesafe boyunca hareket ettirecektir.

Bina CTA #2

Artık çalışan bir yapışkan CTA düğmesiyle tamamlanmış bir bölümümüz olduğuna göre, önceki bölümü çoğaltabilir ve düğmede küçük ayarlamalar yapabiliriz.

İlk önce, bölümü çoğaltın.

Yeni bölümde Harekete Geçirici Mesaj modülünün ayarlarını açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

• Dönüştür X eksenini çevir (Yapışkan): 0px

Bu aslında onu varsayılan durumuna geri getiriyor çünkü ortada kalması gerektiğinden bu düğmeyi hareket ettirmek istemiyoruz.

CTA #3 Oluşturma

Üçüncü CTA bölümünü oluşturmak için önceki bölümü çoğaltın.

Ardından yeni bölümdeki Harekete Geçirici Mesaj modülünün ayarlarını açın ve dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:

• Dönüştür X eksenini çevir (Yapışkan): %100

Bu, düğmeyi sayfanın üstüne veya altına yapıştığında düğmenin tam genişliğine (yani %33,33'tür) eşit bir mesafede sağa doğru hareket ettirecektir.

Düğme Metni ve Renklerini Güncelle

Tasarımı cilalamak için CTA düğmesi metnini ve renklerini site tasarımınıza uyacak şekilde güncelleyin. İşte bu örnek için ayarlar:

CTA #2 için…

• Düğme Metni: Planlarımızı Görüntüleyin
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #1b1f50

CTA #3 için…

• Düğme Metni: Bizimle Sohbet Edin
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #4328b7

İşlevselliği Test Etmek için Üst ve Alt Bölüme Geçici Kenar Boşluğu Ekleyin

Normal bir web sitesinde, bu CTA'lar sayfanın ortasında bir yerde bulunur, böylece sayfayı yukarı ve aşağı kaydırmak için fazladan alan olur. Şimdilik, sayfanın üst ve alt bölümlerine bir miktar geçici kenar boşluğu ekleyebiliriz.

Üst bölümde 90vh üst kenar boşluğu ekleyin.

Alt kısımda 90vh alt kenar boşluğu ekleyin.

Son sonuç

Şimdi nihai sonucu kontrol edelim.

Son düşünceler

Bu eğitici, kullanıcıların istedikleri zaman tıklayabilmeleri için bu önemli CTA'ları ön planda tutmanın yaratıcı bir yolunu gösterir. Ayrıca dikkati sayfanın ana içeriğinden uzaklaştırmadan onlara daha da fazla dikkat çeken ince bir mikro etkileşim ekler. Umarım bu, yaratıcılığın akışını sağlamaya yardımcı olur, böylece daha da iyi hale getirmek için daha fazla tasarımla deneyler yapabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!