Divi Eklentisi Vurgusu: Divi Sensei Önce Sonra Kaydırıcı

Öncesi ve Sonrası kaydırıcıları, ziyaretçilerin iki resmi karşılaştırmasına izin vermenin harika bir yoludur. Adından da anlaşılacağı gibi, kilo verme, rötuşlanmış bir görüntü, dekore edilmiş bir oda, boyanmış bir araba gibi bir şey değiştirilmeden önceki ve sonraki görüntüler olabilir. Elbette eskisinden çok daha fazlası için faydalıdırlar. ve fotoğraflardan sonra. Grafikleri, ürünleri, tatil yerlerini ve daha fazlasını karşılaştırmak için kullanılabilirler.

Bu makalede, Divi Builder için bir öncesi ve sonrası kaydırıcı modülü olan Divi Sensei Before and After Slider'a bir göz atacağız, neler yapabileceğini göreceğiz ve Divi'nizde bu üçüncü taraf eklentiye ihtiyacınız olup olmadığına karar vermenize yardımcı olacağız. araç kutusu.

Divi Sensei Öncesi ve Sonrası Slider Modülü

Divi Sensei Before and After eklentisini normal şekilde yükleyin ve kurun. Üç, geçilecek ayar yok. Eklentiyi yükleyip etkinleştirdikten sonra, Divi Builder'a Sensei Before and After Slider adlı yeni bir modülün eklendiğini göreceksiniz.

Modül, sol tarafta bir önceki görüntü ve sağ tarafta bir sonraki görüntü görüntüler. Merkezde, kullanıcıların bir taraftan diğerine tutup kaydırabilecekleri bir kaydırma çubuğu görüntüler. Görüntülerin üzerine gelindiğinde etiketlerin öncesi ve sonrası görünür ve bir bindirme eklenir. Bu öğelerin her biri üzerinde tasarım kontrolünüz var.

Kaydırıcının özelliklerine ve seçeneklerine bir göz atalım. Bu örnekler için Unsplash.com'dan görüntüler kullanıyorum.

İçerik Sekmesi

İçerik sekmesi, resimden önce, resimden sonra ve etiketler eklemenizi sağlar. Bu örnekte, öncesi ve sonrası görüntüsünü oluşturmak için aynı görüntünün iki farklı sürümünü ekledim. Bu, rötuşlanmış bir fotoğrafın sonuçlarını göstermek için kullanışlıdır. Seçenekler ayrıca standart bağlantı, arka plan ve yönetici etiketi ayarlarını içerir.

Ayrıca, öncesi ve sonrası etiketlerinin metnini değiştirebileceğiniz alanlar sağlar. Etiketleri ortaya çıkarmak için resimlerin üzerinde geziniyorum. Varsayılan olarak yalnızca fareyle üzerine gelindiğinde görüntülenirler, ancak bunu değiştirebilirsiniz.

Tasarım Sekmesi

Tasarım sekmesi, kaydırıcı, etiketler ve kaplama için ayarları içerir. Ayrıca boyutlandırma, aralık, kenarlık, kutu gölgesi, filtreler, dönüştürme ve animasyon için standart ayarları içerir.

kaydırıcı

Kaydırıcı ayarları, yatay ve dikey arasında kaydırıcı yönünü seçmenize, kaydırıcının görüntülerde nerede başladığını belirlemek için başlangıç ​​ofsetini ayarlamanıza ve kaydırıcının, tutamaç, tutamaç arka planı ve tutamaç simgesinin renklerini değiştirmenize olanak tanır. Yukarıdaki örnekte bu ayarların her birini ayarladım.

Etiketler

Etiketler için, bunların her zaman görüntülenmesini veya yalnızca üzerine gelindiğinde görüntülenmesini ve arka planları ve yazı tiplerini ayarlamasını sağlayabilirsiniz. Arka plan renkleri, düz renkleri ve opaklık ayarlarını içerir. Arka planları ayrı ayrı ayarlayabilirsiniz, ancak metin renklerini ayrı ayrı ayarlamanıza izin vermez. Ayrıca yazı tiplerini seçebilir, boyutlarını, stilini, hizalamasını, satır yüksekliğini değiştirebilir, gölge ekleyebilir, vb. Satır yüksekliği arka planın boyutunu ayarlar.

Yukarıdaki örnekte, arka plan ve yazı tipi renklerini belirledim, yazı tiplerinin boyutunu ve satır yüksekliğini değiştirdim. Ayrıca bunları her zaman görüntülenecek şekilde ayarladım, böylece kullanıcının görmek için görüntülerin üzerine gelmesi gerekmeden görünürler.

Kaplama

Yer paylaşımı varsayılan olarak etkindir. Devre dışı bırakabilir, rengi ayarlayabilir ve opaklığı ayarlayabilirsiniz. Varsayılan renk, %50 opaklıkla siyahtır.

Bu örnekte maviyi seçtim ve opaklığı %50'de bıraktım. Siz gezinirken görüntünün görünmesine izin vermek en iyi sonucu veriyor gibi görünüyor. Açık veya koyu renk kullanıp kullanmadığınız ve ayarladığınız opaklık miktarı, görüntüdeki renklere ve kaplamayı nasıl kullanmak istediğinize göre belirlenir.

Bu örnek için siyah beyaz bir renk şeması kullandım. Bindirme ve etiket metni beyazdır ve kaydırıcı öğeleri siyahtır. Onları koyulaştırmak için etiketin arka planlarının opaklığını azalttım. Onları varsayılan boyutlarında bıraktım.

