Divi'de Benzersiz CTA'lar Oluşturmak için Fareyle Üzerine Geldiğinde İçerik Nasıl Değiştirilir (3 Yol)

Divi'nin yerleşik vurgulu seçenekleri, vurgulu herhangi bir modülün içeriğini değiştirmeyi kolaylaştırır. Fareyle üzerine gelindiğinde arka plan resimlerini, renkleri ve hatta metni değiştirebiliriz. Bu, kullanıcıların dikkatini çekmenin ve daha iyi dönüşümler için bu harekete geçirici mesajları artırmanın yaratıcı yollarının kapısını açar.

Bugün, bazı benzersiz harekete geçirici mesajlar için Divi'de fareyle üzerine gelindiğinde içeriği nasıl değiştireceğinizi göstereceğiz. Fareyle üzerine gelindiğinde düğme metnini (ve simgeleri) değiştirmenin akıllı yollarını göstereceğiz. Fareyle üzerine gelindiğinde bir harekete geçirici mesaj modülünde başlık ve düğme metninin nasıl zarif bir şekilde değiştirileceğini göstereceğiz. Hatta bazı benzersiz geçiş efektleri eklemek için bazı özel CSS'ler bile ekleyeceğiz (bir düğme simgesini değiştirmek ve çevirmek gibi).

Bunu kontrol et!

Gizlice Bakış

İşte bugün oluşturacağımız üç tasarıma hızlı bir bakış.

#1 Düğmeler için Fareyle Üzerine Geldiğinde İçerik Nasıl Değiştirilir

#2 Metin Modüllerinde Arka Plan ve Gövde İçeriği Nasıl Değiştirilir

#3 Harekete Geçirici Mesaj Modülü ile Birden Fazla Öğe için Hover'da İçerik Nasıl Değiştirilir

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!

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ğıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) 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. Cake Maker Açılış Sayfası hazır düzenini sayfaya yükleyin. Tasarımlarımız için bu düzeni kullanacağız. Divi Builder'ı dağıtırken sorulduğunda "Hazır Düzen Seç" öğesini seçerek düzeni yükleyebilirsiniz. Veya Divi Builder içindeki ayarlar menüsünden "Kitaplıktan Yükle" artı simgesini seçebilirsiniz. Hazır mizanpajı sayfanıza nasıl yükleyeceğiniz hakkında daha fazla bilgi için videomuzu izleyin.

Bundan sonra Divi'de tasarım yapmaya hazırsınız.

#1 Düğmeler için Fareyle Üzerine Geldiğinde İçerik Nasıl Değiştirilir

Cake Maker Açılış Sayfası hazır düzenini sayfanıza yükledikten sonra, sayfanın üst başlığındaki ana düğme CTA'sını bulun ve düğme modülü tasarım ayarlarını açın.

Fareyle Üzerine Geldiğinde Düğme Metnini Değiştirme

İçerik sekmesi altında, düğme metnini aşağıdaki gibi güncelleyin:

Düğme Metni: “Şimdi Alışveriş Yapın”

Ardından, düğme metni için fareyle üzerine gelme seçeneğini dağıtın ve fareyle üzerine gelme sekmesinin altına değiştirilen düğme metnini aşağıdaki gibi girin:

Düğme Metni (fareyle üzerine gelin): “Hadi gidelim”

Fareyle üzerine gelindiğinde düğme metninin altındaki metin, düğmenin üzerine gelindiğinde varsayılan düğme metninin yerini alacaktır.

Düğme Genişliği

Ancak düğme inline-block bu nedenle düğmenin/bağlantının genişliği düğmenin içerdiği içerik miktarına (harfler veya boşluklar) göre değişecektir. Bu, bu vurgulu efekt için iyi çalışmaz, çünkü daha küçük değiştirme metni ile düğmenin genişliği küçülür ve düğmenin kenarının üzerine gelindiğinde atlama veya hata oluşmasına neden olur. Bunu düzeltmek için butona belirli bir genişlik uygulamamız gerekiyor. Bu, tek bir CSS parçacığıyla kolaydır. Düğme modülünün Ana Öğesine aşağıdaki CSS'yi ekleyin.

width: 200px;

İşte sonuç.

Ek Değişiklikler ve Hover Efektleri

Fareyle üzerine gelindiğinde içeriği değiştirmenin yanı sıra, düğmemizi farklı vurgulu efekt kombinasyonlarıyla da renklendirebiliriz.

Şu anda düğme simgesi, fareyle üzerine gelindiğinde dağıtılan bir sağ oktur. Bu, vurgulu düğme metni “Let's Go” ile gerçekten iyi çalışır.

