Divi'de Benzersiz Ürün Animasyonlarını Görüntülemek için GIF'lere ve HTML5 Videolarına 3D Efektler Ekleme

Animasyonlu GIF'ler ve HTML5 videolar, bir ürünün web sitenizde nasıl çalıştığını canlandırmak için harika olabilir. Bu kısa animasyonlar, değerli bilgileri ziyaretçiye normal bir videodan daha kolay sindirilecek şekilde iletir. Bu tür GIF'leri ve HTML5 videolarını eklemek Divi ile oldukça kolay bir şekilde yapılabilir. Biraz yaratıcılıkla, benzersiz ürün animasyonları için 3B efektler ekleyebilirsiniz.

Bu eğitimde, Divi'de benzersiz ürün animasyonlarını görüntülemek için GIF'lere ve HTML5 videolarına nasıl 3D efektler ekleyeceğinizi göstereceğim. Bu tasarım, öne çıkan bir ürün veya hizmeti sergilemek için yaratıcı bir düzen arayanlar için gerçekten iyi çalışıyor. Bunu yapmak için öncelikle Divi kullanarak sayfanıza GIF'leri ve HTML5 video yerleştirmelerini nasıl ekleyeceğimizi anlamamız gerekecek. Ardından, GIF'i (veya videoyu) 3B alanda konumlandırmak ve döndürmek için Divi'nin dönüştürme seçeneklerini kullanabileceğiz. İşleri bitirmek için, bu 3D GIF'ler ve Videolar ile uyumlu güzel bir bölüm düzeni oluşturmak için birkaç Divi tasarım tekniği kullanacağız.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz tasarıma bir göz atın. Ürün animasyonlarını oluşturmak için bir GIF ve bir HTML5 videosu kullanıldığında tasarım benzer görünüyor.

GIF ve HTML5 video Ürün Animasyonları Divi Düzeni için 3D Efektleri ÜCRETSİZ 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'a sürükleyin.

Hadi öğreticiye geçelim, olur mu?

Youtube Kanalımıza Abone Olun

Kısa Ürün Animasyonları için GIF'leri Kullanma

GIF'ler uzun zamandır var. Bunun nedeni muhtemelen GIF'lerin oluşturulmasının kolay olması ve tarayıcılar arasında yaygın olarak desteklenmesidir. Ve gerçekten kısa ürün animasyonları için iyi çalışabilirler. GIF bir görüntü olduğundan, onu diğer jpg veya png'lerde yaptığınız gibi Divi Görüntü modülünde kullanabilirsiniz. Bu, GIF'e Divi'nin yerleşik ayarlarının tam gücüyle stil vermenizi sağlar. Ancak dikkatli olun, daha uzun süreli ve daha yüksek kare hızına sahip GIF'ler gerçekten büyük dosya boyutlarına neden olabilir. Bu yüzden GIF'lerinizi mümkün olduğunca kısa ve küçük tutmak en iyisidir.

HTML5 Videoyu GIF Değiştirme Olarak Kullanma

HTML5 videoları, özellikle daha uzun ürün animasyonları için popüler bir GIF alternatifi haline geliyor. Bunların yeni Elegant Themes web sitesi tasarımında kullanıldığını fark etmiş olabilirsiniz. GIF'lere kıyasla boyut olarak önemli ölçüde daha küçüktürler ve bu nedenle yüklenmeleri daha az zaman alır. Divi sitenize bir HTML5 videosu eklemek de basittir. Tek yapmanız gereken videoyu sayfanıza gömmek için HTML5 video öğesini eklemektir (WordPress'te video kısa kodunu nasıl ekleyeceğiniz gibi). Ayrıca videoyu, tıpkı bir GIF gibi çalışan yüksek kaliteli bir animasyonla sonuçlanan gizli kontroller, döngü ve otomatik oynatma ile özelleştirebilirsiniz. Ayrıca, bir Divi Modülüne gömme eklerken, Videoyu yaratıcı şekillerde şekillendirmek için Divi oluşturucuyu da kullanabilirsiniz.

