Divi’de benzersiz ürün animasyonlarını görüntülemek için GIF efektlerine ve HTML5 videolarına 3D ekleyin
GIF animasyonu ve HTML5 videosu, bir ürünün web sitenizde nasıl çalıştığını canlandırmak için çok iyi olabilir. Bu kısa animasyon, ziyaretçilere sindirimi sıradan videolardan daha kolay olacak şekilde değerli bilgileri iletir. Bu tür GIF ve HTML5 videosu eklemek Divi ile kolayca yapılabilir. Biraz yaratıcılıkla, benzersiz ürün animasyonuna 3D efektler ekleyebilirsiniz. Bu öğreticide, Divi’de benzersiz ürün animasyonlarını görüntülemek için GIF ve HTML5 videosuna nasıl 3D ekleyeceğinizi göstereceğim. Bu tasarım, üstün ürünler veya hizmetler sergilemek için yaratıcı düzen arayanlar için çok iyi çalışıyor. Bunu yapmak için önce Divi kullanarak sayfanıza GIF ve HTML5 video gömülmesini nasıl ekleyeceğinizi anlamalıyız. Daha sonra GIF (veya videoyu) 3D alanda konumlandırmak ve döndürmek için Divi Dönüşüm seçeneğini kullanabileceğiz. Bunu tamamlamak için, GIF ve 3D videoya uyacak şekilde düzenin güzel bir bölümünü oluşturmak için birkaç Divi tasarım tekniği kullanacağız.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımda gizlice bir bakış. Ürün animasyonu oluşturmak için GIF ve HTML5 videosunu kullanırken tasarım benzer görünüyor.
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.
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? GIF Kısa Ürün Animasyonu için GIF kullanarak YouTube kanalımıza abone olmak uzun zamandır var. Bunun nedeni, GIF’lerin kolayca yapılması ve tarayıcı genelinde yaygın olarak desteklenmesi olabilir. Ve çok kısa ürün animasyonu için iyi çalışabilirler. GIF bir görüntü olduğundan, JPG veya diğer PNG gibi bir Divi görüntü modülünde kullanabilirsiniz. Bu, GIF’i Divi’nin varsayılan ayarlarından tam mukavemetle düzenlemenizi sağlar. Ancak dikkatli olun, daha uzun bir süre ve daha yüksek görüntü frekansı çok büyük bir dosya boyutu üretebilir. Bu yüzden en iyisi, GIF’inizi kısa ve mümkün olan en küçük tutmaktır. HTML5 videolarını GIF HTML5 videosunun yerine, özellikle daha uzun ürün animasyonları için popüler bir GIF yerine kullanın. Yeni zarif tema web sitesi tasarımında kullanıldıklarını fark etmiş olabilirsiniz. GIF’den önemli ölçüde daha küçüktürler ve yüklemek için daha az zaman gerektirir. Ve divi sitenize HTML5 videoları eklemek çok kolaydır. Tek yapmanız gereken, videoları sayfanıza gömmek için bir HTML5 video öğesi eklemektir (WordPress’e kısa bir video kodu eklemenize benzer). Ayrıca videoyu GIF gibi işlev gören yüksek kaliteli animasyonlar üreten gizli kontrol, tekrar ve otomatik oynatma ile de ayarlayabilirsiniz. Ayrıca, Seman’ı Divi modülüne eklerken, video yapıcısını yaratıcı bir şekilde ayarlamak için de kullanabilirsiniz.
HTML5 videosunu neden sıradan GIF’den daha fazla düşünmeniz gerektiği hakkında daha fazla bilgi için bu yazıya bakın. Artık GIF ve HTML5 videosu kullanımı hakkında daha fazla bilgi sahibi olduğumuza göre, Divi’de kullanmaya başlamaya hazırız. Bu öğreticinin başlaması için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var: GIF Image
HTML5 video öğelerinin gömülmesinde kullanılacak MP4 video dosyaları (ve video dosyasına URL). Maksimum tarayıcı desteği için, aynı videoyu WebM formatına ekleyebilirsiniz (daha sonra bununla ilgili).
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Animasyonlu GIF veya HTML5 Video’ya 3D efekti ekleyin
Bu öğretici için tam düzeni tasarlamadan önce, GIF efektlerine ve HTML5 videolarına nasıl 3D ekleneceğini göstermek daha iyi olacağını düşünüyorum. Bittiğinde, parçanın kalan düzenini iyi bir modern tasarımla cilalayacağız. Şimdilik, Divi’de GIF efektlerine 3D ekleyerek başlayalım. GIF yapmak Web’de GIF yapmanı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ı (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 yapmayı unutmayın. GIF yapıldıktan sonra, Divi’deki diğer görüntüler gibi kullanabilirsiniz.
Snagit kullanarak bir GIF yapmayı öğrenmek istiyorsanız, bir arka plan görüntüsünün yüzerken animasyonlu bir GIF ile nasıl değiştirileceğine dair yazımıza bakın. Divi’de GIF’e 3D efekti eklemek şimdi Divi’ye GIF ekleme zamanı. Başlamak için, iki sütun içeren yeni bir normal bölüm ekleyin. Bir modül eklemeden önce, sütuna GIF’imizi içerecek bir perspektif özelliği eklememiz gerekir. Bunu yapmak için satır ayarlarını açın ve aşağıdaki CSS parçalarını Sütun 1’in ana öğesine ekleyin: Perspektif: 1000px;
Bu perspektif özelliği, sütundaki öğelere perspektif eklemek için gereklidir. Bir öğe, Divi Dönüşüm seçeneğini kullanırken 3D efekti alabilmemiz için perspektif gerektirir. Daha iyi bir anlayış için, 3D fotoğraf duvarları tasarlamak için Dönüşüm seçeneğiyle perspektifi nasıl kullanacağına dair yazımıza bakın. Şimdi görüntü modülünü sütun 1’e ekleyin.
GIF’i görüntü modülüne yükleyin. Bu tasarım için, GIF yaklaşık 600 piksel 700 piksel olmalıdır. Ardından GIF’i 3D boşlukta dağıtmak, döndürmek ve eğmek için Dönüşüm seçeneğini kullanın. Dönüşüm ekseni y ekseni y: 8deg dönüşüm ekseni x: 28deg Eğim y ekseninin dönüşümü: x ekseninin 10 derece dönüşümü: -8deg
Dönüşüm Ölçeği (Tablet):% 80 Şimdi sonuçlara bakalım. Divi’de HTML5 Videoya 3D efekti ekleyin 3D efekt eklemeden önce, önce HTML5 videomuzu yapmamız gerekir. Aşağıda nasıl yapılacağına dair adımları tartışacağız. Ancak daha eksiksiz bir açıklama istiyorsanız, daha küçük dosya boyutuna sahip animasyonlu bir GIF oluşturmak için HTML5 videosunu nasıl kullanacağınız hakkındaki yayınımıza bakın. HTML5 video kodunu yapmak HTML5 video öğesi aşağıdaki temel yapıya sahiptir. Bu kodun ne yaptığını görmek için HTML hakkında çok şey bilmenize gerek yok. öğesinin içinde, görüntülemek istediğiniz video dosyasına/URL’yi depolayan iki öğe ‘yı var. 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. Sipariş de önemlidir. WebM videoları, daha kaliteli bir video biçimi olduğu ancak tarayıcı tarafından desteklenmediği için koddaki MP4 videonunun üzerine yerleştirilmiştir. Tarayıcı WebM videolarını desteklerse, görüntülenir. Ancak tarayıcı WebM videosunu desteklemiyorsa, aşağıdaki MP4 video biçimini kullanacaktır. Her iki video formatını da dahil etmeye gerek yok, ancak bu en iyi uygulamadır. Ve yalnızca bir tane kullanacaksanız, daha fazla desteklendiği için MP4 biçimini kullanın.
Aslında, kendi videonuzu görüntülemek için Divi video modülünü her kullandığınızda, Divi videoları görüntülemek için aynı HTML5 video öğesini yapar. Bu nedenle video modülü, MP4 ve WebM video dosyaları eklemenize olanak tanır. Kodu kendi videonuz için kullanmak için, yalnızca SRC özniteliğinden sonra braketlere bir video URL eklemeniz gerekir. Video dosyalarını WordPress sitenize yüklerseniz, Medya Kütüphanesinden URL’ler alabilirsiniz.
Ardından, SRC özniteliğinden sonra braketlere video URL’sini yapıştırın.
İşiniz bittiğinde böyle görünmeli. >
>
Ardından, videonun görünümünü ve işlevselliğini kontrol etmek için dört özellik ekleyeceğiz. Bu tür kontrol, Divi video modülünü kullanmak yerine html5 videolarını manuel olarak girmenin ana nedenidir. Bu özellikler arasında otomatik oyun (video otomatik olarak başlar), döngü (böylece tekrarlanan video), sessiz (böylece video ses çalmaz) ve PlaySinLine (böylece video oynatma alanında çalınır) bulunur. Bu özniteliği videoya uygulamak için, ‘un başlangıcındaki parantezlere her özniteliği ekleyin. Şimdi kod böyle görünecek.
> >Not: Genellikle, HTML5 videoları için Controls özniteliklerini uygulayacaksınız, ancak bu durumda videonun GIF gibi çalışması için onu görmezden geleceğiz. Şimdi kodu sabitlemeye hazırsınız. HTML5 Videoları HTML5 videolarını sayfanıza sabitlemek için Pints HTML5 Videoları Kod Modülünü kullanabiliriz. GIF görüntü modülünü kod modülümüzle değiştirmeden önce, GIF örneğimizi kaydedebilmemiz için devam edelim ve tüm parçaları çoğaltalım. Yinelenen bölümde, görüntü modülünü silin ve metin modülünü ekleyin. Ardından HTML5 video gömme kodunu kod giriş kutusuna koyun.
Ardından dönüşüm kuvvetini görüntü modülünden kopyalayın ve dönüşüm kuvvetini kod modülüne yapıştırın. Veya dönüşüm kuvvetini aşağıdaki gibi güncelleyebilirsiniz: Dönüşüm ekseni y Ekseni Y: 8 Dönüşüm Dönüşümü Eksen X: 28 DEG Dönüşümü Y Ekseni Eğim: X -ekseni x Sarkı: -8deg Dönüşüm Ölçeği (Tablet):% 80 Dönüşümü:% 80
GIF yapmak için kullandığım videoyu kullandığım için tasarım çok benzer görünecek. Ancak, video boyutu GIF boyutundan önemli ölçüde daha küçüktür. Sonuç bu.
Tasarım düzeni tasarımını tamamlayın, şimdi 3D GIF (veya HTML5 videomuz) var. Düzen tasarımının bir kısmımızı tamamlayabiliriz. Bu tasarım için, Sütun 1’de HTML5 Video ile parçaları kullanacağım. Bölümü ayarlayın ve aşağıdaki bölüm ayarlarını açın ve aşağıdakileri güncelleyin. Dolgu:% 15 yukarıda,% 15 aşağıda
Ardından aşağıdaki satır ayarlarını açın ve güncelleme: Arka plan gradyanının sol rengi: #BA7FE8 Sağ Renk Arka Plan Yasası: #4B84FF Yüksek Maksimum: 300px (Masaüstü), Hayır (Tablet ve Cep Telefonu) Dolgu: 0px üst, 0px aşağıda 0Px
Daha sonra, benzersiz tasarım öğeleri için yarı saydamlık bir gölge kutu hattı sağlayabiliriz. Gölge: Yatay ekrana bakın Gölge Kutusu: 0px Dikey Konum Gölge Kutusu: 0px Meydan Dağıtım Kutusu Gücü: 40px Renk Renk Gölge: RGBA (255,255,255,0.89) Kod modülünü konumlandırma Şimdi dönüşüm özelliklerini ayarlayarak video ile hafif bir kod modülü yükseltelim Dönüşüm Özellikleri aşağıdaki gibi: Dönüşüm Y eksenini çevirin:% -20 (masaüstü),% -7 (telefon)
Tasarımı tamamlamak için davet modülünü ekleyin, Davet Modülünü Sütun 2’ye hareket ettirmek için ekleyelim. Burası, düğmeli üstün ürünün bir açıklamasını eklemek için iyi bir yer olacaktır.
