Divi Eklentisi Vurgusu: Divi için Panorama

Kaydırılabilir panoramalar, küçük bir alanda büyük görüntüleri göstermek için mükemmeldir. Boyutlarını ekrana sığdırmak için küçültmek ve bu onları görüntülenemez hale getirmek yerine, görüntüyü kaydırılabilir bir panorama içine yerleştirmek, daha büyük görüntüyü gerçek boyutunda görüntülemenize olanak tanır. Ziyaretçi sürükleyerek tüm resmi görebilir. Divi'nin yerel bir panorama özelliği yoktur, ancak Divi için Panorama adlı üçüncü taraf bir eklentiyle kolayca eklenebilir.

Divi için Panorama, Divi Builder'a dikey ve yatay panoramalar oluşturmayı kolaylaştıran yeni bir modül ekler. Panoramalar durabilir veya tekrarlanabilir. Bir bindirme ekleyin, yüksekliği ayarlayın, animasyon stilini seçin ve panoramaları herhangi bir Divi düzenine yerleştirin. Duyarlı ve dokunmatik özellikli.

Bu genel bakış için Divi sürüm 1.0 için Panorama'yı Divi sürüm 3.2.2 ve WordPress sürüm 4.9.5 ile kullanıyorum. Görüntüler Unsplash.com'dan alınmıştır.

Panorama Modülü

Divi Builder'a Panorama adlı yeni bir modül eklendi. Koyu mavidir ve yayıncının logosunu içerir, bu nedenle güzel bir şekilde göze çarpar.

İçerik sekmesi, görüntüyü, alternatif metni, yüksekliği, içeriğin kaydırılabileceği yönü (yatay veya dikey arasından seçim yapın), görüntünün tekrarlanıp tekrarlanmayacağını, bir bindirmeyi göstermek için, animasyon süresini (zaman miktarı) seçmek için ayarları içerir. kaydırmayı durdurduktan sonra görüntü hareket etmeye devam eder), hareket hızı türü (animasyonla çalışır) ve arka plan.

Tasarım sekmesi kaplama rengi, boşluk, kenarlık, kutu gölgesi ve animasyonu içerir. Gelişmiş sekmesi, standart CSS alanlarını içerir. Bindirme rengini seçebilmenizi beğendim. Simge rengi için bir ayar görmek istiyorum.

Divi Örnekleri için Panorama

Arka plan ve özellikler için varsayılan ayarları kullanan bir örnek. Modülü, tek sütunlu bir satır kullanarak Emlak yerleşim paketine yerleştirdim. Yüksekliği görüntüye (870 piksel) uyacak şekilde ayarladım ve içerik yönünü yatay olarak bıraktım.

Tekrar etmeyecek şekilde ayarlanmıştır, bu yüzden görüntünün sonuna geldiğinde durur.

Bu, sonsuz bir kaydırma oluşturarak tekrar eder. Bu, özellikle 360 ​​derecelik görüntüler için iyidir.

Varsayılan olarak kendini kaydırılabilir olarak tanımlamaz. Fare imleci bir işaretçiden dört yönü de işaret eden oklara dönüşür, ancak bunu bilmenin tek yolu fareyle üzerine gelmektir. Her yöne işaret eden imleç, her yöne kaydırmayı gösterir, ancak yalnızca yatay veya dikey olarak kayar – ikisini birden değil. Bu, bir kaplama ekleyerek çözülebilir.

Kahverengi bir kaplama ekledim. Kaplamanın kendisi, görüntünün kaydırılabileceğini gösteren bir el ile bir simge ekler. Yatay olarak kaydırılabileceğini göstermek için bir ok kullanır. Opaklık seviyesi varsayılan olarak %20'ye ayarlanmıştır. Varsayılan ayarda bıraktım.

Yer paylaşımı ve simge, üzerine gelindiğinde kaybolur ve imleciniz 4 yönlü ok olur.

İşte kaplamanın ne zaman yardımcı olduğuna dair bir örnek. Bunun için iki sütunlu bir satırdaki bir görüntünün yanına yerleştirmek istedim. Resmin yüksekliğine uyması için yüksekliği 287 piksele ayarladım. Sorun şu ki, ikisi de normal görüntülere benziyor, bu yüzden bir bindirme eklemem gerekecek.