Normal GIF'ler yerine HTML5 Video kullanmayı neden düşünmeniz gerektiğine dair daha fazla bilgi için bu gönderiye göz atın.

Artık GIF'leri ve HTML5 videolarını kullanmayı biraz daha anladığımıza göre, bunları Divi'de kullanmaya hazırız.

Bu Eğitim İçin İhtiyacınız Olan Şeyler

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

1. GIF resmi
2. HTML5 video Öğesi yerleştirmesinde kullanılacak bir MP4 Video Dosyası (ve bu video dosyasının URL'si). Maksimum tarayıcı desteği için aynı videoyu webm formatında da ekleyebilirsiniz (bununla ilgili daha fazla bilgi daha sonra anlatılacaktır).
3. Divi Teması yüklü ve etkin
4. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)

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

Animasyonlu GIF veya HTML5 videoya 3B Efekt Ekleme

Bu eğitim için tam bölüm düzenini tasarlamaya çok geçmeden önce, 3D efektini hem GIF'e hem de HTML5 videosuna nasıl ekleyeceğinizi göstermenin en iyisi olacağını düşündüm. İşimiz bittiğinde, güzel ve modern bir tasarımla bölüm düzeninin geri kalanını cilalayacağız.

Şimdilik Divi'deki bir GIF'e 3D efekti ekleyerek başlayalım.

GIF oluşturma

Web'de GIF oluşturmanın birçok yolu vardır. Bu eğitim, bir ürünün nasıl çalıştığını canlandırmak için bir GIF oluşturmakla ilgili olduğundan, ekranınızın bir bölümünü (bir ekran kaydedici kullanarak) kaydetmek ve ardından video dosyasını bir GIF dosyasına dönüştürmek isteyeceksiniz. Dosya boyutunu ve yükleme süresini sınırlamak için GIF'i mümkün olduğunca küçük oluşturmayı unutmayın. GIF oluşturulduğunda, onu Divi'deki diğer herhangi bir görüntü gibi kullanabileceksiniz.

Snagit kullanarak nasıl GIF oluşturulacağını öğrenmek istiyorsanız, Hareketli Gif ile Arka Plan Resmi Nasıl Değiştirilir başlıklı yazımıza göz atın.

Divi'de bir GIF'e 3B Efekt Ekleme

Şimdi GIF'i Divi'ye eklemenin zamanı geldi, böylece onu harika bir 3D efektiyle şekillendirebiliriz.

İşleri başlatmak için iki sütunlu bir satıra sahip yeni bir normal bölüm ekleyin.

Modül eklemeden önce, GIF'imizi içerecek sütuna perspektif özelliğini eklememiz gerekiyor. Bunu yapmak için, satır ayarlarını açın ve aşağıdaki CSS parçacığını Sütun 1 Ana Öğesine ekleyin:

perspective: 1000px;

Bu perspektif özelliği, sütun içindeki öğeye perspektif eklemek için gereklidir. Divi'nin dönüştürme seçeneklerini kullanırken 3B efekti elde edebilmemiz için bir öğenin perspektife ihtiyacı vardır. Daha iyi bir anlayış için, 3B fotoğraf duvarları tasarlamak için dönüştürme seçenekleriyle perspektifin nasıl kullanılacağına ilişkin yazımıza göz atın.

Şimdi sütun 1'e bir görüntü modülü ekleyin.

GIF'i görüntü modülüne yükleyin. Bu tasarım için GIF, 600 piksele 700 piksel civarında olmalıdır.

Ardından, GIF'i 3B alanda ölçeklendirmek, döndürmek ve eğmek için dönüştürme seçeneklerini kullanın.

Dönüştür Y eksenini döndür: 8 derece
Dönüştür X Eksenini Döndür: 28deg

Skew Y Eksenini Dönüştür: 10deg
Skew X Eksenini Dönüştür: -8deg

Dönüşüm Ölçeği (tablet): %80

Şimdi sonuca bakalım.

Divi'de bir HTML5 Videoya 3D Efekti Ekleme

