Divi Eklentisi Vurgusu – Tilt Blurb Divi Modülü

Blur'lar Divi düzenlerinde popülerdir. Ürün ve hizmetleri sergilemek için harika olan metin, resimler, simgeler ve daha fazlasını görüntülerler. Ya daha fazla öne çıkmalarını ve bazı ilginç fareyle üzerine gelme animasyonları sağlamalarını isteseydiniz? Ortak animasyonlar CSS aracılığıyla yapılabilir, peki ya farklı bir şey istiyorsanız? Tilt Blurb Divi Module adlı bir eklenti aradığınız şey olabilir.

Tilt Blurb Modülü nedir?

Tilt Blurb Module, Divi Builder'a (hem Divi hem de Extra için) yeni bir tanıtıcı modül ekleyen ve ilginç eğme efektleri ekleyen ve 3D bir görünüm yaratan Hadworm'un üçüncü taraf eklentisidir. Bu eklenti vurgusunda, modüle bir göz atacağız ve neler yapabileceğini göreceğiz. Birkaç gif gösterdim ama çoğu, gif'in dosya boyutları nedeniyle resim olacak. Örneklerin resimleri Unsplash.com ve WordPress.org'dan alınmıştır.

Tilt Blurb Divi Modülünü Takma

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Pano menüsündeki Eklenti bağlantısında, Tile Blurb License adlı yeni bir öğe bulacaksınız. Bunu tıklayın, lisans anahtarınızı girin ve değişiklikleri kaydedin. Bu, güncellemeleri almanızı sağlayacaktır.

Divi Builder'a Tilt Blurb adlı yeni bir modül eklendi. Divi Builder'da mor renktedir, bu yüzden gözden kaçırmak zordur. Geliştiricilerin modülleri için farklı renkler kullanmasını seviyorum, böylece standart modüllerden sıyrılıyorlar (değeri için).

Modül, standart sekmeleri ve bir yenisini içerir:

• İçerik – metin, bağlantı, resim ve simge, arka plan, yönetici etiketi
• Eğim Ayarları – eğim ayarları, eğim arka planı, eğim katmanları
• Tasarım – resim ve simge, metin, başlık metni, gövde metni, kenarlık, boyutlandırma, boşluk
• Gelişmiş – CSS kimliği ve sınıfları, özel CSS, animasyon, görünürlük

Eğim Ayarları

Bu örnekler için bir arka plan ekledim ve ardından 3B efektler oluşturmak için ön plan olarak daha küçük bir görüntü yerleştirdim. Ve sonra kahve yaptı. Bir sürü kahve.

Varsayılan Ayarlarla Örnek

İşte 3D eğimin ince ayar yapmadan önce nasıl göründüğüne dair bir örnek. Bir başlık, metin, arka plan ve simge ekledim. Eğim, faremi takip ediyor ve metni ve simgeyi görüntüden ayırarak ona 3B bir görünüm kazandırıyor. Benim için paralaks etkisi arka plandan kurtuldu, bu yüzden kullanmadım.

Resimli Boyut

Bu, gizli bir görüntü kullanarak tanıtıcıyı boyutlandırır ve içeriği ortalar.

Kayan İçerikli 2 Resimli Tilt Blurb Size

Bu, biri ön plan için diğeri arka plan için olmak üzere iki görüntü içerir. Ön plan görüntüsü ve metin, kayan içerik özelliği kullanılarak 3B'dir.

Yakınlaştırma gibi çalışan kayan nokta miktarını ayarlayarak ön plan içeriğini okuyucuya yaklaştırabilirsiniz. Bu görüntü, maksimuma çıkarılan şamandıra miktarı için 200 kullanır.

Eğim Miktarı

Eğim miktarı kaydırıcısı, görüntünün ne kadar eğileceğini kontrol etmenizi sağlar. Varsayılan ayar 20'dir. Bu, 100 kullanır.

Eğim Perspektifi

Eğimli Perspektif, perspektifi derinleştirir. Sayı ne kadar düşük olursa, perspektif o kadar derin olur. Varsayılan 1000'dir. Bu örnek 200'dür.

Eğim Ölçeği

Eğim Ölçeği bir yakınlaştırma düzeyidir. Varsayılan 1.1'dir, yani üzerine gelindiğinde görüntü 1.1 ile çarpılır. Bu örnek 2'dir. 0'a gider ancak 0 seviyesi, bu görüntü için çalışmayan sürekli bir ileri geri yakınlaştırma oluşturdu. İstediğiniz şeyi yapması için biraz deneme yapmanız gerekebilir.