Hover'da Düğme Simgesini Çevirme

Ancak, düğme simgesi için de güzel bir çevirme vurgulu efekti ekleyebilirsiniz. Bunu yapmak için, önce aşağıdakileri güncelleyerek simgenin her zaman (yalnızca üzerine gelindiğinde değil) görünmesini sağlayın:

Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

Ardından düğme modülüne aşağıdaki gibi bir CSS Sınıfı ekleyin:

CSS Sınıfı: çevirme düğmesi simgesi

Ardından sayfa ayarlarını açın ve aşağıdaki özel CSS'yi ekleyin.

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

İşte sonuç.

Hover'da Düğme Simgesini Değiştirme

Ayrıca, fareyle üzerine gelindiğinde düğme simgesini tamamen değiştirebilirsiniz. Gerçekten ihtiyacınız olan tek şey, simgenin bulunduğu :after sözde öğesinin içeriğini değiştirmek için küçük bir CSS parçacığıdır.

Css'i eklemeden önce ilk başta gösterilecek farklı bir buton ikonu seçelim, daha sonra CSS ile onu sağ oka çevirebiliriz.

CTA'mız “Şimdi Göster” olduğundan, Düğme Simgesini sepet simgesiyle güncelleyin.

Ardından gelişmiş sekmeye gidin ve mevcut CSS dönüştürme özelliğini 360 derece yerine 180 derecelik bir dönüşle güncelleyin. Ve sol oku ("\23") görüntüleyen içerik için yeni bir unicode ekleyin.

Yeni snippet şöyle görünecek:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

Simgeyi de 180 derece döndüreceğimiz için, düğmenin üzerine gelindiğinde bu, sepet simgesinin yerine bir sağ ok gösterecektir.

Son sonuç

Bu nihai sonuçtur.

#2 Metin Modüllerinde Arka Plan ve Gövde İçeriği Nasıl Değiştirilir

Bu sonraki tasarım için sayfa düzeninden "Hizmetlerim" bölümüne gidin. İki metin modülü ile en üst sıra için satır ayarlarını açın.

Sütun Ayarlarını Güncelle

Satır ayarları altında, Sütun 1 için ayarları açın ve fareyle üzerine gelindiğinde sütuna bir arka plan resmi ekleyin.

Bu, varsayılan olarak orada bulunan beyaz arka planı değiştirecektir.

Ayrıca, fareyle üzerine gelindiğinde arka plan görüntüsünün üzerine bir degrade ekleyin.

Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Arka Plan Gradyanı Sağ Renk: rgba(46,41,142,0.75)
Başlangıç ​​Konumu: %30
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Bu, fareyle üzerine gelindiğinde değiştirilen metni daha okunaklı hale getirecek güzel bir kaplama sağlayacaktır.

Bundan sonra, varsayılan ayara geri yükleyerek sütun için özel dolguyu çıkarın.

Sütun 1'deki Metin Modülünü Özelleştirin

Sütun güncellendikten sonra, ayarları kaydedin ve sütun 1'deki metin modülü için metin modülü ayarlarını açın. Ardından, metin modülü gövdesi içeriğini aşağıdakilerle güncelleyin:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

Bu, fareyle üzerine gelindiğinde bağlantı içeren bir harekete geçirici mesaj eklemenin güzel bir yoludur.

Ardından, arka planı aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #ffffff;
Arka Plan Rengi (vurgulu): rgba(255,255,255,0);

Bu, sütundaki arka plan görüntüsünü kademeli olarak ortaya çıkarmak için güzel bir geçiş öğesi ekler.

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

Yükseklik: 260 piksel

Dolgu: 30 piksel üst, 30 piksel sol, 30 piksel sağ
Dolgu (vurgulu): 90 piksel üst

Bu, metin modülünün üzerine gelindiğinde metni kademeli olarak indiren hoş bir geçiş efekti yaratacaktır.

Ardından, metin renklerini aşağıdaki gibi beyaza güncelleyin:

Bağlantı Metni Rengi: #ffffff
Başlık 3 Metin Rengi (fareyle üzerine gelin): #ffffff

Fareyle üzerine gelme efektlerinin geçişini yavaşlatmak için geçiş süresini aşağıdaki gibi güncelleyin:

Geçiş Süresi: 500ms

Son sonuç

Şimdi nihai sonucu kontrol edin.

#3 Harekete Geçirici Mesaj Modülü ile Birden Fazla Öğe için Hover'da İçerik Nasıl Değiştirilir

Bu sonraki tasarım için, fareyle üzerine gelindiğinde birden çok içerik öğesini değiştiren bir eylem çağrısı modülü kullanacağız. Bunu yapmak için sayfada Popüler Koleksiyonlar bölümüne gidin.

