Divi eklentisi spot ışığı – yoğun görüntü
Divi pazarında Divi Marketplace’de bulunan yoğun resimleri keşfedin! Bu, incelememizi geçtiğimiz ve kalite standartlarımızı karşılamayı kanıtladığımız anlamına gelir. Mevcut tüm ürünlerini görmek için pazardaki SuperFly’i ziyaret edebilirsiniz. Divi Marketplace’ten satın alınan ürünler, sınırsız web siteleri ve 30 gün öncesi garantili (Divi gibi) ile birlikte gelir. Divi Pazarı’ndan Satın Alın
Intense Image, Divi ve Extra için Divi Builder’a yeni bir modül ekleyen Superfly In Superfly tarafından üçüncü taraf premium bir eklentidir. Yeni modül, üç divi modülünün (görüntü, metin ve düğme modülleri) özelliklerini birleştirir ve daha sonra görüntüye bindirme ve vurma efekti eklemek için yeni özellikler ekler. Özellikler arasında 22 yüzen görüntü geçişi, düğmeler, opaklık ayarları, karışık karışım modları, metin bağlantıları ve daha fazlası bulunur.
Yoğun görüntü, okuyucunuza geri bildirim sağlayan ve oyunculuk davetinize (CTA) dikkat çeken mikro etkileşimler eklemenin iyi bir yoludur. Animasyon, görüntüleri genişletmeyi veya en aza indirmeyi, görüntüleri germe, görüntüleri sıkıştırmayı, kaplamayı ekleme, kaydırma, metni ifade etme vb. Bu eklentinin spot ışığında eklentinin neler yapabileceğini göreceğiz. Görüntü unssplash.com’dan alınmıştır. Kurulum ve Ayarlar
Bu örnekte, iki bindirme başlığı ile kesilen görüntünün boyutunu görebilirsiniz. Soldaki resim, medya boyutları için 400 x 516 kesim ayarlarını ve animasyon için Auckland ayarlarını kullanıyor. Görüntü biraz azalır ve bir mesajla bir streç gösterir. Yazı tipinin rengi ve boyutu gerekirse ayarlanabilir. Sağdaki resim büyütülür ve esnemede bir mesaj içerir. Bu daha net bir fark. Hover Kudüs tarzını kullanır. Ortadaki resim Hover Douala stilini kullanıyor. Bu resimde çerçevenin görüntünün altına aktarıldığını ve şimdi mesajı görüntülediğini görebilirsiniz. Ortadaki resim Madison kaplama stilini kullanıyor. Burada, mesajları içeren daire içine alınmış alana odaklanmayı sürdürürken opaklığı azaltan bir resme nasıl yerleştirildiğini görebilirsiniz. Karışım modu Mix Blend modu, CSS özniteliklerini görüntülere uygulamanın kolay bir yoludur. Bu, modülün rengini arka planıyla birleştirir. Bu, bazı vahşi efektler yapabilir ve bazı ayarlar belirli renklerle daha iyi çalışır, bu nedenle bazı deneyler gerektirir. Bazı özellikler tüm tarayıcılarla çalışmayabilir, bu nedenle bu özelliği dikkatlice kullanmalısınız. Sert ışık adı verilen karışık karışım modu kullanarak ortadaki resim. Bu parlaklık kullanır. Ayrıca ortanın altına bir düğme ekledim ve özel stili ayarladım. Karanlık Opaklık, bir görüntü ne kadar şeffaftır. Resim ne kadar bulanıklaşırsa, o kadar az şeffaflığa sahiptir. Opaklık ayrıca seçtiğiniz animasyon stili ve karışık karışım modundan da etkilenir. Ne tür efektleri yapabileceğinizi görmek için çeşitli kombinasyonlarda kullanabilirsiniz. Normal görüntülere farklı opaklık seviyeleri uygulayabilirsiniz ve görüntüler. Bu opaklıksız normal bir görüntüdür. Medya boyutu ayarları için orijinal boyutu tam olarak kullanıyorum. Hakkında aşağıdaki resim. Opaklık derecelendirmelerini 0.6’ya ayarladım. Bu, Hover Cali stilini kullanır. Bu, kesme ve opaklık olmadan 1024 × 1024 büyük bir görüntü kullanır. Şekil 0.4. Her iki kaplama başlığı da HTML etiketleri kullanır. Güçlü, vurgu ve dinlenme için etiketler kullanıyorum. Hover Portland stilini kullanır. Görüntünün gelişim sırasında tamamen ortaya çıkması için 1. Hover opaklığını ayarladım. Özel gradyanlar ekleyin Gelişmiş tasarım ayarlarında özel bir kaplama gradyanı kullanmayı seçtim. Bu, başlangıç ve son gradyanın rengini, gradyan yönünü ve sıradan görüntüler ve yüzen görüntüler için başlangıç ve son durma konumunu seçebileceğim bir dizi yeni seçenek açıyor. İşte Madison kaplama stilini kullanarak gradyan ekran. Soldaki görüntü, imleci yönlendirmeden önce kaplamayı görüntüler. Yüzerken, görüntüyü görüntülemek için genişleme silinir. Bu, Hanoi’nin gelişim tarzını kullanır. Resimler Bu örnekte başka bir resimle bir resim değiştirmek istiyorum. Bu, gelişmiş tasarım ayarlarında modülün arka plan görüntüsü olarak görüntüler ekleyerek yapılır. Ardından, opaklık seviyesini, bir görüntünün yüzmeden görüntülenmesi ve yüzerken diğer görüntüler görüntülenmesi için ayarlayın. Hover’da görüntülenenlerden biri de mesajları görüntüler. Bu resmi arka plan görüntüsü olarak seçtim ve modül görüntüsünü opaklık 0 olarak ayarladım. Yüzerken, sinek kuşları kartallara dönüşür ve mesajlar görüntüler. Bu, Kiev’in yüzen stilini kullanır. Görüntüleri birleştirin Arka plan görüntüsünün ön arka plan görüntüsünden görüntülenmesi için opaklığı ayarlayarak her iki görüntüyü de birleştirebilirsiniz. Bu bazı ilginç efektler ve mesajlar oluşturabilir. Bu, Londra’nın yüzen tarzını kullanıyor. Yerleşiminden yararlanmak için bir mesaj ayarladım. Bu örnekte başlık yazı tipinin boyutu 24 olarak ayarlanmıştır ve metin yazı tipinin boyutu 50 olarak ayarlanır. Hakkında aşağıdaki resim. Opaklık da her ikisini de sergileyecek şekilde değiştirilebilir, ancak bunlardan biri daha belirgin olabilir. Metine Bağlantı Ekle Açıklama metnine bağlantılar eklenebilir. Bu, metin ve ardından URL ile sahte bir kısa kod yerleştirilerek yapılır. Kopyalayıp yapıştırabilmeniz için alan açıklamasında kısa kodlar verilir. Bu, HREF, Hedef ve Sınıfı kullanacaktır. Bu, okuyucuyu sayfaya getirebilecek veya daha fazla bilgi için yayınlayabilecek bir bağlantı ile bilgi ekliyor. Bu, okuyucuyu içeriğinize yönlendirmek için CTA yapmak, yayınlara veya sayfalara bağlanmak için iyidir. Resmin kendisi de tıklanabilir. Bu, bunları portföye veya sayfaya yönlendirebilir veya iletişim kurabilir. Top Harekete davet etmek için resme bir düğme ekleyebilirsiniz. Soldaki görüntü, metin için işaretleme içeren bir radyal gradyan kullanır. Sağdaki görüntü, Hover efektine sahip düğmeyi görüntüler. Her iki görüntü de siyah sınırlar kullanır. Düğmenin arka planına bindirme ekledim ve limit yarıçapını 15’e ayarladım. Bu örnek Hover Rochester stilini kullanıyor. Soldaki resim iki siyah renk arasında dikey bir gradyan kullanıyor: birincisi% 65 opaklık ve ikincisi% 19 opaklık ile (% 19! Biliyorum … rica ederim!). Kaplama, düğmeler ve gradyanlar CTA yapmak için çok iyidir. Fiyatlar, lisanslar ve belgeler