Divi Sensei Öncesi ve Sonrası Slider Örnekleri

Kaydırıcının nasıl kullanılabileceğine ve Divi düzenlerinde nasıl göründüklerine dair birkaç örneğe bakalım. Unsplash'tan ve Divi'de yerleşik ücretsiz Divi düzenlerinde bulunan görüntüleri kullanıyorum. Gittikçe kullandığım Divi düzenlerini belirleyeceğim.

Grafik Karşılaştırması

Bunun için Divi Video Game düzen paketindeki tasarım öğelerini kullandım. Bindirmeyi devre dışı bıraktım, kaydırıcı öğelerini yeşil olarak değiştirdim ve etiketlerin her zaman görüntülenmesini sağladım. Etiketlerin arka planı düz mavidir. Yazı tipi boyutunu büyüttüm, rengini değiştirdim, Rubik yazı tipi ailesini kullandım, yazı tipi ağırlığı ortamını yaptım ve hepsini büyük harf yaptım. Bu oyun sistemlerine sahipseniz veya oynadıysanız ve bu uydurma grafik karşılaştırmasının neden olamayacağını biliyorsunuz.

Düzen içinde böyle görünüyor. İki farklı oyun makinesinin grafiklerinin bu maketi gibi karşılaştırmalar yapmak için mükemmel.

Portföy Öncesi ve Sonrası Hizmetler

Bu örnek, yenileme yapılmadan önce ve sonra bir oda fikrini taklit eder. İki resim farklı boyutlarda olduğunda, daha büyük resim için boyutu kullanacak ve daha küçük resim bir boşluk gösterecektir. Yüksekliklerini veya genişliklerini eşit olarak yerleştirecek ve gerisini boş alan olarak dolduracaktır. Bu örnekte, sağdaki görüntü soldaki görüntüden daha kısadır. Aynı boyutta görüntülere sahip olmak daha iyi sonuç verse de, aynı boyuta yakın görüntülerde daha iyi sonuç verir.

Ev Geliştirme düzen paketinden renkler ve yazı tipleri ekledim. Düzenin bir bölümünde nasıl göründüğü aşağıda açıklanmıştır.

İşte bindirme ile nasıl göründüğü. Önceki görüntünün daha fazlasını göstermek için kaydırıcıyı bir tarafa taşıdım.

Referans olarak, sonraki görüntünün daha fazlasını göstermek için tutamağın taşındığı görüntü burada.

Ürün Karşılaştırma

Bu örnek için, Tea Shop düzenindeki üç çay görüntüsünü 3 DS B&A kaydırıcısıyla değiştiriyorum. Düğmeler ve kaydırıcı denetimleri için düzendeki renkleri kullanıyorum. Ortadaki kaydırıcı, yalnızca farklı olması için dikey olarak ayarlanmıştır. Yer paylaşımı, azaltılmış opaklığa sahip düzenden bir renk kullanır.

İşte düzen içinde nasıl göründükleri. Bu, birden çok ürünün, birden çok konumun, birden çok rengin, seçenekli ve seçeneksiz gösterilecek birden çok seçeneğe sahip ürünler için vb. görsel ayrıntılarını karşılaştırmak için mükemmeldir.

Konumları Karşılaştırma

Bu örnekte, iki konumu karşılaştırmak için kaydırıcıyı kullanıyorum. Benzer olmaları gerekmiyor, sadece bir nedenden dolayı karşılaştırılacak bir şey. Etiketlerin yazı tiplerinin yanı sıra kaydırıcı ve etiketler için düzenden renkler ekledim. Ayrıca, diğer resimlerden öne çıkmasına yardımcı olmak için bir kutu gölgesi ekledim.

Düzendeki renkleri kullanarak Siteseeing düzen paketinde nasıl göründüğü aşağıda açıklanmıştır. Bu, iki görüntünün aynı şeyin, hatta benzer şeylerin öncesi ve sonrası olması gerekmediğine dair güzel bir örnek. Bu, alıcıların aralarında seçim yapmasına yardımcı olmak (veya seçimi daha zor hale getirmek) için düğün mekanlarını, tatil yerlerini vb. göstermenin iyi bir yoludur, ancak bunu bir hedef olarak önermiyorum.

Satın almak

Divi Sensei Before and After Slider'ı Divi Marketplace'ten satın alabilirsiniz. Sınırsız web sitesi kullanımı ve 1 yıllık destek ve güncelleme için maliyet 5 ABD dolarıdır. Bu fiyata 30 günlük para iade garantisi dahildir.

Biten Düşünceler

Divi Sensei Öncesi ve Sonrası Kaydırıcısı basit bir modüldür. Örneğin, kaydırıcının genişlik kontrolleri yoktur ve etiketler kenarlıklar, kutu gölgeleri, degradeler vb. içermez, ancak yaptığı ayarlar, eklediğim her düzenin stiline uymayı kolaylaştırdı. Fiyat ve yapabilecekleri açısından ayar seviyesi mantıklı ve istediğim tasarımları kolaylıkla elde edebildim.

Tüm kontroller sezgiseldi ve talimatlara ihtiyaç duymayı hiç düşünmedim. SEO'yu geliştirmeye yardımcı olması için resimler için farklı alt etiketler bile kullanabilirsiniz. Divi web sitelerinizle kullanmak için önce ve sonra kaydırıcıyla ilgileniyorsanız, Divi Sensei Öncesi ve Sonrası Kaydırıcısı dikkate değer.

Senden duymak istiyoruz. Divi Sensei Before and After Slider'ı denediniz mi? Aşağıdaki yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

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