Yeni Harekete Geçirici Mesaj Modülü Ekle

Ardından, uzmanlık bölümünün üst satırındaki “şimdi alışveriş yap” düğmesinin altına yeni bir harekete geçirici mesaj modülü ekleyin.

Hover'da İçeriği Değiştirerek CTA'yı Güncelleyin

Ardından, harekete geçirici mesaj içeriğini aşağıdaki gibi güncelleyin:

Başlık: "Özel Teklif"
Başlık (fareyle üzerine gelindiğinde): "%10 İndirim"
Düğme metni: "Şimdi Alışveriş Yapın"
Düğme metni (fareyle üzerine gelin): "Anlaşmayı Al"
Gövde: “Özel Cupcakes”
Düğme Bağlantı URL'si: #

Şimdilik ayarı kaydedin.

Düzen Düğme Stillerini Kopyala ve Yapıştır

CTA'mız için düğme tasarlama konusunda bir sıçrama yapacağız. Bunu yapmak için, önceden hazırlanmış düzen ile gelen CTA modülünün üzerindeki düğme modülü için düğme ayarlarını açın. Ardından buton seçenek grubundaki üç nokta simgesine tıklayın ve “buton stillerini kopyala”yı seçin.

Ardından, tasarladığımız çağrı modülünde diğer seçenekler menüsünü açın ve “Buton Stillerini Yapıştır” seçeneğini seçin.

Ardından, harekete geçirici mesaj modülü ayarlarını açın ve düğme dolgusunu güncelleyin:

Düğme Dolgusu: 15 piksel üst, 15 piksel alt, 40 piksel sol, 40 piksel sağ

Metin Stillerini Güncelle

Bundan sonra, başlık ve gövde metni tasarımını güncelleyin.

Başlık Başlık Düzeyi: H4
Başlık Yazı Tipi: Pacifico
Başlık Metin Boyutu: 9vw
Başlık Satırı Yüksekliği: 1.3em
Gövde Yazı Tipi: Açık Sans
Gövde Yazı Tipi Ağırlığı: Kalın
Gövde Metni Boyutu: 18px
Gövde Harf Aralığı: 1px

Son Ayarlar

Ardından, dolguyu güncelleyin.

Dolgu: 0 piksel sol, 0 piksel sağ

Ardından modüle özel bir CSS Sınıfı verin.

CSS Sınıfı: fade-cta-title

Aşağıdaki özel CSS'yi Promosyon Düğmesi CSS giriş kutusuna ekleyerek cta düğmesini tam genişlikte yapın.

Ve geçiş süresini güncelleyin.

Geçiş Süresi: 800ms

Son olarak, arka plan rengini, varsayılan olarak saydam olacak ve üzerine gelindiğinde rengi değiştirecek şekilde güncelleyin.

Arka Plan Rengi: yok (sil)
Arka Plan Rengi (vurgulu): rgba(247,78,72,0.86)

Ardından, mizanpajdaki orijinal cta'nın yerini alması için Harekete Geçirici Mesaj modülümüzün üstündeki satırdaki iki modülü silin.

Sonuç Şimdiye Kadar

İşte şimdiye kadarki sonuç. Harekete geçirici mesaj modülünün üzerine gelindiğinde başlık metninin ve düğme metninin nasıl değiştiğine dikkat edin.

Animasyonla İçerik Değişikliğini Yumuşatma

CTA'daki büyük başlığın geçişini yumuşatmak istiyorsak CSS ile basit bir animasyon ekleyebiliriz. Modüle CSS Sınıfını zaten eklediğimiz için, tek yapmamız gereken sayfa ayarları modunu açmak ve aşağıdaki özel CSS'yi eklemek:

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

Son sonuç

Şimdi nihai sonucu kontrol edelim.

Ve işte mobilde.

Son düşünceler

Bu öğreticide, Divi'de fareyle üzerine gelindiğinde içeriğin etkili bir şekilde nasıl değiştirileceğine dair 3 örnek gösterdik. İçerik için yerleşik fareyle üzerine gelme seçenekleri bunu gerçekten kolay bir süreç haline getiriyor. Ve birkaç CSS parçacığıyla, tasarımı farklı kılmak için bazı benzersiz geçişler ekleyebilirsiniz. Umarım bu, daha fazla dönüşüm ve etkileşim için kendi sitenizdeki harekete geçirici mesajları artırmanıza olanak tanır.

Daha fazla istemek? CTA'larınızı bir sonraki seviyeye taşımanıza yardımcı olacak bir sürü harika gönderimiz var.

Yorumlarda sizden haber bekliyorum.

Şerefe!