Hover'da Hareketli Gif ile Arka Plan Resmi Nasıl Değiştirilir

Fareyle üzerine gelindiğinde bir arka plan resmini animasyonlu bir GIF ile değiştirmek, içeriğinize hayat vermenin ve aynı zamanda ürünler veya hizmetler için harika bir illüstrasyon sağlamanın harika bir yolu olabilir. Örneğin, belirli bir yazılım ürününün özelliklerini tanıtıyorsanız, animasyonlu bir GIF, ürün işlevselliğinin çeşitli yönlerini açıklamaya yardımcı olabilir (bunu burada, Elegant Themes'deki ürünler için yapıyoruz). Ancak, başlangıçta bu GIF'i göstermek yerine, fareyle üzerine gelindiğinde animasyonlu bir sürüm (veya GIF) ile değiştirilen bu işlevin hareketsiz ekran görüntüsünü göstermek isteyebilirsiniz.

Bu eğitimde, fareyle üzerine gelindiğinde hareketli bir GIF ile arka plan (hareketsiz) bir görüntüyü değiştiren bir tanıtım yazısının nasıl oluşturulacağını göstereceğim. Snagit (bir ekran yakalama yazılımı) kullanarak nasıl ekran görüntüsü ve GIF oluşturulacağını inceleyerek başlayacağız. Ardından, fareyle üzerine gelmeyi etkinleştirmeleri için bu arka plan görüntülerini bir tanıtım yazısına nasıl uygulayacağımızı gözden geçireceğiz. Divi'nin arka planda gezinme seçenekleriyle görüntülerin gerçek değişimi son derece kolaydır.

Bu tasarım, tasarımın önceden statik kalmasına yardımcı olacak ve ardından içerikle etkileşime girdiklerinde kullanıcılarla etkileşime geçecektir.

Başlayalım.

Gizlice Bakış

Hover Layout'taki GIF Arka Planını Ü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.

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 etkinken yeni bir sayfaya sürükleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Youtube Kanalımıza Abone Olun

Başlamak için aşağıdakilere ihtiyacınız olacak:

1. Divi Teması yüklü ve etkin
2. Ekran görüntüleri çekmenize, ekran videoları kaydetmenize ve GIF'ler oluşturmanıza olanak tanıyan Ekran Yakalama Yazılımı (veya araçların bir kombinasyonu). Bu eğitimde Snagit'i kullanacağım çünkü bu, blog yazılarım ve eğitimlerim için her gün kullandığım hepsi bir arada bir çözüm.
3. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)

Bundan sonra, Divi'de bazı vurgulu sekmeler oluşturmaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: Ekran Görüntüleri ve GIF'ler Oluşturma

Bu tasarım için, bir tanıtım yazısı modülü için hareketsiz arka plan görüntüsü olarak görüntülenecek bir ekran görüntüsü oluşturmak istiyoruz. Ardından, ürünün nasıl çalıştığına dair kısa bir örnekle bu hareketsiz arka plan görüntüsünü hayata geçiren bir GIF (hareketli bir görüntü) oluşturmak istiyoruz. İşin püf noktası, fareyle üzerine gelindiğinde bir görüntüyü diğeriyle değiştirirken yumuşak bir geçişe sahip olacak kadar birbirine benzeyen görüntüler ve GIF'ler oluşturmaktır.

İki görüntü oluşturulduktan sonra, hareketsiz görüntüyü ilk arka plan görüntüsü olarak kullanabiliriz. Ardından, tanıtım yazısı modülünün üzerine gelindiğinde arka plan görüntüsünü gif görüntüsüne çevirebiliriz.

Ekran görüntülerini ve GIF'leri oluşturmak için Snagit kullanacağım. Ücretsiz bir yazılım olmasa da, kullanımı gerçekten kolaydır ve tek bir yerde ekran görüntüleri oluşturmanıza, ekranınızı kaydetmenize ve gizli ekran kayıtlarını GIF'lere dönüştürmenize olanak tanır.

Ekran Görüntüsü Hareketsiz Görüntüyü Oluşturma

Ekran görüntüsü oluşturmak için Snagit'i açın ve yakalama kutusunu açın. Ardından, ekranınızın bir bölgesini seçerek bir görüntü yakalamayı seçtiğinizden emin olun. Bu, görüntü olarak yakalanmak üzere ekranınızdaki bir alanı sürüklemenize olanak tanır. Ekran yakalamayı başlatmak için yakalama düğmesine tıklayın.

Ardından, görüntü olarak yakalamak istediğiniz ekran alanı çevresinde yakalama alanını tıklayın ve sürükleyin.

Resmi bilgisayarınıza kaydedin. Ardından Snagit Yakalama kutusunu tekrar açın ve ekranınızın bir bölgesini seçerek video çekmeyi seçin. Ekran yakalamayı başlatmak için yakalama düğmesine tıklayın.

