Basit yönün bazı etkileri ile divi’de çekici bir CTA nasıl yapılır
Pürüzsüz etkileşimler ve vurgulu efektler ilginç CTA (harekete geçirici mesaj) yapmak için yararlı olabilir. İşin püf noktası, CTA’nızı daha çekici ve sezgisel hale getiren etkiyi kullanmaktır, böylece kullanıcıların harekete geçme olasılığı daha yüksektir. Ve çoğu CTA’nın nihai amacı bir bağlantı veya düğmeyi tıklamak olduğu için, CTA’nızı yüzeye tıklanabilecek öğeyi taşıyacak şekilde optimize etmek önemlidir. Bu öğreticide, birkaç havada uçma efektini kullanarak CTA 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 imleci CTA aşamanıza yönlendirirken bölücünün bir arka planını nasıl ekleyeceğinizi göstereceğim. Ve size ana odak noktası olacak şekilde CTA’yı sayfanın ortasına nasıl büyüteceğinizi ve taşıyacağınızı göstereceğim. Bu yüzen etki, hareket etmek ve umarım kullanıcı deneyimini geliştirmek için herhangi bir davet yapmak için yararlı olacaktır.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız çekici Hover CTA efektine bir göz atıyor.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Tasarım yapımında kullanılacak arka plan görüntüsü. Bu öğretici için veteriner düzen paketlerinden birini kullanacağım.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bu tasarım örneği için divi üzerinde çekici bir CTA yön etkisi uygulayarak, sol veya sağa hareket etmek için davet modülü ile başlayacağız. Ardından, imleci satıra yönlendirirken modülü sayfanın ortasına getirip ölçeklendireceğiz (veya büyüteceğiz). Hakem hattının durumunda daha belirgin bir şekilde hareket etme davetini yapmak için, daha iyi bir kontrast için modülün arkasına kapanacak kısmı divisor ekleyerek ayarlayacağız.
İşte nasıl yapılacağı. İlk parçayı ve satırı yapın, bir sütun satırı ile normal parça yapın.
Modülü eklemeden önce, aşağıdaki bölüm ayarlarını açın ve güncelleme: Arka plan görüntüsünü sağ taraftaki görüntünün odak noktası ile ekleyin, böylece modülümüzü sola eklerken hala görünür. Max geniş: 1080px Hizalama Bölümü: Orta Şimdilik parçaları ele alıyor. Bölücünün gelişim etkisini 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 artış,% 5 aşağıda,% 35 sağ
Sağ dolgu bu tasarımın anahtarıdır çünkü içeriği sola iter. Sıra içeriğini daha sonra ortaya taşımak için Hover seçeneğimizi eklemek için daha sonra geri geleceğiz. Davet Modülünü Ekleyin Şimdi harekete geçecek. Devam edin ve davet modülünü bir sütun satırına hareket ettirmek için ekleyin.
Ardından, Davet Modülünü Ayarla Aşağıdaki gibi güncelleyin: Doldurun Başlık: İlk Ziyaret İndirimi Düğme: Toplama sözü verin
URL bağlantı düğmesi: #
Tasarım
Arka plan rengi: #ffffff Metin Rengi: Karanlık
Yazı tipi başlığı: Nunito
Ağır yazı tipi başlığı: kalın
Başlık Metin Boyutu: 36px
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #154C87
Bulanık Güç Gölgesi Kutusu: 100 PX
Kutunun gölgesinin dağılımının gücü: -30px
Sıra üzerinde yüzerken harekete geçme davetini dolandırma ve odaklama şimdi çekici bir Hover CTA efekti eklemeye başlamaya hazırız. Bu noktada imleci çizgiye yönlendirirken iki şeyi tamamlamak istiyoruz. İlk olarak, CTA’yı ortaya taşımak istiyoruz. Ve sonra daha görünür hale getirmek için modül ölçeğini (daha büyük hale getirmek) artırmak istiyoruz. Bunu yapmak için çizgi ayarlarını açın ve aşağıdakileri güncelleyin:
Dolgu (İmleci Nokta):% 0 sağda Ardından, hücresel ekran için dolguyu ayarlayın:
Dolgu (tablet):% 0 doğru
Dolgu (telefon):% 5 sol,% 5 sağ
CTA’yı büyütmek için, imleci yönlendirirken aşağıdaki dönüşüm özelliğini satıra ekleyin:
Dönüşüm Ölçeği (nokta imleci):% 110
Dönüşüm ölçeği özelliği çizgiye uygulansa da, bu da modüller de dahil olmak üzere hattaki çocuğun tüm unsurları için dolaylı olarak da geçerlidir. Bu nedenle, imleci hatta yönlendirirken modül% 110’a kadar dağılacaktır. CTA gerçekleştirme Bölücünün son kısmı ile yüzerken, imleci bölüm/satıra yönlendirirken CTA’yı görüntülemek için bölücüyü eklemeye hazırız. Buradaki anahtar, parçanın ve satırın aynı yüksekliğe ve genişliğe sahip olmasını sağlamaktır, böylece kullanıcının imleci eşzamanlı olarak parçaya ve boşluk olmadan satıra yönlendirmesidir. Bu nedenle, yatağın herhangi bir bölümünü yayınlamamız gerekiyor. Sonra parçanın üzerinde yüzerken daha yüksek büyüyen üst ve alt böcekleri yapmalıyız. Yapılması gereken budur. Aşağıdaki bölüm ayarlarını açın:
Dolgu: 0px üst, 0px aşağıda
Üst bölücü kuvveti (masaüstü): Ekran görüntüsüne bakın Üst bölücü stili (tablet ve cep telefonu): yok
Üst bölücü rengi: RGBA (21,76,135.0.61) Yüksek bölücü yükseklik (varsayılan):% 0 Yüksek bölücü yüksekliği (nokta imleci):% 120
Zaman Bölgesi’nin Arkası: Yatay
Alt bölücü kuvveti (masaüstü): Ekran görüntüsüne bakın
Alt bölücü stili (tablet ve cep telefonu): hiçbir şey
Alt bölücü rengi: RGBA (21,76,135.0.61)
Daha düşük bölücü yüksekliği (varsayılan):% 0 Alt bölücü yüksekliği (nokta imleci):% 120
Alt bölücüyü döndür: Yatay
Bölücünün bölümün dışında görünmemesini sağlamak için, dikey ve yatay taşma seçeneklerini gizli olarak güncelleyin.
Yatay taşma: gizli
Dikey taşma: gizli
Şimdi sonucuna bakalım. Nihai sonuç Ve bu tabletler ve cep telefonları üzerindeki tasarım.
CTA konumunu değiştirme Davet modülünün başlangıç konumunu yüzer durumundan önce harekete geçirmek istiyorsanız, satır alanlarını kolayca güncelleyebilirsiniz. Sağ taraftan, imleci yönlendirmeden önce bir modülün sağdan başlamasını istediğinizi söyleyin. Satır ayarlarını aşağıdaki gibi güncellemeniz yeterlidir:
Dolgu:% 35 kaldı Dolgu (nokta imleci):% 0 kaldı Sol odak noktasına sahip olmak için görüntüyü güncellemek isteyeceksiniz. Bundan sonra, sonuç bu. Alttan veya isterseniz, satırın altından CTA açılır penceresine sahip olabilirsiniz. Bunu yapmak için, parçaya sabit bir yükseklik eklemeniz ve ardından modülü birkaç üst rulmanla azaltmanız gerekir. Bölüm ayarlarını açın ve maksimum yükseklik parçasını verin ve gizlenecek taşmayı ayarlayın.
Maksimum yükseklik (masaüstü): 415px
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ındaki ekrandan çıkarmak için dolguyu güncelleyin.Ardından, imleci geri getirmeye yönlendirirken üst yatağı çıkarın. Dolgu (masaüstü):% 25 yukarıda,% 5 aşağıda
Dolgu (İmleci Noktalı):% 5 yukarıda
Sonuç bu …
Divi’nin son zihni, web sayfası tasarımınıza her türlü vites efekti eklemeyi eğlenceli ve kolaylaştırır.En iyi vites etkisi, bir hedefe sahip olması ve kullanıcı deneyimini gerçekten geliştirmesidir.Bu yayında yer alan bazı basit vuruş efektleri, harika görünen, kullanıcı deneyimini geliştiren ve umarım daha fazla dönüşüm üreten bazı ilginç CTA’lara yardımcı olacaktır.Daha fazla fikir için, gönderimize bakın, Divi’deki CTA’yı ve CTA slaytını yapma konusundaki yazımızı vurgulamak için imleç işlemini kullanabilirsiniz.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Tasarım yapımında kullanılacak arka plan görüntüsü. Bu öğretici için veteriner düzen paketlerinden birini kullanacağım.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bu tasarım örneği için divi üzerinde çekici bir CTA yön etkisi uygulayarak, sol veya sağa hareket etmek için davet modülü ile başlayacağız. Ardından, imleci satıra yönlendirirken modülü sayfanın ortasına getirip ölçeklendireceğiz (veya büyüteceğiz). Hakem hattının durumunda daha belirgin bir şekilde hareket etme davetini yapmak için, daha iyi bir kontrast için modülün arkasına kapanacak kısmı divisor ekleyerek ayarlayacağız.
İşte nasıl yapılacağı. İlk parçayı ve satırı yapın, bir sütun satırı ile normal parça yapın.
Modülü eklemeden önce, aşağıdaki bölüm ayarlarını açın ve güncelleme: Arka plan görüntüsünü sağ taraftaki görüntünün odak noktası ile ekleyin, böylece modülümüzü sola eklerken hala görünür. Max geniş: 1080px Hizalama Bölümü: Orta Şimdilik parçaları ele alıyor. Bölücünün gelişim etkisini 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 artış,% 5 aşağıda,% 35 sağ
Sağ dolgu bu tasarımın anahtarıdır çünkü içeriği sola iter. Sıra içeriğini daha sonra ortaya taşımak için Hover seçeneğimizi eklemek için daha sonra geri geleceğiz. Davet Modülünü Ekleyin Şimdi harekete geçecek. Devam edin ve davet modülünü bir sütun satırına hareket ettirmek için ekleyin.
Ardından, Davet Modülünü Ayarla Aşağıdaki gibi güncelleyin: Doldurun Başlık: İlk Ziyaret İndirimi Düğme: Toplama sözü verin
URL bağlantı düğmesi: #
Tasarım
Arka plan rengi: #ffffff Metin Rengi: Karanlık
Yazı tipi başlığı: Nunito
Ağır yazı tipi başlığı: kalın
Başlık Metin Boyutu: 36px
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #154C87
Düğmenin sınır genişliği: 0px
Maksimum genişlik: 500 piksel
Modül hizalaması: orta
Yuvarlak açı: 10 piksel
Bu tasarımın ana özelliği maksimum 500 piksel genişliktir. Bu, imleci daha sonra yönlendirirken satırın doğru dolgusunu her ayarladığımızda modülün genişliğinin değişmemesini sağlayacaktır.
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 100 PX
Kutunun gölgesinin dağılımının gücü: -30px
Sıra üzerinde yüzerken harekete geçme davetini dolandırma ve odaklama şimdi çekici bir Hover CTA efekti eklemeye başlamaya hazırız. Bu noktada imleci çizgiye yönlendirirken iki şeyi tamamlamak istiyoruz. İlk olarak, CTA’yı ortaya taşımak istiyoruz. Ve sonra daha görünür hale getirmek için modül ölçeğini (daha büyük hale getirmek) artırmak istiyoruz. Bunu yapmak için çizgi ayarlarını açın ve aşağıdakileri güncelleyin:
Dolgu (İmleci Nokta):% 0 sağda Ardından, hücresel ekran için dolguyu ayarlayın:
Dolgu (tablet):% 0 doğru
Dolgu (telefon):% 5 sol,% 5 sağ
CTA’yı büyütmek için, imleci yönlendirirken aşağıdaki dönüşüm özelliğini satıra ekleyin:
Dönüşüm Ölçeği (nokta imleci):% 110
Dönüşüm ölçeği özelliği çizgiye uygulansa da, bu da modüller de dahil olmak üzere hattaki çocuğun tüm unsurları için dolaylı olarak da geçerlidir. Bu nedenle, imleci hatta yönlendirirken modül% 110’a kadar dağılacaktır. CTA gerçekleştirme Bölücünün son kısmı ile yüzerken, imleci bölüm/satıra yönlendirirken CTA’yı görüntülemek için bölücüyü eklemeye hazırız. Buradaki anahtar, parçanın ve satırın aynı yüksekliğe ve genişliğe sahip olmasını sağlamaktır, böylece kullanıcının imleci eşzamanlı olarak parçaya ve boşluk olmadan satıra yönlendirmesidir. Bu nedenle, yatağın herhangi bir bölümünü yayınlamamız gerekiyor. Sonra parçanın üzerinde yüzerken daha yüksek büyüyen üst ve alt böcekleri yapmalıyız. Yapılması gereken budur. Aşağıdaki bölüm ayarlarını açın:
Dolgu: 0px üst, 0px aşağıda
Üst bölücü kuvveti (masaüstü): Ekran görüntüsüne bakın Üst bölücü stili (tablet ve cep telefonu): yok
Üst bölücü rengi: RGBA (21,76,135.0.61) Yüksek bölücü yükseklik (varsayılan):% 0 Yüksek bölücü yüksekliği (nokta imleci):% 120
Zaman Bölgesi’nin Arkası: Yatay
Alt bölücü kuvveti (masaüstü): Ekran görüntüsüne bakın
Alt bölücü stili (tablet ve cep telefonu): hiçbir şey
Alt bölücü rengi: RGBA (21,76,135.0.61)
Daha düşük bölücü yüksekliği (varsayılan):% 0 Alt bölücü yüksekliği (nokta imleci):% 120
Alt bölücüyü döndür: Yatay
Bölücünün bölümün dışında görünmemesini sağlamak için, dikey ve yatay taşma seçeneklerini gizli olarak güncelleyin.
Yatay taşma: gizli
Dikey taşma: gizli
Şimdi sonucuna bakalım. Nihai sonuç Ve bu tabletler ve cep telefonları üzerindeki tasarım.
CTA konumunu değiştirme Davet modülünün başlangıç konumunu yüzer durumundan önce harekete geçirmek istiyorsanız, satır alanlarını kolayca güncelleyebilirsiniz. Sağ taraftan, imleci yönlendirmeden önce bir modülün sağdan başlamasını istediğinizi söyleyin. Satır ayarlarını aşağıdaki gibi güncellemeniz yeterlidir:
Dolgu:% 35 kaldı Dolgu (nokta imleci):% 0 kaldı Sol odak noktasına sahip olmak için görüntüyü güncellemek isteyeceksiniz. Bundan sonra, sonuç bu. Alttan veya isterseniz, satırın altından CTA açılır penceresine sahip olabilirsiniz. Bunu yapmak için, parçaya sabit bir yükseklik eklemeniz ve ardından modülü birkaç üst rulmanla azaltmanız gerekir. Bölüm ayarlarını açın ve maksimum yükseklik parçasını verin ve gizlenecek taşmayı ayarlayın.
Maksimum yükseklik (masaüstü): 415px
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ındaki ekrandan çıkarmak için dolguyu güncelleyin.Ardından, imleci geri getirmeye yönlendirirken üst yatağı çıkarın. Dolgu (masaüstü):% 25 yukarıda,% 5 aşağıda
Dolgu (İmleci Noktalı):% 5 yukarıda
Sonuç bu …
Divi’nin son zihni, web sayfası tasarımınıza her türlü vites efekti eklemeyi eğlenceli ve kolaylaştırır.En iyi vites etkisi, bir hedefe sahip olması ve kullanıcı deneyimini gerçekten geliştirmesidir.Bu yayında yer alan bazı basit vuruş efektleri, harika görünen, kullanıcı deneyimini geliştiren ve umarım daha fazla dönüşüm üreten bazı ilginç CTA’lara yardımcı olacaktır.Daha fazla fikir için, gönderimize bakın, Divi’deki CTA’yı ve CTA slaytını yapma konusundaki yazımızı vurgulamak için imleç işlemini kullanabilirsiniz.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