3D efektini eklemeden önce HTML5 Videomuzu oluşturmamız gerekiyor. Aşağıda bunun nasıl yapılacağına ilişkin adımları inceleyeceğiz. Ancak daha eksiksiz bir açıklama istiyorsanız, Daha Küçük Dosya Boyutlarında Hareketli Gifler Oluşturmak için HTML5 Video Nasıl Kullanılır başlıklı yazımıza göz atın.

HTML5 Video Gömme Kodunu Oluşturma

HTML5 video Öğesi aşağıdaki temel yapıya sahiptir.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Bu kodun ne yaptığını görmek için HTML hakkında çok fazla bilgi sahibi olmanıza gerek yok. <video> öğesinin içinde, görüntülemek istediğiniz video dosyalarının yolunu/url'sini tutan iki <source> öğeniz vardır. Her kaynak öğenin farklı bir dosya biçiminde (webm ve mp4) bir videosu vardır. Her ikisi de maksimum tarayıcı desteği için gereklidir. Sıra da önemlidir. Webm videosu, daha yüksek kaliteli bir video formatı olduğu, ancak tarayıcılar tarafından daha az desteklendiği için koddaki mp4 videonun üstüne yerleştirilir. Bu nedenle, bir tarayıcı webm videosunu destekliyorsa, onu görüntüler. Ancak tarayıcı webm videosunu desteklemiyorsa, altında mp4 video formatını kullanır. Her iki video biçimini de dahil etmek gerekli değildir, ancak en iyi uygulamadır. Ve yalnızca birini kullanacaksanız, daha yaygın olarak desteklendiği için mp4 biçimini kullanın.

Aslında, kendi kendine barındırılan videoları görüntülemek için Divi'nin video modülünü her kullandığınızda, Divi, videoları görüntülemek için aynı HTML5 video Öğesini oluşturur. Bu nedenle Video modülü hem mp4 hem de webm video dosyası eklemenize izin verir.

Kodu kendi videonuz için kullanmak için, video url'sini src özelliğinden sonra parantez içine eklemeniz yeterlidir.

Video dosyalarını WordPress sitenize yüklerseniz, medya kitaplığından url'leri alabilirsiniz.

Ardından video URL'lerini src özelliğinden sonra parantez içine yapıştırın.

İşiniz bittiğinde böyle bir şey görünmelidir.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Ardından, videonun görüntülenmesini ve işlevselliğini kontrol etmek için dört özellik ekleyeceğiz. Bu tür kontrol, Divi Video Modülü kullanmak yerine HTML5 videosunu manuel olarak eklemenin başlıca nedenidir. Bu nitelikler arasında autoplay (böylece video otomatik olarak başlar), loop (böylece video tekrarlanır), muted (böylece video ses çalmaz) ve playsinline oynatılır (böylece video öğenin oynatma alanında oynatılır). Bu öznitelikleri videoya uygulamak için, özniteliklerin her birini <video> etiketinin başındaki parantez içine ekleyin.

Şimdi kod şöyle görünecek.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Not: Normalde, HTML5 videoları için controls özniteliğini uygularsınız, ancak bu durumda, videonun bir GIF gibi çalışması için onu dışarıda bırakacağız.

Artık kodu yerleştirmeye hazırsınız.

HTML5 Videosunu Gömme

Sayfanıza bir HTML5 videosu yerleştirmek için kod modülünü kullanabiliriz.

GIF görüntü modülünü kod modülümüzle değiştirmeden önce, GIF örneğimizi koruyabilmek için tüm bölümü çoğaltalım. Çoğaltılan bölümde, görüntü modülünü silin ve yerine bir metin modülü ekleyin.

Ardından HTML5 video yerleştirme kodunu kod giriş kutusuna yapıştırın.

Ardından görüntü modülünden dönüştürme stillerini kopyalayın ve dönüştürme stillerini kod modülüne yapıştırın. Veya dönüştürme stillerini aşağıdaki gibi güncelleyebilirsiniz:

Dönüştür Y eksenini döndür: 8 derece
Dönüştür X Eksenini Döndür: 28deg
Skew Y Eksenini Dönüştür: 10deg
Skew X Eksenini Dönüştür: -8deg
Dönüşüm Ölçeği (tablet): %80

GIF'i oluşturmak için kullandığım videoyu kullandığım için tasarım çok benzer görünecek. Ancak, videonun boyutu GIF boyutundan önemli ölçüde daha küçüktür. İşte sonuç.

Bölüm Düzeninin Tasarımını Tamamlama

Artık 3D GIF'e (veya HTML5 videoya) sahibiz. Bölüm düzenimizin tasarımını bitirebiliriz. Bu tasarım için, 1. sütundaki HTML5 videosunun olduğu bölümü kullanacağım.

Bölüm ve Satırı Özelleştirme

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin.

Dolgu: %15 üst, %15 alt

Ardından satır ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #ba7fe8
Arka Plan Gradyanı Sağ Renk: #4b84ff

Maks. Yükseklik: 300 piksel (masaüstü), yok (tablet ve telefon)

Dolgu: 0 piksel üst, 0 piksel alt

Daha sonra sıraya benzersiz bir tasarım öğesi için yarı saydam bir iç kutu gölgesi verebiliriz.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Yayılma Gücü: 40px
Gölge Rengi: rgba(255,255,255,0.89)

Kod Modülünü Konumlandırma

Şimdi transform translate özelliğini aşağıdaki gibi ayarlayarak videolu kod modülünü biraz açalım:

Dönüştürme Y Eksenini Dönüştür: -%20 (masaüstü), -%7 (telefon)

Harekete Geçirici Mesaj Modülü Ekleme

Tasarımı tamamlamak için 2. sütuna bir harekete geçirici mesaj modülü ekleyelim. Bu, öne çıkan ürünün bir düğmeyle açıklamasını eklemek için harika bir yer olacaktır.

Düğmenin görünmesini sağlamak için bir Düğme Bağlantı URL'si ekleyin.

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

Arka Plan Rengi: #ffffff
Metin Hizalama: Sol
Metin Rengi: Koyu

Başlık Yazı Tipi: Lato
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Metin Rengi: #20292f
Gövde Yazı Tipi: Lato
Gövde Metni Rengi: #6d7c90
Gövde Metin Boyutu: 17px
Gövde Çizgisi Yüksekliği: 1.8em

Düğme Metin Boyutu: 12px
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #4b84ff
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 100 piksel
Düğme Harf Aralığı: 2px
Düğme Yazı Tipi: Lato
Düğme Yazı Tipi Ağırlığı: Ağır
Düğme Yazı Tipi Stili: TT
Düğme Dolgusu: 12 piksel üst, 12 piksel alt, 20 piksel sol, 20 piksel sağ

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Yayılma Gücü: 40px
Gölge Rengi: rgba(103,151,255,0.11)

Marj: %10 sağ

Dönüştürme Y Eksenini Dönüştür: -%33 (masaüstü), -%15 (telefon)
Dönüştürme X Eksenini Çevir: -5%

Son sonuç

masaüstü

Tablet

Telefon

Son düşünceler

GIF'lere ve HTML5 videolarına 3D efekti eklemek, bu ürün animasyonları için gerçekten benzersiz bir görüntü sağlar. Divi'nin dönüştürme seçenekleri (perspektif özelliğiyle birlikte), GIF'lerinize ve Videolarınıza 3B efektler eklemeyi kolaylaştırır.

Ve umarım Divi ile GIF'lerin ve HTML5 videolarının nasıl kullanılacağı hakkında birkaç şey öğrenmişsinizdir. GIF'lerin kullanımı kolaydır, ancak dosya boyutunu web dostu tutmak daha zordur. HTML5 videolar, bir yerleştirme kodu kullanılmasını gerektirir, ancak daha uzun animasyonlar için GIF'in yerini almak olarak son derece iyi çalışabilir.

Bir sonraki projenizde ürün ve hizmetler için animasyonlar sergilemek için bu tasarımı kullanmanın yeni ve heyecan verici yollarını keşfetmekten çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!