Ardından, ekranınızın yakalamak ve video klip olarak kaydetmek istediğiniz alanı çevresinde yakalama alanını tıklayın ve sürükleyin. Hareketsiz görüntü ve gif arasında daha sorunsuz bir geçiş oluşturmak için, görüntü için yaptığınızla aynı alanı (veya mümkün olduğunca yakın) video için de yakalamak isteyeceksiniz.

Hazır olduğunuzda, kayıt düğmesine tıklayın ve kaydetmek istediğiniz gösteriyi gerçekleştirin.

İşiniz bittiğinde, kaydı durdurmak için durdur'u tıklayın. Ardından video klibi Snagit düzenleyicide düzenleyebilirsiniz. Sürümü tamamladığınızda, videonuzdan bir Gif oluşturmak için videonun yanındaki Gif düğmesini tıklayın.

Gif Oluştur açılır penceresinde, çıktı ayarlarını gerektiği gibi değiştirin. Gif'inizin tekrar etmesi için döngüyü etkinleştirdiğinizden emin olun. Ardından Oluştur düğmesini tıklayın.

GIF oluşturulduktan sonra bilgisayarınıza kaydedin.

Artık Divi'de tasarımınıza eklenmeye hazır bir hareketsiz görüntünüz ve bir gif görüntünüz var.

2. Bölüm: Fareyle Üzerine Geldiğinde Hareketli Gif Resmiyle Arka Plan Resmini Değiştiren Bir Bulanıklık Oluşturma

Henüz yapmadıysanız, yeni bir sayfa oluşturun ve ön uçta oluşturmak için Divi Builder'ı dağıtın. Ardından iki sütunlu yeni bir normal bölüm oluşturun.

1. sütuna bir tanıtım yazısı modülü ekleyin.

Ardından içerik ayarlarını aşağıdaki gibi güncelleyin:

Gövde: "Gövde metni buraya gelir"
Simgeyi Kullan: EVET
Simge: bulut (ekran görüntüsüne bakın)

Varsayılan Arka Plan Resmini Ekle

Ardından, tanıtım yazısına varsayılan arka plan resmini aşağıdaki gibi ekleyin:

Arka Plan Resmi: Oluşturduğunuz arka plan resmini (hareketsiz ekran görüntüsü) yükleyin.
Arka Plan Resmi Boyutu: Sığdır (bu, tüm resmin görünümde kalmasını sağlar)
Arka Plan Görüntüsü Konumu: Üst Merkez (bu, görüntüyü tanıtıcı metnin en üstünde tutar)

Vurgulu Arka Plan Gif Resmini Ekleyin

İlk arka plan görüntüsünü yerleştirdikten sonra, arka plan üzerine gelme seçeneğini dağıtın ve üzerine gelme sekmesini seçin. Ardından, fareyle üzerine gelme durumunda yeni bir arka plan resmi olarak hizmet etmesi için Gif resmini ekleyin.

Blurb Modülünü Şekillendirme

Aşağıdaki tasarım ayarlarını güncelleyerek tanıtım yazısı modülünün stilini oluşturmaya devam edin:

Simge Rengi: #6bb962
Daire Simgesi: EVET
Daire Rengi: #ffffff
Metin Hizalama: orta
Başlık Yazı Tipi: Lora
Başlık Metin Boyutu: 34px
Dolgu: %50 üst, %5 alt, %3 sol, %3 sağ

Bu tasarımın gerçek anahtarı dolgudur. Arka planı, tanıtım yazısı içeriğinin üzerine yerleştirmek için, üst dolgunun yaklaşık %50'sini eklemeniz gerekir. Ve arka plan resmi boyutu "uyum" olarak ayarlandığından ve konum "üst orta" olarak ayarlandığından, tarayıcı genişliklerine yanıt veren içeriğin üzerinde güzel bir şekilde oturacaktır.

Son olarak, tanıtım yazısına fareyle üzerine gelindiğinde aşağıdaki gibi bir kutu gölgesi verin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 0px (varsayılan), 24px (vurgulu)

Son sonuç

İşte nihai sonuç.

Ve işte tablet ve telefondaki tasarım.

Ve işte farklı ekran görüntüleri ve renklere sahip ek tanıtım yazılarıyla nasıl görünebileceği.

Son düşünceler

Web sitenizde GIF kullanmaya aşina değilseniz, kesinlikle düşünmelisiniz. İçeriğinizi gerçekten hayata geçirebilir ve ziyaretçileriniz için son derece faydalı çizimler sağlayabilirler. Ve Divi'nin arka plan üzerine gelme seçenekleriyle, üzerine gelindiğinde bir GIF ile hareketsiz bir görüntüyü kolayca değiştirebilirsiniz. Bu çözüm, içeriğinizle etkileşime girerken kullanıcıyı gerçekten meşgul eden daha az dikkat dağıtıcı bir tasarım sağlayabilir. Umarım bir sonraki projeniz için faydalı bulursunuz.

Yorumlarda sizden haber bekliyorum.

Şerefe!