Birkaç Basit Hover Efekti ile Divi'de Göz Alıcı Bir CTA Nasıl Oluşturulur
Yayınlanan: 2019-07-19İnce etkileşimler ve fareyle üzerine gelme efektleri, göz alıcı bir CTA (Harekete Geçirici Mesaj) oluşturmak için faydalı olabilir. İşin püf noktası, kullanıcıların harekete geçme olasılığının daha yüksek olması için CTA'nızı daha çekici ve sezgisel hale getiren efektler kullanmaktır. Ve çoğu CTA'nın nihai hedefi bir bağlantıya veya düğmeye tıklamak olduğundan, CTA'nızı bu tıklanabilir öğeleri ön plana çıkaracak şekilde optimize etmek önemlidir.
Bu eğitimde, çoklu vurgulu efektler kullanarak CTA'ların görünürlüğünü optimize etmek için Divi'yi nasıl kullanacağınızı göstereceğim. Daha iyi kontrast ve okunabilirlik için CTA'larınızı sahneye koymak için fareyle üzerine gelindiğinde nasıl bölüm ayırıcı arka plan ekleyeceğinizi göstereceğim. Ve size, ana odak noktası olması için fareyle üzerine gelindiğinde CTA'yı nasıl büyüteceğinizi ve sayfanın ortasına taşıyacağınızı göstereceğim. Bu vurgulu efektler, herhangi bir harekete geçirici mesajın öne çıkması için faydalı olacak ve umarım kullanıcı deneyimini iyileştirecektir.
Başlayalım.
Gizlice Bakış
İşte bu eğitimde oluşturacağımız göz alıcı CTA vurgulu efektlerine bir göz atın.
Göz Alıcı CTA Vurgulu Efekt Düzenini Ü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.
Ü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.
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!
Youtube Kanalımıza Abone Olun
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere ihtiyacınız olacak:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Tasarım yapısında kullanılacak bir arka plan resmi. Bu eğitim için Veteriner Düzen Paketinden birini kullanacağım.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Göz Alıcı CTA Hover Efektlerini Uygulama
Bu tasarım örneği için, sola veya sağa hizalanmış bir harekete geçirici mesaj modülü ile başlayacağız. Ardından modülü sayfanın ortasına getireceğiz ve fareyle satırın üzerine gelindiğinde ölçeklendireceğiz (veya büyüteceğiz). Harekete geçirici mesajı satır vurgulu durumunda daha da öne çıkarmak için, daha iyi kontrast için modülün arkasına kapanacak bölüm ayırıcılar ekleyerek bunu sahneye koyacağız.
İşte nasıl yapılacağı.
Bölüm ve Satır Oluşturma
İlk olarak, tek sütunlu bir satır içeren normal bir bölüm oluşturun.
Modül eklemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Modülümüzü sola eklerken görünür kalması için görüntünün odak noktası sağ tarafa olacak şekilde bir arka plan görüntüsü ekleyin.
- Maksimum Genişlik: 1080 piksel
- Bölüm Hizalama: merkez
Şimdilik bölümü idare ediyor. Bölüm bölücü üzerine gelme efektlerini eklemek için daha sonra bölüm ayarlarına geri döneceğiz.
Ardından, satır ayarlarını açın ve aşağıdakileri güncelleyin:
- genişlik: %100
- maksimum genişlik: %100
- Dolgu: %5 üst, %5 alt, %35 sağ
İçeriği sola doğru ittiği için sağ dolgu bu tasarımın anahtarıdır. Satırın içeriğini daha sonra tekrar merkeze taşımak için fareyle üzerine gelme seçeneklerimizi eklemek için daha sonra geri döneceğiz.
Harekete Geçirici Mesaj Modülünü Ekleme
Artık göz alıcı CTA'mızın ana odak noktası olacak Harekete Geçirici Mesaj Modülünü oluşturmaya hazırız.
Devam edin ve bir sütun satırına bir eylem çağrısı modülü ekleyin.
Ardından, harekete geçirici mesaj modülü ayarlarını aşağıdaki gibi güncelleyin:
İçerik
- Başlık: İlk Ziyaret İndirimi
- Düğme: Randevu Al
- Düğme Bağlantı URL'si: #
Tasarım
- Arka Plan Rengi: #ffffff
- Metin Rengi: Koyu
- Başlık Yazı Tipi: Nunito
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Metin Boyutu: 36px
- Düğme Metin Rengi: #ffffff
- Düğme Arka Plan Rengi: #154c87
- Düğme Kenar Genişliği: 0px
- Maksimum Genişlik: 500 piksel
- Modül Hizalaması: merkez
- Yuvarlak Köşeler: 10px
Bu tasarımın önemli bir özelliği maksimum 500 piksel genişliktir. Bu, daha sonra fareyle üzerine gelindiğinde satırın sağ dolgusunu her ayarladığımızda modülün genişliğinin değişmemesini sağlayacaktır.
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölgesi Dikey Konumu: 30px
- Kutu Gölge Bulanıklığı Gücü: 100 piksel
- Kutu Gölge Yayılma Gücü: -30px
Satırın Üzerinde Gezinirken Harekete Geçirici Mesajı Ölçeklendirme ve Merkezleme
Artık göz alıcı CTA vurgulu efektlerimizi eklemeye başlamaya hazırız. Bu noktada, satırın üzerinde gezinirken iki şeyi başarmak istiyoruz. Öncelikle CTA'yı merkeze taşımak istiyoruz. Ve sonra modülü daha da görünür kılmak için ölçeğini artırmak (büyütmek) istiyoruz.
Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Dolgu (fareyle üzerine gelme): %0 sağ
Ardından, mobil ekran için dolguyu ayarlayın:
- Dolgu (tablet): %0 sağ
- Dolgu (telefon): %5 sol, %5 sağ
CTA'yı büyütmek için, fareyle üzerine gelindiğinde satıra aşağıdaki transform özelliğini ekleyin:
- Dönüştürme Ölçeği (fareyle üzerine gelme): %110
Dönüştürme ölçeği özelliği satıra uygulanıyor olsa da, bu aynı zamanda modül de dahil olmak üzere satır içindeki tüm alt öğeler için dolaylı olarak geçerlidir. Bu nedenle modül, satırın üzerine gelindiğinde %110'a ölçeklenecektir.
Bölüm Bölücüler ile Hover'da CTA'yı Hazırlama
Son olarak, bölüm/satır üzerinde gezinirken cta'yı aşamalandırmak için bölüm bölücüler eklemeye hazırız. Buradaki anahtar, bölümün ve sıranın aynı yükseklik ve genişlikte olduğundan emin olmaktır, böylece kullanıcı aynı anda herhangi bir boşluk olmadan bölüm ve sıranın üzerine gelir. Bu nedenle, herhangi bir bölüm dolgusunu çıkarmamız gerekiyor. Ardından, bölümün üzerine gelindiğinde yüksekliği artan bir üst ve alt bölüm ayırıcı oluşturmamız gerekiyor.
İşte yapmanız gerekenler.
Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Dolgu: 0 piksel üst, 0 piksel alt
- Üst Bölücü Stili (masaüstü): ekran görüntüsüne bakın
- Üst Bölücü Stili (tablet ve telefon): yok
- Üst Bölücü Rengi: rgba(21,76,135,0.61)
- Üst Bölücü Yüksekliği (varsayılan): %0
- Üst Bölücü Yüksekliği (vurgulu): %120
- Üst Bölücü Çevirme: yatay
- Alt Bölücü Stili (masaüstü): ekran görüntüsüne bakın
- Alt Bölücü Stili (tablet ve telefon): yok
- Alt Bölücü Rengi: rgba(21,76,135,0.61)
- Alt Bölücü Yüksekliği (varsayılan): %0
- Alt Bölücü Yüksekliği (vurgulu): %120
- Alt Bölücü Çevirme: yatay
Bölücülerin bölümün dışında görünmediğinden emin olmak için dikey ve yatay taşma seçeneğini gizli olarak güncelleyin.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Şimdi nihai sonucu kontrol edelim.
Son sonuç
Ve işte tablet ve telefondaki tasarım.
CTA'nın Konumunu Değiştirme
Harekete Geçirici Mesaj Modülünün fareyle üzerine gelme durumundan önceki ilk konumunu değiştirmek isterseniz, satır aralığını kolayca güncelleyebilirsiniz.
Sağ Taraftan
Fareyle üzerine gelmeden önce sağdan başlayacak şekilde modüle etmek istediğinizi varsayalım. Satır ayarlarını aşağıdaki gibi güncellemeniz yeterlidir:
- Dolgu: %35 Sol
- Dolgu (fareyle üzerine gelme): 0% Sol
Sol odak noktasına sahip olmak için görüntüyü güncellemek isteyeceksiniz. Bundan sonra, işte sonuç.
Alttan
Veya isterseniz, satırın altından CTA açılır penceresini alabilirsiniz. Bunu yapmak için bölüme sabit bir yükseklik eklemeniz ve ardından modülü bir miktar üst dolgu ile aşağı indirmeniz gerekecektir.
Bölüm ayarlarını açın ve bölüme maksimum yükseklik verin ve taşmayı gizli olarak ayarlayın.
- Maksimum Yükseklik (masaüstü): 415 piksel
- Yatay Taşma: gizli
- Dikey Taşma: gizli
Ardından satır ayarlarını açın ve modülü kısmen bölümün altından görünüm dışına itmek için dolguyu güncelleyin. Ardından, geri getirmek için fareyle üzerine gelindiğinde üst dolguyu çıkarın.
- Dolgu (masaüstü): %25 üst, %5 alt
- Dolgu (vurgulu): %5 üst
İşte sonuç…
Son düşünceler
Divi, web sayfası tasarımlarınıza her türlü vurgulu efekti eklemeyi eğlenceli ve kolay hale getirir. En iyi fareyle üzerine gelme efektleri, amaca yönelik olan ve aslında kullanıcı deneyimini iyileştiren efektlerdir. Bu gönderide ele alınan birkaç basit fareyle üzerine gelme efekti, harika görünen, kullanıcı deneyimini iyileştiren ve umarım daha fazla dönüşüm sağlayan bazı göz alıcı CTA'lar oluşturmaya yardımcı olacaktır.
Daha fazla fikir için, Divi'de CTA'ları vurgulamak için fareyle üzerine gelme seçeneklerini kullanmanın 3 yolu hakkındaki yayınımıza ve sürgülü CTA'lar oluşturma konusundaki yayınımıza göz atın.
Yorumlarda sizden haber bekliyorum.
Şerefe!