Mavi bir kaplama ekledim. Simge göze çarpıyor ve diğerleri olmadığında bunun kaydırılabilir olduğunu söyleyebilirsiniz.

Bu örneklerin her ikisi de dikey içerik yönünü kullanır. Yüksekliği 500 piksele ayarladım ve bindirmeleri ekledim. Soldakilerden biri, %40 şeffaflığa sahip siyah bir kaplamaya ve kutu gölgeli yuvarlak bir kenarlığa sahiptir. Soldaki, varsayılan saydamlığa sahip kırmızı bir kaplamaya ve kutu gölgesine sahiptir.

Bu, animasyon ve yumuşatma kullanır. Animasyon 1000'e (1 saniye) ayarlanmıştır ve hareket hızı Hareket Hızı'dır.

Hareket hızı, kaydırmanın nasıl çalıştığını belirler.

• Siz kaydırdıkça doğrusal kaydırma yapar ve ardından animasyon süresi bitene kadar kaydırmaya devam eder. En yumuşak kaydırmadır.
• Giden Kolaylık, siz farenizi kaydırmak için hareket ettirene kadar bekler ve ardından animasyon süresi bitene kadar kaydırmaya devam eder.
• Ease Out anında kaydırır ve animasyon süresi tamamlanana kadar devam eder. Linear'a benzer şekilde çalışır.
• Ease In, fareniz bitene kadar bekler ve ardından animasyon süresi tamamlanana kadar kaydırmaya devam eder.

İşte bir düzen içinde nasıl göründüğüne dair başka bir örnek. Bu örnekte, kahve dükkanının 360 derecelik bir fotoğrafını göstermek için video modülünü değiştirerek Kahve Dükkanı yerleşim paketine yatay bir panorama yerleştirdim. %20 şeffaflığa sahip siyah bir kaplama kullanır. Olduğu gibi harika görünüyor, ancak daha büyük bir simgeyle daha da iyi görüneceğini düşünüyorum.

Divi için Panorama'yı Visual Builder ile Kullanma

Panoramik görüntüyü Visual Builder'da göstermez, ancak tüm ayarlamaları yapabilirsiniz. Visual Builder'dayken efektleri görmezsiniz.

Divi için Panoramayı Ekstra ile Kullanma

Ekstra ile iyi çalıştı. Divi veya Extra kullanmamdan bağımsız olarak hiçbir fark yoktu, bu yüzden herhangi bir biçimlendirmeyi değiştirmek zorunda kalmadım.

İşte bir kenar çubuğu kullanan kahve dükkanı örneği. Görüntü elbette o kadar geniş değil, ancak panoramayı kaydırabildiğiniz zaman bu o kadar önemli değil. Bu, panoramanın avantajlarından biridir. Normal bir görüntünün boyutu küçültülür, bu birçok görüntü için iyidir, ancak daha büyük görüntüyü göstermek istediğinizde bu harika bir seçimdir.

Lisans

Aralarından seçim yapabileceğiniz iki lisans vardır:

• Tek site – 7,99 $
• Sınırsız site – 21,99$

Satın alma bilgilerini geliştiricinin web sitesinde görebilirsiniz.

Biten Düşünceler

Divi için Panorama ilginç bir eklentidir. Küçük bir alanda büyük görüntüleri gösterme fikrini seviyorum. Panorama için Divi'nin en sevdiğim kullanımı 360 derecelik fotoğraflar içindir. Bu bir konum, odaları, etkinlikleri vb. görüntülemek için bir ev olabilir.

Olduğu gibi harika çalışıyor, ancak genişletilebileceği birkaç yol görebiliyorum. Örneğin, farklı simgeler seçme seçeneği ve bunları hem renk hem de boyut olarak biçimlendirme seçeneği görmek istiyorum.

Eklentiyi kullanımı kolay buldum. Ayarların çoğu ya etiketlidir ya da açıklayıcıdır. Divi düzenlerinize panorama eklemekle ilgileniyorsanız, Panorama for Divi bir göz atmaya değer.

Senden duymak istiyoruz. Panorama için Divi'yi denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Natykach Nataliia / Shutterstock.com aracılığıyla Öne Çıkan Görsel