Eğim Hızı

Eğim Hızı, siz gezinirken görüntünün hareket ettiği hızı kontrol eder. Sayı ne kadar düşük olursa o kadar hızlı hareket eder. Varsayılan 100'dür. Bu 5000'dir. Yavaş etkisine kısmen katılıyorum.

Eğim Ters

Tilt Reverse, eğimin yönünü değiştirir. Normalde eğim fareden uzaklaşır. Ters, görüntüyü fareye doğru yatırır.

Eğim Parlaması

Tilt Glare, fareyi takip eden bir parlama efekti ekler. Parlama miktarı ayarlanabilir. Yukarıdaki resim, varsayılan ayar olan .8'i kullanır. Bu, aydınlatma efektleri oluşturmak için harikadır.

Sınır Yarıçapı

Sınır Yarıçapı, sınırın şeklini değiştirir. Varsayılan değer 40'tır. Bu, maksimum miktar olan 100'e ayarlanmıştır.

Eğim Arka Planı

Eğimli Arka Plan, bir arka plan rengi ve kenarlık efektleri ayarlamanıza olanak tanır.

Eğim Arka Planı

Eğimli Arka Plan Renginin bir yan etkisi, görüntünün çevresinde hoş bir parıltı oluşturmasıdır.

Eğim Arka Plan rengini, kenarlık genişliğini, arka plan kenarlık stilini, kenarlık genişliğini ve kenarlık ve kutu gölge rengini ayarlayın.

Eğim Arka Plan Mesafesi

Eğim Arka Plan Mesafesi, gölgenin mesafesini ayarlar. Varsayılan olarak -50'ye ayarlanmıştır. Bu örnek -25 kullanır.

Bu örnek, arka plan üzerinde bir kaplama oluşturan 0 eğimli arka plan mesafesi ve 0,3 opaklık kullanır.

Eğim Arka Plan Boyutu/Ölçeği

Eğim Arka Planı Boyutu/Ölçeği, eğimli arka planın mesafesini değiştirir. Varsayılan 1.04'tür. Bu 1.2.

Eğim Katmanları

Eğim Katmanları, aynı görüntüyü birden çok katman olarak uygulayarak sağlam bir 3D efekti oluşturur. Bir görüntü veya arka plan rengi kullanabilir ve katman derinliğini ayarlayabilirsiniz. Yukarıdaki resmi 50 katman derinliği ile uyguladım.

Uyguladığım görüntü burada bordür olarak görülüyor. Görmeyi kolaylaştırmak için eğim miktarını ayarladım.

Beklendiği gibi, görüntünün alt kısmı farklı görünüyor. Bu, kenarlığa biraz doku eklemenin harika bir yoludur. Daha küçük bir katman derinliği, kenarlığı daha ince yapacaktır.

Bu, 10'luk bir katman derinliği kullanır.

Bu örnek, hem eğimli arka plan hem de eğimli katmanları kullanır.

İşte kristalle kaplanmış gibi görünen bir 3D WordPress logosu. Logoyu Image & Icon görüntü alanına yükledim, eğim miktarını 100 olarak ayarladım, varsayılan eğim parlamasını kullandım, logoyu Katmanları Eğim altında katman görüntüsüne ekledim, katman derinliğini 50 olarak ayarladım ve katman rengini beyaz olarak ayarladım ve neredeyse tamamen şeffaf.

İşte katman rengi olmayan logo. Yanları görmek daha zor.

Lisans, Destek ve Belgeler

Eklenti, siz ve müşterileriniz için sınırsız web sitesinde kullanılabilir. 6 aylık destek içerir. Belgeler geliştiricinin web sitesinde sağlanır. Web sitesinde gösterilen bazı örneklerin nasıl oluşturulacağına dair talimatlar içerir. Logoların nasıl yapıldığı gibi daha fazla örnek görmek isterim.

Son düşünceler

Tilt Blurb Module, resimlere, simgelere ve metne güzel bir 3D görünüm oluşturan birçok ilginç eğme efekti sağlar. CTA'lar, 3B kitap kapakları ve ürün resimleri oluşturmanın harika bir yoludur. Tilt Blurb Module hem yenilikçi hem de sezgiseldir. Tanıtım yazılarınıza bazı güzel eğme efektleri eklemek istiyorsanız, Eğim Bulanıklığı Modülü bir göz atmaya değer.

Senden duymak istiyoruz. Tilt Blurb Divi Modülünü denediniz mi? Aşağıdaki yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Hobbit / Shutterstock.com üzerinden Öne Çıkan Görsel